<template>
  <div class="g-p20 g-mb40">
    <div class="g-fx">
      <pro-select type="1" placeholder="全部公司" v-model:selectValue="selectValue" width="350"></pro-select>
      <base-search :isShowDate="true" @on-search="search" @reset="reset" class="g-ml-20"></base-search>
    </div>
    <div class="g-card g-p30 g-pb-50">
      <div class="table">
        <el-table
          v-loading="allData.loading"
          header-cell-class-name="table-head"
          row-class-name="table-row"
          tooltip-effect
          :data="allData.items"
        >
          <el-table-column prop="deviceName" label="设备名称"> </el-table-column>
          <el-table-column label="设备编号" prop="deviceCode"> </el-table-column>
          <el-table-column label="所属公司" prop="companyName"> </el-table-column>
          <el-table-column label="车间" prop="workshopName"> </el-table-column>
          <el-table-column label="报警内容" prop="message"> </el-table-column>
          <el-table-column label="报警时间" prop="triggerTime"> </el-table-column>
          <base-alarm-state></base-alarm-state>
        </el-table>
      </div>
      <pro-pagination
        class="g-pagination"
        :total="allData.data.totalCount"
        v-if="allData.data.totalCount !== 0"
        :pageObj="pageObj"
      ></pro-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { getAllAlertRecords, getAllRealTimeAlert } from '@/api'
  import { useRequest } from '@/utils/hooks'
  import dayjs from 'dayjs'
  import { ElMessage } from 'element-plus'

  let pageObj: any = ref({
    MaxResultCount: 10,
    SkipCount: 1
  })
  onMounted(async () => {
    await allData.getData()
  })
  let iptValue = ref('')
  const date = reactive({
    arr: [dayjs(dayjs().subtract(1, 'year')).format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
  })
  const allData = useRequest(() =>
    getAllAlertRecords({
      MaxResultCount: pageObj.value.MaxResultCount,
      // CompanyId: selectValue.value,
      SkipCount: (pageObj.value.SkipCount - 1) * pageObj.value.MaxResultCount,
      StartTime: date.arr[0],
      EndTime: date.arr[1]
    })
  )
  let selectValue = ref()
  const search = (v: any) => {
    if (v.dateValue[0] == 'time1') return ElMessage.warning('请先选择时间')
    date.arr[0] = v.dateValue[0]
    date.arr[1] = v.dateValue[1]
    iptValue.value = v
    pageObj.value = {
      MaxResultCount: 10,
      SkipCount: 1
    }
    allData?.getData()
  }
  watch([pageObj.value], () => {
    allData?.getData()
  })
  const reset = () => {
    iptValue.value = ''
    date.arr = [dayjs(dayjs().subtract(1, 'year')).format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
    pageObj.value = {
      MaxResultCount: 10,
      SkipCount: 1
    }
    allData?.getData()
  }
</script>

<style lang="less" scoped>
  .table {
    margin-bottom: 20px;
  }
  :deep(.el-table) {
    .table-head {
      background: #f6f6f6;
      .cell {
        color: #333;
      }
    }
    .table-head {
      height: 40px;
      font-size: 12px;
    }
    .table-row {
      color: #333;
      .el-table__cell {
        padding: 16px 0;
      }
    }
    .el-icon {
      width: 20px;
      height: 20px;
      font-size: 16px;
      font-weight: bold;
    }
    .fs-16 {
      font-size: 18px;
    }
  }
</style>
