<template>
  <div :class="$style.searchclassify">
    <!-- <a-tabs default-active-key="all" :class="$style.searchheader" @change="handleBusiness">
      <a-tab-pane v-for="item in bussinessTypeList" :key="item.value" :tab="item.title">
        <a-checkbox-group
          v-if="item.options && item.options.length > 0"
          v-model="bussinessTypeValue"
          name="checkboxgroup"
          :options="item.options"
          @change="onChange"
        />
        <a-divider v-if="item.options && item.options.length > 0" />
      </a-tab-pane>
    </a-tabs> -->

    <div :class="$style['search-content']">
      <div :class="$style.tool">
        <div :class="$style.result"
          ><span style="font-size:22px;color:#000">搜索词</span>"<span
            style="font-size:22px;color:red"
            >{{ searchVal }}</span
          >"
          <span style="padding-left:10px;font-size:16px;"
            >搜索相关结果约为<span :class="$style.count">{{ total }}</span
            >条</span
          >
        </div>
        <div :class="$style.rightsearch" style="display:none">
          <!-- 搜索方式 -->
          <div>
            <span>搜索方式：</span>
            <a-select default-value="splitWrod" @change="handleSearchstyle">
              <a-select-option value="splitWrod">
                模糊搜索
              </a-select-option>
              <a-select-option value="fullWrod">
                精准搜索
              </a-select-option>
            </a-select>
          </div>
          <!-- 排序 -->
          <div :class="$style.sort">
            <span>排序：</span>
            <a-select label-in-value :default-value="{ key: 'score' }" @change="handleSearchsort">
              <a-select-option v-for="item in sortByList" :key="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </div>
          <!-- 导出Excel -->
          <a-button @click="onExport">导出Excel</a-button>
        </div>
      </div>
      <a-divider />
      <a-spin :spinning="loading" :class="$style.spin" />
      <oa-search-list v-if="!loading" :search-list="searchList" :search-val="searchVal" />
      <div v-if="!loading && searchList.length > 0" :class="$style.pagination">
        <a-pagination
          v-if="total > 0"
          v-model="pagination.current"
          show-size-changer
          show-quick-jumper
          :total="total"
          :page-size="pagination.pageSize"
          :show-total="(total) => `共 ${total} 条`"
          @showSizeChange="onShowSizeChange"
          @change="onPageNumChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import download from '@/common/services/download'
import FullsearchService from './fullsearch-service'
import components from './_import-components/oa-fullsearch-content-import'
export default {
  name: 'OaFullsearchContent',
  metaInfo: {
    title: 'OaFullsearchContent',
  },
  components,
  props: {
    searchList: {
      type: Array,
      default: () => [],
    },
    searchVal: {
      type: String,
      default: '',
    },
    total: {
      type: Number,
      default: 0,
    },
    params: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      bussinessTypeList: [
        {
          title: '全部',
          value: 'all',
        },
      ],
      bussinessTypeValue: [],
      loading: false,
      sortByList: [
        {
          value: 'score',
          label: '按相关性',
        },
        {
          value: 'dateAsc',
          label: '按时间顺序',
        },
        {
          value: 'dateDesc',
          label: '按时间倒序',
        },
      ],
      pagination: {
        current: 1,
        pageSize: 10,
      },
    }
  },
  watch: {
    searchList(val) {
      this.loading = false
    },
    searchVal(val) {},
  },
  mounted() {
    this.getBusinessType()
  },
  methods: {
    // 获取业务类型分类
    getBusinessType() {
      FullsearchService.getCategoryList().then((res) => {
        res.data.forEach((item) => {
          const options = []
          if (item.children && item.children.length > 0) {
            item.children.forEach((k) => {
              options.push({
                label: k.text,
                value: parseInt(k.id),
              })
            })
          }
          this.bussinessTypeList.push({
            title: item.text,
            value: parseInt(item.id),
            options: options,
          })
        })
      })
    },
    // 业务类型
    handleBusiness(val) {
      this.loading = true
      this.bussinessTypeValue = []
      this.$emit('onSearch', [val], 'docTypeId')
    },
    // 业务类型子类型
    onChange(val) {
      this.loading = true
      this.$emit('onSearch', val, 'docTypeId')
    },
    // 搜索方式
    handleSearchstyle(val) {
      this.loading = true
      this.$emit('onSearch', val, 'searchType')
    },
    // 排序
    handleSearchsort(sort) {
      this.loading = true
      this.$emit('onSearch', sort.key, 'searchSort')
    },
    // 导出Excel
    onExport() {
      const newParams = JSON.parse(JSON.stringify(this.params))
      const tar = { exportCount: this.total }
      if (newParams.length > 1) {
        Object.assign(newParams[newParams.length - 1], tar)
      } else {
        Object.assign(newParams[0], tar)
      }
      FullsearchService.searchExport(newParams).then((res) => {
        const queryParams = {}
        queryParams.pathInfo = '/formfile/tmp/' + parseInt(res.id) + '.xls'
        FullsearchService.exportDownload(queryParams).then((r) => {
          // 下载
          const url = URL.createObjectURL(r)
          const fname = res.name
          download(url, fname)
        })
      })
    },
    // 分页 页码改变
    onPageNumChange(current, pageSize) {
      this.loading = true
      this.pagination.current = current
      const startPosition = current === 1 ? '1' : (pageSize * (current - 1)).toString()
      this.$emit('onSearch', startPosition, 'startPosition')
    },
    // pagesize
    onShowSizeChange(current, pageSize) {
      this.pagination.pageSize = pageSize
      this.$emit('onSearch', pageSize.toString(), 'maxResults')
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.searchclassify {
  min-width: 59%;
  :global(.ant-checkbox-group) {
    padding-left: 0.8rem;
    :global(.ant-checkbox-group-item) {
      margin-bottom: 0.8rem;
    }
  }

  .searchheader {
    background: #fff;
    :global(.ant-tabs-bar) {
      display: block;
      justify-content: flex-start;
      margin-bottom: 16px;
    }
  }
  .tool {
    display: flex;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    .result {
      padding-left: 16px;
      margin-left: -16px;
      border-left: 6px solid #ed2c2c;

      .count {
        margin: 0.1rem;
        color: red;
      }
    }
    .rightsearch {
      display: flex;
      .sort {
        margin-right: 0.8rem;
        margin-left: 0.8rem;
        :global(.ant-select) {
          min-width: 105px;
        }
      }
    }
  }
  :global(.ant-divider-horizontal) {
    margin: 10px 0;
  }
  .search-content {
    min-height: 600px;
    padding-bottom: 1rem;
    margin: 20px;
    margin-bottom: 2rem;
    background: #fff;
    .spin {
      width: 100%;
      margin-top: 4rem;
      text-align: center;
    }
    .pagination {
      margin-top: 1rem;
      margin-right: 1rem;
      text-align: right;
    }
  }
}
</style>
