<template>
  <div>
    <a-select
      v-model="valueModel"
      allowClear
      style="width: 100%"
      :label-in-value="labelInValue"
      :placeholder="placeholder"
      :disabled="!isEdit(prop) || disabled"
      :mode="selectMode"
    >
      <a-select-option
        v-for="selectItem in list"
        :key="selectItem[selectKey] || selectItem.value || selectItem.key || selectItem.id"
        :value="selectItem[selectKey] || selectItem.value || selectItem.key || selectItem.id"
      >
        {{ selectItem[selectTitle] || selectItem.label || selectItem.title }}
      </a-select-option>
    </a-select>
  </div>
</template>

<script>
import { isEdit } from '@/components/hrhx/approval/utils/set-form-control'
export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: [String, Number, Boolean, Array, Date, Object],
      default: undefined
    },
    prop: {
      // 用来判断在审批的时候是否可编辑
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => []
    },
    selectMode: {
      type: String,
      default: 'default' // 'default' | 'multiple' | 'tags' | 'combobox'
    },
    selectKey: {
      type: String,
      default: ''
    },
    selectTitle: {
      type: String,
      default: ''
    },
    labelInValue: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    valueModel: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('change', value)
      }
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // 函数方法 - 点击等操作执行的方法
  methods: {
    isEdit
  }
}
</script>
<style lang="scss" scoped>
::v-deep .ant-select-disabled {
  color: rgba(0, 0, 0, 0.65);
  .ant-select-selection {
    cursor: text;
    background-color: #fff !important;
  }
}
</style>
