<template>
   <div class="select-template fl" title="选择模板">
      <div class="div-select" @click='selectFalg=!selectFalg'>
        <div class="div-select-item mr-30">
          <input type="text" class="input_1" placeholder="选择模板" title="选择模板"  v-model="txtName" @change="changeSelectValue" 
          value="{{txtNameValue}}">
        </div>
        <ul v-if='selectFalg'>
          <li class="div-select-item" v-if="empty" value=""><span>{{emptytext}}</span></li>
          <li class="div-select-item" v-for="item in list">
            <span  @click="selectChange(item.value)">{{ item.label || item }}</span> 
            &nbsp;&nbsp;&nbsp;
            <span v-on:click="del(item)" class="del"></span>
          </li>
          <!-- <li class="div-select-item"><span>管理负责人</span></li> -->
        </ul>
      </div>
    </div>

<!--   <div class="epi-form" style="width:300px; display:inline-block;">
    <div class="group-row" style="height:40px;">
      <div class="form-group"> -->
        <!--   <div class="div-select-item"></div>
      -->
<!--       <div class="control select-style" style="position:relative; width: 200px;right: 45px;">
        <input type="text" 
          v-model="txtName" 
          class="input_1" 
          style="border-right: 0;position: absolute; top: 0px; width:150px; z-index:4" 
          @change="changeSelectValue" 
          value="{{txtNameValue}}">
        
        <select v-model="selected" 
          @click="selectChange(selected||json)" 
          style="position: absolute;" 
          @change="getDTemplate(selected)">
            <option v-if="empty" value="">{{emptytext}}</option>
            <option v-for="item in list" :value="(item.value || item)">{{ item.label || item }}</option>
        </select>
      </div>
    </div>
  </div>
</div> -->

<!-- </select>
</span>
</div> -->

</template>
<script>
  module.exports = {
    props: {
      list: {
        type: Array,
        require: true
      },
      selected: {
        twoWay: true
      },
      selectedId: {
        twoWay: true
      },

      empty: {
        type: Boolean,
        default: true
      },
      emptytext: {
        type: String,
        default: '--请选择--'
      },

      changedobject:{
        type: Object,
        twoWay: true
      }
    },
    data: function (){
      return{
        txtNameValue:'',
        txtName:'',
        selectFalg:false
      };
    },
    computed: {
      txtNameValue: function () {
        var self = this;
        if (self.selected!=null && self.selected!=undefined){
          self.selectChange(self.selected);
        }
        return '';
      }
    },
    methods: {
      del:function(item){
        
        this.selected=item.value;

        this.$dispatch('delete')
      },
      selectChange: function(value){
        var self = this;
        self.getDTemplate(self.selected);
        for (var i=0;i<this.list.length;i++) {
          if (value == this.list[i].value) {
            self.$set('txtName',this.list[i].label);
            self.$set('selected',this.list[i].value);
          }
        }       
      },
      changeSelectValue: function(){
        var self = this;
        var flag = false;
        for (var i=0;i<this.list.length;i++) {
          if (self.txtName == this.list[i].label) {
            flag = true;
            //self.$set('txtValue',this.list[i].value);
          }
        }
        if (!flag) {
          //self.$set('txtValue','');
          self.$set('selected',self.txtName);
        }
      },
      getDTemplate: function(id){
        var self =this;
        //self.$set("changedobject.selectedHeadArray",[]);
        //self.$set("changedobject.selectedArray",[]);
        //self.$set('changedobject.resourceList', []);

        Ajax.get('/user/getDTemplate/'+id)
          .then(function (response){
            var data = response.data.data;
            if (data!=null && data!=undefined) {
              self.$set('changedobject.resourceList', data.resourceList);
              self.$set("changedobject.selectedHeadArray",data.selectedHeadArray);
              self.$set("changedobject.selectedArray",data.selectedArray);
            }
            
        });   
      },
    }
  };
</script>