<!-- 选择部门 -->

<template>
  <div>
    <el-input v-model="selected.name" :placeholder="$t('form.placeholderSelect')" readonly @click.native="showSelectDeptUser" />
    <SelectDeptUserDialog ref="selectDeptUserDialog" @change="handleChange" />
  </div>
</template>

<script>
import SelectDeptUserDialog from './SelectDeptUserDialog.vue'
export default {
  name: "SelectDeptUser",
  components: {SelectDeptUserDialog},
  props: {
    value: {
      type: [Number, String , Array],
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    readOnly: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    value: {
      immediate: true,
      handler(v) {
        this.selected.id = v ?((v+'').indexOf('u_')>-1? v:('u_'+v)):''
      }
    },
    name: {
      immediate: true,
      handler(v) {
        this.selected.name=v || ''
      }
    },
  },
  data() {
    return {
      selected:{
        id:'',
        name:''
      },
    };
  },
  mounted() {
  },
  methods: {
    showSelectDeptUser(){
      if(!this.readOnly){
        this.$refs.selectDeptUserDialog.show(this.selected.id,this.selected.name)
      }
    },
    handleChange(obj) {
      this.$emit('change', obj)
      this.$emit('input', obj.id)
    },
  }
};
</script>