<!--
  Description: 现场管理报告
  Author: 李亚光
  Date: 2023-05-04
 -->
<script lang="ts" setup name="sceneEdit">
import { getSceneDetail } from '@/api/scene'
import { getAlarmListPage } from '@/api/alarm'
import { getTempPersonListPage } from '@/api/person'
const $router = useRouter()
const $route = useRoute()
const data = ref<{ [key: string]: string | any }>({})
const alarmList = ref<any[]>([])
const tempPerson = ref<any[]>([])
const goBak = () => {
  $router.go(-1)
}
const alarmColums = ref([
  {
    text: '报警信息',
    value: 'alarmContent',
    align: 'center',
  },
  {
    text: '报警类型',
    value: 'alarmTypeName',
    align: 'center',
  },
  {
    text: '报警时间',
    value: 'alarmTime',
    align: 'center',
  },
  {
    text: '当前状态',
    value: 'alarmStatusName',
    align: 'center',
  },
])
const personColums = ref([
  { text: '姓名', value: 'workerName', width: '90', align: 'center' },
  { text: '联系方式', value: 'workerPhoneNumber', align: 'center' },
  { text: '所在部门', value: 'workerDeptName', align: 'center' },
  { text: '挂载安全帽编号', value: 'hatCode', align: 'center' },
  { text: '挂载背心编号', value: 'vastCode', align: 'center' },
  { text: '挂载手环编号', value: 'braceletCode', align: 'center' },

])
const tempColums = ref([
  { text: '姓名', value: 'workerName', width: '90', align: 'center' },
  { text: '性别', value: 'genderName', align: 'center' },
  { text: '证件号', value: 'idCardNumber', align: 'center' },
  { text: '所属单位', value: 'ownerShip', align: 'center' },
  { text: '时间', value: 'createTime', align: 'center' },
  { text: '入场原因', value: 'enterReason', align: 'center' },
])
onMounted(() => {
  const id = $route.query.id as string
  const title = $route.query.title
  getSceneDetail(id).then((res) => {
    console.log(res.data, '现场详情')
    data.value = res.data
  })
  getAlarmListPage({ workTitle: title, sort: 'desc', orderBy: 'alarmTime', offset: 1, limit: 999999 }).then((res) => {
    console.log(res.data, '报警列表')
    alarmList.value = res.data.rows
  })
  getTempPersonListPage(id).then((res) => {
    console.log(res.data, '临时')
    tempPerson.value = res.data
  })
})
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page :title="`${data.workTitle}作业现场报告`">
      <template #btns>
        <el-button type="primary" @click="goBak">
          返回
        </el-button>
      </template>
      <div class="container">
        <el-row :gutter="24">
          <el-col :span="2" />
          <el-col :span="15">
            {{ `${data.workTitle}作业现场实施` }}
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-top: 30px;">
          <el-col :span="2" />
          <el-col :span="2">
            作业概述:
          </el-col>
          <el-col :span="20">
            {{ data.workSiteDesc }}
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-top: 30px;">
          <el-col :span="2" />
          <el-col :span="2">
            现场负责人:
          </el-col>
          <el-col :span="3">
            {{ data.workPersonName }}
          </el-col>
          <el-col :span="1" />
          <el-col :span="2">
            联系方式:
          </el-col>
          <el-col :span="8">
            {{ data.workPersonPhoneNumber }}
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-top: 30px;">
          <el-col :span="2" />
          <el-col :span="2">
            实施周期:
          </el-col>
          <el-col :span="5">
            {{ data?.projectState !== '1' ? `${data?.startTime} ~ ${data?.finishTime ? data?.finishTime : '至今'}` : '未开始'
            }}
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-top: 30px;">
          <el-col :span="2" />
          <el-col v-if="alarmList.length" :span="2">
            报警汇总:
          </el-col>
          <el-col :span="15">
            <span v-if="!alarmList.length">现场暂无报警记录</span>
            <span v-else> 共{{ alarmList.length }}次报警 </span>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-top: -10px;">
          <el-col :span="2" />
          <el-col :span="20">
            <table-container title="现场报警汇总">
              <normal-table :data="alarmList" :columns="alarmColums" :pagination="false" />
            </table-container>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-top: 30px;">
          <el-col :span="2" />
          <el-col :span="15">
            <span v-if="!data?.workerList?.length && tempPerson.length!">暂无人员</span>
            <span>
              {{ `作业现场入场人员共${data?.workerList?.length + tempPerson.length}人；其中: ` }}
              <span v-if="data?.workerList?.length">{{ data?.workerList?.length }}是施工人员; </span>
              <span v-if="tempPerson.length">{{ tempPerson.length }}是临时人员; </span>
            </span>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-top: -10px;">
          <el-col :span="2" />
          <el-col :span="20">
            <table-container title="实施人员汇总">
              <normal-table :data="data?.workerList || []" :columns="personColums" :pagination="false" />
            </table-container>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-top: -10px;">
          <el-col :span="2" />
          <el-col :span="20">
            <table-container title="临时人员汇总">
              <normal-table :data="tempPerson || []" :columns="tempColums" :pagination="false" />
            </table-container>
          </el-col>
        </el-row>
      </div>
    </detail-page>
  </app-container>
</template>

<style lang="scss" scoped>
::v-deep {
  .title-left {
    font-size: 16px;
    font-weight: 700;
  }

  .button-area {
    background-color: #ccc;
    padding: 10px;
    margin-bottom: 0 !important;
  }
}
</style>