<script lang="ts" setup name="ResourceList">
import type { Ref } from 'vue'
import { computed, getCurrentInstance, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { DateModelType } from 'element-plus'
import dayjs from 'dayjs'
import type { ILogInfo, IdeviceList } from './interface'
import { deleteCruiseLog, getCruiseLogListPage, getMonitorSelect } from '@/api/ptz/cruiselog'
import type { TableColumn } from '@/components/NormalTable/table_interface'
const { proxy } = getCurrentInstance() as any

// 筛选时间段数据
const timeRange = ref<[DateModelType, DateModelType]>(['', ''])
// 默认查询条件
const defaultQuery = {
  monitorId: '',
  startTime: '',
  endTime: '',
  offset: 1,
  limit: 20,
}
// 总数
const total = ref(0)
// 查询条件
const listQuery = reactive({ ...defaultQuery })

// 设备选择列表
const deviceList = ref<IdeviceList[]>()

// 获取设备列表
const getDeviceList = () => {
  getMonitorSelect({ stationId: '' }).then((res) => {
    deviceList.value = res.data.map((item: { id: any; monitorName: any }) => {
      return {
        value: item.id,
        name: item.monitorName,
      }
    })
    listQuery.monitorId = res.data[0].id as string
    fetchData() // 获取列表
  })
}

// 搜索重置
function reset() {
  Object.assign(listQuery, defaultQuery)
  listQuery.startTime = dayjs(Date.now() - 7 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
  listQuery.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  timeRange.value = [listQuery.startTime, listQuery.endTime]
  getDeviceList()
}
// 表格表头
const columns: Ref<TableColumn[]> = ref([])
columns.value = [
  { text: '设备名称', value: 'monitorName', align: 'center' },
  { text: '所在场站', value: 'stationName', width: 150, align: 'center' },
  { text: '水平角', value: 'direction', width: 150, align: 'center' },
  { text: '俯仰角', value: 'pitch', width: 150, align: 'center' },
  { text: '浓度值', value: 'concentration', width: 150, align: 'center' },
  { text: '创建时间', value: 'logTime', width: 200, align: 'center' },
]
// 数据列表
const list: Ref<ILogInfo[]> = ref([])
const loading = ref(false)

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

// 时间修改
function ChangeTimeRange(timeRange: any) {
  if (timeRange) {
    listQuery.startTime = timeRange[0] as string
    listQuery.endTime = timeRange[1] as string
  }
  else {
    listQuery.startTime = dayjs(Date.now() - 7 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
    listQuery.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
    timeRange.value = [listQuery.startTime, listQuery.endTime]
  }
}
// 查询数据
function fetchData(isNowPage = false) {
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    listQuery.offset = 1
  }
  loading.value = true
  getCruiseLogListPage(listQuery).then((res: any) => {
    list.value = res.data.rows
    total.value = res.data.total
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

// 清除日志
function clearlog() {
  ElMessageBox.confirm(
    '确定要清除日志吗？',
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    nextTick(() => {
      console.log(listQuery.monitorId)
      console.log(listQuery.startTime)
      console.log(listQuery.endTime)
      deleteCruiseLog({ monitorId: listQuery.monitorId, startTime: listQuery.startTime, endTime: listQuery.endTime }).then((res: any) => {
        ElMessage.success('清除成功')
        fetchData()
      })
    })
  })
}

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

onMounted(() => {
  listQuery.startTime = dayjs(Date.now() - 7 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
  listQuery.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  timeRange.value = [listQuery.startTime, listQuery.endTime]
  getDeviceList()
})
</script>

<template>
  <app-container>
    <search-area :need-clear="true" @search="search" @clear="reset">
      <!-- <template #btns>
        <el-button class="search-btn" type="danger" @click="clearlog">
          清除日志
        </el-button>
      </template> -->
      <search-item>
        <search-item>
          <el-select v-model="listQuery.monitorId" placeholder="选择设备">
            <el-option v-for="(item, index) in deviceList" :key="index" :label="item.name" :value="item.value" />
          </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="结束时间" @change="ChangeTimeRange"
          />
        </search-item>
      </search-item>
    </search-area>
    <table-container>
      <normal-table :query="listQuery" :list-loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
        <template #preColumns>
          <el-table-column align="center" label="序号" type="index" width="80" />
        </template>
      </normal-table>
    </table-container>
  </app-container>
</template>

<style scope>
.search-item {
  margin-bottom: 0 !important;
}
</style>