<template>
  <el-form-item
    :label="label"
    :rules="requireRule(required, label)"
    :prop="prop"
    :label-width="labelWidth"
  >

  <template #label>
        <el-tooltip :content="label" placement="top" :disabled="isShowTooltip">
            <span  @mouseenter="visibleTooltip">{{label}}</span>
        </el-tooltip>
    </template>
  <!-- <div v-if="!disabled"> -->
    <el-tooltip v-if="showTip && !isBlank(formRef.model[prop])" placement="top">
      <div slot="content" >{{ initName }}</div>
      <span>
         <el-select
           v-model="formRef.model[prop]"
           :multiple="multiple"
           :multiple-limit="multipleLimit"
           :collapse-tags="collapseTags"
           :clearable="clearable"
           filterable
           :disabled="disabled"
           @focus="focus"
           @change="handleChange"
           :remote="remote"
           :remote-method="remoteMethod"
           :popper-append-to-body="popperAppendToBody"
           :placeholder="!disabled && (placeholder || $t('common.pleaseSelectHasPara',[label]))"
           :style="styleObj"
         >
      <el-option
        v-for="item in data"
        :key="item[`${valueProp}`]"
        :value="item[`${valueProp}`]"
        :label="item[`${labelProp}`]"
      />
      </el-select>
      </span>
    </el-tooltip>
    <el-select
      v-if="!showTip || isBlank(formRef.model[prop])"
      v-model="formRef.model[prop]"
      :multiple="multiple"
      :multiple-limit="multipleLimit"
      :collapse-tags="collapseTags"
      :clearable="clearable"
      filterable
      :remote="remote"
      :remote-method="remoteMethod"
      :disabled="disabled"
      @focus="focus"
      @change="handleChange"
      :popper-append-to-body="popperAppendToBody"
      :allow-create="allowCreate"
      :placeholder="placeholder || $t('common.pleaseSelectHasPara',[label])"
      :style="styleObj"
    >
      <el-option
        v-for="item in filterData(data)"
        :key="item[`${valueProp}`]"
        :value="item[`${valueProp}`]"
        :label="item[`${labelProp}`]"
        :disabled="disabledFunc(item)"
      />
    </el-select>
  <!-- </div> -->
  <!-- <span v-else class="content">{{getSelectValue}}</span> -->
  </el-form-item>
</template>

<script>
import mixin from "./mixin";
import {isBlank} from "../../../../utils";
/**
 * 下拉框组件
 */
export default {
  mixins: [mixin],
  props: {
    multiple: {
      type: Boolean,
      default: false,
    },
    multipleLimit: {
      type: Number,
      default: 10,
    },
    data: {
      type: Array,
      default: () => [],
    },
    labelWidth: {
      type: String
    },
    allowCreate:{
      type:Boolean,
      default:false
    },
    valueProp: {
      type: String,
      default: "value",
    },
    labelProp: {
      type: String,
      default: "label",
    },
    popperAppendToBody:{
      type: Boolean,
      default: true
    },
    showTip:{
      type: Boolean,
      default: false
    },
    setFirst:{
      type: Boolean,
      default: false
    },
    span: {
      type: Number,
      default: 8
    },
    filterData: {
      type: Function,
      default: data => data
    },
    disabledFunc: {
      type: Function,
      default: item => false
    },
    styleObj: {
      type: Object,
      default: () => ({
        width: "100%",
      })
    },
    remoteMethod: {
      type: Function,
      default: data => data
    },
    remote:{
      type: Boolean,
      default: false
    },
    collapseTags: {
      type: Boolean,
      default: true
    },


  },
  data() {
    return {
      isShowTooltip: false,
    };
  },
  methods:{
    isBlank,
    focus(){
      this.$emit('focus')
    },
    visibleTooltip(e){
      this.isShowTooltip = e.target.offsetWidth + 18 - e.fromElement.clientWidth > 0 ? false : true;  //18为required *号引起的偏差。
    },
    handleChange(val){
      let res = {};
      this.data.some(item=>{
        if (item[this.valueProp] ==val){
          res = item;
        }
      })
      this.$nextTick(()=>{
        this.$emit('change',res)
      })
    }
  },
  mounted() {
    //设置默认值为第一项
    if(this.setFirst){
      if(this.formRef.model[this.prop] != '' && this.formRef.model[this.prop] != null && this.formRef.model[this.prop] != undefined ){
        return;
      }else{
        if(this.data != null && this.data.length > 0){
          this.formRef.model[this.prop] = this.data[0][this.valueProp]
        }
      }
    }
  },
  computed:{
    getSelectValue(){
      for(let i = 0;i<this.data.length;i++){

        let item = this.data[i]
        console.log(item)
        console.log(this.formRef.model[this.prop])
        if(this.formRef.model[this.prop] == item[[`${this.valueProp}`]]){
          return item[[`${this.labelProp}`]]
        }
      }
    },
    initName() {
      let arr = this.formRef.model[this.prop]
      if (arr == null || arr == undefined) {
        return ""
      }
      let arr1 = []
      if (this.multiple) {
        this.data.forEach(item =>{
          let name = arr.includes(item[this.valueProp]) ?  item[this.labelProp] : ""
          if (!isBlank(name)) {
            arr1.push(name)
          }
        })
      } else {
        this.data.forEach(item =>{
          let data = item[this.valueProp];
          if (!isBlank(data)&&arr==data) {
            arr1.push(item[this.labelProp])
          }
        })
      }
      console.log(arr1)
      return arr1.join(",")
    },
  }
};
</script>
<style scoped>
.content{
  padding: 5px 10px;
    border-bottom: 1px solid;
    width: 100%;
    display: block;
    min-height: 46px;
}
/deep/ .el-form-item__label{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	/*display:inline;*/
}
</style>
