<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 {getRobotList} from "@/api/home/robot/robot";
import {deleteTasks, exportListPage, getTaskListPage} from "@/api/home/task/task";
import {exportFile} from "@/utils/exportUtils";
import EditReport from "@/views/report/editReport.vue";

// 多选的数据
const multipleTable = ref([])

const $router = useRouter()
// 默认查询条件
const defaultQuery = {
  robotId: '',
  taskType: '',
  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: '任务ID', value: 'id', align: 'center' },
  { text: '任务名称', value: 'taskName', align: 'center' },
  { text: '设备名称', value: 'robotName', align: 'center' },
  { text: '巡检类型', value: 'taskTypeName', align: 'center' },
  { text: '告警数量', value: 'alarmNum',align: 'center' },
  { text: '开始时间', value: 'startTime',  align: 'center' },
  { text: '结束时间', value: 'endTime',  align: 'center' },
  { text: '任务进度状态', value: 'taskStatusName', align: 'center' }
]

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

const robotList = ref<any[]>([]) // 字典值

function getDict() {
  getRobotList({}).then((response) => {
    robotList.value = response.data
  })
}

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


// 搜索按钮
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
  getTaskListPage(listQuery).then((res: { data: { rows: []; total: number } }) => {
    list.value = res.data.rows
    total.value = res.data.total
    loading.value = false
  })
}
const editDialog = ref() // 组件

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

function exportFileFunc(row: any) {
  const loading = ElLoading.service({
    lock: true,
    text: '下载中请稍后',
    background: 'rgba(255, 255, 255, 0.8)',
  })
  if (list.value.length > 0) {
    exportListPage({taskId: row.id}).then((res) => {
      const blob = new Blob([res.data])
      exportFile(blob, row.taskName + '巡检报告.doc')
    })
  }

  loading.close()
}

function exportAll(row: any) {
  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: any) {
  if(multipleTable.value.length === 0) {
    ElMessage.warning('请选择删除数据')
    return
  }
  ElMessageBox.confirm(
    '确认删除吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    deleteTasks(multipleTable.value.map((item: any) => item.id)).then((res) => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        fetchData()
      })
    })
}

// 多选
const multiSelect = (val: any) => {
  multipleTable.value = val
}

// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
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="选择设备" 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.taskType" placeholder="选择巡航类型" clearable>
          <el-option :key="1" label="巡检任务" :value="1"/>
        </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>
      <template #btns-right>
        <el-button type="primary" @click="del">批量删除</el-button>
      </template>
      <normal-table
        :query="listQuery"
        :list-loading="loading"
        :columns="columns"
        :data="list"
        :total="total"
        :border="false"
        @change="changePage"
        :is-showmulti-select="true"
        @multi-select="multiSelect"
      >
        <template #columns>
                    <el-table-column label="操作" width="120" 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="exportFileFunc(scope.row)">
                          导出
                        </el-button>
                      </template>
                    </el-table-column>
        </template>
      </normal-table>
    </table-container>
    <edit-report ref="editDialog"/>
  </app-container>
</template>