<template>
  <el-popover
    v-model="showList"
    placement="top-start"
    width="400"
    :disabled="readonly"
    trigger="click"
  >
    <CarriageCargoList ref="list" :first-load-able="showList" :orderId="orderId" :multiple="multiple" :height="380" :page-size="6" @change="handleCustChange" />
    <el-input v-if="type === 'input'" slot="reference" v-model="inputVal" :style="{width: width}" :placeholder="placeholder" :readonly="readonly" :clearable="clearable" @input="inputChange" @clear="inputChange('')" />
    <MySelectButton v-else slot="reference" :style="{width: width}" :value="label" :placeholder="placeholder" :readonly="readonly" @change="clear" />
  </el-popover>
</template>

<script>
import CarriageCargoList from '@/views/tm/components/CarriageCargoList'
export default {
  name: 'CarriageCargoInput',
  components: {
    CarriageCargoList
  },
  props: {
    type: {
      type: String,
      default: 'input'
    },
    // 值
    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,
    orderId: {
      type: [String, Number],
      default: null
    },
  },
  data() {
    return {
      showList: false,
      inputVal: ''
    }
  },
  watch: {
    label: {
      handler(val) {
        this.inputVal = val
      },
      immediate: true
    }
  },
  methods: {
    inputChange(val) {
      this.$emit('change', [{
        id: '',
        cargoInfo: val
      }])
      if (!val) {
        this.$refs.list.clearSelection();
      }
    },
    clear() {
      this.$emit('change', '')
      this.$refs.list.clearSelection();
    },
    handleCustChange(custs) {
      this.showList = false
      this.$emit('change', custs)
    },
  }
}
</script>

<style scoped>

</style>
