<template>
  <el-select popper-class="c-filterable" :disabled="disabled" v-loadmore="getMore" remote filterable clearable :remote-method="remoteMethod" @change="updateCId" size="small" v-model="cardId" placeholder="请输入卡券名称选择卡券">
    <el-option v-for="(item, idx) in tableList" :key="idx" :label="`${item.cardName}（${item.couponId.slice(-6)}）`" :value="item.couponId">
      <div>{{ `${item.cardName}（${item.couponId.slice(-6)}）` }}</div>
      <div style="color: #909399; font-size: 12px;margin-top:-5px;">{{ item.remarkName || '--' }}</div>
    </el-option>
  </el-select>
</template>

<script>
import wxCardApi from '@/api/gic-card.js';
const { cardInfo: gicCardInfo } = wxCardApi;
export default {
  name: 'CardSelectFilterable',
  directives: {
    loadmore: {
      inserted(el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTDOWN_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
        SELECTDOWN_DOM.addEventListener('scroll', function() {
          const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (CONDITION) {
            binding.value();
          }
        });
      }
    }
  },
  props: {
    disabled: Boolean,
    cId: String,
    memberCardId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      tableList: [],
      listParams: {
        search: '',
        currentPage: 1,
        pageSize: 10
      },
      cardId: '',
      total: 0,
      nomore: false // 没有更多
    };
  },
  methods: {
    // 获取详情
    async getCardDetail(couponId) {
      this.loading = true;
      let res = await gicCardInfo({ couponId });
      this.cardId = couponId;
      this.updateCId(couponId);
      const key = this.wxFlag ? 'coupon' : 'gicCoupon';
      // this.remoteMethod(res.result.card.cardName);
      const { cardName, remarkName } = res.result[key];
      this.tableList = [ { cardName, couponId, remarkName } ];
      this.loading = false;

    },
    updateCId(val) {
      this.$emit('update:cId', val);
      this.$emit('cIdUpdate'); // 触发父组件更新
    },
    // 模糊搜索
    remoteMethod(search) {
      this.listParams.search = search;
      this.listParams.currentPage = 1;
      this.tableList = [];
      this.nomore = false;
      this.getCardList();
    },
    // 下一页
    getMore() {
      if (this.nomore) {
        return;
      }
      this.listParams.currentPage = this.listParams.currentPage * 1 + 1;
      this.getCardList();
    },
    async getCardList() {
      return;
      // if (this.nomore) {
      //   return;
      // }
      // if (this.loading) {
      //   return;
      // }
      // this.loading = true;
      // this.nomore = false;
      // let res = gicCardListByName({ ...this.listParams, memberCardId: this.memberCardId });
      // const tableList = res.result.result ? this.tableList.concat(res.result.result) : [];
      // const total = res.result.totalCount;
      // this.tableList = tableList;
      // this.total = total;
      // this.nomore = total <= tableList.length || total - tableList.length < this.listParams.pagesize; // 没有下一页了
      // this.loading = false;
    }
  },
  watch: {
    cId(val) {
      if (!val) {
        this.cardId = val;
        this.remoteMethod('');
      }
    }
  }
};
</script>


<style lang="scss">
.c-filterable /deep/ {
  .el-select-dropdown__item {
    height: 54px !important;
    line-height: 28px !important;
  }
}
</style>
