<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="140" prop="companyName"
                                   show-overflow-tooltip />
                  <el-table-column align="center" label="起点地址" min-width="140" prop="start" show-overflow-tooltip />
                  <el-table-column align="center" label="终点地址" min-width="140" prop="end" show-overflow-tooltip />
                  <el-table-column align="center" label="起点桩号" min-width="100" prop="startPeg"
                                   show-overflow-tooltip />
                  <el-table-column align="center" label="终点桩号" min-width="100" prop="endPeg"
                                   show-overflow-tooltip />
                  <el-table-column align="center" label="里程（千米）" min-width="100" prop="mileage"
                                   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>
                    </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>

  </div>
</template>

<script>
import {getSorterDirection, 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/routeInfo'
import {dictionaryEscape} from '@/utils/dictionary'
import PubSub from 'pubsub-js'

export default {
  name: 'TablePage',
  components: {
    pagination,
    SearchCommon
  },
  mixins: [TableMixin],
  data() {
    return {
      pubSub: null,
      tableMaxHeight: '600px',
      tableLoading: true,
      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 // 同步按钮Loading
    }
  },
  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
      }
    })

  },
  methods: {
    dictionaryEscape,
    getSorterDirection,

    //获取数据
    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
      }
    },

    // 同步数据
    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(_ => _)
    },

    // 改变页面
    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>
</style>
