<script lang="ts" setup name="DevList">
import type { Ref } from 'vue'
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { DevListInfo, StationListInfo } from './dev-interface'
import EditDev from './editDev.vue'
import ConfigDev from './configDev.vue'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { delDev, getDevListPage } from '@/api/ptz/dev'
import { getStationList } from '@/api/ptz/station'

const editDialog = ref() // 组件
const configDialog = ref() // 组件

// 默认查询条件
const defaultQuery = {
  keyword: '',
  stationId: '',
  offset: 1,
  limit: 20,
  sort: '',
  order: '',
}
const total = ref(0)
const listQuery = reactive({ ...defaultQuery })

// 搜索重置
function reset() {
  Object.assign(listQuery, defaultQuery)
  fetchData()
}
// 表格表头
const columns: Ref<TableColumn[]> = ref([])
columns.value = [
  { text: '设备名称', value: 'monitorName', width: 180, align: 'center' },
  { text: '登录地址', value: 'deviceIp', align: 'center' },
  { text: '登录端口', value: 'devicePort', align: 'center' },
  { text: 'NVR地址', value: 'nvrIp', align: 'center' },
  { text: 'NVR端口', value: 'nvrPort', align: 'center' },
  { text: '所在场站', value: 'stationName', width: 180, align: 'center' },
  { text: '备注', value: 'description', width: 180, align: 'center' },
]
// 数据列表
const list: Ref<DevListInfo[]> = ref([])
const loading = ref(false)

// 获取场站列表
const stationList: Ref<StationListInfo[]> = ref([])
function fetchStationList() {
  getStationList().then((res) => {
    stationList.value = res.data
  })
}

// 搜索按钮
function search() {
  fetchData()
}

// 搜索重置
function clear() {
  Object.assign(listQuery, defaultQuery)
  fetchData()
}

// 查询数据
function fetchData() {
  loading.value = true
  getDevListPage(listQuery).then((res: { data: { rows: []; total: number } }) => {
    list.value = res.data.rows
    total.value = res.data.total
    loading.value = false
  })
  // list.value =
  //   [{
  //   id: '111',
  //   stationName: '111',
  //   monitorName: '111',
  //   deviceIp: '111',
  //   devicePort: '111',
  //   deviceUser: '111',
  //   devicePassword: '111',
  //   nvrIp: '111',
  //   nvrPort: '111',
  //   nvrUser: '111',
  //   nvrPassword: '111',
  //   nvrChannel: '111',
  //   deviceType: '111',
  //   deviceTypeName: '111',
  //   description: '111',
  //   deviceStatus: '111',
  //   deviceStatusName: '111',
  // }]
  // total.value = 1
}

// 编辑
function edit(row: DevListInfo) {
  editDialog.value.initDialog('update', row)
}

// 详情
function detail(row: DevListInfo) {
  editDialog.value.initDialog('detail', row)
}

// 全局配置
function config(row: DevListInfo) {
  configDialog.value.initDialog('update', row)
}

// 删除
function del(row: DevListInfo) {
  ElMessageBox.confirm(
    `确定要删除${row.monitorName}吗？`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    delDev(row.id).then(() => {
      ElMessage.success('删除成功')
      fetchData()
    })
  })
}

// 添加
function add() {
  editDialog.value.initDialog('create')
}

// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
function changePage(val: { size: number; page: number }) {
  if (val && val.size) {
    listQuery.limit = val.size
  }
  if (val && val.page) {
    listQuery.offset = val.page
  }
  fetchData()
}

onMounted(() => {
  fetchStationList()
  fetchData()
})
</script>

<template>
  <app-container>
    <search-area :need-clear="true" @search="search" @clear="clear">
      <search-item>
        <el-input v-model="listQuery.keyword" placeholder="设备名称" clearable style="width: 200px;" />
      </search-item>
      <search-item>
        <el-select v-model="listQuery.stationId" placeholder="所在场站" clearable>
          <el-option
            v-for="item in stationList"
            :key="item.id"
            :label="item.stationName"
            :value="item.id"
          />
        </el-select>
      </search-item>
    </search-area>
    <table-container>
      <template #btns-right>
        <icon-button icon="icon-add" title="新增" @click="add" />
      </template>
      <normal-table :query="listQuery" :list-loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
        <template #columns>
          <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
              <el-button type="primary" link size="small" class="table-text-button" @click="detail(scope.row)">
                详情
              </el-button>
              <el-button type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
                编辑
              </el-button>
              <el-button type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
                删除
              </el-button>
              <el-button type="primary" link size="small" class="table-text-button" @click="config(scope.row)">
                全局配置
              </el-button>
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </table-container>
    <edit-dev ref="editDialog" @close-refresh="search" />
    <config-dev ref="configDialog" @close-refresh="search" />
  </app-container>
</template>