<template>
  <div class="table-page">
    <div class="table-page-content">
      <!-- <div class="left-tree">
        <tree-side isDeselect :isOperate="true" btnDisableKey="edit" :treeData="treeData" :tabList="tabList"
          :defaultProps="defaultProps" @currentChange="currentChange" @operateEvent="operateEvent"
          ref="treeSide"></tree-side>
      </div> -->
      <div class="right-table">
        <div class="full-page bg">
          <div class="search-box">
            <div class="btn-box" ref="btnPanel">
              <el-button icon="el-icon-download" type="primary" class="btn btn-plus" @click="handelExportExcel"
                size="small"  :loading="exportLoading">
                导出
              </el-button>
            </div>
            <SearchCommon :optionList="optionList" @search="handleSearch" />
          </div>
          <div class="main-table-container">
            <div class="table-container" style="padding: 20px">
              <div ref="tableRef" class="table-content">
                <el-table 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 @select="handleSelection"
                  @selection-change="handleSelectionChange" @row-dblclick="handleDbClick">
                  <el-table-column align="center" label="序号" type="index" width="60" />
                  <el-table-column align="center" label="事件发生时间" min-width="80" prop="eventTime"
                    show-overflow-tooltip />
                  <el-table-column align="center" label="事件类型" min-width="80" prop="eventType" show-overflow-tooltip>
                    <template v-slot="{ row }">
                      {{ dictionaryEscape('sjlx', row.eventType + '') || '-' }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="事件来源" min-width="80" prop="eventSrc" show-overflow-tooltip>
                    <template v-slot="{ row }">
                      {{ dictionaryEscape('sjly', row.eventSrc + '') || '-' }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="事件等级" min-width="80" prop="eventLevel" show-overflow-tooltip>
                    <template v-slot="{ row }">
                      {{ row.eventLevel ? row.eventLevel + '级' : '-' }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="所属路段" min-width="80" prop="roadName" show-overflow-tooltip />
                  <el-table-column align="center" label="路产损失" min-width="80" prop="loss" show-overflow-tooltip>
                    <template v-slot="{ row }">
                      {{ row.loss || '-' }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="关联事件" min-width="80" prop="eventNo" show-overflow-tooltip>
                    <template v-slot="{ row }">
                      {{ row.eventNo || '-' }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="状态" width="80" prop="rescueStatus">
                    <template v-slot="{ row }">
                      <el-link :underline="false" :type="row.rescueStatus < 1 ? 'warning' : row.rescueStatus == '1' ? 'danger' : row.rescueStatus == '2' ? 'primary'
                          : 'success'">
                        {{ row.rescueStatus < 1 ? '未委派' : row.rescueStatus == '1' ? '未处置' : row.rescueStatus == '2' ? '处置中'
                          : '已完成' }} </el-link>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="操作" width="80" show-overflow-tooltip>
                    <template v-slot="{ row }">
                      <el-link :underline="false" type="primary"
                        @click="changePage('EditAddPage', row, 'edit')">
                        补录
                      </el-link>
                      <!-- <el-link :underline="false" type="primary" @click="handleDetailPage(row)">
                        详情
                      </el-link> -->
                    </template>
                  </el-table-column>
                </el-table>
                <pagination ref="paginationPanel" :pageResult="params.pageBean" style="margin-top: 10px"
                  @size-change="handleSizeChange" @current-change="handleCurrentChange" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--  目录树修改新增弹层  -->
    <!-- <tree-dialog :id.sync="treeItemId" :is-show.sync="treeDialog" :parent-id.sync="treeItemParentId"
      @catalogChange="catalogChange" /> -->
  </div>
</template>

<script>
import { dictionaryEscape, getDictionaryByCode } from '@/utils/dictionary'
import { refineRequestBody, setQueryValue } from '@/utils/requestWrappers'
import pagination from '@/components/SuperPagination/index.vue'
import { TableMixin } from '@/mixins/tableMixin'
import treeSide from '@/components/treeSide/index.vue'
import SearchCommon from '@/components/SearchCommon/index.vue'
import { tableData, exportExcel } from '@/api/patrolAndRescue/roadDamageComp/roadDamageRegister'
import PubSub from 'pubsub-js'


export default {
  name: 'TablePage',
  components: {
    pagination,
    treeSide,
    SearchCommon
  },
  mixins: [TableMixin],
  data() {
    return {
      pubSub: null,
      tableMaxHeight: '600px',
      loading: false,
      tableLoading: false,
      treeData: [], //左边树
      tabList: ['政策法规'], //左边tab
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      tableData: [],
      currentDataDel: [],
      optionList: [
        { title: '事件类型', prop: ['event_Type_'], type: 'select', option: getDictionaryByCode('sjlx'), multiple: false },
        { title: '事件来源', prop: ['event_Src_'], type: 'select', option: getDictionaryByCode('sjly'), multiple: false },
        { title: '所属路段', prop: ['road_Name_'], type: 'input', default: true },
      ],
      params: {
        pageBean: { pageSize: 20, page: 1, total: 0 },
        querys: [
          { operation: 'EQUAL', property: 'event_Type_', value: '' },
          { operation: 'EQUAL', property: 'event_Src_', value: '' },
          { operation: 'LIKE', property: 'road_Name_', value: '' }
        ],
        sorter: []
      },
      treeDialog: false, // 科目信息弹层
      treeItemId: '', // 树形目录id
      treeItem: {}, // 树形节点选中对象
      treeItemParentId: '', // 树形目录父级id
      exportLoading: false
    }
  },
  created() {
    // 获取树形目录
    // this.getTreeData(treeData => {
    //   // 回调中默认选中第一项并将其id作为参数请求表格
    //   this.treeItem = treeData[0] || {}
    //   this.$nextTick(_ => {
    //     this.$refs.treeSide?.setCurrentKey(treeData[0]?.id)
    //   })
    //   setQueryValue(this.params, 'catalog_full_id_ ', treeData[0]?.id || '')
    //   this.loadData()
    // })
    this.loadData()
  },
  mounted() {
    this.pubSub = PubSub.subscribe('TablePage', (_, data) => {
      switch (data.type) {
        case 'add':
          this.params.pageBean.page = 1
          this.loadData()
          break
        case 'edit':
          this.loadData()
          break
      }
    })
  },
  methods: {
    async handelExportExcel() {
      this.exportLoading = true
      await exportExcel(refineRequestBody(this.params))
      this.exportLoading = false
    },
    dictionaryEscape,
    //获取科目树
    async getTreeData(callback) {
      this.treeData = [{
        name: '规章制度',
        edit: 1,
        id: '',
        parentId: '',
        children: await getTree('3')
      }]
      // 保证重新刷新树数据后，选中效果不失效
      if (this.treeItem.id) {
        this.$nextTick(_ => {
          this.$refs.treeSide?.setCurrentKey(this.treeItem.id)
        })
      }
      callback && callback(this.treeData)
    },

    //获取数据
    async loadData() {
      this.tableLoading = true
      const { total = 0, rows = [] } = await tableData(refineRequestBody(this.params))
      this.params.pageBean.total = total
      this.tableData = rows
      this.tableLoading = false
    },

    //左边树节点
    currentChange(nodeItem) {
      // 修改对应的字段值
      setQueryValue(this.params, 'catalog_full_id_ ', nodeItem?.id || '')
      this.treeItem = nodeItem || {}
      this.calcTableHeight(500)
      this.params.pageBean.page = 1
      this.loadData()
    },

    // 树节点操作
    operateEvent(type, data) {
      switch (type) {
        case '新增':
          this.treeItemParentId = data.id
          this.treeDialog = true
          break
        case '编辑':
          this.treeItemId = data.id
          this.treeItemParentId = data.parentId
          this.treeDialog = true
          break
        case '删除':
          this.$confirm('确定删除选中资料分类吗？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            const { state } = await treeDelete(data.id)
            if (state) {
              this.$message.success(`删除资料分类成功`)
            } else {
              this.$message.error(`删除资料分类失败`)
            }
            await this.getTreeData()
          }).catch(_ => _)
          break
      }
    },

    // 目录改变
    catalogChange(dialogName) {
      this.getTreeData(_ => this[dialogName] = false)
    },

    //修改
    handleDbClick(row) {
      if (this.clickTimer) return (this.clickTimer = false)
      this.changePage('EditAddPage', row)
    },

    // 改变页面
    changePage(pageName = '', row = {}, type = '') {
      if (!pageName) return

      this.$emit('changePage', pageName, _ => {
        PubSub.publish(pageName, row)
      }, type || '详情')
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped></style>
