<!--
  Description: 现场管理新增或编辑
  Author: 李亚光
  Date: 2023-04-24
 -->
<script lang="ts" setup name="sceneEdit">
import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import addOperatives from './components/personTable.vue'
import personList from './components/personListDialog.vue'
import deviceList from './components/deviceListDialog.vue'
const $route = useRoute()
const $router = useRouter()
const ruleFormRef = ref<FormInstance>() // from组件
const ruleForm: { [key: string]: string | any } = ref({
  workTitle: '', // 作业名称
  workRoad: '', // 所属道路
  workSiteDesc: '', // 作业描述
  workPerson: '', // 责任人
  workPersonName: '',
  workPersonPhoneNumber: '', // 负责人联系方式
  deviceList: [], // 	安全树列表
  workerList: '', // 人员列表
}) // 表单
const title = ref('')
const rules = ref({
  workTitle: [{ required: true, message: '作业名称不能为空', trigger: 'blur' }],
  workRoad: [{ required: true, message: '所属道路不能为空', trigger: 'blur' }],
  workSiteDesc: [{ required: true, message: '作业描述不能为空', trigger: 'blur' }],
  workPersonName: [{ required: true, message: '责任人不能为空', trigger: 'blur' }],
  deviceList: [{ required: true, message: '安全树列表不能为空', trigger: 'blur' }],
  workerList: [{ required: true, message: '人员列表不能为空', trigger: 'blur' }],
}) // 表单验证规则
// 人员列表弹窗组件
const selectPersonRef = ref()
// 选择负责人
const seletPerson = () => {
  selectPersonRef.value.initDialog()
}
// 确定负责人
const selectWorker = (row: any) => {
  ruleForm.value.workPerson = row.id
  ruleForm.value.workPersonName = row.workerName
  ruleFormRef.value.clearValidate('workPersonName')
}
const selectDeviceRef = ref()
// 选择安全树设备
const seletDevice = () => {
  selectDeviceRef.value.initDialog('SafetyTree')
}
// 确定安全树设备
const confirmDevice = (list: any) => {
  list.forEach((device: any) => {
    ruleForm.value.deviceList.push(device.deviceCode)
  })
}
// 提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  // 当前选中的证书基本信息列表
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm(
        '确认提交吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
      })
    }
  })
}
// 取消
const resetForm = () => {
  $router.go(-1)
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <!-- 选择负责人弹窗 -->
    <person-list ref="selectPersonRef" @add="selectWorker" />
    <!-- 选择安全树设备弹窗 -->
    <device-list ref="selectDeviceRef" @add="confirmDevice" :multiple="true" />
    <detail-page title="作业现场新增">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="right" label-width="110px"
        :class="[title === '详情' ? 'isDetail' : '']" border stripe>
        <el-row :gutter="24">
          <el-col :span="2"></el-col>
          <el-col :span="8">
            <el-form-item label="作业名称" prop="workTitle" style="margin-top: 40px;">
              <el-input v-model.trim="ruleForm.workTitle" placeholder="作业名称" :disabled="title === '详情'">
              </el-input>
            </el-form-item>
            <el-form-item label="安全树" prop="deviceList" class="marg-item" style="margin-top: 40px;">
              <el-select v-model.trim="ruleForm.deviceList" placeholder="安全树" :disabled="title === '详情'"
                @focus="seletDevice" style="width:100%" multiple></el-select>
            </el-form-item>
            <el-form-item label="责任人" prop="workPersonName" style="margin-top: 40px;">
              <el-select v-model.trim="ruleForm.workPersonName" placeholder="责任人" :disabled="title === '详情'"
                @focus="seletPerson" style="width:100%"></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="8">
            <el-form-item label="所属道路" prop="workRoad" style="margin-top: 40px;">
              <el-input v-model.trim="ruleForm.workRoad" placeholder="所属道路" :disabled="title === '详情'">
              </el-input>
            </el-form-item>
            <el-form-item label="作业概述" prop="workSiteDesc" style="margin-top: 40px;">
              <el-input v-model.trim="ruleForm.workSiteDesc" type="textarea" :rows="4" placeholder="作业概述"
                :disabled="title === '详情'">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="" label-width="0px">
              <!-- 添加工作人员 -->
              <add-operatives style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="resetForm" style="margin-left: 30px;">
          取消
        </el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
      </div>
    </detail-page>
  </app-container>
</template>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-items: end;
  flex-direction: row-reverse;
}

:deep(.el-radio__label) {
  display: none;
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 190px;
  height: 250px;
  text-align: center;
}

:deep(.avatar-uploader .avatar) {
  width: 190px;
  height: 250px;
  display: block;
}

.isDetail {
  ::v-deep {

    .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label::before,
    .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::before {
      display: none;
    }
  }
}
</style>

<style scoped>
.avatar-uploader .avatar {
  width: 190px;
  height: 250px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 190px;
  height: 250px;
  text-align: center;
}
</style>