<!--
  Description: 现场管理详情
  Author: 李亚光
  Date: 2023-05-04
 -->
<script lang="ts" setup name="sceneEdit">
import addOperatives from './components/personTable.vue'
import { getSceneDetail } from '@/api/scene'
const $router = useRouter()
const $route = useRoute()
const data = ref<{ [key: string]: string | any }>({})
const goBak = () => {
  $router.go(-1)
}
onMounted(() => {
  const id = $route.query.id as string
  getSceneDetail(id).then((res) => {
    data.value = res.data
    console.log(data.value, 'data.value ')
  })
})
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page :title="`${data.workTitle}作业`">
      <template #btns>
        <el-button type="primary" @click="goBak">返回</el-button>
      </template>
      <el-row :gutter="24">
        <el-col :span="1"></el-col>
        <el-col :span="3">
          作业概述:
        </el-col>
        <el-col :span="20">
          {{ data.workSiteDesc }}
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-top: 30px;">
        <el-col :span="1"></el-col>
        <el-col :span="3">
          现场负责人:
        </el-col>
        <el-col :span="2">
          {{ data.workPersonName }}
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="2">
          联系方式 :
        </el-col>
        <el-col :span="2">
          {{ data.workPersonPhoneNumber }}
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="2">
          所属部门 :
        </el-col>
        <el-col :span="2">
          {{ data.workPersonDeptName }}
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-top: 30px;">
        <el-col :span="1"></el-col>
        <el-col :span="3">
          现场人员总数:
        </el-col>
        <el-col :span="2">
          {{ data.workerList?.length }}人
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="2">
          安全树 :
        </el-col>
        <el-col :span="15">
          {{ data.deviceList?.length }}棵
          <span v-if="data.deviceList?.length">(编号: <span v-for="(item, index) in data?.deviceList" :key="index">{{
            item.deviceCode }}{{ index === data.deviceList?.length - 1 ? '' : '\\' }}</span>)</span>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <!-- 人员列表 -->
          <add-operatives :is-operate="false" table-title="人员列表" style="width:100%" :list="data.workerList || []" />
        </el-col>
      </el-row>
    </detail-page>
  </app-container>
</template>