<!-- @desc:下拉组件  @auth:周兴  @time:2022/11/15 12:58 -->
<template>
  <div class="close-div-class" ref="closeDiv" v-if="existsFlag">
    <div :class="divClass && showClearFlag?'':'select-div-no-clear'" class="select-div" @keydown="handleKeyDown"
         @mousedown="handleMouseDown">
      <Input ref="input" class="select-input" @on-focus="handleInputFocus" @on-blur="handleInputBlur"></Input>
      <xmSelect ref="select" :multiple="multiple" v-model="model" @on-change="onChange" :label-key="labelKeyData"
                :value-key="valueKeyData"
                :show-clear="showClearFlag" @dblclick.native="copyValue" :showToolbar="showToolbarData"
                :show-item-clear="disabled?false:showItemClear"
                :showFilter="showFilter"
                :class="computedClasses"
                @close-select="closeSelect"
                @clearAll="clearSelected"
                :all-width="width"
                :all-flag="showAllFlag && multiple && model && optionsData && model.length !== 0
                          && model.length === optionsData.length"
                :treeFlag="treeFlag" :tree-strict="treeStrict" :click-close-flag="clickCloseFlag"
                :placeholder="placeholderData" :disabled="disabled" :options="optionsData"
                @refresh="handleRefresh">
      </xmSelect>
    </div>
    <div v-if="showClearFlag">
      <!--只有在聚焦时才会显示-->
      <div
        v-if="!disabled && model != null && isFocus && (this.multiple && model.length > 0 || !this.multiple && model != null && model != '')"
        style="cursor: pointer">
        <Icon slot="prefix" type="iconfont iconfont icon-clear" @click.stop="clearAll"/>
      </div>
      <div v-else style="width: 16px;height: 16px">
      </div>
    </div>
    <!--显示余白-->
    <div v-if="!showClearFlag && showClearBlank" style="width: 17px;height: 16px">
    </div>
  </div>
</template>
<script>


import xmSelect from '@/components/sub/xm-select/index.vue'
import setting from './setting'

export default {
  name: 'SelectPop',
  inject: {
    prop: {
      type: String,
      default: null
    },
    dkFormItem: {
      type: Object,
      default: null
    }
  },
  components: {xmSelect},
  props: {
    // 组件的值
    value: {
      type: [String, Number, Array],
      default: null
    },
    //组件选项
    options: {
      type: Array,
      default: () => []
    },
    //是否多选
    multiple: {
      type: Boolean,
      default: true
    },
    transfer: {
      type: Boolean
    },
    //清空按钮
    clearable: {
      type: Boolean,
      default: true
    },
    // 是否显示新增按钮
    addFlag: {
      type: Boolean,
      default: false
    },
    //禁用标识
    disabled: {
      type: Boolean,
      default: false
    },
    //显示列的列名
    labelKey: {
      type: String,
      default: 'label'
    },
    //value列的列名
    valueKey: {
      type: String,
      default: 'value'
    },
    //多选的最大显示数
    maxTagCount: {
      type: Number,
    },
    // 提示信息
    placeholder: {
      type: String,
      default: null
    },
    //是否显示清除按钮
    showClearFlag: {
      type: Boolean,
      default: true
    },
    // 是否显示清除余白
    showClearBlank: {
      type: Boolean,
      default: true
    },
    // 每项上是否显示清空图标
    showItemClear: {
      type: Boolean,
      default: true
    },
    // 是否显示工具栏（全选和清空）
    showToolbar: {
      type: Boolean,
      default: false
    },
    // 是否显示过滤框
    showFilter: {
      type: Boolean,
      default: true
    },
    // 标题
    title: {
      type: String,
      default: null,
    },
    // 是否为树形结构
    treeFlag: {
      type: Boolean,
      default: false
    },
    // 是否严格父子级关系（如果是true,只能选择子级节点）
    treeStrict: {
      type: Boolean,
      default: true
    },
    // 选中后关闭（单选才有用）
    clickCloseFlag: {
      type: Boolean,
      default: true
    },
    // 是否默认选中（单选有效）
    chooseFlag: {
      type: Boolean,
      default: true
    },
    // 是否显示全部图标
    showAllFlag: {
      type: Boolean,
      default: true
    },
    // 下拉类型
    popType:{
      type:String,
      default:null
    }
  },
  data() {
    const vm = window.vm
    let self = this
    return {
      vm: vm,
      existsFlag: true,
      model: null,
      model_all: null,
      label: '',
      isFocus: false,
      optionsData: null,
      placeholderData: '',
      maxTagCountData: null,
      initFlag: true,
      divClass: null,
      isInSelectFlag: false,   // 是否在select组件中
      showToolbarData: false,
      width: null,
      optionsData_all: [],
      // 数据源的service
      service: {},
      // 查询方法名字
      methodsName: '',
      // 值名
      valueKeyData:self.valueKey,
      // 字段中文名
      labelKeyData:self.labelKey,
    }
  },
  computed:{
    computedClasses() {
      let classes = [];
      if (this.divClass) {
        classes.push('focus-class');
      }
      return classes;
    }
  },
  watch: {
    value(n, o) {
      setTimeout(() => {
        // 如果初始化加上onchange事件
        if (this.initFlag) {
          this.$emit('on-select', n)
          this.initFlag = false;
        }
        this.model = n
      }, 200)
    },
    disabled(n, o) {
      // 如果禁用，提示信息去掉
      if (n) {
        this.placeholderData = null;
      }
    },
    model(n, o) {
      if (n) {
        // 清除提示信息
        this.clearErrMessage();
      }
    },
    options(n, o) {
      this.optionsData = n;
      // 那么多选超过2个就要开
      if (this.multiple && n && n.length > 2) {
        this.showToolbarData = true;
      }
      if (n && n.length > 0) {
        this.selectFirstItem();            // 默认选中第一条
      }
    },
  },
  methods: {
    /**
     * @desc   : 鼠标点击事件
     * @author : 周兴
     * @date   : 2022/12/27 11:20
     */
    handleMouseDown(e) {
      this.divClass = "divClass"
      this.isInSelectFlag = true;
    },
    /**
     * @desc   : 键盘事件
     * @author : 周兴
     * @date   : 2022/12/27 10:08
     */
    handleKeyDown(e) {
      if (e.key === 'ArrowDown' || e.key === 'Enter') {
        // 点击向下箭头就打开xm-select
        this.$refs['select']?.open()
        this.isInSelectFlag = true;
      } else if (e.key === 'Tab') {
        this.divClass = null;
        this.isInSelectFlag = false;
      }
    },
    /**
     * @desc   : 光标进入该组件
     * @author : 周兴
     * @date   : 2022/12/27 11:15
     */
    handleInputFocus(e) {
      this.divClass = "divClass"
    },
    /**
     * @desc   : 光标离开该组件
     * @author : 周兴
     * @date   : 2022/12/27 13:54
     */
    handleInputBlur(e) {
      setTimeout(() => {
        // 说明光标没有在select组件上
        if (!this.isInSelectFlag) {
          this.divClass = null
        }
      }, 300)
    },
    /**
     * @desc   : 下拉隐藏
     * @author : 周兴
     * @date   : 2022/12/27 11:14
     */
    closeSelect(e) {
      this.divClass = null;
      this.isInSelectFlag = false;
    },
    /**
     * @desc   : 焦点进入事件
     * @author : 周兴
     * @date   : 2022/3/22 12:54
     */
    focus() {
      this.$refs['input'].focus();
    },
    /**
     * @desc   : 值改变
     * @author : 周兴
     * @date   : 2022/11/7 13:48
     */
    onChange(val) {
      // console.log("val:",val)
      this.$emit('input', val)
      if (this.multiple) {
        let list = this.optionsData.filter(it => val.indexOf(it[this.valueKeyData]) > -1);
        this.$emit('on-select-label', list)
      } else {
        let list = this.optionsData.filter(it => val === it[this.valueKeyData]);
        if (list && list.length > 0) {
          this.$emit('on-select-label', list[0])
        } else {
          this.$emit('on-select-label', null)
        }
      }

      let _val = val;
      if (!_val && _val !== 0) { /* val为0时会返回null 沈博 2022年6月30日14:54:25 添加一个非0判断 */
        if (this.multiple) {
          _val = []
        } else {
          _val = null
        }
      }
      this.$emit('on-select', _val)
    },
    /**
     * @desc   : 复制单元格
     * @author : 周兴
     * @date   : 2022/6/9 9:31
     */
    copyValue() {
      let text = this.getDisplayText();
      if (text) {
        this.$message.success(vm.$t('copySuccess') + '：' + text);
        //创建一个input框
        const input = document.createElement("input");
        input.setAttribute("style", "z-index:-1000;position: absolute;bottom:0;")

        //将指定的DOM节点添加到body的末尾
        document.body.appendChild(input);
        //设置input框的value值为直播地址
        input.setAttribute("value", text);
        //选取文本域中的内容
        input.select();
        //copy的意思是拷贝当前选中内容到剪贴板
        //document.execCommand（）方法操纵可编辑内容区域的元素
        //返回值为一个Boolean，如果是 false 则表示操作不被支持或未被启用
        if (document.execCommand("copy")) {
          document.execCommand("copy");
        }
      }
    },
    /**
     * @desc   : 单选时获取显示的值
     * @author : 周兴
     * @date   : 2022/6/18 14:56
     */
    getDisplayText() {
      if (!this.model) {
        return ''
      }
      if (!this.multiple) {
        let arr = this.optionsData.filter(it => it[this.valueKeyData] === this.model);
        if (arr && arr.length > 0) {
          return arr[0][this.labelKeyData]
        }
      } else {
        if (this.model && this.model.length > 0) {
          let textList = []
          this.model.forEach(f => {
            let arr = this.optionsData.filter(it => it[this.valueKeyData] === f);
            if (arr && arr.length > 0) {
              textList.push(arr[0][this.labelKeyData])
            }
          })
          return textList.join(',');
        }
      }
    },
    /**
     * @desc   : 清空选择
     * @author : 周兴
     * @date   : 2022/11/7 11:53
     */
    clearAll() {
      if (this.multiple) {
        this.model = []
      } else {
        this.model = null
      }
      if (this.$refs.select) {
        let data = {
          arr: [],
          change: [],
          isAdd: true
        }
        this.$refs.select.onChange(data);
      }
    },
    /**
     * @desc   : 返回整行选择的数据
     * @author : 张潇木
     * @date   : 2022/5/12 17:54
     */
    onSelectLabel(e) {
      this.$emit('on-select-label', e)
    },
    /**
     * @desc   : 传递值出去
     * @author : 周兴
     * @date   : 2022/4/22 13:40
     */
    handleSelect(e) {
      //兼容清空
      let val = e
      if (!val && val !== 0) { /* val为0时会返回null 沈博 2022年6月30日14:54:25 添加一个非0判断 */
        if (this.multiple) {
          val = []
        } else {
          val = null
        }
      }
      this.$emit('input', val)
      this.$emit('on-select', val)
    },
    /**
     * @desc   : 清空选择
     * @author : 周兴
     * @date   : 2023/7/20 10:16
     */
    clearSelected() {
      this.model = []
    },
    /**
     * @desc   : 刷新数据
     * @author : 周兴
     * @date   : 2023/12/27 8:50
     */
    handleRefresh(){
      // 查询数据
      this.getDataTable();
    },
    // /**
    //  * @desc   : change事件
    //  * @author : 张潇木
    //  * @date   : 2022-5-27 9:56
    //  */
    // handleChange(e) {
    //   //兼容清空
    //   let val = e
    //   if (!val && val !== 0) {
    //     if (this.multiple) {
    //       val = []
    //     } else {
    //       val = null
    //     }
    //   }
    //   this.$emit('input', val)
    //   this.$emit('on-change', val)
    // },
    /**
     * @desc   : 赋值（清空时调用）
     * @author : 周兴
     * @date   : 2022/5/25 17:23
     */
    handleInput(e) {
      this.$emit('on-select', e)
    },
    /**
     * @desc   : 选中第一数据
     * @author : 周兴
     * @date   : 2023/3/13 13:06
     */
    selectFirstItem() {
      this.$nextTick(() => {
        if (!this.multiple && this.chooseFlag && this.optionsData && this.optionsData.length === 1
          && this.dkFormItem && this.dkFormItem.required) {
          this.model = this.optionsData[0][this.valueKeyData];
          this.$emit('input', this.model);
          this.$emit('on-select', this.model)
          this.$emit('on-select-label', this.optionsData[0])
        }
      })
    },
    /**
     * @desc   : 改变全部的宽度
     * @author : 周兴
     * @date   : 2023/7/20 11:17
     */
    changeAllSize() {
      this.width = this.$refs.select?.$el.offsetWidth - 32;
    },
    /**
     * @desc   : 修改全部
     * @author : 周兴
     * @date   : 2023/9/11 15:10
     */
    changeAll() {
      setTimeout(()=>{
        let list = this.$refs.select.$refs.select.firstChild.childNodes[2].firstChild.firstChild.childNodes
        if(list && list.length > 0){
          list.forEach((it,index)=>{
            if(index === 0){
              it.firstChild.innerText = '全部'
            }else{
              it.style.display = 'none'
            }
          })
        }
      },500)
    },
    /**
     * @desc   : 获取数据
     * @author : 周兴
     * @date   : 2023/12/25 13:45
     */
    getDataTable() {
      if(!this.popType)return;
      // 设置接口相关信息
      let set = setting.setSetting(this.$service, this.popType);
      this.objectMerge(this, set)
      if(!this.methodsName){
        return;
      }
      let param = {}
      param.currentPage = 1
      param.pageSize = this.$config.maxPageSize
      param.userId = this.$store.state.user.id
      param.ftyId = this.$store.state.user.ftyId
      // 拼接外部传入的其他参数otherCondition
      if (this.otherCondition) {
        param = Object.assign(param, this.otherCondition)
      }
      this.excute(this.service, this.service[this.methodsName], param).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          let arr = []
          if (res.data && res.data.list) {
            arr = [...res.data.list]
          }
          if (arr.length === 0 && res.data && Array.isArray(res.data)) {
            arr = [...res.data]
          }
          this.optionsData = arr;
        }
      })
    }
  },
  beforeDestroy() {
    this.existsFlag = null;
    window.removeEventListener('resize', this.changeAllSize)
  },
  mounted() {
    if (this.dkFormItem) {
      this.dkFormItem.setItems(this);   // 把当前组件赋值给formItem
    }
    // console.log('ddd', this.options, this.valueKey)
    this.selectFirstItem();            // 默认选中第一条
    setTimeout(() => {
      this.changeAllSize();               // 计算全部的宽度
    }, 500)
    window.addEventListener('resize', this.changeAllSize)
    // 获取数据
    this.getDataTable();
  },
  created() {
    this.optionsData = this.options;
    this.model = this.value;
    if (!this.dkFormItem || !this.dkFormItem.label) {
      this.label = this.title ? this.title : vm.$t(this.prop);
    } else {
      this.label = this.dkFormItem.label
    }
    //给提示信息赋值
    if (!this.disabled && !this.placeholder) {
      this.placeholderData = vm.$t('selectWords', {'search-name': this.label})
    } else {
      this.placeholderData = this.placeholder;
    }
    //赋值下拉多选的默认值
    if (!this.maxTagCount) {
      this.maxTagCountData = vm.$config.maxTagCount
    } else {
      this.maxTagCountData = this.maxTagCount;
    }
    // 控制是否显示全选工具栏
    this.showToolbarData = this.showToolbar;
    if (!this.showToolbar) {
      // 如果没有开，那么多选超过2个就要开
      if (this.multiple) {
        this.showToolbarData = true;
      }
    } else {
      // 如果开启，并且是单选，那么就要关
      if (!this.multiple) {
        this.showToolbarData = false;
      }
    }
  }
}
</script>

<style scoped>

/deep/ .xm-label .xm-label-block {
  background-color: #2D8CF0 !important;
}

.select-div {
  border: none !important;
  display: flex;
  height: 28px;
  line-height: 28px;
  width: calc(100% - 16px);
}

.select-div-no-clear {
  border: none !important;
  display: flex;
  height: 28px;
  line-height: 28px;
  width: 100%;
}

.select-div:hover {
  /*border-color: #57a3f3;*/
  outline: 0;

}

.ivu-input:focus {
  /*border-color: #57a3f3;*/
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.select-input {
  width: 0;
  border: none;
}

.select-input :focus {
  border: none;
}

/deep/ .ivu-input {
  height: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  box-shadow: none;
  border: none !important;
}

.divClass {
  border-color: #57a3f3;
  outline: 0;
  box-shadow: 0 0 0 2px rgb(45 140 240 / 20%);
}

.close-all-class {
  cursor: pointer;
  width: 24px;
  position: absolute;
  top: -2px;
  align-items: center;
  justify-content: center;
  height: 24px;
  color: #a0a5ac;
  z-index: 33;
}

/deep/ .xm-select-disabled {
  background-color: #d3d3d3 !important;
}

/deep/.select-input .ivu-input:focus{
  box-shadow: none;
}

/deep/.focus-class xm-select{
  border-color: #57a3f3 !important;
}


</style>
