<template><page-meta
  :page-font-size="$baseFontSize() + 'px'"
  :root-font-size="$baseFontSize() + 'px'"
></page-meta>
  <view style="width: 100%; height: 100%">
    <scroll-view  @scrolltolower="lower" scroll-y="true" class="scroll-Y" v-if="dataList.length > 0">
      <view
        @click="gotoDetail(item)"
        class="scroll-view-item list_item"
        v-for="(item, index) in dataList"
        :key="item.id"
        :index="index"
      >
        <view
          :class="['titleItem', '']"
          :style="`width:${isNoIcon ? '100%' : 'calc(100% - 30rpx)'}`"
        >
          <slot name="leftSlot" :row="item" :item="item" :index="index"> </slot>

          <template v-if="isCondition">
            <slot name="labelSlot" :row="item"></slot>
          </template>
          <template v-else>
            {{ item[label] }}
          </template>

          <slot name="rightSlot" :row="item"></slot>
        </view>
        <image
          v-if="!isNoIcon"
          src="@/static/icon/icon_right.png"
          class="rightArrow"
          style=""
        ></image>
      </view>
    </scroll-view>
    
    <u-divider v-else text="暂无数据哦~"></u-divider>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: ["dataList", "label", "isCondition", "isNoIcon","pagination"],
  data() {
    return {};
  },
  onLoad() {},
  onHide() {
    // this.showSearchList = false
    // this.searchList = []
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    lower(){
      this.$emit('lower')
    },
    gotoDetail(data) {
      console.log("index at line 53:", data);

      this.$emit("hancleClick", data);
    },
  },
  onBackPress() {
    // #ifdef APP-PLUS
    plus.key.hideSoftKeybord();
    // #endif
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.list_item {
  width: auto !important;
    float: left !important;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center !important;
  justify-content: space-between;
}
.list_item :last-child(1) {
  border-bottom: none;
}
.scroll-view-item:nth-child(2n-1) {
  background-color: #f5f5f5 !important;
}

.rightArrow {
  width: 30rpx;
  height: 30rpx;
  //   position: absolute;
  //   right: 30rpx;
  //   top: 20rpx;
}

.scroll-Y {
  height: 100%;
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}

.scroll-view-item {
  // height: 300rpx;
  // line-height: 300rpx;
  // text-align: center;
  // font-size: 36rpx;
}

.scroll-view-item_H {
  display: inline-block;
  width: 100%;
  // height: 300rpx;
  // line-height: 300rpx;
  // text-align: center;
  // font-size: 36rpx;
}
.titleItem {
  width: calc(100% - 30rpx);
}
/deep/.scroll-view-item:nth-child(2n-1) {
  background-color: transparent !important;
}
.list_item:last-child{
  border-bottom: none !important;
}
</style>
