<!-- 选择模板 -->

<template>
  <div>
    <el-input v-model="selected.name" :placeholder="$t('form.placeholderSelect')" :disabled="disabled" @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: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    needPre: {
      type: Number,
      default: 0
    },
  },
  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.disabled){
        this.$refs.selectTemplateDialog.show({needPre:this.needPre})
      }
    },
    handleChange(obj) {
      this.selected.name=obj.name
      this.selected.id=obj.id
      this.$emit('change', obj)
      this.$emit('input', obj.id)
    },
  }
};
</script>