<template>
  <div class="table-page">
    <div class="table-page-content">
      <div class="right-table">
        <div class="full-page bg">
          <div class="search-box">
            <div class="search-box-combination">
              <SearchCommon :optionList="optionList" @search="handleSearch" />
            </div>
          </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"
                  :default-sort="getSorterDirection(params, true)"
                  :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" type="selection" width="55" />
                  <el-table-column
                    :index="
                      (index) =>
                        index +
                        1 +
                        (params.pageBean.page - 1) * params.pageBean.pageSize
                    "
                    align="center"
                    label="序号"
                    type="index"
                    width="100"
                  />
                  <el-table-column
                    :formatter="({videoName}) => videoName || '-'"
                    align="center"
                    label="视频名称"
                    min-width="100"
                    prop="videoName"
                    show-overflow-tooltip
                  />

                  <el-table-column
                    :formatter="({startTime}) => startTime || '-'"
                    align="center"
                    label="巡检开始时间"
                    min-width="100"
                    prop="inspectDate"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    :formatter="({endTime}) => endTime || '-'"
                    align="center"
                    label="巡检结束时间"
                    min-width="70"
                    prop="endTime"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    align="center"
                    label="巡检状态"
                    min-width="70"
                    prop="taskStatus"
                    show-overflow-tooltip
                  >
                    <template v-slot="{row}">
                      <el-tag
                        v-if="row.taskStatus === 1"
                        type="success"
                        size="small"
                        >已巡检</el-tag
                      >
                      <el-tag
                        v-else-if="row.taskStatus === 0"
                        type="info"
                        size="small"
                        >待巡检</el-tag
                      >
                      <span v-else>-</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="巡检结果"
                    min-width="80"
                    prop="inspecetStatus"
                    show-overflow-tooltip
                  >
                    <template v-slot="{row}">
                      <el-tag
                        v-if="row.inspecetStatus === 0"
                        type="success"
                        size="small"
                        >正常</el-tag
                      >
                      <el-tag
                        v-else-if="row.inspecetStatus === 1"
                        type="danger"
                        size="small"
                        >异常</el-tag
                      >
                      <span v-else>-</span>
                    </template>
                  </el-table-column>

                  <el-table-column
                    align="center"
                    label="操作"
                    min-width="100"
                    show-overflow-tooltip
                  >
                    <template v-slot="{row}">
                      <el-link
                        v-if="row.inspecetStatus === 1"
                        :underline="false"
                        type="warning"
                        @click="handleReport(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>
    <report-dialog
      ref="reportDialog"
      :isShow.sync="reportDialog"
      :videoData="videoData"
    ></report-dialog>
  </div>
</template>

<script >
import PubSub from 'pubsub-js'
import SearchCommon from '@/components/SearchCommon/index.vue'
import {dictionaryEscape, getDictionaryByCode} from '@/utils/dictionary'
import pagination from '@/components/SuperPagination/index.vue'
import {TableMixin} from '@/mixins/tableMixin'
import {tableData} from '@/api/patrolAndRescue/videoPatrol/videoInspectionResults'
import ReportDialog from '../ReportDialog/index.vue'
import {
  getSorterDirection,
  refineRequestBody,
  setQueryValue,
} from '@/utils/requestWrappers'
export default {
  name: 'ResultListPage',
  mixins: [TableMixin],
  components: {
    pagination,
    SearchCommon,
    ReportDialog,
  },
  data() {
    return {
      pubSub: null,
      tableMaxHeight: '600px',
      tableLoading: true,
      btnLoading: false,
      tableData: [],
      reportDialog: false,
      videoData: {},
      optionList: [
        {
          title: '视频名称',
          prop: 'video_name_',
          type: 'input',
          multiple: false,
          default: true,
        },
        {
          title: '巡检结果',
          prop: 'inspecetStatus',
          type: 'select',
          option: [
            {
              name: '正常',
              value: 0,
            },
            {
              name: '异常',
              value: 1,
            },
          ],
          multiple: true,
        },
        {
          title: '巡检状态',
          prop: 'taskStatus',
          type: 'select',
          option: [
            {
              name: '已巡检',
              value: 1,
            },
            {
              name: '待巡检',
              value: 0,
            },
          ],
          multiple: true,
        },
      ],
      params: {
        pageBean: {pageSize: 20, page: 1, total: 0},
        querys: [
          {operation: 'EQUAL', property: 'taskId'},
          {operation: 'LIKE', property: 'video_name_'},
          {operation: 'IN', property: 'inspecetStatus'},
          {operation: 'IN', property: 'taskStatus'},
        ],
        sorter: [{direction: '', property: ''}],
      },
    }
  },
  mounted() {
    this.pubSub = PubSub.subscribe('ResultListPage', (_, data) => {
      if (data.id) {
        setQueryValue(this.params, 'taskId', data.id || '') //将选中的树节点的 id 设置为查询参数的一部分
      }
      this.loadData()
    })
  },
  methods: {
    dictionaryEscape,
    getSorterDirection,
    handleReport(row) {
      this.videoData = row
      this.reportDialog = true
    },
    //获取数据
    async loadData() {
      try {
        this.tableLoading = true
        const {total = 0, rows = []} = await tableData(
          refineRequestBody(this.params)
        )
        this.params.pageBean.total = total
        this.tableData = rows
      } finally {
        this.tableLoading = false
      }
    },
    // 查看异常
    handleReportRecord(row) {},
    // 改变页面
    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>
.table-page {
  .basis {
    min-width: 400px !important;
  }
}
</style>