<script lang="ts" setup name="DevList">
import type { Ref } from 'vue'
import { reactive, ref } from 'vue'
import { ElLoading, 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, exportListPage, getDevListPage, restartDev, specialControl } from '@/api/ptz/dev'
import { getStationList } from '@/api/ptz/station'
import { exportFile } from '@/utils/exportUtils'

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

// 默认查询条件
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
  })
}

// 编辑
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)
}

// 导出
const exportAll = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '下载中请稍后',
    background: 'rgba(255, 255, 255, 0.8)',
  })
  if (list.value.length > 0) {
    exportListPage(listQuery).then((res) => {
      const blob = new Blob([res.data])
      exportFile(blob, '设备列表.xlsx')
    })
  }
  else {
    ElMessage.warning('无数据可导出数据')
  }
  loading.close()
}

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

// 删除
function delPoints(row: DevListInfo) {
  ElMessageBox.confirm(
    `确定要一键删除${row.monitorName}的预置点吗？`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    const params = {
      command: '65136',
      deviceIp: row.deviceIp,
    }
    loading.value = true
    specialControl(params).then(() => {
      ElMessage.success('删除成功')
      loading.value = false
      fetchData()
    },
    (oError) => {
      loading.value = false
    })
  })
}

// 添加
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" />
        <icon-button icon="icon-export" title="导出" type="primary" @click="exportAll" />
      </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="config(scope.row)">
                全局配置
              </el-button>
              <el-button type="primary" link size="small" class="table-text-button" @click="delPoints(scope.row)">
                删除预置点
              </el-button>
              <!--              <el-button type="primary" link size="small" class="table-text-button" @click="restart(scope.row)"> -->
              <!--                重启 -->
              <!--              </el-button> -->
              <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>
            </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>