<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-12-21 14:43:50
 * @LastEditors: 无尘
 * @LastEditTime: 2020-12-21 16:34:01
-->
<!--
<select-card v-model="coupCardId" :cardName="cardName" @selectCard="selectCard"></select-card>

import selectCard from '@/components/active-config/configs/select-card.vue';
-->
<template>
  <el-popover placement="bottom" width="300" trigger="click" v-model="brandVisible">
    <div class="company-select">
      <div class="el-scrollbar define-search-select">
        <div class="el-select-dropdown__wrap el-scrollbar__wrap" style="overflow: auto;">
          <ul class="el-scrollbar__view el-select-dropdown__list">
            <li :class="['el-select-dropdown__item ', value == item.coupCardId ? 'selected' : '']" v-for="item in cardList" :key="item.coupCardId" @click="changeSelect(item)">
              <span>{{item.cardName || '--'}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="select-search-input cursor-pointer" slot="reference" style="display: inline-block; vertical-align: middle;">
      <div class="el-select" :style="{'width': width}">
        <div class="el-input el-input--suffix" style="height: 32px;">
          <div class="el-input__inner">
            <div :class="['text-ellipsis font-14 max-w-260', cardName ? 'color-606266': 'color-909399']">{{ cardName || '请选择' }}</div>
          </div>
        </div>
      </div>
    </div>
  </el-popover>
</template>

<script>
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';
export default {
  name: 'select-card',
  props: {
    value: {
      type: String,
      default: ''
    },
    cardName: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '146px'
    }
  },
  data() {
    return {
      cardList: [],
      brandVisible: false
    };
  },
  methods: {
    /**
     * 选择卡券
     */
    changeSelect(item) {
      const that = this;
      that.$emit('input', item.coupCardId);
      that.$emit('update:cardName', item.cardName);
      that.$emit('selectCard', item);
      that.brandVisible = false;
    },
    /**
     * 获取卡券列表
     */
    getCardList() {
      const that = this;
      let para = {};
      getRequest('/sharing-core-web/list-card', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.cardList = resData.result || [];
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 2500,
            message: error.message
          });
        });
    },
  },
  mounted() {
    const that = this;
    that.getCardList();
  }
};
</script>

<style type="text/less" lang="less" scoped>
  .text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .max-w-260 {
    max-width: 260px;
  }
</style>

