<template>
  <div class="table-page">
    <div class="table-page-content">
      <leftLsit ref="classifyList" :statsClassify="statsClassify" @classifyChange="classifyChange"></leftLsit>
      <div class="right-table">
        <div class="full-page bg">
          <div class="search-box">
            <!--            <div ref="btnPanel" class="btn-box">-->
            <!--              <el-button :loading="downloadLoading" class="btn btn-plus" icon="el-icon-download"-->
            <!--                         size="mini" type="success" @click="exportData">导出-->
            <!--              </el-button>-->
            <!--            </div>-->
            <div class="search-box-combination">
              <el-date-picker
                v-model="params.querys[0].value"
                end-placeholder="结束日期"
                range-separator="至"
                start-placeholder="开始日期"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="timeChange">
              </el-date-picker>
              <!-- 引入搜索组件，传递 optionList 数据，监听 search 事件 -->
              <SearchCommon :optionList="optionList" @search="handleSearch" />
            </div>
          </div>
          <div class="main-table-container">
            <div class="table-container" style="padding: 20px">
              <div ref="btnPanel" class="btn-box">
                <el-button
                  :loading="downloadLoading"
                  class="btn btn-plus"
                  icon="el-icon-download"
                  size="mini"
                  type="success"
                  @click="exportData"
                >导出
                </el-button>
              </div>
              <div ref="tableRef" class="table-content">
                <el-table v-show="typeShow === 'theRoadNetworkIsOperatingDay'" ref="multipleSelection"
                          v-loading="tableLoading" :data="tableData"
                          :max-height="tableMaxHeight"
                          border
                          class="table-list"
                          element-loading-background="rgba(10 ,38 ,61, 0.9)" row-key="id" stripe
                >
                  <el-table-column align="center" label="序号" type="index" width="70" />
                  <el-table-column align="center" label="公司" prop="companyName" width="120"></el-table-column>
                  <el-table-column align="center" label="国高网" prop="roadCode" width="80"></el-table-column>
                  <el-table-column align="center" label="路段" prop="roadName" width="100"></el-table-column>
                  <el-table-column
                    :formatter="({startTime}) => startTime !== undefined && startTime !== null ? startTime : '-'"
                    align="center" label="开始时间"
                    prop="startTime"
                    width="170"></el-table-column>
                  <el-table-column
                    :formatter="({endTime}) => endTime !== undefined && endTime !== null ? endTime : '-'"
                    align="center" label="结束时间"
                    prop="endTime"
                    width="170"></el-table-column>
                  <el-table-column
                    :formatter="({take}) => take !== undefined && take !== null ? take : '-'"
                    align="center" label="时间小计(分钟)"
                    prop="take"
                    width="120"></el-table-column>
                  <el-table-column
                    :formatter="({placeName}) => placeName !== undefined && placeName !== null ? placeName : '-'"
                    align="center"
                    label="起止桩号、站名、方向"
                    prop="placeName" width="160"></el-table-column>
                  <el-table-column align="center" label="突发性事件">
                    <el-table-column
                      align="center"
                      label="灾害天气"
                      prop="name">
                      <el-table-column
                        :formatter="({ogNum}) => ogNum !== undefined && ogNum !== null ? ogNum : '-'"
                        align="center"
                        label="雾"
                        prop="ogNum"
                        width="80">
                      </el-table-column>
                      <el-table-column
                        :formatter="({rainNum}) => rainNum !== undefined && rainNum !== null ? rainNum : '-'"
                        align="center"
                        label="雨"
                        prop="rainNum"
                        width="80">
                      </el-table-column>
                      <el-table-column
                        :formatter="({snowNum}) => snowNum !== undefined && snowNum !== null ? snowNum : '-'"
                        align="center"
                        label="雪"
                        prop="snowNum"
                        width="80">
                      </el-table-column>
                      <el-table-column
                        :formatter="({icingNum}) => icingNum !== undefined && icingNum !== null ? icingNum : '-'"
                        align="center"
                        label="路面结冰"
                        prop="icingNum"
                        width="100">
                      </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="交通事故">
                      <el-table-column
                        :formatter="({outTunnelNum}) => outTunnelNum !== undefined && outTunnelNum !== null ? outTunnelNum : '-'"
                        align="center"
                        label="隧道内(次)"
                        prop="outTunnelNum"
                        width="110">
                      </el-table-column>
                      <el-table-column
                        :formatter="({outTunnelHandTime}) => outTunnelHandTime !== undefined && outTunnelHandTime !== null ? outTunnelHandTime : '-'"
                        align="center"
                        label="处置时间(分钟)"
                        prop="outTunnelHandTime"
                        width="140">
                      </el-table-column>
                      <el-table-column
                        :formatter="({inTunnelNum}) => inTunnelNum !== undefined && inTunnelNum !== null ? inTunnelNum : '-'"
                        align="center"
                        label="隧道外(次)"
                        prop="inTunnelNum"
                        width="110">
                      </el-table-column>
                      <el-table-column
                        :formatter="({inTunnelHandTime}) => inTunnelHandTime !== undefined && inTunnelHandTime !== null ? inTunnelHandTime : '-'"
                        align="center"
                        label="处置时间(分钟)"
                        prop="inTunnelHandTime"
                        width="140">
                      </el-table-column>
                      <el-table-column
                        :formatter="({zip}) => zip !== undefined && zip !== null ? zip : '-'"
                        align="center"
                        label="特殊结构物"
                        prop="zip"
                        width="110">
                      </el-table-column>
                    </el-table-column>
                    <el-table-column
                      :formatter="({otRoadNum}) => otRoadNum !== undefined && otRoadNum !== null ? otRoadNum : '-'"
                      align="center" label="故障车占道"
                      prop="otRoadNum"
                      width="110"></el-table-column>
                    <el-table-column
                      :formatter="({trafficNum}) => trafficNum !== undefined && trafficNum !== null ? trafficNum : '-'"
                      align="center" label="突发车流量"
                      prop="trafficNum"
                      width="110"></el-table-column>
                    <el-table-column
                      :formatter="({addressDisasterNum}) => addressDisasterNum !== undefined && addressDisasterNum !== null ? addressDisasterNum : '-'"
                      align="center"
                      label="地质灾害"
                      prop="addressDisasterNum"
                      width="100"></el-table-column>
                    <el-table-column
                      :formatter="({powerNum}) => powerNum !== undefined && powerNum !== null ? powerNum : '-'"
                      align="center" label="非正常供电"
                      prop="powerNum"
                      width="110"></el-table-column>
                    <el-table-column
                      :formatter="({tfOtherNum}) => tfOtherNum !== undefined && tfOtherNum !== null ? tfOtherNum : '-'"
                      align="center" label="其他"
                      prop="tfOtherNum"
                      width="80"></el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="计划性事件">
                    <el-table-column
                      :formatter="({dutyControlNum}) => dutyControlNum !== undefined && dutyControlNum !== null ? dutyControlNum : '-'"
                      align="center"
                      label="勤务管制"
                      prop="dutyControlNum"
                      width="100"></el-table-column>
                    <el-table-column
                      :formatter="({constructionNum}) => constructionNum !== undefined && constructionNum !== null ? constructionNum : '-'"
                      align="center"
                      label="养护施工"
                      prop="constructionNum"
                      width="100"></el-table-column>
                    <el-table-column
                      :formatter="({jhxOtherNum}) => jhxOtherNum !== undefined && jhxOtherNum !== null ? jhxOtherNum : '-'"
                      align="center" label="其他"
                      prop="jhxOtherNum"
                      width="80"></el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="管制情况">
                    <el-table-column
                      :formatter="({measureType}) => measureType !== undefined && measureType !== null ? dictionaryEscape('gzcs', measureType) : '-'"
                      align="center" label="管制措施"
                      prop="measureType"
                      width="100"></el-table-column>
                    <el-table-column
                      :formatter="({measureMileage}) => measureMileage !== undefined && measureMileage !== null ? measureMileage : '-'"
                      align="center"
                      label="管制延公里数(公里)"
                      prop="measureMileage"
                      width="140"></el-table-column>
                    <el-table-column
                      :formatter="({measureQz}) => measureQz !== undefined && measureQz !== null ? measureQz : '-'"
                      align="center" label="管制综合Q值"
                      prop="measureQz"
                      width="110"></el-table-column>
                  </el-table-column>
                  <el-table-column
                    align="center" label="事件描述" prop="memo"
                    width="300">
                    <template slot-scope="scope">
                      <div v-if="scope.row.memo !== undefined && scope.row.memo !== null" :title="scope.row.memo"
                           class="text-desc">
                        {{ scope.row.memo }}
                      </div>
                      <div v-else>-</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    :formatter="({disposition}) => disposition !== undefined && disposition !== null ? disposition : '-'"
                    align="center" label="处理措施"
                    prop="disposition" show-overflow-tooltip
                    width="100"></el-table-column>
                  <el-table-column :formatter="
                      ({status}) =>
                        dictionaryEscape('gzzt', status) || '-'
                    " align="center" label="当前状态" prop="status"
                                   width="100"></el-table-column>
                  <el-table-column align="center" label="人员伤亡">
                    <el-table-column
                      :formatter="({hurtUserNum}) => hurtUserNum !== undefined && hurtUserNum !== null ? hurtUserNum : '-'"
                      align="center" label="伤"
                      prop="hurtUserNum"
                      width="80"></el-table-column>
                    <el-table-column
                      :formatter="({deadUserNum}) => deadUserNum !== undefined && deadUserNum !== null ? deadUserNum : '-'"
                      align="center" label="死"
                      prop="deadUserNum"
                      width="80"></el-table-column>
                  </el-table-column>
                </el-table>

                <el-table v-show="typeShow === 'theRoadNetworkIsOperatingMonth'" id="fixRowIndexTable"
                          ref="multipleSelection" v-loading="tableLoading"
                          :data="tableData"
                          :max-height="tableMaxHeight"
                          :row-style="checkRowIndex" :summary-method="getSummaries"
                          border class="table-list"
                          element-loading-background="rgba(10 ,38 ,61, 0.9)" row-key="id" show-summary stripe
                >
                  <el-table-column align="center" label="序号" type="index" width="70" />
                  <el-table-column align="center" label="国高网" prop="roadCode" width="80"></el-table-column>
                  <el-table-column align="center" label="路段" prop="roadName" width="100"></el-table-column>
                  <el-table-column
                    :formatter="({measureMileage}) => measureMileage !== undefined && measureMileage !== null ? measureMileage : '-'"
                    align="center"
                    label="路段延公里数"
                    prop="measureMileage"
                    width="120"></el-table-column>
                  <el-table-column
                    :formatter="({measureDate}) => measureDate !== undefined && measureDate !== null ? measureDate : '-'"
                    align="center" label="月份"
                    prop="measureDate"
                    width="100"></el-table-column>
                  <el-table-column align="center" label="突发性事件">
                    <el-table-column align="center" label="事件类型">
                      <el-table-column
                        align="center"
                        label="灾害天气"
                        prop="name">
                        <el-table-column
                          :formatter="({fogNum}) => fogNum !== undefined && fogNum !== null ? fogNum : '-'"
                          align="center"
                          label="雾"
                          prop="fogNum"
                          width="80">
                        </el-table-column>
                        <el-table-column
                          :formatter="({rainNum}) => rainNum !== undefined && rainNum !== null ? rainNum : '-'"
                          align="center"
                          label="雨"
                          prop="rainNum"
                          width="80">
                        </el-table-column>
                        <el-table-column
                          :formatter="({snowNum}) => snowNum !== undefined && snowNum !== null ? snowNum : '-'"
                          align="center"
                          label="雪"
                          prop="snowNum"
                          width="80">
                        </el-table-column>
                        <el-table-column
                          :formatter="({icingNum}) => icingNum !== undefined && icingNum !== null ? icingNum : '-'"
                          align="center"
                          label="路面结冰"
                          prop="icingNum"
                          width="100">
                        </el-table-column>
                      </el-table-column>
                      <el-table-column align="center" label="交通事故">
                        <el-table-column
                          :formatter="({outTunnelNum}) => outTunnelNum !== undefined && outTunnelNum !== null ? outTunnelNum : '-'"
                          align="center"
                          label="隧道内(次)"
                          prop="outTunnelNum"
                          width="110">
                        </el-table-column>
                        <el-table-column
                          :formatter="({outTunnelHandTime}) => outTunnelHandTime !== undefined && outTunnelHandTime !== null ? outTunnelHandTime : '-'"
                          align="center"
                          label="处置时间(分钟)"
                          prop="outTunnelHandTime"
                          width="140">
                        </el-table-column>
                        <el-table-column
                          :formatter="({inTunnelNum}) => inTunnelNum !== undefined && inTunnelNum !== null ? inTunnelNum : '-'"
                          align="center"
                          label="隧道外(次)"
                          prop="inTunnelNum"
                          width="110">
                        </el-table-column>
                        <el-table-column
                          :formatter="({inTunnelHandTime}) => inTunnelHandTime !== undefined && inTunnelHandTime !== null ? inTunnelHandTime : '-'"
                          align="center"
                          label="处置时间(分钟)"
                          prop="inTunnelHandTime"
                          width="140">
                        </el-table-column>
                      </el-table-column>
                      <el-table-column
                        :formatter="({otRoadNum}) => otRoadNum !== undefined && otRoadNum !== null ? otRoadNum : '-'"
                        align="center" label="故障车占道"
                        prop="otRoadNum"
                        width="110"></el-table-column>
                      <el-table-column
                        :formatter="({trafficNum}) => trafficNum !== undefined && trafficNum !== null ? trafficNum : '-'"
                        align="center" label="突发车流量"
                        prop="trafficNum"
                        width="110"></el-table-column>
                      <el-table-column
                        :formatter="({addressDisasterNum}) => addressDisasterNum !== undefined && addressDisasterNum !== null ? addressDisasterNum : '-'"
                        align="center" label="地质灾害"
                        prop="addressDisasterNum"
                        width="100"></el-table-column>
                      <el-table-column
                        :formatter="({powerNum}) => powerNum !== undefined && powerNum !== null ? powerNum : '-'"
                        align="center" label="非正常供电"
                        prop="powerNum"
                        width="110"></el-table-column>
                      <el-table-column
                        :formatter="({tfOtherNum}) => tfOtherNum !== undefined && tfOtherNum !== null ? tfOtherNum : '-'"
                        align="center" label="其他"
                        prop="tfOtherNum"
                        width="80"></el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="管制措施">
                      <el-table-column
                        :formatter="({tfZdNum}) => tfZdNum !== undefined && tfZdNum !== null ? tfZdNum : '-'"
                        align="center" label="占道" prop="tfZdNum"
                        width="80"></el-table-column>
                      <el-table-column
                        :formatter="({tfDdstNum}) => tfDdstNum !== undefined && tfDdstNum !== null ? tfDdstNum : '-'"
                        align="center" label="单道双通" prop="tfDdstNum"
                        width="100"></el-table-column>
                      <el-table-column
                        :formatter="({tfBffbNum}) => tfBffbNum !== undefined && tfBffbNum !== null ? tfBffbNum : '-'"
                        align="center" label="半幅封闭" prop="tfBffbNum"
                        width="100"></el-table-column>
                      <el-table-column
                        :formatter="({tfQffbNum}) => tfQffbNum !== undefined && tfQffbNum !== null ? tfQffbNum : '-'"
                        align="center" label="全幅封闭" prop="tfQffbNum"
                        width="100"></el-table-column>
                      <el-table-column
                        :formatter="({tfRkfbNum}) => tfRkfbNum !== undefined && tfRkfbNum !== null ? tfRkfbNum : '-'"
                        align="center" label="入口封闭" prop="tfRkfbNum"
                        width="100"></el-table-column>
                      <el-table-column
                        :formatter="({tfRkcdfbNum}) => tfRkcdfbNum !== undefined && tfRkcdfbNum !== null ? tfRkcdfbNum : '-'"
                        align="center" label="入口车道封闭"
                        prop="tfRkcdfbNum"
                        width="120"></el-table-column>
                      <el-table-column
                        :formatter="({tfRkcdxlNum}) => tfRkcdxlNum !== undefined && tfRkcdxlNum !== null ? tfRkcdxlNum : '-'"
                        align="center" label="入口车道限流"
                        prop="tfRkcdxlNum"
                        width="120"></el-table-column>
                      <el-table-column
                        :formatter="({tfCkfbNum}) => tfCkfbNum !== undefined && tfCkfbNum !== null ? tfCkfbNum : '-'"
                        align="center" label="关闭出口" prop="tfCkfbNum"
                        width="100"></el-table-column>
                      <el-table-column
                        :formatter="({tfCkcdfbNum}) => tfCkcdfbNum !== undefined && tfCkcdfbNum !== null ? tfCkcdfbNum : '-'"
                        align="center" label="出口车道封闭"
                        prop="tfCkcdfbNum"
                        width="120"></el-table-column>
                      <el-table-column
                        :formatter="({tfCkcdxlNum}) => tfCkcdxlNum !== undefined && tfCkcdxlNum !== null ? tfCkcdxlNum : '-'"
                        align="center" label="出口车道限流"
                        prop="tfCkcdxlNum"
                        width="120"></el-table-column>
                      <el-table-column
                        :formatter="({tfCrkfbNum}) => tfCrkfbNum !== undefined && tfCrkfbNum !== null ? tfCrkfbNum : '-'"
                        align="center" label="出入口封闭"
                        prop="tfCrkfbNum"
                        width="110"></el-table-column>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="计划性事件">
                    <el-table-column align="center" label="事件类型">
                      <el-table-column
                        :formatter="({dutyControlNum}) => dutyControlNum !== undefined && dutyControlNum !== null ? dutyControlNum : '-'"
                        align="center" label="勤务管制"
                        prop="dutyControlNum"
                        width="100"></el-table-column>
                      <el-table-column
                        :formatter="({constructionNum}) => constructionNum !== undefined && constructionNum !== null ? constructionNum : '-'"
                        align="center" label="养护施工"
                        prop="constructionNum"
                        width="100"></el-table-column>
                      <el-table-column
                        :formatter="({jhxQtNum}) => jhxQtNum !== undefined && jhxQtNum !== null ? jhxQtNum : '-'"
                        align="center" label="其他"
                        prop="jhxQtNum"
                        width="80"></el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="管制措施">
                      <el-table-column
                        :formatter="({jhxZdNum}) => jhxZdNum !== undefined && jhxZdNum !== null ? jhxZdNum : '-'"
                        align="center" label="占道" prop="jhxZdNum"
                        width="80"></el-table-column>
                      <el-table-column
                        :formatter="({jhxDdstNum}) => jhxDdstNum !== undefined && jhxDdstNum !== null ? jhxDdstNum : '-'"
                        align="center" label="单道双通" prop="jhxDdstNum"
                        width="100"></el-table-column>
                      <el-table-column
                        :formatter="({jhxBffbNum}) => jhxBffbNum !== undefined && jhxBffbNum !== null ? jhxBffbNum : '-'"
                        align="center" label="半幅封闭" prop="jhxBffbNum"
                        width="100"></el-table-column>
                      <el-table-column
                        :formatter="({jhxQffbNum}) => jhxQffbNum !== undefined && jhxQffbNum !== null ? jhxQffbNum : '-'"
                        align="center" label="全幅封闭" prop="jhxQffbNum"
                        width="100"></el-table-column>
                      <el-table-column
                        :formatter="({jhxRkfbNum}) => jhxRkfbNum !== undefined && jhxRkfbNum !== null ? jhxRkfbNum : '-'"
                        align="center" label="入口封闭" prop="jhxRkfbNum"
                        width="100"></el-table-column>
                      <el-table-column
                        :formatter="({jhxRkcdfbNum}) => jhxRkcdfbNum !== undefined && jhxRkcdfbNum !== null ? jhxRkcdfbNum : '-'"
                        align="center" label="入口车道封闭"
                        prop="jhxRkcdfbNum"
                        width="120"></el-table-column>
                      <el-table-column
                        :formatter="({jhxRkcdxlNum}) => jhxRkcdxlNum !== undefined && jhxRkcdxlNum !== null ? jhxRkcdxlNum : '-'"
                        align="center" label="入口车道限流"
                        prop="jhxRkcdxlNum"
                        width="120"></el-table-column>
                      <el-table-column
                        :formatter="({jhxCkfbNum}) => jhxCkfbNum !== undefined && jhxCkfbNum !== null ? jhxCkfbNum : '-'"
                        align="center" label="关闭出口" prop="jhxCkfbNum"
                        width="100"></el-table-column>
                      <el-table-column
                        :formatter="({jhxCkcdfbNum}) => jhxCkcdfbNum !== undefined && jhxCkcdfbNum !== null ? jhxCkcdfbNum : '-'"
                        align="center" label="出口车道封闭"
                        prop="jhxCkcdfbNum"
                        width="120"></el-table-column>
                      <el-table-column
                        :formatter="({jhxCkcdxlNum}) => jhxCkcdxlNum !== undefined && jhxCkcdxlNum !== null ? jhxCkcdxlNum : '-'"
                        align="center" label="出口车道限流"
                        prop="jhxCkcdxlNum"
                        width="120"></el-table-column>
                      <el-table-column
                        :formatter="({jhxCrkfbNum}) => jhxCrkfbNum !== undefined && jhxCrkfbNum !== null ? jhxCrkfbNum : '-'"
                        align="center" label="出入口封闭"
                        prop="jhxCrkfbNum"
                        width="110"></el-table-column>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column
                    :formatter="({measureQz}) => measureQz !== undefined && measureQz !== null ? measureQz : '-'"
                    align="center" label="管制综合Q值"
                    prop="measureQz"
                    width="140"></el-table-column>
                  <el-table-column
                    :formatter="({smoothRate}) => smoothRate !== undefined && smoothRate !== null ? smoothRate : '-'"
                    align="center" label="畅通率"
                    prop="smoothRate"
                    width="140"></el-table-column>
                  <el-table-column align="center" label="人员伤亡">
                    <el-table-column
                      :formatter="({hurtUserNum}) => hurtUserNum !== undefined && hurtUserNum !== null ? hurtUserNum : '-'"
                      align="center" label="伤" prop="hurtUserNum"
                      width="80"></el-table-column>
                    <el-table-column
                      :formatter="({deadUserNum}) => deadUserNum !== undefined && deadUserNum !== null ? deadUserNum : '-'"
                      align="center" label="死" prop="deadUserNum"
                      width="80"></el-table-column>
                  </el-table-column>
                </el-table>

                <pagination
                  ref="paginationPanel"
                  :pageResult="params.pageBean"
                  style="margin-top: 10px"
                  @size-change="handleSizeChangeCustom"
                  @current-change="handleCurrentChangeCustom"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import SearchCommon from '@/components/SearchCommon/index.vue' // 引入搜索组件
import PubSub from 'pubsub-js' // 引入事件发布-订阅库
import {TableMixin} from '@/mixins/tableMixin' // 引入表格混入
import {refineRequestBody} from '@/utils/requestWrappers' // 引入请求处理工具函数
import {dictionaryEscape} from '@/utils/dictionary' // 引入字典处理工具函数
import leftLsit from '../LeftList' // 引入左侧列表组件
import {classifyDataInJs} from '../../classifyData' // 引入分类数据和表格列配置
import {
  exportDayReport,
  exportMonthReport,
  getTree,
  theRoadNetworkIsOperatingDay,
  theRoadNetworkIsOperatingMonth
} from '@/api/patrolAndRescue/commandDispatch/roadNetworkReport'
import pagination from '@/components/SuperPagination/index.vue'

export default {
  name: 'TablePage',
  components: {
    pagination,
    SearchCommon,
    leftLsit
  },
  mixins: [TableMixin],
  data() {
    return {
      timeValue: [],
      typeShow: '1',
      downloadLoading: false,
      pubSub: null,
      tableMaxHeight: '600px',
      tableLoading: true,
      btnLoading: false,
      tableData: [],
      optionList: [
        {
          title: '所属路段',
          prop: 'ei.road_id_',
          type: 'select',
          option: [],
          default: true
        }
      ],
      params: {
        pageBean: {pageSize: 20, page: 1, total: 0},
        querys: [
          {operation: 'BETWEEN', property: 'ei.event_time_', value: []},
          {operation: 'IN', property: 'ei.road_id_'}
        ],
        sorter: []
      },
      statsClassify: [],
      tableColumn: [],
      aggregate: {}
    }
  },
  created() {
    this.$nextTick(() => {
      const startOfMonth = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
      const endOfMonth = moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')
      this.params.querys[0].value = [startOfMonth, endOfMonth]
      this.getOrgTreeData()
      this.statsClassify = classifyDataInJs()   // 初始化分类数据
      this.typeShow = this.statsClassify[0].type
      this.$refs.classifyList?.classifyChange(this.statsClassify[0])   // 触发分类变更事件
    })
  },
  // 组件挂载时的钩子函数
  mounted() {
    this.pubSub = PubSub.subscribe('TablePage', (_, data) => {
      switch (data.type) {
        case 'add':
          this.handleCurrentChange(1)      // 添加数据后刷新第一页
          break
        case 'edit':
          this.loadData()    // 编辑数据后刷新表格
          break
      }
    })
  },
  // 组件更新前的钩子函数
  beforeUpdate() {
    this.$nextTick(() => {
      this.$refs['multipleSelection'].doLayout()
    })
  },
  methods: {
    //字典
    dictionaryEscape,

    async exportData() {
      this.downloadLoading = true
      try {
        this.typeShow === 'theRoadNetworkIsOperatingDay'
          ? await exportDayReport(this.params) : await exportMonthReport(this.params)
        this.$message.success(`数据导出成功`)
      } finally {
        this.downloadLoading = false
      }
    },

    // 获取路段
    async getOrgTreeData() {
      let {value} = await getTree()
      let array = value.reduce((acc, item) => acc.concat(item.roadList), [])
      this.optionList[0].option = array.map((item, index) => {
        return {
          value: item.id,
          ...item
        }
      })
    },

    timeChange() {
      this.loadData()
    },
    // 分类变更处理方法
    classifyChange(item) {
      this.params.pageBean.page = 1
      this.params.pageBean.pageSize = 20
      this.params.pageBean.total = 0
      this.typeShow = item.type
      this.loadData()
      this.$nextTick(() => {
        this.$refs['multipleSelection'].doLayout()
      })
    },
    checkRowIndex({row, rowIndex}) {
      // 监听行索引，手动处理合并
      this.$nextTick(() => {
        const table = document.querySelector('#fixRowIndexTable')
        if (table && rowIndex === this.tableData.length - 1) {
          const lastRow = table.querySelector('.el-table__footer-wrapper tr')
          if (lastRow) {
            lastRow.cells[0].colSpan = 3
            lastRow.cells[1].style.display = 'none'
            lastRow.cells[2].style.display = 'none'
          }
        }
      })
    },
    getSummaries(param) {
      if (this.aggregate && JSON.stringify(this.aggregate) !== '{}') {
        const {
          outTunnelNum = '-',
          outTunnelHandTime = '-',
          inTunnelNum = '-',
          inTunnelHandTime = '-',
          tfCrkfbNum = '-',
          jhxCrkfbNum = '-',
          smoothRate = '-',
          measureMileage = '-',
          fogNum = '-',
          rainNum = '-',
          snowNum = '-',
          icingNum = '-',
          otRoadNum = '-',
          trafficNum = '-',
          addressDisasterNum = '-',
          powerNum = '-',
          tfOtherNum = '-',
          tfZdNum = '-',
          tfDdstNum = '-',
          tfBffbNum = '-',
          tfQffbNum = '-',
          tfRkfbNum = '-',
          tfRkcdfbNum = '-',
          tfRkcdxlNum = '-',
          tfCkfbNum = '-',
          tfCkcdfbNum = '-',
          tfCkcdxlNum = '-',
          dutyControlNum = '-',
          constructionNum = '-',
          jhxOtherNum = '-',
          jhxZdNum = '-',
          jhxDdstNum = '-',
          jhxBffbNum = '-',
          jhxQffbNum = '-',
          jhxRkfbNum = '-',
          jhxRkcdfbNum = '-',
          jhxRkcdxlNum = '-',
          jhxCkfbNum = '-',
          jhxCkcdfbNum = '-',
          jhxCkcdxlNum = '-',
          hurtUserNum = '-',
          deadUserNum = '-',
          measureQz = '-'
        } = this.aggregate
        return ['合计', '', '', measureMileage, '-', fogNum, rainNum, snowNum, icingNum, outTunnelNum,
          outTunnelHandTime, inTunnelNum, inTunnelHandTime, otRoadNum, trafficNum, addressDisasterNum,
          powerNum, tfOtherNum, tfZdNum, tfDdstNum, tfBffbNum, tfQffbNum, tfRkfbNum, tfRkcdfbNum, tfRkcdxlNum,
          tfCkfbNum, tfCkcdfbNum, tfCkcdxlNum, tfCrkfbNum, dutyControlNum, constructionNum, jhxOtherNum,
          jhxZdNum, jhxDdstNum, jhxBffbNum, jhxQffbNum, jhxRkfbNum, jhxRkcdfbNum, jhxRkcdxlNum,
          jhxCkfbNum, jhxCkcdfbNum, jhxCkcdxlNum, jhxCrkfbNum, measureQz, smoothRate, hurtUserNum, deadUserNum]
      } else {
        return []
      }
    },
    //获取数据
    async loadData() {
      this.tableData = []
      try {
        this.tableLoading = true
        if (this.typeShow === 'theRoadNetworkIsOperatingDay') {
          const {rows = [], total, pageSize} = await theRoadNetworkIsOperatingDay(refineRequestBody(this.params))
          this.params.pageBean.total = total
          this.params.pageBean.pageSize = pageSize
          this.tableData = rows
        } else {
          const {value = {}} = await theRoadNetworkIsOperatingMonth(refineRequestBody(this.params))
          this.params.pageBean.total = value.data.total
          this.params.pageBean.pageSize = value.data.pageSize
          this.tableData = value.data.rows
          this.aggregate = value.total
        }
      } finally {
        this.tableLoading = false
      }
    },

    handleSizeChangeCustom(val) {
      this.params.pageBean.page = 1
      this.params.pageBean.pageSize = val
      this.loadData()
    },
    handleCurrentChangeCustom(val) {
      this.params.pageBean.page = val
      this.loadData()
    },
    // 改变页面
    changePage(pageName = '', row = {}) {
      if (!pageName) return

      this.$emit('changePage', pageName, _ => {
        // 发布事件
        PubSub.publish(pageName, row)
      }, row.id ? '编辑' : '添加')
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__footer-wrapper tbody td.el-table__cell {
  border-top: 1px solid #1f5a8f;
  border-right: 1px solid #1f5a8f;
}

::v-deep .el-table .el-table__row .el-table__cell {
  border-right: 1px solid #1f5a8f;
  border-bottom: 1px solid #1f5a8f;
}

::v-deep .el-table__body-wrapper {
  height: calc(100% - 8.5% - 60px);
}

::v-deep .el-table .el-table__header-wrapper .el-table__header .el-table__cell {
  border-color: rgba(67, 161, 255, 0.3) !important;
}

.stats-classify {
  padding: 10px 16px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;

  .classify-item {
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    padding-bottom: 10px;
    font-size: 14px;
    text-align: center;
    border: 1px solid #205e94;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 10px;

    &:hover {
      color: #43a1ff;
      box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
    }
  }

  .active {

    color: #43a1ff;

  }
}

.table-page {
  .basis {
    min-width: 240px !important;
  }
}

.text-desc {
  white-space: normal;
  display: -webkit-box; /* 使用旧版 Flexbox 模型（兼容性写法） */
  -webkit-box-orient: vertical; /* 垂直方向排列 */
  -webkit-line-clamp: 4; /* 限制显示 4 行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis;
}
</style>
