<template>
  <div class="searchPatent">
    <div style="display: flex;align-items: center;">
      <el-cascader :options="options" @change="cascaderChange" :show-all-levels="false" size="small"
        style="width: 150px;"></el-cascader>

      <div style="margin: 0px 10px 0px 10px;">
        <el-input v-if="!isControl.select" v-model="inputValue" size="small"
          :placeholder="isControl.placeholder"></el-input>
        <el-select v-else v-model="inputValue" placeholder="请选择" size="small">
          <el-option v-for="item in typeStatus[isControl.selectCheck]" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <el-button @click="search" type="primary" size="small">检索</el-button>

      <el-popover placement="bottom" v-if="searchStorageText.length > 0" width="260" trigger="click">
        <div style="height: 200px;overflow-x: auto;">
          <div v-for="(item, index) in searchStorageText" :key="item.value">
            <div style="margin-bottom:10px;background:#F0F9EB;padding: 10px 5px;">
              <span>{{ item.label }}</span>
              <span> = </span>
              <template v-if="Array.isArray(item.inputValue)">
                <span>(</span>
                <template v-if="item.filedKind == 0">
                  <span v-for="(result, i) in item.checkName" :key="result" @click="resultBtn(item, index, i)"
                    style="cursor: pointer;">{{ result
                    }}<i class="el-icon-close"></i>
                    <b v-if="item.checkName.length - 1 > i"> OR </b>
                  </span></template>
                <template v-else>
                  <span v-for="(result, i) in item.inputValue" :key="result" @click="resultBtn(item, index, i)"
                    style="cursor: pointer;">{{ result
                    }}<i class="el-icon-close"></i>
                    <b v-if="item.inputValue.length - 1 > i"> OR </b>
                  </span>
                </template>
                <span>)</span>
                <!-- <span>({{ item.result.join(' OR ') }})</span> -->
              </template>
              <template v-else>
                <span @click="resultBtn(item, index, 0)" style="cursor: pointer;">({{ item.inputValue }})<i
                    class="el-icon-close"></i></span>
              </template>
            </div>
          </div>
        </div>

        <el-button slot="reference" type="primary" size="small" class="margin-left_10">检索式</el-button>
      </el-popover>

    </div>


  </div>
</template>

<script>
export default {
  props: {
    // 所有的检索字段（包含自定义字段）
    searchFiled: {
      type: Array,
      default: () => {
        return []
      }
    },
    searchPatentCheck: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      // 级联面板数据源
      options: [],
      // 存储条件
      searchStorage: [],
      searchStorageText: [],
      // 专利检索式
      searchStr: '',
      // 自定义栏位检索式
      searchCustomStr: '',
      // 专利IPC/CPC/UPC/LOC的选项
      special: {
        MC: [
          { value: 'ipcLevel1', label: 'IPC部' },
          { value: 'ipcLevel2', label: 'IPC大类' },
          { value: 'ipcLevel3', label: 'IPC小类' },
          { value: 'ipcLevel4', label: 'IPC大组' },
          { value: 'ipcLevel5', label: 'IPC小组' },
        ],
        CPC: [
          { value: 'cpcLevel1', label: 'CPC部' },
          { value: 'cpcLevel2', label: 'CPC大类' },
          { value: 'cpcLevel3', label: 'CPC小类' },
          { value: 'cpcLevel4', label: 'CPC大组' },
          { value: 'cpcLevel5', label: 'CPC小组' },
        ],
        UPC: [
          // { value: '0', label: '分类号' },//老系统有
          { value: 'upcLevel1', label: 'UPC大类' },
          { value: 'upcLevel2', label: 'UPC小类' },
        ],
        LOC: [
          // { value: '0', label: '分类号' },//老系统有
          { value: 'locLevel1', label: 'LOC大类' },
          { value: 'locLevel2', label: 'LOC小类' },
        ],
      },
      // 类型及状态
      typeStatus: {
        //法律状态暂定
        LG: [
          { value: '1', label: '有效' },
          { value: '2', label: '无效' },
          { value: '3', label: '审中' },
        ],
        //专利类型
        PT: [
          { value: '1 OR 8', label: '发明' },
          { value: '2 OR 9', label: '实用新型' },
          { value: '3', label: '外观' },
        ],
        //专利状态
        SS: [
          { value: '1', label: '有效' },
          { value: '2', label: '无效' },
          { value: '3', label: '审中' },
        ],
      },
      // 控制检索式弹窗显示
      dialogVisible: false,
      // 选择的cascader
      casString: null,
      // 输入框的值
      inputValue: '',
      // 控制显示提示及select
      isControl: {
        placeholder: '请输入检索内容'
      },
    }
  },
  watch: {
    searchFiled: {
      deep: true,
      handler() {
        this.getGroup()
      },
    },
  },
  mounted() {

  },
  methods: {
    // 点击检索式中的检索条件
    resultBtn(item, index, i) {
      if (Array.isArray(item.inputValue)) {
        item.inputValue.splice(i, 1)
        if (this.searchStorageText[index].inputValue.length == 0) {
          this.searchStorageText.splice(index, 1)
          let spliceName = ''
          if (item.dele == 'storage') {
            spliceName = 'searchStorage'
          } else {
            spliceName = 'searchPatentCheck'
          }
          this[spliceName].splice(index, 1)
        }
        if (item.checkName && item.checkName.length > 0) {//统计自定义字段
          item.checkName.splice(i, 1)
        }
      } else {
        let spliceName = ''
        if (item.dele == 'storage') {
          spliceName = 'searchStorage'
        } else {
          spliceName = 'searchPatentCheck'
        }
        let a = this[spliceName].findIndex(itemFind => {
          return itemFind.inputValue == item.inputValue
        })
        if (a != -1) {
          this[spliceName].splice(a, 1)
        }
        this.searchStorageText.splice(index, 1)
        this.searchStr = ''
      }
      this.search2()
    },
    // cascader变化事件
    cascaderChange(val) {
      this.inputValue = ''
      let a = this.options.find(item => {
        return item.value == val[0]
      })
      this.isControl = a.children.find(item => {
        return item.value == val[1]
      })
      this.isControl.placeholder = '请输入检索内容'
      if (this.isControl.type == '2') {
        this.isControl.placeholder = '请输入日期(格式2020 ~ 2023)'
      }
      if (val[0] == 'typeStatus') {
        this.$set(this.isControl, 'select', true)
        this.$set(this.isControl, 'selectCheck', val[val.length - 1])
      }
    },
    // 存储条件
    storage() {
      this.isControl.inputValue = this.inputValue
      let isControl = JSON.parse(JSON.stringify(this.isControl))
      this.searchStorage.push(isControl)

    },
    getSearchOptionData() {
      var data = []
      this.searchStorage.forEach(item => {
        data.push(
          {
            label: item.label,
            value: item.value,
            inputValue: item.inputValue,
            type: item.type,
            group: item.group,
            dele: 'storage',
          }
        )
      })
      this.searchPatentCheck.forEach(item => {
        var type = 1
        data.push(
          {
            label: item.name,
            value: item.value,
            inputValue: item.check,
            checkName: item.checkName,
            filedKind: item.filedKind,
            type: item.type,
            group: item.filedKind == -1 ? 'nos' : 'customField',
            dele: 'patentCheck',
          }
        )
      })
      this.searchStorageText = data
      return data
    },
    // 页面检索按钮
    search() {
      this.storage()
      this.search2()
    },
    search2() {
      this.getSearchOptionData()
      // return
      this.getSearchStorage()
    },
    // 处理检索条件
    getSearchStorage() {
      let customFields = []
      let count = 0
      this.searchStorageText.forEach((item, index) => {
        if (item.group == 'nos') {
          if (count == 0) {
            count++
            if (Array.isArray(item.inputValue)) {
              this.searchStr = `${item.value} = (${item.inputValue.join(' OR ')})`
            } else {
              this.searchStr = `${item.value} = (${item.inputValue})`
            }

          } else {
            count++
            if (Array.isArray(item.inputValue)) {
              this.searchStr += ` AND ${item.value} = (${item.inputValue.join(' OR ')})`
            } else {
              this.searchStr += ` AND ${item.value} = (${item.inputValue})`
            }
          }
        } else {
          let a = {
            fieldId: item.value,
            value: (item.filedKind == 0 || item.filedKind) ? item.inputValue : [this.inputValue],
          }
          customFields.push(a)
        }
      })
      if (this.searchStorageText==0) {
        this.searchStr = ''
      }
      // console.log(this.searchStr,customFields,this.searchStorage,this.searchPatentCheck,this.searchStorageText);
      this.$emit('searchValue', { searchStr: this.searchStr, customFields: customFields, })
    },


    getGroup() {
      let obj = {
        text: '文本',
        number: '号码',
        typeStatus: '类型及状态',
        classify: '分类',
        dateType: '日期',
        company: '公司/人',
        typeStatus: '类型及状态',
        address: '地址',
        nation: '国家/地区',
        amount: '引用',
        customField: '自定义字段',
      }
      let filedObj = {}
      let data = this.searchFiled
      for (let i = 0; i < data.length; i++) {
        if (data[i].group == 'nos') {//专利本身
          if (filedObj[data[i].groupBy]) {
            filedObj[data[i].groupBy].children.push(data[i])
          } else {
            filedObj[data[i].groupBy] = {
              value: data[i].groupBy,
              label: obj[data[i].groupBy],
              children: [
                data[i]
              ],
            }
          }
          // 给ipc、cpc、upc、loc添加大小类等
          if (['MC', 'CPC', 'UPC', 'LOC'].includes(data[i].value)) {
            for (let j = 0; j < filedObj[data[i].groupBy].children.length; j++) {
              if (!filedObj[data[i].groupBy].children[j].children) {
                filedObj[data[i].groupBy].children[j].children = this.special[filedObj[data[i].groupBy].children[j].value]
              }
            }
          }
        } else {//自定义字段
          if (filedObj[data[i].group]) {
            filedObj[data[i].group].children.push(data[i])
          } else {
            filedObj[data[i].group] = {
              value: data[i].group,
              label: obj[data[i].group],
              children: [data[i]]
            }
          }
        }
      }
      this.options = Object.values(filedObj)
    },
  },
}
</script>

<style lang="scss" scoped>
.searchPatent {
  // width: 550px;
}
</style>