<template>
   <div class="disputetype">
     <div class="search-div">
       <div style="width: 90%">
         <Row>
           <Col span="8" offset="1">
             <span>开始时间：</span>
             <DatePicker type="date" v-model="searchInfo.occurrence_time_s" format="yyyy-MM-dd"  ></DatePicker>
           </Col>
           <Col span="8" offset="1">
             <span>结束时间：</span>
             <DatePicker type="date" v-model="searchInfo.occurrence_time_e" format="yyyy-MM-dd" ></DatePicker>
           </Col>
           <Col span="2">
             <Button type="primary" @click="searchData">查询</Button>
           </Col>
           <Col span="2">
            <Button type="primary" @click="revert">重置</Button>
          </Col>
           <Col span="2">
             <Button type="primary" @click="handleDownload" style="float:right;margin-left: 10px;">导出</Button>
           </Col>
         </Row>
       </div>
     </div>

     <div class="disputetype-title">
      重点行业领域矛盾纠纷情况统计表
     </div>
     <div class="disputetype-content">
        <vxe-table align="center" :data="tableData" class="table"  :span-method="mergeMethod">
            <vxe-column type="seq" width="60" title="序号"></vxe-column>
            <vxe-column field="name" width="100" title="地区"></vxe-column>
            <vxe-column field="total_count" width="160" title="纠纷数量"></vxe-column>
            <vxe-colgroup title="办理状态">
                <vxe-column field="c2" width="180"  title="已办结"></vxe-column>
                <vxe-column field="c3" width="180" title="处理中"></vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="纠纷类型">
              <vxe-column field="c4" width="180" title="婚恋家庭"></vxe-column>
              <vxe-column field="c5" width="180" title="邻里关系"></vxe-column>
              <vxe-column field="c6" width="180" title="经济金融"></vxe-column>
              <vxe-column field="c7" width="180" title="欠资欠薪"></vxe-column>
              <vxe-column field="c8" width="180" title="征地拆迁"></vxe-column>
              <vxe-column field="c9" width="180" title="医疗卫生"></vxe-column>
              <vxe-column field="c10" width="180" title="交通运输"></vxe-column>
              <vxe-column field="c11" width="180" title="房地产"></vxe-column>
              <vxe-column field="c12" width="180" title="物业管理"></vxe-column>
              <vxe-column field="c13" width="180" title="山林土地"></vxe-column>
              <vxe-column field="c16" width="180" title="旅游旅行"></vxe-column>
              <vxe-column field="c15" width="180" title="市场监管"></vxe-column>
              <vxe-column field="c14" width="180" title="教育领域"></vxe-column>
              <vxe-column field="c17" width="180" title="求职求学"></vxe-column>
              <vxe-column field="c18" width="180" title="退役军人"></vxe-column>
              <vxe-column field="c22" width="180" title="劳动就业"></vxe-column>
              <vxe-column field="c21" width="180" title="债务纠纷"></vxe-column>
              <vxe-column field="c19" width="180" title="重点信访事项"></vxe-column>
              <vxe-column field="c20" width="180" title="重点涉法涉诉类矛盾"></vxe-column>
              <vxe-column field="c24" width="180" title="环境纠纷"></vxe-column>
              <vxe-column field="c25" width="180" title="网络领域"></vxe-column>
              <vxe-column field="c26" width="180" title="劳动人事和劳资纠纷"></vxe-column>
              <vxe-column field="c23" width="180" title="其他"></vxe-column>
            </vxe-colgroup>
        </vxe-table>
    </div>
   </div>
</template>

<script>
import { eventCategoryStatisticsServiceImpl } from '@/api/contradiction'
import xeUtil from 'xe-utils'
import axios from 'axios'
export default {
  components: {},
  data () {
    return {
      searchInfo: {},
      tableData: [
      ]
    }
  },
  created () {

  },
  mounted () {
    this.getList()
  },
  watch: {},
  computed: {},
  methods: {
    revert () {
      this.searchInfo.occurrence_time_s = ''
      this.searchInfo.occurrence_time_e = ''
      this.searchData()
    },
    searchData () {
      this.getList(this.searchInfo)
    },
    async handleDownload () {
      try {
        if (this.searchInfo.occurrence_time_s) {
          this.searchInfo.occurrence_time_s = xeUtil.toDateString(this.searchInfo.occurrence_time_s, 'yyyy-MM-dd')
        }
        if (this.searchInfo.occurrence_time_e) {
          this.searchInfo.occurrence_time_e = xeUtil.toDateString(this.searchInfo.occurrence_time_e, 'yyyy-MM-dd')
        }
        const response = await axios.post('/api/ac/jilinsscgsdp/EventStatisticsServiceImpl/eventCategoryStatisticsExport', this.searchInfo, {
          responseType: 'blob'
        })
        const url = window.URL.createObjectURL(new Blob([response.data]))
        // 创建隐藏的a标签并设置属性
        const link = document.createElement('a')
        link.href = url
        link.download = '重点行业领域矛盾纠纷情况统计表导出.xlsx' // 自定义下载文件名和扩展名
        link.style.display = 'none'
        document.body.appendChild(link)
        // 触发点击下载
        link.click()
        // 清理
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
      } catch (error) {
        console.error('下载失败:', error)
        // 可以在这里添加错误提示
      }
    },
    getList () {
      if (this.searchInfo.occurrence_time_s) {
        this.searchInfo.occurrence_time_s = xeUtil.toDateString(this.searchInfo.occurrence_time_s, 'yyyy-MM-dd')
      }
      if (this.searchInfo.occurrence_time_e) {
        this.searchInfo.occurrence_time_e = xeUtil.toDateString(this.searchInfo.occurrence_time_e, 'yyyy-MM-dd')
      }
      eventCategoryStatisticsServiceImpl(this.searchInfo).then(res => {
        if (res.data.errcode === 0) {
          this.tableData = res.data.data
        } else {
          this.$Message.error(res.data.errmsg)
        }
      })
    },
    mergeMethod ({ row, _rowIndex, column, visibleData, _columnIndex }) {
      const fields = ['name']
      const cellValue = row[column.field]
      if (cellValue && fields.includes(column.field)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow[column.field] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.field] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
      // if(_rowIndex === this.tableData.length-1){
      //     if(_columnIndex == 1){
      //         return { rowspan: 1, colspan: 3 }
      //     } else if(_columnIndex == 2){
      //         return { rowspan: 0, colspan: 0 }
      //     } else if(_columnIndex == 3){
      //         return { rowspan: 0, colspan: 0 }
      //     }
      // }
    }
  }
}
</script>
<style  scoped>
.search-div {
  float: left;
  width: 100%;
  padding: 15px 30px 15px 15px;
  border: 1px solid skyblue;
  border-radius: 5px;
  background-color: #f6fdfd;
  margin-bottom: 15px;
}
.disputetype{
    background: #fff;
    padding: 20px;
}
/deep/ .vxe-header--column{
    border-right:1px solid #e8eaec;
}
/deep/ .vxe-body--column{
    border-right:1px solid #e8eaec;
}
.disputetype-title{
    font-size:24px;
    font-weight:bold;
    margin:0 auto;
    text-align: center;
    padding:20px 0;
}
</style>
