<template>
  <div class="table-page">
    <div class="table-page-content">
      <div class="right-table">
        <div class="full-page bg">
          <div class="search-box">
            <SearchCommon :optionList="optionList" @search="handleSearch" />
          </div>
          <div class="main-table-container">
            <div class="table-container" style="padding: 20px">
              <!--              <div ref="btnPanel" class="btn-box">-->
              <!--                <el-button-->
              <!--                  :loading="syncLoading"-->
              <!--                  class="btn btn-plus"-->
              <!--                  icon="el-icon-receiving"-->
              <!--                  size="small"-->
              <!--                  type="primary"-->
              <!--                  @click="handleRefreshData"-->
              <!--                >-->
              <!--                  同步-->
              <!--                </el-button>-->
              <!--              </div>-->
              <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(0, 0, 0, 0.6)"
                  element-loading-spinner="el-icon-loading"
                  row-key="id"
                  stripe
                  @select="handleSelection"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column
                    :index="
                      (index) =>
                        index +
                        1 +
                        (params.pageBean.page - 1) * params.pageBean.pageSize
                    "
                    align="center"
                    label="序号"
                    type="index"
                    width="100"
                  />
                  <el-table-column
                    align="center"
                    label="路段编号"
                    min-width="100"
                    prop="code"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    align="center"
                    label="路段名称"
                    min-width="100"
                    prop="name"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    align="center"
                    label="路线名称"
                    min-width="120"
                    prop="routeName"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    align="center"
                    label="所属公司"
                    min-width="100"
                    prop="companyName"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    align="center"
                    label="起点"
                    min-width="140"
                    prop="startingPoint"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    align="center"
                    label="终点"
                    min-width="140"
                    prop="terminalPoint"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    align="center"
                    label="操作"
                    min-width="80"
                    show-overflow-tooltip
                  >
                    <template v-slot="{row}">
                      <el-link
                        :underline="false"
                        type="primary"
                        @click="handleDetailPage(row)"
                      >
                        详情
                      </el-link>
                      <el-link
                        :underline="false"
                        type="primary"
                        @click="handleConfig(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>

          <ConfigDialog
            :isShowDetail="dialogVisible"
            :roadInfo="currentRoad"
            @update:isShowDetail="(val) => (dialogVisible = val)"
          ></ConfigDialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ConfigDialog from '@/views/patrolAndRescue/masterData/RoadSectionInfo/components/ConfigDialog/index.vue'
import {refineRequestBody} from '@/utils/requestWrappers'
import pagination from '@/components/SuperPagination/index.vue'
import {TableMixin} from '@/mixins/tableMixin'
import SearchCommon from '@/components/SearchCommon/index.vue'
import {synchroData, tableData} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/roadSectionInfo'
import PubSub from 'pubsub-js'

export default {
  name: 'TablePage',
  props: {
    componentName: {
      default: 'TablePage',
      type: String
    }
  },
  components: {
    pagination,
    SearchCommon,
    ConfigDialog
  },
  mixins: [TableMixin], // 基础公共方法（如：双击修改、查看详情等）在mixin中，在实例中重写可覆盖。
  data() {
    return {
      pubSub: null,
      tableMaxHeight: '600px',
      loading: false,
      tableLoading: false,
      tableData: [],
      optionList: [
        {
          title: '路段名称',
          prop: 'name',
          type: 'input',
          default: true
        },
        {
          title: '路段编码',
          prop: 'code',
          type: 'input',
          default: true
        }
      ],
      params: {
        pageBean: {pageSize: 20, page: 1, total: 0},
        querys: [
          {operation: 'LIKE', property: 'name'},
          {operation: 'LIKE', property: 'code'}
        ],
        sorter: []
      },
      syncLoading: false,
      dialogVisible: false,
      currentRoad: {}
    }
  },
  created() {
    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
      }
    })
    this.calcTableHeight()
    this.$root.$on('resize', () => {
      this.calcTableHeight(500)
    })
  },
  methods: {
    // 打开页面执行
    openPage() {
      this.calcTableHeight(500)
    },

    handleConfig(row) {
      this.currentRoad = row
      this.dialogVisible = true
    },

    handleRefreshData() {
      this.$confirm('是否路段数据？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            this.syncLoading = true
            const {state} = await synchroData()
            if (state) {
              this.$message.success(`数据同步成功`)
              this.params.pageBean.page = 1
              await this.loadData()
            }
          } finally {
            this.syncLoading = false
          }
        })
        .catch((_) => _)
    },

    //获取数据
    async loadData() {
      this.tableLoading = true
      try {
        const {total = 0, rows = {}} = await tableData(
          refineRequestBody(this.params)
        )
        this.params.pageBean.total = total
        this.tableData = rows
      } catch (err) {
        console.log(err)
      }
      this.tableLoading = false
    },

    // 改变页面
    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>
.search-box-combination {
  display: flex;
  column-gap: 16px;
  align-items: center;
}
</style>
