<template>
  <div class="g-p20" style="margin-bottom: 40px">
    <div class="g-fx">
      <pro-select type="1" placeholder="全部公司" width="350"></pro-select>
      <base-search :isShowDate="false" @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 { getAllRealTimeAlert } from '@/api'
  import { useRequest } from '@/utils/hooks'
  let pageObj: any = ref({
    MaxResultCount: 10,
    SkipCount: 1
  })
  onMounted(async () => {
    await allData.getData()
  })
  let iptValue = ref('')
  const allData = useRequest(() =>
    getAllRealTimeAlert({
      MaxResultCount: pageObj.value.MaxResultCount,
      SkipCount: (pageObj.value.SkipCount - 1) * pageObj.value.MaxResultCount,
      Keyword: iptValue.value
    })
  )
  const search = (v: string) => {
    iptValue.value = v
    pageObj.value = {
      MaxResultCount: 10,
      SkipCount: 1
    }
    allData?.getData()
  }
  watch([pageObj.value], () => {
    allData?.getData()
  })
  const reset = () => {
    iptValue.value = ''
    pageObj.value = {
      MaxResultCount: 10,
      SkipCount: 1
    }
  }
</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>
