<template>
  <div>
    <a-input v-model="valueModel" readOnly :placeholder="placeholder" @click="openModal" />
    <admin-modal
      :width="modalWidth"
      :visible.sync="visible"
      :title="modalTitle"
      :loading="loading"
      @on-cancel="visible = false"
      @on-confirm="handleConfirm"
    >
      <slot />
    </admin-modal>
  </div>
</template>

<script>
import { isEdit } from '@/components/hrhx/approval/utils/set-form-control'
export default {
  model: {
    prop: 'value',
    event: 'modelChange'
  },
  props: {
    value: {
      type: [String, Number, Boolean, Array, Date, Object],
      default: undefined
    },
    prop: {
      // 用来判断在审批的时候是否可编辑
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    modalWidth: {
      type: String,
      default: '50%'
    },
    modalTitle: {
      type: String,
      default: '选择'
    }
  },
  data() {
    return {
      visible: false,
      loading: false
    }
  },
  computed: {
    valueModel: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('modelChange', value)
      }
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // 函数方法 - 点击等操作执行的方法
  methods: {
    isEdit,
    openModal() {
      if (!this.isEdit(this.prop) || this.disabled) return
      this.visible = true
    },
    handleConfirm() {
      this.$emit('confirm')
      this.$emit('change') // 为了消除验证
      this.visible = false
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
