<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.complete_time_s" format="yyyy-MM-dd"  ></DatePicker>
           </Col>
           <Col span="8" offset="1">
             <span>结束时间：</span>
             <DatePicker type="date" v-model="searchInfo.complete_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" title="已办结"  width="180"></vxe-column>
              <vxe-column field="c3" title="处理中" width="180"></vxe-column>
            </vxe-colgroup>
            <vxe-colgroup title="化解方式">
              <vxe-column field="c4" title="人民调解" width="100"></vxe-column>
              <vxe-column field="c5" title="行政调解" width="180"></vxe-column>
              <vxe-column field="c6" title="司法调解" width="180"></vxe-column>
              <vxe-column field="c7" title="行业调解" width="180"></vxe-column>
              <vxe-column field="c8" title="仲裁" width="180"></vxe-column>
              <!-- 新增字段开始 -->
              <vxe-column field="c11" title="行政复议" width="180"></vxe-column>
              <vxe-column field="c12" title="行政裁决" width="180"></vxe-column>
              <vxe-column field="c13" title="法律监督" width="180"></vxe-column>
              <!-- 新增字段结束 -->
              <vxe-column field="c9" title="诉讼" width="120"></vxe-column>
              <vxe-column field="c14" title="信访三级办理" width="120"></vxe-column>
              <vxe-column field="c10" title="其它" width="100"></vxe-column>
            </vxe-colgroup>
        </vxe-table>
    </div>
   </div>
</template>

<script>
import { eventResolveStatisticsServiceImpl } from '@/api/contradiction.js'
import axios from 'axios'
import xeUtil from 'xe-utils'
export default {
  components: {},
  data () {
    return {
      searchInfo: {},
      tableData: []
    }
  },
  created () {
    this.loadList()
  },
  mounted () {},
  watch: {},
  computed: {},
  methods: {
    revert () {
      this.searchInfo.complete_time_s = ''
      this.searchInfo.complete_time_e = ''
      this.searchData()
    },
    searchData () {
      this.getData(this.searchInfo)
    },
    async handleDownload () {
      try {
        const response = await axios.post('/api/ac/jilinsscgsdp/EventStatisticsServiceImpl/eventResolveStatisticsExport', {}, {
          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)
        // 可以在这里添加错误提示
      }
    },
    loadList () {
      // this.mergeMethod()
      // this.tableData = data
      this.getData()
    },
    getData () {
      if (this.searchInfo.complete_time_s) {
        this.searchInfo.complete_time_s = xeUtil.toDateString(this.searchInfo.complete_time_s, 'yyyy-MM-dd')
      }
      if (this.searchInfo.complete_time_e) {
        this.searchInfo.complete_time_e = xeUtil.toDateString(this.searchInfo.complete_time_e, 'yyyy-MM-dd')
      }
      eventResolveStatisticsServiceImpl(this.searchInfo).then(res => {
        if (res.data.errcode === 0) {
          res.data.data.forEach(item => {
            item.c11 = item.c11 && item.c11 != null && item.c11 !== '' && item.c11 !== undefined ? item.c11 : 0
            item.c12 = item.c12 && item.c12 != null && item.c12 !== '' && item.c12 !== undefined ? item.c12 : 0
            item.c13 = item.c13 && item.c13 != null && item.c13 !== '' && item.c13 !== undefined ? item.c13 : 0
          })
          this.tableData = res.data.data
          return
        }
        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>
