<template>
    <el-select v-model="dataVal"
        :placeholder="placeholder"
        @change="selectChange"
        :size="size"
        clearable
        filterable
        :collapse-tags="iscollapse"
        :multiple="ismult"
        :disabled="disabled"
        :popper-append-to-body="true"
        >
        <el-option
          v-for="(item, index) in dataList"
          :key="index"
          :label="item[objkey]"
          :value="item[objvalue]"
          >
        </el-option>
    </el-select>
</template>

<script>
import commonSelectList from '@/common/commonSelectList.js'
export default {
  name: 'ls-select',
  mounted(){
    this.initData();
  },
  methods: {
    initData(){
      if( !this.params || this.params.length < 10 ) return;
      let obj = JSON.parse(this.params);
      let param = {};
      if(obj && obj.param){
        param = Object.assign(obj.param, this.parentobj);
      }

      if(obj.reqmethod == 'post'){
        this.$ajax.post({
          domain: obj.domain ? obj.domain : '',
          url: obj.url,
          data: param,
          requestType: obj.requestType ? obj.requestType : 'body',
          showLoad: false,
          success: function (res) {
            if (res.errorCode === 200) {
              this.dataList = res.data || [];
            }
          }.bind(this),
          error: function (res) {
            console.log(res.body.msg || res.msg);
          }.bind(this)
        })
      } else {
        this.$ajax.get({
          domain: obj.domain ? obj.domain : '',
          url: obj.url,
          data: param,
          requestType: obj.requestType ? obj.requestType : 'form',
          showLoad: false,
          success: function (res) {
            if (res.errorCode === 200) {
              this.dataList = res.data || [];
            }
          }.bind(this),
          error: function (res) {
            console.log(res.body.msg || res.msg);
          }.bind(this)
        })
      }
    },

    // 下拉框改变事件
    selectChange(val){
      let item = {};
      if(this.ismult){ //多选
        let arr = [];
        this.dataVal.forEach(item=>{
          for(let i=0; i< this.dataList.length; i++){
            if(item == this.dataList[i][this.objvalue]){
              arr.push(this.dataList[i]);
              // arr.push(this.dataList[i][this.objvalue]);
              break;
            }
          }
        })
        this.$emit( 'selectChange', arr, this.index, this.dataVal);
      }else{
        for(let i=0; i<this.dataList.length; i++){
          if(this.dataList[i][this.objvalue] == val){
            item = this.dataList[i];
            break;
          }
        }
        this.$emit( 'selectChange', item, this.index);
      }

    }
  },
  props: {
      value: {
          // type: String
      }, //接受外部v-model传入的值
      selectlist: {//下拉框数据源
        type: Array,
        default: () => []
      },
      index: { //使用数组动态生成组件时，当前组件所处索引位置
        type: Number,
        default: null,
        required: false,
      },
      params: { //依赖查询参数
        // type: String,
        default: '',
        required: false,
      },
      objkey: { //下拉框展示标签--对应字段
        type: String,
        default: 'label',
        required: false,
      },
      objvalue: { //下拉框存储值--对应字段
        type: String,
        default: 'value',
        required: false,
      },
      parentobj: {//依赖查询参数
        type: Object,
        default: () => {}
      },
      size: {
        type: String,
        default: 'mini'
      },
      placeholder:{
        type: String,
        default: '请选择'
      },
      ismult: {
        type: Boolean,
        default: false
      },
      iscollapse: {//多选时是否将选中值按文字的形式展示
        type: Boolean,
        default: false
      },
      disabled:{
        type: Boolean,
        default: false
      }
  },
  watch:{
      value(newVal, oldVal){
        this.dataVal = newVal;
      },
      dataVal(newVal, oldVal){
        if(newVal!= oldVal) {
          this.$emit("input", newVal);//向外部发送事件通知
        }
      },
      selectlist(newVal){
        if(newVal.length){
           this.dataList = newVal;
        }
      },
      parentobj(newVal) {
        if(JSON.stringify(newVal) == "{}") return;
        this.initData();
      },

  },
  data() {
    return {
      dataList: this.selectlist,
      dataVal: this.value, //使用 value prop 属性的值，作为初始值
    }
  },

}
</script>
