<template>
  <el-popover
    v-model="showList"
    placement="top-start"
    width="400"
    :disabled="readonly"
    trigger="click">
      <CustList ref="list" :firstLoadAble="showList" :custType="custType" :multiple="multiple" :height="380" :pageSize="6" @change="handleCustChange"></CustList>
      <MySelectButton :style="{width: width}" slot="reference" :value="label" :placeholder="placeholder" :size="size" :readonly="readonly" @change="clear"></MySelectButton>
  </el-popover>
</template>

<script>
import CustList from '@/views/tm/components/CustList';
export default {
  name: 'CustInput',
  components: {
    CustList,
  },
  props: {
    // 值
    value: {
      type: String | Number,
      default: null,
    },
    // 显示的名称
    label: {
      type: String,
      default: null,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: '请选择客户',
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    width: null,
    size: {
      type: String,
      default: '',
    },
    custType: {
      type: String,
      default: '',
    },

  },
  data() {
    return {
      showList: false,
    }
  },
  methods: {
    clear() {
      this.$emit('change', '');
      this.$refs.list.clearSelection();
    },
    handleCustChange(custs) {
      this.showList = false;
      this.$emit('change', custs);
    },
  }
}
</script>

<style scoped>

</style>