<script lang="ts" setup name="AlarmList">
import type { Ref } from 'vue'
import { reactive, ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import type { DateModelType } from 'element-plus'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import {delAlarm, getListPage} from '@/api/home/alarm/alarm'
import {getRouteList} from "@/api/home/route/route";
import {getRobotList} from "@/api/home/robot/robot";
import {deleteFileListPage} from "@/api/system/tool";


const $router = useRouter()
// 默认查询条件
const defaultQuery = {
  robotId: '',
  routeId: '',
  taskId: '',
  valType: '',
  startTime: '',
  endTime: '',
  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: 'robotName', align: 'center' },
  { text: '巡航名称', value: 'routeName', align: 'center' },
  { text: 'x', value: 'x', align: 'center' },
  { text: 'y', value: 'y', align: 'center' },
  { text: '检测数值', value: 'monitorVal',align: 'center' },
  { text: '告警时间', value: 'alarmTime', align: 'center' },
  { text: '开始时间', value: 'startTime',  align: 'center' },
  { text: '结束时间', value: 'endTime',  align: 'center' }
]

const timeRange = ref<[DateModelType, DateModelType]>(['', ''])

const robotList = ref<any[]>([]) // 字典值
const routeList = ref<any[]>([]) // 字典值
function getDict() {
  getRobotList({}).then((response) => {
    robotList.value = response.data
  })
}

// 数据列表
const list: Ref<any[]> = ref([])
const loading = ref(false)


function changeRobot() {
  listQuery.routeId = ''
  getRouteList({
    robotId: listQuery.robotId
  }).then((response) => {
    routeList.value = response.data
  })
}


// 搜索按钮
function search() {
  if (timeRange.value) {
    listQuery.startTime = timeRange.value[0] as string || ''
    listQuery.endTime = timeRange.value[1] as string || ''
  }
  fetchData()
}

// 搜索重置
function clear() {
  Object.assign(listQuery, defaultQuery)
  listQuery.startTime = dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss')
  listQuery.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  timeRange.value = [listQuery.startTime, listQuery.endTime]
  fetchData()
}

// 查询数据
function fetchData() {
  loading.value = true
  getListPage(listQuery).then((res: { data: { rows: []; total: number } }) => {
    list.value = res.data.rows
    total.value = res.data.total
    loading.value = false
  })
}

// const resumeTime = ref('')
// const detailTxt = ref('')
// 删除
function del(row: any) {
  ElMessageBox.confirm(
    `确认删除${row.fileName}告警吗？`,
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      delAlarm({ id: row.id as string }).then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          fetchData()
        }
      })
    })
}


// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
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(() => {
  listQuery.startTime = dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss')
  listQuery.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  timeRange.value = [listQuery.startTime, listQuery.endTime]
  getDict()
  fetchData()
})
</script>

<template>
  <app-container>
    <search-area :need-clear="true" @search="search" @clear="clear">
      <search-item>
        <el-select v-model="listQuery.robotId" placeholder="选择设备" @change="changeRobot" clearable>
          <el-option
            v-for="item in robotList"
            :key="item.id"
            :label="item.robotName"
            :value="item.id"
          />
        </el-select>
      </search-item>
      <search-item>
        <el-select v-model="listQuery.routeId" placeholder="选择巡航路径" clearable>
          <el-option
            v-for="item in routeList"
            :key="item.id"
            :label="item.routeName"
            :value="item.id"
          />
        </el-select>
      </search-item>
      <search-item>
        <el-select v-model="listQuery.routeId" placeholder="检测数值" clearable>
          <el-option :key="1" label="有检测浓度" :value="1"/>
          <el-option :key="0" label="无检测浓度" :value="0"/>
        </el-select>
      </search-item>
      <search-item>
        <el-date-picker
          v-model="timeRange"
          type="datetimerange"
          range-separator="到"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </search-item>
    </search-area>
    <table-container>
      <normal-table :query="listQuery" :list-loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
        <template #columns>
          <el-table-column label="操作" width="120" align="center">
            <template #default="scope">
              <el-button v-show="scope.row.alarmStatus === '0'" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </table-container>
  </app-container>
</template>