<!--
  Description: 指令下发列表页
  Author: 李亚光
  Date: 2025-03-12
 -->
<script name="InstructionList" lang="ts" setup>
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { getInstructionListPage } from '@/api/basic/instruction'
import type { IListQuery, IInfo } from './interface'
import addDialog from './addInstructionDialog.vue'
// 查询条件
const searchQuery = ref<IListQuery>({
  offset: 1,
  limit: 20,
  keywords: ''
})
const total = ref(0) // 数据条数
const loadingTable = ref(false) // 表格loading

// 表头
const columns = ref<TableColumn[]>([
  { text: '设备编号', value: 'devcode', align: 'center', width: '160' },
  { text: '设备类型', value: 'deviceTypeName', align: 'center', width: '200' },
  { text: '采集间隔(分)', value: 'collectInterval', align: 'center' },
  { text: '采集次数', value: 'collectCount', align: 'center' },
  { text: '重传次数', value: 'retryTimes', align: 'center' },
  { text: '最大尝试次数', value: 'attemptsMax', align: 'center' },
  { text: '采集时间', value: 'collectTime', align: 'center' },
  { text: '下发状态', value: 'statusName', align: 'center' },
])
const dataList = ref<Array<IInfo>>([]) // 表格数据
const fetchData = () => {
  loadingTable.value = true
  getInstructionListPage(searchQuery.value).then(res => {
    loadingTable.value = false
    dataList.value = res.data.rows
    total.value = res.data.total
  }).catch(() => {
    loadingTable.value = false
  })
}
fetchData()
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    searchQuery.value.limit = val.size
  }
  if (val && val.page) {
    searchQuery.value.offset = val.page
  }
  fetchData()
}
// 重置
const reset = () => {
  searchQuery.value = {
    offset: 1,
    limit: 20,
    keywords: ''
  }
  fetchData()
}
const addRef = ref()
// 新建/编辑/查看
const instructionHandler = (type: string, row: any) => {
  addRef.value.initDialog(type, row)
}
</script>
<template>
  <!-- 新建/编辑/详情弹窗 -->
   <addDialog ref="addRef" @refresh="fetchData" />
  <app-container>
    <search-area :need-clear="true" @search="fetchData" @clear="reset">
      <search-item>
        <el-input v-model="searchQuery.keywords" placeholder="设备编号" clearable />
      </search-item>
    </search-area>
    <!-- 表格数据展示 -->
    <table-container>
      <!-- 表头区域 -->
      <template #btns-right>
        <el-button type="primary" @click="instructionHandler('create', {})">
          新增
        </el-button>
      </template>
      <normal-table :data="dataList" :columns="columns" :total="total" :query="searchQuery" :list-loading="loadingTable"
        @change="changePage">
        <template #preColumns>
          <el-table-column label="序号" width="55" align="center">
            <template #default="scope">
              {{ (searchQuery.offset! - 1) * searchQuery.limit! + scope.$index + 1 }}
            </template>
          </el-table-column>
        </template>
        <template #columns>
          <el-table-column fixed="right" label="操作" align="center" width="120">
            <template #default="{ row }">
              <el-button size="small" type="primary" link @click="instructionHandler('detail', row)">
                查看
              </el-button>
              <el-button size="small" type="primary" link @click="instructionHandler('update', row)">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </table-container>
  </app-container>
</template>