<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" showNewOption :key="idx" :label="`${item.cardName}（${item.coupCardId.slice(-6)}）`" :value="item.coupCardId">
      <div>{{ `${item.cardName}（${item.coupCardId.slice(-6)}）` }}</div>
      <div style="color: #909399; font-size: 12px">{{ item.subName || '--' }}</div>
    </el-option>
  </el-select>
</template>

<script>
import { getCardListByName, getCardDetail } from '@/service/api/cardApi.js';
export default {
  name: 'card-select-filterable',
  props: {
    disabled: Boolean,
    cId: String,
    extraParams: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      tableList: [],
      listParams: {
        search: '',
        currentPage: 1,
        pageSize: 10
      },
      cardId: '',
      total: 0,
      nomore: false // 没有更多
    };
  },
  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();
          }
        });
      }
    }
  },
  watch: {
    cId(val) {
      if (!val) {
        this.cardId = val;
        this.remoteMethod('');
      }
    }
  },
  methods: {
    // 清空数据
    clean() {
      this.listParams.search = '';
      this.listParams.currentPage = 1;
      this.tableList = [];
      this.nomore = false;
      this.updateCId('');
    },
    // 获取详情
    getCardDetail(coupCardId) {
      this.loading = true;
      getCardDetail({ coupCardId })
        .then(res => {
          this.loading = false;
          this.cardId = coupCardId;
          this.updateCId(coupCardId);
          this.remoteMethod(res.result.card.cardName);
        })
        .catch(() => {
          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();
    },
    getCardList() {
      if (this.nomore) {
        return;
      }
      if (this.loading) {
        return;
      }
      this.loading = true;
      this.nomore = false;
      const params = { ...this.listParams, ...this.extraParams };
      getCardListByName(params)
        .then(res => {
          this.loading = false;
          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; // 没有下一页了
        })
        .catch(() => {
          this.loading = false;
        });
    }
  }
};
</script>

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