<!-- 选择部门 -->

<template>
  <div>
    <el-input v-model="selected.name" :placeholder="$t('form.placeholderSelect')" readonly @click.native="showSelectTemplate" />
    <SelectTemplateDialog ref="selectTemplateDialog" @callback="handleChange" />
  </div>
</template>

<script>
import SelectTemplateDialog from './SelectTemplateDialog.vue'
export default {
  name: "SelectTemplate",
  components: {SelectTemplateDialog},
  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: {
    showSelectTemplate(){
      if(!this.readOnly){
        this.$refs.selectTemplateDialog.show()
      }
    },
    handleChange(obj) {
      this.selected.name=obj.name
      this.selected.id=obj.id
      this.$emit('change', obj)
      this.$emit('input', obj.id)
    },
  }
};
</script>