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

<script>
import OrderList from '@/views/tm/components/OrderList';
export default {
  name: 'OrderInput',
  components: {
    OrderList,
  },
  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,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    width: null,
    orderType: {
      type: String,
      default: ''
    },
    // 0未完成，1完成
    status: {
      type: String,
      default: ''
    },
    // 展示客户类型
    showCustType: {
      type: Boolean,
      default: false
    },
    // 展示是否结算
    showAmortize: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: '',
    }
  },
  data() {
    return {
      showList: false,
      inputVal: '',
    }
  },
  watch: {
    value: {
      handler(val) {
        this.inputVal = val;
      },
      immediate: true,
    }
  },
  methods: {
    clear() {
      this.$emit('change', '');
      this.$refs.list.clearSelection();
    },
    handleOrderChange(orders) {
      this.showList = false;
      this.$emit('change', orders);
    },
  }
}
</script>

<style scoped>

</style>