<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"
                :default-time="['00:00:00', '23:59:59']"
                @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}) => formatField(startTime)"
                    align="center"
                    label="开始时间"
                    prop="startTime"
                    width="170"
                  ></el-table-column>
                  <el-table-column
                    :formatter="({endTime}) => formatField(endTime)"
                    align="center"
                    label="结束时间"
                    prop="endTime"
                    width="170"
                  ></el-table-column>
                  <el-table-column
                    :formatter="({take}) => formatField(take)"
                    align="center"
                    :label="label1"
                    prop="take"
                    width="120"
                  ></el-table-column>
                  <el-table-column
                    :formatter="({placeName}) => formatField(placeName)"
                    align="center"
                    :label="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="({fogNum}) => formatField(fogNum)"
                        align="center"
                        label="雾"
                        prop="fogNum"
                        width="80"
                      >
                      </el-table-column>
                      <el-table-column
                        :formatter="({rainNum}) => formatField(rainNum)"
                        align="center"
                        label="雨"
                        prop="rainNum"
                        width="80"
                      >
                      </el-table-column>
                      <el-table-column
                        :formatter="({snowNum}) => formatField(snowNum)"
                        align="center"
                        label="雪"
                        prop="snowNum"
                        width="80"
                      >
                      </el-table-column>
                      <el-table-column
                        :formatter="({icingNum}) => formatField(icingNum)"
                        align="center"
                        label="路面结冰"
                        prop="icingNum"
                        width="100"
                      >
                      </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="交通事故">
                      <el-table-column
                        :formatter="({inTunnelNum}) => formatField(inTunnelNum)"
                        align="center"
                        label="隧道内(次)"
                        prop="inTunnelNum"
                        width="110"
                      >
                      </el-table-column>
                      <el-table-column
                        :formatter="
                          ({inTunnelHandTime}) => formatField(inTunnelHandTime)
                        "
                        align="center"
                        label="处置时间(分钟)"
                        prop="inTunnelHandTime"
                        width="140"
                      >
                      </el-table-column>
                      <el-table-column
                        :formatter="
                          ({outTunnelNum}) => formatField(outTunnelNum)
                        "
                        align="center"
                        label="隧道外(次)"
                        prop="outTunnelNum"
                        width="110"
                      >
                      </el-table-column>
                      <el-table-column
                        :formatter="
                          ({outTunnelHandTime}) =>
                            formatField(outTunnelHandTime)
                        "
                        align="center"
                        label="处置时间(分钟)"
                        prop="outTunnelHandTime"
                        width="140"
                      >
                      </el-table-column>
                      <el-table-column
                        :formatter="
                          ({structureNum}) => formatField(structureNum)
                        "
                        align="center"
                        label="特殊结构物"
                        prop="structureNum"
                        width="110"
                      >
                      </el-table-column>
                      <el-table-column
                        :formatter="({fireNum}) => formatField(fireNum)"
                        align="center"
                        label="火灾事故"
                        prop="fireNum"
                        width="110"
                      >
                      </el-table-column>
                    </el-table-column>
                    <el-table-column
                      :formatter="({otRoadNum}) => formatField(otRoadNum)"
                      align="center"
                      label="故障车占道"
                      prop="otRoadNum"
                      width="110"
                    ></el-table-column>
                    <el-table-column
                      :formatter="({trafficNum}) => formatField(trafficNum)"
                      align="center"
                      label="突发车流量"
                      prop="trafficNum"
                      width="110"
                    ></el-table-column>
                    <el-table-column
                      :formatter="
                        ({addressDisasterNum}) =>
                          formatField(addressDisasterNum)
                      "
                      align="center"
                      label="地质灾害"
                      prop="addressDisasterNum"
                      width="100"
                    ></el-table-column>
                    <el-table-column
                      :formatter="({powerNum}) => formatField(powerNum)"
                      align="center"
                      label="非正常供电"
                      prop="powerNum"
                      width="110"
                    ></el-table-column>
                    <el-table-column
                      :formatter="({tfOtherNum}) => formatField(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}) => formatField(dutyControlNum)
                      "
                      align="center"
                      label="勤务管制"
                      prop="dutyControlNum"
                      width="100"
                    ></el-table-column>
                    <el-table-column
                      :formatter="
                        ({constructionNum}) => formatField(constructionNum)
                      "
                      align="center"
                      label="养护施工"
                      prop="constructionNum"
                      width="100"
                    ></el-table-column>
                    <el-table-column
                      :formatter="({jhxOtherNum}) => formatField(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 &&
                          measureType !== ''
                            ? dictionaryEscape('gzcs', measureType)
                            : '-'
                      "
                      align="center"
                      label="管制措施"
                      prop="measureType"
                      width="100"
                    ></el-table-column>
                    <el-table-column
                      :formatter="
                        ({measureMileage}) => formatField(measureMileage)
                      "
                      align="center"
                      :label="label2"
                      prop="measureMileage"
                      width="140"
                    ></el-table-column>
                    <el-table-column
                      :formatter="({measureQz}) => formatField(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 &&
                            scope.row.memo !== ''
                        "
                        :title="scope.row.memo"
                        class="text-desc"
                      >
                        {{ scope.row.memo }}
                      </div>
                      <div v-else>-</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    :formatter="({disposition}) => formatField(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}) => formatField(hurtUserNum)"
                      align="center"
                      label="伤"
                      prop="hurtUserNum"
                      width="80"
                    ></el-table-column>
                    <el-table-column
                      :formatter="({deadUserNum}) => formatField(deadUserNum)"
                      align="center"
                      label="死"
                      prop="deadUserNum"
                      width="80"
                    >
                    </el-table-column>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    min-width="80"
                    label="操作"
                  >
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        size="mini"
                        @click="handleEdit(scope.row)"
                        >编辑
                      </el-button>
                    </template>
                  </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}) => formatField(fogNum)"
                          align="center"
                          label="雾"
                          prop="fogNum"
                          width="80"
                        >
                        </el-table-column>
                        <el-table-column
                          :formatter="({rainNum}) => formatField(rainNum)"
                          align="center"
                          label="雨"
                          prop="rainNum"
                          width="80"
                        >
                        </el-table-column>
                        <el-table-column
                          :formatter="({snowNum}) => formatField(snowNum)"
                          align="center"
                          label="雪"
                          prop="snowNum"
                          width="80"
                        >
                        </el-table-column>
                        <el-table-column
                          :formatter="({icingNum}) => formatField(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}) => formatField(outTunnelNum)
                          "
                          align="center"
                          label="隧道内(次)"
                          prop="outTunnelNum"
                          width="110"
                        >
                        </el-table-column>
                        <el-table-column
                          :formatter="
                            ({outTunnelHandTime}) =>
                              formatField(outTunnelHandTime)
                          "
                          align="center"
                          label="处置时间(分钟)"
                          prop="outTunnelHandTime"
                          width="140"
                        >
                        </el-table-column>
                        <el-table-column
                          :formatter="
                            ({inTunnelNum}) => formatField(inTunnelNum)
                          "
                          align="center"
                          label="隧道外(次)"
                          prop="inTunnelNum"
                          width="110"
                        >
                        </el-table-column>
                        <el-table-column
                          :formatter="
                            ({inTunnelHandTime}) =>
                              formatField(inTunnelHandTime)
                          "
                          align="center"
                          label="处置时间(分钟)"
                          prop="inTunnelHandTime"
                          width="140"
                        >
                        </el-table-column>
                        <el-table-column
                          :formatter="({fireNum}) => formatField(fireNum)"
                          align="center"
                          label="火灾事故"
                          prop="fireNum"
                          width="140"
                        >
                        </el-table-column>
                      </el-table-column>
                      <el-table-column
                        :formatter="({otRoadNum}) => formatField(otRoadNum)"
                        align="center"
                        label="故障车占道"
                        prop="otRoadNum"
                        width="110"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({trafficNum}) => formatField(trafficNum)"
                        align="center"
                        label="突发车流量"
                        prop="trafficNum"
                        width="110"
                      ></el-table-column>
                      <el-table-column
                        :formatter="
                          ({addressDisasterNum}) =>
                            formatField(addressDisasterNum)
                        "
                        align="center"
                        label="地质灾害"
                        prop="addressDisasterNum"
                        width="100"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({powerNum}) => formatField(powerNum)"
                        align="center"
                        label="非正常供电"
                        prop="powerNum"
                        width="110"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({tfOtherNum}) => formatField(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}) => formatField(tfZdNum)"
                        align="center"
                        label="占道"
                        prop="tfZdNum"
                        width="80"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({tfDdstNum}) => formatField(tfDdstNum)"
                        align="center"
                        label="单道双通"
                        prop="tfDdstNum"
                        width="100"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({tfBffbNum}) => formatField(tfBffbNum)"
                        align="center"
                        label="半幅封闭"
                        prop="tfBffbNum"
                        width="100"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({tfQffbNum}) => formatField(tfQffbNum)"
                        align="center"
                        label="全幅封闭"
                        prop="tfQffbNum"
                        width="100"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({tfRkfbNum}) => formatField(tfRkfbNum)"
                        align="center"
                        label="入口封闭"
                        prop="tfRkfbNum"
                        width="100"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({tfRkcdfbNum}) => formatField(tfRkcdfbNum)"
                        align="center"
                        label="入口车道封闭"
                        prop="tfRkcdfbNum"
                        width="120"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({tfRkcdxlNum}) => formatField(tfRkcdxlNum)"
                        align="center"
                        label="入口车道限流"
                        prop="tfRkcdxlNum"
                        width="120"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({tfCkfbNum}) => formatField(tfCkfbNum)"
                        align="center"
                        label="关闭出口"
                        prop="tfCkfbNum"
                        width="100"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({tfCkcdfbNum}) => formatField(tfCkcdfbNum)"
                        align="center"
                        label="出口车道封闭"
                        prop="tfCkcdfbNum"
                        width="120"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({tfCkcdxlNum}) => formatField(tfCkcdxlNum)"
                        align="center"
                        label="出口车道限流"
                        prop="tfCkcdxlNum"
                        width="120"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({tfCrkfbNum}) => formatField(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}) => formatField(dutyControlNum)
                        "
                        align="center"
                        label="勤务管制"
                        prop="dutyControlNum"
                        width="100"
                      ></el-table-column>
                      <el-table-column
                        :formatter="
                          ({constructionNum}) => formatField(constructionNum)
                        "
                        align="center"
                        label="养护施工"
                        prop="constructionNum"
                        width="100"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({jhxQtNum}) => formatField(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}) => formatField(jhxZdNum)"
                        align="center"
                        label="占道"
                        prop="jhxZdNum"
                        width="80"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({jhxDdstNum}) => formatField(jhxDdstNum)"
                        align="center"
                        label="单道双通"
                        prop="jhxDdstNum"
                        width="100"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({jhxBffbNum}) => formatField(jhxBffbNum)"
                        align="center"
                        label="半幅封闭"
                        prop="jhxBffbNum"
                        width="100"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({jhxQffbNum}) => formatField(jhxQffbNum)"
                        align="center"
                        label="全幅封闭"
                        prop="jhxQffbNum"
                        width="100"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({jhxRkfbNum}) => formatField(jhxRkfbNum)"
                        align="center"
                        label="入口封闭"
                        prop="jhxRkfbNum"
                        width="100"
                      ></el-table-column>
                      <el-table-column
                        :formatter="
                          ({jhxRkcdfbNum}) => formatField(jhxRkcdfbNum)
                        "
                        align="center"
                        label="入口车道封闭"
                        prop="jhxRkcdfbNum"
                        width="120"
                      ></el-table-column>
                      <el-table-column
                        :formatter="
                          ({jhxRkcdxlNum}) => formatField(jhxRkcdxlNum)
                        "
                        align="center"
                        label="入口车道限流"
                        prop="jhxRkcdxlNum"
                        width="120"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({jhxCkfbNum}) => formatField(jhxCkfbNum)"
                        align="center"
                        label="关闭出口"
                        prop="jhxCkfbNum"
                        width="100"
                      ></el-table-column>
                      <el-table-column
                        :formatter="
                          ({jhxCkcdfbNum}) => formatField(jhxCkcdfbNum)
                        "
                        align="center"
                        label="出口车道封闭"
                        prop="jhxCkcdfbNum"
                        width="120"
                      ></el-table-column>
                      <el-table-column
                        :formatter="
                          ({jhxCkcdxlNum}) => formatField(jhxCkcdxlNum)
                        "
                        align="center"
                        label="出口车道限流"
                        prop="jhxCkcdxlNum"
                        width="120"
                      ></el-table-column>
                      <el-table-column
                        :formatter="({jhxCrkfbNum}) => formatField(jhxCrkfbNum)"
                        align="center"
                        label="出入口封闭"
                        prop="jhxCrkfbNum"
                        width="110"
                      ></el-table-column>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column
                    :formatter="({measureQz}) => formatField(measureQz)"
                    align="center"
                    label="管制综合Q值"
                    prop="measureQz"
                    width="140"
                  ></el-table-column>
                  <el-table-column
                    :formatter="({smoothRate}) => formatField(smoothRate)"
                    align="center"
                    label="畅通率"
                    prop="smoothRate"
                    width="140"
                  ></el-table-column>
                  <el-table-column align="center" label="人员伤亡">
                    <el-table-column
                      :formatter="({hurtUserNum}) => formatField(hurtUserNum)"
                      align="center"
                      label="伤"
                      prop="hurtUserNum"
                      width="80"
                    ></el-table-column>
                    <el-table-column
                      :formatter="({deadUserNum}) => formatField(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 {
      label: '起止桩号\n站名\n方向',
      label1: '时间小计\n(分钟)',
      label2: '管制延公里数\n(公里)',
      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: {
    formatField(field) {
      if (field === '' || field === null || field === undefined) {
        return '-'
      } else {
        return field
      }
    },
    handleEdit(row) {
      this.changePage('EditAddPage', row)
    },
    //字典
    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 = '-',
          fireNum = '-',
          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,
          fireNum,
          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
          this.$nextTick(() => {
            this.$refs.multipleSelection.doLayout()
            this.$$forceUpdate()
          })
        }
      } 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;
}

::v-deep
  .el-table
  .el-table__header-wrapper
  .el-table__header
  .el-table__cell
  > .cell {
  white-space: pre !important;
  line-height: 1.4 !important;
  vertical-align: middle !important;
}
::v-deep
  .el-table
  .el-table__fixed-body-wrapper
  .el-table__row
  .el-table__cell {
  border-left: 1px solid #1f5a8f !important;
}
::v-deep
  .el-table
  .el-table__fixed-right
  .el-table__fixed-header-wrapper
  .el-table__cell {
  border-left: 1px solid #1f5a8f !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>
