<template>
  <div class="search-main">
    <div>
      <div
        class="search-content"
        @mouseleave="mouseleave('content')"
        @mouseover="mouseover('content')"
        :style="{ width: width + 'px' }"
      >
        <span class="l-t" />
        <span class="r-b" />
        <div class="search-icon" @mouseover="aaaa('over', $event)" @mouseleave="aaaa('leave', $event)">
          <i class="el-icon-caret-right" />
          <!-- 一级下拉框 -->
          <ul class="one-select" id="one-select">
            <input
              v-if="showFilterSelect"
              class="search-filter-input"
              v-model="filterSelectVal"
              @input="filterSelect(filterSelectVal)"
            />
            <li
              v-for="(item, index) in oneSelectDataSon"
              :key="index"
              class="one-select-item"
              @click="clickOneSelect(item, 'one')"
            >
              <span>{{ item.label }}</span>
            </li>
          </ul>
        </div>
        <!-- 选项值 -->
        <div id="searchType" class="search-type">{{ searchType }}</div>
        <input
          v-if="showIcon === 'Search'"
          class="search-input"
          v-model="inputObj.searVal"
          :style="{ width: inputWidth + 'px' }"
          :placeholder="placeholder"
          @click="clickInput(inputObj)"
          @input="inputChange(inputObj)"
          @keyup.enter="keyupEnterInput(inputObj)"
        />
        <el-date-picker
          v-if="showIcon === 'Date'"
          v-model="inputObj.searVal"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          :editable="false"
          :placeholder="placeholder"
          align="left"
          size="small"
          style="position: absolute; z-index: 10;"
          :style="{ width: inputWidth + 'px' }"
          :picker-options="pickerOptions"
          @change="keyupEnterInput(inputObj)"
        ></el-date-picker>
        <span v-if="showIcon === 'Range'" class="search-range">
          <input
            placeholder="起始值"
            v-model="inputRange.startVal"
            @keyup.enter="keyupEnterInput(inputObj)"
            :style="{ width: inputWidth / 3 + 'px' }"
          />
          -
          <input
            placeholder="结束值"
            v-model="inputRange.endVal"
            @keyup.enter="keyupEnterInput(inputObj)"
            :style="{ width: inputWidth / 3 + 'px' }"
          />
          <input placeholder="单位,可不填" v-model="inputRange.unit" :style="{ width: inputWidth / 3 - 30 + 'px' }" />
        </span>
        <!-- 搜索图标 -->
        <div class="search-sousuo">
          <mc-icon type="sousuo" size="18" @click.native="keyupEnterInput(inputObj)" />
        </div>
        <!-- 清空关键字图标 -->
        <div title="清空输入框内的条件" v-if="clearIcon" class="search-clear">
          <i class="el-icon-circle-close" @click="clickCloseIcon" />
        </div>
        <ul class="two-select" id="searchTwoSelect" @mouseleave="mouseleave('two')" :style="twoSelectHeight">
          <li
            v-for="(item, index) in twoSelectData"
            :key="index"
            :style="{
              background: item.isChecked ? 'rgba(0,132,255)' : '',
              color: item.isChecked ? '#FFF' : ''
            }"
            class="two-select-item"
            @click="clickTwoSelect(item)"
          >
            <!-- <mc-icon type="sousuo" style="font-size: 14px; float: left;" /> -->
            &nbsp;
            <span>{{ item.title }}</span>
            <span>{{ item.label }}</span>
            <mc-icon type="zhengque" size="14" style="float: right;" v-show="item.isChecked" />
          </li>
        </ul>
      </div>
      <el-tooltip effect="light" content="导出" placement="top">
        <div class="search-export" v-if="showExport" @click="$emit('export-file', sendData)">
          <span class="l-t" />
          <span class="r-b" />
          <mc-icon type="export" size="20" />
        </div>
      </el-tooltip>
      <el-tooltip effect="light" content="导入" placement="top">
        <div class="search-export" v-if="showImport" @click="$emit('import-file', sendData)">
          <span class="l-t" />
          <span class="r-b" />
          <mc-icon type="daoru" size="20" color="#000" />
        </div>
      </el-tooltip>
      <el-tooltip effect="light" content="下载模板" placement="top">
        <div class="search-export" v-if="showTemp" @click="$emit('export-temp', sendData)">
          <span class="l-t" />
          <span class="r-b" />
          <mc-icon type="xiazaimoban" size="20" />
        </div>
      </el-tooltip>
      <el-tooltip effect="light" content="删除" placement="top">
        <div class="search-export" v-if="showDelete" @click="$emit('delete', sendData)">
          <span class="l-t" />
          <span class="r-b" />
          <mc-icon type="shanchu" size="20" />
        </div>
      </el-tooltip>
      <el-tooltip
        effect="light"
        v-for="(item, i) in customizeList"
        :content="item.tooltip"
        placement="top"
        :key="i + 'i'"
      >
        <div @click="$emit(`customize-${item.eventName}`, sendData)" class="search-export">
          <span class="l-t" />
          <span class="r-b" />
          <mc-icon :type="item.icon" size="20"></mc-icon>
          <span>{{ item.title }}</span>
        </div>
      </el-tooltip>
      <button v-if="showAdd" class="search-add-btn" @click="$emit('handle-add')">
        新建
      </button>
    </div>

    <div class="search-tag" v-if="(tagListSearch.length !== 0) & showTag">
      <div class="search-tag-div">
        <mc-icon type="guolvqi" size="14" style="width: 20px; height: 20px; float: left;" />
        <span>检索项:</span>
      </div>
      <div
        v-for="(item, index) in tagListSearch"
        :key="'index' + index"
        class="search-tag-item"
        :style="{ marginLeft: index > 0 ? '5px' : '0px' }"
        :title="item.showTitle"
      >
        <span>{{ item.showTitle }}</span>
        <i
          class="el-icon-error"
          style="cursor: pointer; position: absolute; font-size: 16px; right: 5px; top: 6px;"
          @click="closeTag(index)"
        />
      </div>
      <button
        v-if="(tagListSearch.length !== 0) & showTag"
        class="search-tag-item-span"
        @click="clearTag"
        title="删除所有标签"
      >
        <mc-icon type="shanchu" size="14" />
        <span>删除标签</span>
      </button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'McSearch',
    props: {
      // 输入框的宽度
      width: {
        type: String | Number,
        default: '500'
      },
      showFilterSelect: {
        type: Boolean,
        default: false
      },
      // 下拉框数据
      oneSelectData: {
        type: Array,
        default: () => {
          return [
            // {
            //   label: '级别', // 菜单显示名称
            //   key: 'param_severity', // 接口接收参数名
            //   dataType: 'String', // 接口接收参数类型
            //   type: 'Array', // 菜单类型(Array: 有二级菜单, 就是有字典, 可选择. String: 没有字典可选择, 需要输入, Date: 时间类型)
            //   selectList: [
            //     // 二级菜单数据
            //     {
            //       label: '清楚', // 名称
            //       value: '0' // 值
            //     }
            //   ]
            // },
            // {
            //   label: '名称1',
            //   key: 'param_name1',
            //   dataType: 'String',
            //   type: 'String',
            //   selectList: [],
            //   defalut: '100'
            // },
            // {
            //   label: '名称2',
            //   key: 'param_name2',
            //   dataType: 'String',
            //   type: 'String',
            //   selectList: [],
            //   defalut: '200'
            // },
            // {
            //   label: '时间',
            //   key: 'param_time',
            //   dataType: 'String',
            //   type: 'Date',
            //   selectList: []
            // }
          ];
        }
      },
      // 导出按钮
      showExport: {
        type: Boolean,
        default: false
      },
      // 导入按钮
      showImport: {
        type: Boolean,
        default: false
      },
      // 下载模板按钮
      showTemp: {
        type: Boolean,
        default: false
      },
      // 删除按钮
      showDelete: {
        type: Boolean,
        default: false
      },
      customizeList: {
        type: Array,
        default: () => [
          // {
          //   tooltip: '自定义1',
          //   eventName: 'zidingyi1',
          //   title: '自定义1',
          //   icon: 'tishi_'
          // },
          // {
          //   tooltip: '自定义',
          //   eventName: 'zidingyi2',
          //   title: '自定义2',
          //   icon: 'tishi_'
          // },
          // {
          //   tooltip: '自定义',
          //   eventName: 'zidingyi3',
          //   title: '自定义3',
          //   icon: 'tishi_'
          // }
        ]
      },
      // 是否显示新建按钮
      showAdd: {
        type: Boolean,
        default: false
      },
      // 标签
      showTag: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        filterSelectVal: '',
        // 一级下拉框数据
        oneSelectDataSon: [],
        oneSelectMouse: false,
        oneSelectDataSonBak: [],
        twoSelectShow: false,
        // 二级下拉数据
        twoSelectData: [],
        twoSelectDataBak: [],
        // 二级下拉框所有的数据, 用于输入匹配建议
        twoSelectDataAll: [],
        // 参数类型
        searchType: '',
        // 输入框的宽度
        inputWidth: this.width - 90,
        // 输入框绑定的数据对象, 此处用对象是, 因为有多重类型
        inputObj: {
          key: '',
          dataType: '',
          searVal: ''
        },
        inputRange: {
          startVal: '',
          endVal: '',
          unit: ''
        },
        placeholder: '未选择查询类型的时候默认按关键字进行模糊查询',
        pickerOptions: {
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date());
              }
            },
            {
              text: '昨天',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', date);
              }
            },
            {
              text: '一周前',
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', date);
              }
            }
          ],
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        showIcon: 'Search',
        clearIcon: false,
        tagListSearch: [],
        // 最终的查询参数
        sendData: {
          keyWord: ''
        },
        delay: null
      };
    },
    computed: {
      twoSelectHeight() {
        let height = this.twoSelectData.length * 42 + 'px';
        let width = this.width - 2 + 'px';
        let border = '',
          boxShadow = '';
        if (this.twoSelectShow) {
          border = '1px solid rgba(226, 236, 248, 1)';
          boxShadow = '0px 4px 10px 2px rgba(226, 236, 248, 1)';
        } else {
          border = '0px solid rgba(226, 236, 248, 1)';
          boxShadow = '0px 4px 10px 2px rgba(226, 236, 248, 0)';
        }
        return {
          width: width,
          zIndex: 8,
          height: height,
          maxHeight: '300px',
          boxShadow: boxShadow,
          borderRight: border,
          borderBottom: border,
          borderLeft: border,
          visibility: 'visible'
        };
      }
    },
    methods: {
      aaaa(param, event) {
        if (param === 'over') {
          document.querySelector('.search-icon .one-select').style.maxHeight = '300px';
          document.querySelector('.search-icon .one-select').style.visibility = 'visible';
          document.querySelector('.search-icon .one-select').style.boxShadow =
            '0px 4px 10px 2px rgba(226, 236, 248, 1)';
        } else {
          document.querySelector('.search-icon .one-select').style.maxHeight = '0';
          document.querySelector('.search-icon .one-select').style.visibility = 'hidden';
          document.querySelector('.search-icon .one-select').style.boxShadow = '0px';
        }
      },
      // 有默认条件下的搜索
      defaultSearch(item) {
        let tempObj = {};
        tempObj.title = item.label + ':';
        tempObj.key = item.key;
        tempObj.label = item.default;
        tempObj.value = item.default;
        tempObj.dataType = item.dataType;
        tempObj.type = item.type;
        tempObj.isChecked = false;
        this.tagListHandle(tempObj.dataType, tempObj);
        this.mergeAllParam(item);
      },
      initdata(param, type) {
        let tempArray = JSON.parse(JSON.stringify(param));
        this.twoSelectDataAll = [];
        let defaultSearch = false;
        tempArray.forEach(item => {
          this.sendData[item.key] = '';
          if (item.default && !type) {
            defaultSearch = true;
            this.defaultSearch(item);
          }
          if (item.selectList && item.selectList.length !== 0) {
            item.selectList.forEach(itemA => {
              this.$set(itemA, 'isChecked', false);
              // 为每个下拉数据, 增加type字段, 用于匹配校验
              this.$set(itemA, 'key', item.key);
              this.$set(itemA, 'type', item.type);
              this.$set(itemA, 'title', item.label + ':');
              this.$set(itemA, 'singleChoice', item.singleChoice);
              // 数据变动, 把所有的,有下拉数据的,下拉数据放入该变量内, 用于输入匹配
              this.twoSelectDataAll.push(itemA);
            });
          }
        });
        if (defaultSearch) this.$emit('searh-data', this.sendData);
        return tempArray;
      },
      filterSelect(val) {
        if (val) {
          this.oneSelectDataSon = this.oneSelectDataSonBak.filter(item => {
            return item.label.indexOf(val) !== -1;
          });
        } else {
          this.oneSelectDataSon = this.oneSelectDataSonBak;
        }
      },
      clickOneSelect(val, param) {
        let vm = this;
        vm.twoSelectData = [];
        vm.searchType = val.label + ':';
        vm.showIcon = 'Search';
        if (val.type === 'String') {
          if (val.accurate) {
            vm.placeholder = val.label + '精确匹配项, 多条件按英文逗号分隔.';
          } else {
            vm.placeholder = val.label + '模糊匹配项, 多条件按英文逗号分隔.';
          }
          vm.inputObj.key = val.key;
          vm.inputObj.dataType = val.type;
          vm.inputObj.searVal = '';
          vm.twoSelectShow = false;
        }
        if (val.type === 'Array') {
          document.querySelector('.search-icon .one-select').style.maxHeight = '0';
          document.querySelector('.search-icon .one-select').style.visibility = 'hidden';
          document.querySelector('.search-icon .one-select').style.boxShadow = '0px';
          vm.placeholder = val.label + '选择项, 可多选';
          vm.twoSelectShow = true;
          vm.inputObj.key = val.key;
          vm.inputObj.dataType = val.type;
          let tempArray = [];
          vm.tagListSearch.forEach(item => {
            if (item.type === val.key) {
              item.value.forEach(itemA => {
                if (itemA.isChecked) {
                  tempArray.push(itemA.label);
                }
              });
            }
          });
          vm.inputObj.searVal = tempArray.toString();
          vm.twoSelectData = JSON.parse(JSON.stringify(val.selectList));
          vm.twoSelectDataBak = JSON.parse(JSON.stringify(val.selectList));
        }
        if (val.type === 'Date') {
          vm.placeholder = val.label + '选择项';
          vm.showIcon = 'Date';
          vm.inputObj.key = val.key;
          vm.inputObj.dataType = val.type;
          vm.inputObj.searVal = '';
          vm.twoSelectShow = false;
        }
        if (val.type === 'Range') {
          vm.showIcon = 'Range';
          vm.inputObj.key = val.key;
          vm.inputObj.dataType = val.type;
          vm.inputObj.searVal = '';
          vm.twoSelectShow = false;
        }
      },
      clickTwoSelect(val) {
        let vm = this;
        // 深度复制元素, 防止数据地址指向同一地址
        let valBak = JSON.parse(JSON.stringify(val));
        vm.searchType = valBak.title;
        //输入框赋值
        vm.inputObj.key = valBak.type;
        vm.inputObj.dataType = 'Array';
        vm.inputObj.searVal = valBak.label;
        // 数据切换为选择状态
        vm.oneSelectDataSon.forEach(item => {
          if (!item.singleChoice) {
            if (item.key === valBak.key) {
              item.selectList.forEach(itemA => {
                if ((itemA.type === valBak.type) & (itemA.value === valBak.value)) {
                  itemA.isChecked = !itemA.isChecked;
                }
              });
              vm.twoSelectData = JSON.parse(JSON.stringify(item.selectList));
              vm.twoSelectDataBak = JSON.parse(JSON.stringify(item.selectList));
            }
          } else {
            if (item.key === valBak.key) {
              item.selectList.forEach(itemA => {
                if ((itemA.type === valBak.type) & (itemA.value === valBak.value)) {
                  itemA.isChecked = true;
                } else {
                  itemA.isChecked = false;
                }
              });
              vm.twoSelectData = JSON.parse(JSON.stringify(item.selectList));
              vm.twoSelectDataBak = JSON.parse(JSON.stringify(item.selectList));
            }
          }
        });
        // 处理标签数据
        vm.tagListHandle(vm.inputObj.dataType, valBak);
        // 合并参数返回给父组件
        vm.mergeAllParam(valBak);
        // clearTimeout(vm.delay);
        // vm.delay = setTimeout(() => {
        vm.$emit('searh-data', vm.sendData);
        // }, 500)
      },
      keyupEnterInput(inputObj) {
        let vm = this,
          tempObj = {};
        // 范围数据做特殊处理
        if (inputObj.dataType === 'Range') {
          if ((vm.inputRange.startVal !== '') | (vm.inputRange.endVal !== '')) {
            inputObj.searVal = vm.inputRange.startVal + '-' + vm.inputRange.endVal + vm.inputRange.unit;
          } else {
            return;
          }
        }
        if (vm.searchType === '') tempObj.title = '关键字:';
        if (vm.searchType !== '') tempObj.title = vm.searchType;
        if (inputObj.searVal === '') {
          clearTimeout(vm.delay);
          vm.delay = setTimeout(() => {
            vm.$emit('searh-data', vm.sendData);
          }, 500);
        } else {
          if (tempObj.title === '关键字:') {
            inputObj.key = 'keyWord';
            inputObj.dataType = 'String';
            tempObj.key = 'keyWord';
            tempObj.label = inputObj.searVal;
            tempObj.value = inputObj.searVal;
            tempObj.dataType = 'String';
            tempObj.type = 'String';
            tempObj.isChecked = false;
          } else {
            vm.oneSelectDataSon.forEach(item => {
              if (tempObj.title === item.label + ':') {
                tempObj.key = item.key;
                tempObj.label = inputObj.searVal;
                tempObj.value = inputObj.searVal;
                tempObj.dataType = item.dataType;
                tempObj.type = item.type;
                tempObj.isChecked = false;
              }
            });
          }
          // 处理标签数据
          vm.tagListHandle(tempObj.dataType, tempObj);
          // 合并参数返回给父组件
          vm.mergeAllParam(inputObj);
          // clearTimeout(vm.delay);
          // vm.delay = setTimeout(() => {
          vm.$emit('searh-data', vm.sendData);
          // }, 500)
        }
      },
      clickInput(inputObj) {
        if (inputObj.dataType === 'Array') {
          // 类型为空, 值为空.
          if ((this.searchType === '') & (inputObj.searVal === '')) {
            this.twoSelectShow = false;
          }
          // 类型为空, 值不为空, 就是不选择类型,  直接输入值的时候, 查询所有字典,  有匹配项就显示上.
          if ((this.searchType === '') & (inputObj.searVal !== '')) {
            this.twoSelectShow = true;
            this.twoSelectData = this.twoSelectDataAll.filter(item => {
              if (item.label.indexOf(inputObj.searVal) !== -1) return item;
            });
          }
          if ((this.searchType !== '') & (inputObj.searVal === '')) {
            this.twoSelectShow = true;
            this.twoSelectData = this.twoSelectDataBak;
          }
          if ((this.searchType !== '') & (inputObj.searVal !== '')) {
            this.twoSelectShow = true;
            this.twoSelectData = this.twoSelectDataBak;
          }
        }
      },
      // 监测input框内数据变动
      inputChange(inputObj) {
        if (inputObj.searVal !== '') {
          this.clearIcon = true;
        } else {
          this.clearIcon = false;
        }
        // 过滤跟输入条件匹配的数据
        if ((this.searchType === '') & (inputObj.searVal !== '')) {
          this.twoSelectShow = true;
          this.twoSelectData = this.twoSelectDataAll.filter(item => {
            if (item.label.indexOf(inputObj.searVal) !== -1) return item;
          });
        } else if ((this.searchType === '') & (inputObj.searVal === '')) {
          this.twoSelectData = [];
          this.twoSelectShow = false;
        } else {
          if (this.inputObj.dataType === 'Array') {
            this.twoSelectShow = true;
            this.twoSelectData = this.twoSelectDataBak.filter(item => {
              if (item.label.indexOf(inputObj.searVal) !== -1) return item;
            });
          }
        }
      },
      closeTag(index, type) {
        let vm = this,
          tempObj = vm.tagListSearch[index],
          sendData = {};
        vm.oneSelectDataSon.forEach(item => {
          if (item.key === tempObj.key) {
            if (item.selectList) {
              item.selectList.forEach(itemA => {
                for (let itemC of tempObj.value) {
                  if (itemA.label === itemC.label) {
                    itemA.isChecked = false;
                    break;
                  }
                }
              });
            }
            if (tempObj.label === vm.searchType) {
              vm.searchType = '';
              vm.inputObj.dataType = '';
              vm.inputObj.searVal = '';
              vm.inputObj.key = 'String';
            }
          }
        });
        for (let i in vm.sendData) {
          if (i === tempObj.key) {
            vm.sendData[i] = '';
            break;
          }
        }
        vm.tagListSearch.splice(index, 1);
        vm.placeholder = '未选择查询类型的时候默认按关键字进行模糊查询';
        if (type === undefined) {
          vm.$emit('searh-data', vm.sendData);
        }
      },
      clearTag(type) {
        this.tagListSearch = [];
        this.placeholder = '未选择查询类型的时候默认按关键字进行模糊查询';
        this.showIcon = 'Search';
        this.searchType = '';
        this.inputObj.dataType = '';
        this.inputObj.searVal = '';
        this.inputObj.key = 'String';
        this.twoSelectData = [];
        this.sendData.keyWord = '';
        this.oneSelectDataSon.forEach(item => {
          this.sendData[item.key] = '';
        });
        this.oneSelectDataSon = this.initdata(this.oneSelectData, 'clear');
        this.oneSelectDataSonBak = [...this.oneSelectDataSon];
        this.$emit('searh-data', this.sendData);
      },
      // 鼠标在时
      mouseleave(param) {
        if (param === 'content') {
          this.clearIcon = false;
        }
        if (param === 'two') {
          this.twoSelectShow = false;
          this.twoSelectData = [];
        }
      },
      // 鼠标移出时
      mouseover(param) {
        if ((param === 'content') & ((this.inputObj.searVal !== '') | (this.searchType !== ''))) {
          this.clearIcon = true;
        }
      },
      clickCloseIcon() {
        this.placeholder = '未选择查询类型的时候默认按关键字进行模糊查询';
        this.searchType = '';
        this.inputObj.dataType = '';
        this.inputObj.searVal = '';
        this.inputObj.key = 'String';
        this.twoSelectData = [];
        this.clearIcon = false;
        this.showIcon = 'Search';
      },
      // dataType 是String时代表的是, 输入关机字查询的,  为Array时  代表的是有字段的数据.
      // paramObj 需要添加到标签数组中的对象
      tagListHandle(dataType, paramObj) {
        let vm = this;
        // 首先判断标签数组是否是空数组
        if (vm.tagListSearch.length !== 0) {
          // 临时数组, 存储所有标签类型
          let tempArray = [];
          // 遍历一遍, 取得所有标签类型, 就是选一级菜单的类型, 比如, 专业 地市...
          // 这里先遍历一遍的原因是, 要先去得所有的标签类型. 后面会用到.
          for (let item of vm.tagListSearch) {
            tempArray.push(item.key);
          }
          // 开始遍历标签数组
          for (let item of vm.tagListSearch) {
            // 判断需要添加到标签的对象, 他的类型是否和当前遍历出来的标签类型相同
            if (item.key === paramObj.key) {
              // 临时数组, 存储所有标签类型所关联的数据, 此步的用法和上步的用法一致, 参考tempArray
              let temp = [];
              for (let itemA of item.value) {
                temp.push(itemA.label);
              }
              // 遍历每个标签类型所关联的数据
              for (let itemA of item.value) {
                // 如果当前值和需要添加的值相同, 这状态等于相反状态, 次状态现只是有字典的数据才会用到(选中和取消)
                if (itemA.label === paramObj.label) {
                  itemA.isChecked = !paramObj.isChecked;
                } else {
                  // 判断值是否已存在, 如果存在, 结束当前循环, 进如下次循环
                  if (temp.includes(paramObj.label)) {
                    continue;
                  } else {
                    // 如果不存在, 新增到当前标签类型中.
                    item.value.push({
                      dataType: dataType,
                      type: paramObj.type,
                      label: paramObj.label,
                      value: paramObj.value,
                      isChecked: !paramObj.isChecked
                    });
                    break;
                  }
                }
              }
            } else {
              // 如果不相同的话, 判断需要添加到标签的对象, 他的类型是否已存在于整个标签数组中, 如果存在, 进入下次循环 再次进行匹配.
              if (tempArray.includes(paramObj.key)) {
                continue;
                // 如果不存在, 新增标签
              } else {
                vm.tagListSearch.push({
                  label: paramObj.title,
                  type: paramObj.type,
                  key: paramObj.key,
                  value: [
                    {
                      dataType: dataType,
                      type: paramObj.type,
                      label: paramObj.label,
                      value: paramObj.value,
                      isChecked: !paramObj.isChecked
                    }
                  ]
                });
                break;
              }
            }
          }
        } else {
          // 标签为空时, 新增一个标签
          vm.tagListSearch.push({
            label: paramObj.title,
            type: paramObj.type,
            key: paramObj.key,
            value: [
              {
                dataType: dataType,
                type: paramObj.type,
                label: paramObj.label,
                value: paramObj.value,
                isChecked: !paramObj.isChecked
              }
            ]
          });
        }
        vm.tagListSearch.forEach((item, index) => {
          let tempNum = 0;
          item.value.forEach(itemA => {
            if (!itemA.isChecked) tempNum++;
          });
          if (tempNum === item.value.length) {
            vm.placeholder = '未选择查询类型的时候默认按关键字进行模糊查询';
            vm.searchType = '';
            vm.inputObj.dataType = '';
            vm.inputObj.searVal = '';
            vm.inputObj.key = 'String';
            vm.tagListSearch.splice(index, 1);
            return;
          }
        });
        vm.tagListSearch.forEach(item => {
          if (((item.type === 'Date') | (item.type === 'Range')) & (item.value.length > 1)) {
            let tempA = JSON.parse(JSON.stringify(item.value[1]));
            item.value.splice(1, 1);
            item.value[0] = tempA;
          }
        });
        if (paramObj.dataType === 'String') {
          vm.inputObj.searVal = '';
        }
        // 单选模式时删除当前点击以外的别的选项
        if (paramObj.singleChoice) {
          vm.tagListSearch.forEach(item => {
            if (item.key === paramObj.key) {
              const tempArray = [...item.value];
              item.value.length = 0;
              tempArray.filter(itemA => {
                itemA.value === paramObj.value && item.value.push(itemA);
              });
            }
          });
        }
      },
      /**合并总的查询参数, 包括JSON, 和ARRAY两种格式
      type 合并的参数类型
      val 需要特殊处理的数据 */
      mergeAllParam(val) {
        let vm = this,
          sendData = {};
        for (let i in vm.sendData) {
          vm.sendData[i] = '';
        }
        vm.tagListSearch.forEach(item => {
          let tempArrayValue = [],
            tempArrayLabel = [];
          item.value.forEach(itemA => {
            if (itemA.isChecked) {
              tempArrayLabel.push(itemA.label);
              tempArrayValue.push(itemA.value);
            }
          });
          for (let i in vm.sendData) {
            if (i === item.key) {
              vm.sendData[i] = tempArrayValue.toString();
              break;
            }
          }
          item.showTitle = item.label + tempArrayLabel.toString();
          if ((item.key === val.key) & (item.type === 'Array')) {
            vm.inputObj.searVal = tempArrayLabel.toString();
          }
        });
      }
    },
    mounted() {
      this.oneSelectDataSon = this.initdata(this.oneSelectData);
      this.oneSelectDataSonBak = [...this.oneSelectDataSon];
    },
    watch: {
      // 深度监测模式
      oneSelectData: {
        deep: true,
        handler: function(newV, oldV) {
          this.oneSelectDataSon = this.initdata(newV);
          this.oneSelectDataSonBak = [...this.oneSelectDataSon];
        }
      },
      tagListSearch: function(val) {
        if (val.length === 0) {
          this.clearIcon = false;
          this.showIcon = 'Search';
          this.placeholder = '未选择查询类型的时候默认按关键字进行模糊查询';
          this.searchType = '';
          this.inputObj.dataType = '';
          this.inputObj.searVal = '';
          this.inputObj.key = 'String';
          this.twoSelectData = [];
          this.sendData.keyWord = '';
          this.oneSelectDataSon.forEach(item => {
            this.sendData[item.key] = '';
          });
        }
      },
      searchType: function() {
        // 视图更新以后, 才能取得最新的参数类型div宽度
        this.$nextTick(() => {
          this.inputWidth = this.width - document.getElementById('searchType').offsetWidth - 90;
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  *,
  :after,
  :before {
    box-sizing: border-box;
  }
  ul {
    margin: 0;
    padding: 0;
  }
  /* 组件上下间距 10像素 */
  .search-main {
    display: flex;
    flex-direction: column;
    margin: 10px 0px;
    line-height: 1.5;
    height: auto;
  }
  /* 整个输入框内容, 设置边框 */

  .search-content {
    /* 设置边框 */
    border: 1px solid rgba(214, 214, 214, 0.6);
    /* 定位信息, 相对定位*/
    position: relative;
    height: 32px;
    float: left;
    ::v-deep {
      .el-input--small .el-input__inner {
        height: 28px;
        border: 0px;
        margin-top: 1px;
        font-size: 12px;
      }
      .el-input--prefix .el-input__inner {
        padding-left: 10px;
      }
      .el-input__prefix {
        display: none;
      }
      .el-input__suffix {
        display: none;
      }
    }
  }
  /* 变过过渡效果添加的两个span标签样式, 因父级标签设定了定位属性, 故此标签内的absolute属性是以父标签的坐标原始点为原始点 */
  .l-t,
  .r-b {
    position: absolute;
    /* 这个设置z-index是因为, 要让这两个span显示在输入框上面 */
    z-index: 5;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    /* 设置边框为1像素, 颜色为透明 */
    border: 1px solid transparent;
    /* 过渡效果, 宽高都以ease-in-out(慢速开始和结束, 就是两头慢)效果进行过渡 */
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
  }
  /* 鼠标进入输入框时, 让两个span宽高撑满*/
  .search-content:hover .l-t,
  .search-content:hover .r-b {
    width: 100%;
    height: 100%;
  }
  .search-content:hover .l-t {
    border-top-color: #0084ff;
    border-left-color: #0084ff;
  }
  .search-content:hover .r-b {
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
    border-bottom-color: #0084ff;
    border-right-color: #0084ff;
  }
  /* 改变箭头颜色 */
  .search-content:hover .el-icon-caret-right {
    color: #0084ff;
  }
  /* 箭头图标样式 */
  .search-icon {
    /* 相对定位 */
    position: relative;
    /* 此处不设置z-index, 会出现图标的hover事件不起效果, 原因是两个span的z-index是5, 会遮罩掉箭头图标 */
    z-index: 10;
    height: 32px;
    width: 32px;
    float: left;
    font-size: 18px;
    color: rgba(214, 214, 214, 1);
    padding: 2px 0px 0px 5px;
    border: 0px;
    cursor: pointer;
  }
  /* 此处加上过度效果是因为, 鼠标离开箭头复原时的效果 */
  .el-icon-caret-right {
    /* 下列写法为简写属性, 完整的是 */
    /* 需要过渡的属性名 all是所有属性*/
    /* transition-property: all; */
    /* 过渡花费时长 */
    /* transition-duration: 0.5s; */
    /* 过渡效果的时间曲线 */
    /* transition-timing-function: ease; */
    /* 过渡效果何时开始 */
    /* transition-delay: 0s; */
    transition: all 0.5s;
  }
  .search-icon:hover .el-icon-caret-right {
    cursor: pointer;
    color: #0084ff;
    /* 旋转90度 */
    transform: rotate(90deg);
    /* 这是再简写 */
    /* 还可以直接写成 transition: 0.5s; */
    transition: all 0.5s;
  }
  /* .search-icon:hover .one-select{
    visibility: visible;
    max-height: 300px;
    box-shadow: 0px 4px 10px 2px rgba(226, 236, 248, 1);
  } */
  /* 搜索类型样式 */
  .search-type {
    /* position: relative; */
    height: 32px;
    float: left;
    font-size: 12px;
    padding: 6px 5px 0 0px;
    border: 0px;
    color: #333333;
  }
  .search-filter-input {
    width: 137px;
    height: 28px;
    margin: 5px 0px 0px 5px;
    border: 1px solid rgba(214, 214, 214, 1);
    outline: 0px;
    font-size: 12px;
  }
  /* 一级下拉样式 */
  .one-select,
  .two-select {
    /* 因为一级下拉框, 数据不一定, 所以高度也不一定, 故此此处用max-height来检测, 高度变化 */
    /* 具体逻辑 我也不太清楚, 百度的 */
    /* 此处用display: none 动画会失效, 所以用 visibility*/
    /* visibility 属性规定元素是否可见。
    即使不可见的元素也会占据页面上的空间 */
    visibility: hidden;
    max-height: 0;
    width: 150px;
    position: absolute;
    z-index: 20;
    left: 0px;
    overflow-y: auto;
    background: #fff;
    top: 35px;
    color: #333333;
    /* 阴影效果 */
    box-shadow: 0px 4px 10px 2px rgba(226, 236, 248, 0);
    border-left: 1px solid rgba(226, 236, 248, 0);
    border-bottom: 1px solid rgba(226, 236, 248, 0);
    border-right: 1px solid rgba(226, 236, 248, 0);
    border-radius: 0px;
    transition: all 0.5s;
  }
  /* 设置滚动轴宽度 */
  .one-select:hover::-webkit-scrollbar,
  .two-select:hover::-webkit-scrollbar {
    width: 5px;
  }
  /* 调整滚动轴样式 */
  .one-select::-webkit-scrollbar,
  .two-select::-webkit-scrollbar {
    width: 0px;
  }
  /* 滚动轴样式 */
  .one-select::-webkit-scrollbar-thumb,
  .two-select::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(87, 163, 243, 0.5);
  }
  /* 一级下拉框选择项 */
  .one-select-item,
  .two-select-item {
    cursor: pointer;
    padding: 5px 5px 5px 10px;
    margin: 5px 0px;
    font-size: 12px;
    overflow: hidden;
    /* 过渡效果 */
    transition: all 0.5s;
    position: relative;
    z-index: 20;
  }
  .one-select-item:hover,
  .two-select-item:hover {
    background: none;
    color: #fff;
  }
  /* 选择项增加伪类 before元素的内容前面插入内容*/
  .one-select-item:before,
  .two-select-item:before {
    /* 将元bai素隐藏，但是在网页中该占的位du置还是占着 */
    visibility: hidden;
    content: '';
    position: absolute;
    /* 此处50%是聚焦效果中中间位置 */
    left: 50%;
    top: 0;
    width: 0;
    height: 100%;
    background: rgba(0, 132, 255, 0.5);
    z-index: -1;
    /* 水平方向倾斜角度单位是deg */
    transform: skew(45deg, 0);
    transition: all 0.5s;
  }
  .one-select-item:hover:before,
  .two-select-item:hover:before {
    /* 伪类可见 */
    visibility: visible;
    width: 150%;
    left: -25%;
  }

  .search-input {
    height: 26px;
    border: 0px;
    outline: 0px;
    font-size: 12px;
    position: absolute;
    z-index: 10;
    top: 3px;
  }
  .search-range {
    position: relative;
    z-index: 10;
    font-size: 12px;
  }
  .search-range input {
    height: 30px;
    border: 0px;
    outline: 0px;
    margin-top: 7px;
    border-bottom: 1px solid rgba(214, 214, 214, 1);
    height: 20px;
  }
  .search-sousuo {
    position: absolute;
    z-index: 10;
    right: 5px;
    top: 6px;
    float: right;
    cursor: pointer;
  }
  .search-clear {
    position: absolute;
    z-index: 10;
    float: right;
    cursor: pointer;
    top: 3px;
    right: 30px;
  }
  .search-sousuo:hover,
  .search-clear:hover {
    color: #0084ff;
  }
  .search-export {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    height: 32px;
    width: auto;
    overflow: hidden;
    border: 1px solid rgba(214, 214, 214);
    position: relative;
    padding: 0px 6px;
    margin-left: 5px;
  }
  .search-export:hover {
    color: #0084ff;
  }
  .search-export:hover .l-t,
  .search-export:hover .r-b {
    width: 100%;
    height: 100%;
  }
  .search-export:hover .l-t {
    border-top-color: #0084ff;
    border-left-color: #0084ff;
  }
  .search-export:hover .r-b {
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
    border-bottom-color: #0084ff;
    border-right-color: #0084ff;
  }
  .search-add-btn {
    cursor: pointer;
    height: 33px;
    border-radius: 0px;
    padding: 0px 10px;
    width: 90px;
    border: 1px solid rgba(0, 132, 255);
    background: rgba(0, 132, 255);
    float: right;
    color: #fff;
  }
  .search-add-btn:hover {
    background: rgba(0, 132, 255, 0.8);
    border: 1px solid rgba(0, 132, 255, 0.8);
  }
  .search-add-btn:focus {
    outline: none;
  }
  .search-add-btn:active {
    background: rgba(214, 214, 214, 1);
    border: 1px solid rgba(214, 214, 214, 1);
    color: #fff;
  }
  .search-tag {
    margin-top: 7px;
    height: 30px;
    display: flex;
  }

  .search-tag-div {
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    margin: 0px 10px 0px 0px;
    float: left;
    color: #333333;
  }
  .search-tag-item {
    border: 1px solid #0084ff;
    height: 30px;
    color: #0084ff;
    display: inline-block;
    background: #fff;
    margin-left: 0px;
    padding: 0px 15px 0px 10px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.5s;
    min-width: 150px;
    max-width: 0px;
    position: relative;
    font-size: 14px;
  }
  .search-tag-item:hover {
    background: #0084ff;
    color: #fff;
    max-width: 500px;
    padding-right: 25px;
  }
  /* .search-tag-item-div {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
    text-align: left;
    font-size: 12px;
    margin-right: 5px;
  } */
  .search-tag-item-span {
    cursor: pointer;
    position: relative;
    width: 90px;
    height: 30px;
    color: #333333;
    font-size: 14px;
    border: 1px dashed rgba(214, 214, 214);
    background: #fff;
    left: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .search-tag-item-span:hover {
    color: #0084ff;
    border: 1px dashed #0084ff;
  }
  .search-tag-item-span:focus {
    outline: none;
  }
</style>
