<template>
  <div class="indicia">
    <div style="padding: 20px;">
      <div class="indicia-top-components">
        <div>
          <mySearch style="width: 500px" :SearchFields="searchFiled" @search="search" :searchValue="searchOption">
          </mySearch>
        </div>
        <div>
          <span>分组查询：</span>
          <el-select v-model="groupingValue" size="small" @change="changeGrouping" class="indicia-top-select">
            <el-option v-for="item in groupingOption" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <!-- <el-button size="small" type="primary" @click="importBtn" class="indicia-top-button">导 出</el-button> -->
        </div>
      </div>

      <!-- table及collapse组件 -->
      <div class="indicia-components" :style="{ 'height': sonHeight + 'px' }">
        <component :dataArr="tableCollapseList" :collapseList="collapseList" :queryParams="queryParams"
          :sonHeight="sonHeight" @collapseVal="collapseVal" :is="componentType" :loading="loading"
          :componentType="componentType">
        </component>
      </div>
      <!-- collapse分页 -->
      <div style="text-align: right;">
        <el-pagination background layout="total, prev, pager, next, jumper" :current-page.sync="queryParams.current"
          :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import indiciaCard from './card.vue'
import indiciaCollapse from './collapse.vue'
import { importExcel } from './mixins'
// import { downLoad2 } from "@/utils";
export default {
  components: {
    indiciaCollapse,
    indiciaCard,
  },
  mixins: [importExcel,],
  data() {
    return {
      componentType: 'indiciaCard',//切换组件，默认card组件
      // 检索条件
      searchFiled: [
        {
          label: '标注',
          value: 'markNoteText',
          type: 'String',
          placeholder: '请输入标注',
        },
        {
          label: '专利号',
          value: 'patentNo',
          type: 'String',
          placeholder: '请输入专利号',
        },
        {
          label: '标注人',
          value: 'createName',
          type: 'String',
          placeholder: '请输入标注人',
        },
        {
          label: '标注时间',
          value: 'markTime',
          type: '2',
          placeholder: '请选择标注时间',
        },
      ],
      //检索条件
      searchOption: {},
      groupingOption: [
        {
          label: '不分组',
          value: 'noGrouping',
        },
        {
          label: '专利号',
          value: 'patentNo',
        },
        {
          label: '标注人',
          value: 'createName',
        },
        {
          label: '标注时间',
          value: 'markTime',
        },
      ],//分组
      screenValue: 'markNoteText',//筛选的值
      screenInputValue: '',//筛选输入的值
      groupingValue: 'noGrouping',//分组的值
      queryParams: {
        current: 1,
        size: 10,
      },
      total: 0,
      tableCollapseList: [],//获取的数据
      collapseList: [],//collapse数据
      sonHeight: document.documentElement.clientHeight - 230,//页面高度
      loading: false,
      // searchOptions: [],//检索条件
    }
  },
  watch: {

  },
  mounted() {
    this.getList()
  },
  methods: {
    //获取检索条件检索
    search(val) {
      let params = {}
      val.forEach(item => {
        if (item.type == 3) {
          params[item.value] = item.searchValue.map(itemValue => {
            return itemValue.value
          })
        } else {
          params[item.value] = item.searchValue.label
        }
      })
      // 返回条件对象
      this.searchOption = this.$commonJS.ArrayToArray(val)
      // 调用查询接口
      this.queryParams.current = 1
      this.isCollapse()
    },
    // 请求card数据
    getList(val) {
      this.loading = true
      if (val) {
        // let a = this.searchOptions.filter(item => {
        //   return item.value != this.queryParams.groupField
        // })
        // a.push({ value: this.queryParams.groupField, content: val })
        var params = {
          searchQuery: `${this.queryParams.groupField}=${val}`
        }
      } else {
        var params = {
          ...this.queryParams,
          searchQuery: this.$commonJS.objectToString(this.searchOption || {}),
        }
      }
      this.$api.queryScratchWords(params).then((res) => {
        if (res.code == 200) {
          this.tableCollapseList = res.data.data
          if (!val) {
            this.total = res.data.total
          }
          this.loading = false
        }
      }).catch(error => {
        this.tableCollapseList = []
        if (!val) {
          this.total = 0
        }
        this.loading = false
      })
    },
    // 查询分组
    getCollapse() {
      this.loading = true
      let params = {
        //...扩展、展开
        searchQuery: this.$commonJS.objectToString(this.searchOption || {}),
        // search: this.searchOptions,
        ...this.queryParams,
      }
      this.$api.queryScratchWordsGroup(params).then((res) => {
        if (res.code == 200) {
          this.collapseList = res.data.data
          this.total = res.data.total
          this.loading = false
          if (this.collapseList.length > 0) {
            this.getList(this.collapseList[0].key)
          }
        }
      }).catch(error => {
        this.collapseList = []
        this.total = 0
        this.loading = false
      })
    },
    // 判断是查询分组还是只检索
    isCollapse() {
      if (this.componentType == 'indiciaCard') {
        this.getList()
      } else {
        this.getCollapse()
      }
    },
    // 搜索事件
    screenBtn() {
      this.editSearchOptions()
      this.isCollapse()
      this.screenInputValue = ''
    },
    // 修改检索数组
    // editSearchOptions() {
    //   this.searchOptions.push(
    //     {
    //       value: this.screenValue,
    //       label: this.screenOptions.find(item => { return item.value == this.screenValue }).label,
    //       content: this.screenInputValue,
    //     }
    //   )
    // },
    // 分组监听事件
    changeGrouping(val) {
      this.queryParams.current = 1
      if (val == 'noGrouping') {//不分组
        this.componentType = 'indiciaCard'
      } else {
        this.componentType = 'indiciaCollapse'
        this.queryParams.groupField = val
      }
      this.isCollapse()
    },
    // 分页
    handleCurrentChange(val) {
      this.queryParams.current = val
      this.isCollapse()
    },
    // 获取输入框提示信息
    // getPlaceholder() {
    //   let a = this.screenOptions.filter(item => {
    //     return item.value == this.screenValue
    //   })
    //   return a[0].placeholder
    // },
    // 删除检索条件
    // handleDelete(val, index) {
    //   this.searchOptions.splice(index, 1)
    //   this.isCollapse()
    // },
    // 子组件
    collapseVal(val) {
      this.getList(val)
    },
  },
}
</script>
<style lang="scss" scoped>
.indicia {
  width: 100%;
  height: 100%;
  min-width: 950px;
  background: white;

  .indicia-top-components {
    margin-bottom: 20px;
    // padding-right: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .indicia-top-select {
    width: 150px;
  }

  .indicia-top-button {
    margin-left: 10px;
  }

  .indicia-components {
    margin-bottom: 20px;
    overflow: auto;
    // padding-right: 40px;
  }

}
</style>