<template>
  <div class="customFieldsTab1 height_100">
    <el-container>
      <el-main class="" style="overflow-y: auto;">
        <template v-if="field.length > 0">
          <el-collapse v-model="activeNames" @change="handleChange" style="margin: 0px 5px 0px 5px;">

            <el-collapse-item v-for="item in field" :title="item.name" :name="item.value + 'a' + item.filedKind"
              :key="item.value">

              <!-- 自定义字段 -->
              <template v-if="item.filedKind != -1">
                <div style="display:flex;margin-bottom: 10px;">
                  <div v-if="['Integer', 'DateTime'].includes(item.type)" class="year-data-picker">
                    <template v-if="item.type == 'DateTime'">
                      <el-date-picker clear-icon v-model="item.valueOne" size="small" type="year" value-format="yyyy"
                        placeholder="请选择时间"></el-date-picker>
                      <span style="margin: 5px;">至</span>
                      <el-date-picker clear-icon v-model="item.valueTwo" size="small" type="year" value-format="yyyy"
                        placeholder="请选择时间"></el-date-picker>
                    </template>
                    <template v-else>
                      <el-input size="small" v-model="item.valueOne" placeholder="请输入"></el-input>
                      <span style="margin: 5px;">至</span>
                      <el-input size="small" v-model="item.valueTwo" placeholder="请输入"></el-input>
                    </template>
                    <el-button @click.stop="handleSearch(item)" size="small" type="primary" class="margin-left_10"
                      icon="el-icon-search" circle></el-button>
                  </div>
                </div>
                <el-checkbox-group v-model="item.check" @change="onChange">
                  <div class="source-checkbox">
                    <el-checkbox v-for="source in item.options" :label="source.id || source.name" :key="source.id || source.name">
                      <el-tooltip :content="source.name" placement="top" effect="light">
                        <span class="source-checkbox-label text" :title="source.name">{{ source.name }}</span>
                      </el-tooltip>
                      <!-- <span class="source-checkbox-label" :title="source.name">{{ source.name }}</span> -->
                      <span v-if="source.id" class="source-checkbox-count">({{ getCount(item, source.id) }})</span>
                      <span v-else class="source-checkbox-count">({{ source.number }})</span>
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </template>

              <!-- 专利本身 -->
              <template v-else>
                <div v-if="['MC', 'CPC', 'UPC', 'LOC'].includes(item.value)" style="margin-bottom: 10px;">
                  <el-select v-model="item.select" @change="selectChange($event, item)" placeholder="请选择" size="small">
                    <el-option v-for="item in special[item.value]" :key="item.value" :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div style="display: flex;align-items: center;">
                  <template v-if="item.type == 'DateTime'">
                    <el-date-picker clear-icon v-model="item.valueOne" size="small" type="year" value-format="yyyy"
                      placeholder="请选择时间"></el-date-picker>
                    <span style="margin: 5px;">至</span>
                    <el-date-picker clear-icon v-model="item.valueTwo" size="small" type="year" value-format="yyyy"
                      placeholder="请选择时间"></el-date-picker>
                  </template>
                  <template v-else>
                    <el-input size="small" v-model="item.valueOne" placeholder="请输入内容"></el-input>
                  </template>
                  <el-button @click.stop="handleSearch(item)" size="small" type="primary" class="margin-left_10"
                    icon="el-icon-search" circle></el-button>
                </div>
                <el-checkbox-group v-model="item.check" @change="onChange">
                  <div class="source-checkbox">
                    {{ item.value }}
                    <el-checkbox v-for="source in item.options" :label="source.name" :key="source.name">
                      <el-tooltip :content="source.name" placement="top" effect="light">
                        <span class="source-checkbox-label text" :title="source.name">
                        {{ ['LG','PT','SS'].includes(item.value) ? typeStatus[item.value][source.name] : source.name }}
                        </span>
                      </el-tooltip>
                      <span class="source-checkbox-count">({{ source.number }})</span>
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </template>

              <div class="patent-query-filter-search-bottom">
                <el-button type="success" size="small" @click.stop="handleSelectAll(item)">全选</el-button>
                <el-button type="danger" size="small" @click.stop="handleSelectCancel(item)">取消</el-button>
                <el-button v-if="item.isShowBtn" type="primary" size="small"
                  @click.stop="handleLoading(item)">加载更多</el-button>
              </div>
            </el-collapse-item>
          </el-collapse>
        </template>
        <template v-else>
          <div>暂无数据</div>
        </template>
      </el-main>
      <!-- <el-footer style="display: flex;align-items: center;justify-content: end;">
        <slot name="footerBtn"></slot>

      </el-footer> -->
    </el-container>

  </div>
</template>

<script>
import mixins from './mixins/index'
export default {
  mixins: [mixins],
  props: {
    field: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  components: {

  },
  data() {
    return {
      // 专利IPC/CPC/UPC/LOC的选项
      special: {
        MC: [
          { value: 'IC', label: '部' },
          { value: 'IC2', label: '大类' },
          { value: 'IC3', label: '小类' },
          { value: 'IC4', label: '大组' },
          { value: 'IC5', label: '小组' },
        ],
        CPC: [
          { value: 'CPC', label: '部' },
          { value: 'CPC2', label: '大类' },
          { value: 'CPC3', label: '小类' },
          { value: 'CPC4', label: '大组' },
          { value: 'CPC5', label: '小组' },
        ],
        UPC: [
          // { value: '0', label: '分类号' },//老系统有
          { value: 'UPC', label: '大类' },
          { value: 'UPC2', label: '小类' },
        ],
        LOC: [
          // { value: '0', label: '分类号' },//老系统有
          { value: 'LOC', label: '大类' },
          { value: 'LOC2', label: '小类' },
        ],
      },
      typeStatus: {
        LG: {//法律状态暂定
          1: '有效',
          2: '无效',
          3: '审中',
        },
        PT: {//专利类型
          1: '发明',
          8: '发明',
          2: '实用新型',
          9: '实用新型',
          3: '外观',
        },
        SS: {//专利状态
          1: '有效',
          2: '无效',
          3: '审中',
        },
      },
    }
  },
  watch: {

  },
  mounted() {

  },
  methods: {
    //  专利IPC/CPC/UPC/LOC的选项变化
    selectChange(val, data) {
      this.$emit('selectChange', { val: val, data: data })
    },

    // 点击折叠面板中的搜索
    handleSearch(row) {
      if (row.filedKind == 0) {
        if (row.valueOne && row.valueTwo) {
          this.$emit('search', row)
        } else {
          this.$message.error('请输入完整的搜索范围')
          return
        }
      } else {
        this.$emit('search', row)
      }

    },

    // 选中的数据
    onChange(data, field) {
      // console.log(data, field);
      // var obj = {
      //   fieldId: field.value,
      //   fieldType: field.fieldType,
      //   value: [],
      //   isStatistic: true,
      // }
      // let arr = []
      // arr.push(obj)
      // this.$emit('customTab', arr)
      // console.log(obj);
    },
    // 全选
    handleSelectAll(val) {
      if (val.id) {//自定义字段的全选
        val.check = val.options.map(item => {
          return item.id
        })
      } else {//专利本身的全选，没有id
        val.check = val.options.map(item => {
          return item.name
        })
      }

    },
    // 取消
    handleSelectCancel(val) {
      val.check = []
    },
    // 加载更多
    handleLoading(val) {
      this.$emit('handleLoading', val)
    },
  },
}
</script>

<style lang="scss" scoped>
.customFieldsTab1 {
  .text {
    /* 超出10个字隐藏，之所以设置11em是因为省略号占一个位置 */
    max-width: 11em;
    overflow: hidden;
    /* 显示省略符号来代表被修剪的文本。 */
    text-overflow: ellipsis;
    /* 文本不换行 */
    white-space: nowrap;
  }
}
</style>