<script lang="ts" setup name="PlanAdd">
import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import { SCHEDULE } from '@/utils/scheduleDict'
import useUserStore from '@/store/modules/user'
import {
  getDeptTree,
  getListDetail,
  getListSave,
  getListSubmit,
  getListUpdate,
} from '@/api/system/plan'
const infoId = ref('') // id
const { name } = useUserStore()
const pageType = ref('add') // 页面类型: add,edit, detail
const buttonLoading = ref(false) // 按钮加载状态
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
} // 字典
// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
const formInline = ref({
  createTime: null,
  deptId: '',
  deptName: null,
  director: '',
  effectiveCompany: null,
  id: '',
  planName: '',
  planNo: null,
  remark: null,
  trainAddress: null,
  trainContent: null,
  trainHour: null,
  trainNumber: null,
  trainPerson: name,
  trainStaffList: [],
  trainTime: dayjs(`${new Date()}`).format('YYYY.MM.DD h:m:s'),
})
const addId = ref('') // 保存后的id
const ruleFormRef = ref<FormInstance>()

const selectionList = ref([
  { text: '101', value: '101' },
  { text: '102', value: '102' },
  { text: '103', value: '103' },
  { text: '104', value: '104' },
])
// 校验规则
const rules = ref({
  planName: [{ required: true, message: '房间号不能为空', trigger: 'blur' }],
  trainPerson: [
    { required: true, message: '记录人不能为空', trigger: 'blur' },
  ],
  trainNumber: [
    { required: true, message: '培训人数不能为空', trigger: 'blur' },
  ],
  trainTime: [{ required: true, message: '记录时间不能为空', trigger: 'blur' }],
  trainAddress: [
    { required: true, message: '湿度(%)不能为空', trigger: 'blur' },
  ],
  trainHour: [{ required: true, message: '温度(℃)不能为空', trigger: 'blur' }],
  effectiveCompany: [
    { required: true, message: '输出电压(V)不能为空', trigger: 'blur' },
  ],
  trainContent: [
    { required: true, message: '零地电压(V)不能为空', trigger: 'blur' },
  ],
}) // 表单验证规则

// 初始化router
const $router = useRouter()
// 关闭新增页面的回调
const close = () => {
  $router.back()
}

if (infoId.value && infoId.value !== '') {
  getListDetail({ id: infoId.value }).then((res) => {
    formInline.value = res.data
  })
}
// 点击保存
const preserve = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm('确认提交吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // getListSave(formInline.value).then((res) => {
        //   if (res.code === 200) {
        //     addId.value = res.data.id
        //     ElMessage.success('保存成功！')
        //   }
        // })
      })
    }
  })
}
// 打印
const printObj = ref({
  id: 'form', // 需要打印元素的id
  popTitle: '环境记录单模板', // 打印配置页上方的标题
  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  standard: '',
  extarCss: '',
})
</script>

<template>
  <app-container>
    <detail-page :title="`环境记录单-${textMap[pageType]}`">
      <template #btns>
        <el-button
          v-if="pageType !== 'detail'"
          type="primary"
          @click="
            preserve(ruleFormRef)
          "
        >
          提交
        </el-button>
        <el-button v-else v-print="printObj" type="primary">
          打印
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        id="form"
        ref="ruleFormRef"
        :model="formInline"
        class="demo-form-inline"
        :rules="rules"
        label-width="auto"
        label-position="right"
      >
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="环境记录单:">
              <el-input
                v-model="formInline.planNo"
                :placeholder="pageType === 'detail' ? '无' : '系统自动生成 环境记录单号'"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="房间号:" prop="planName">
              <el-select
                v-model="formInline.planName"
                clearable
                :placeholder="pageType === 'detail' ? '无' : '请选择房间号'"
                size="default"
                :disabled="pageType === 'detail'"
              >
                <el-option
                  v-for="item in selectionList"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="记录人:" prop="trainPerson">
              <el-input
                v-model="formInline.trainPerson"
                :placeholder="pageType === 'detail' ? '无' : '请输入记录人'"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="记录时间:" prop="trainTime">
              <el-date-picker
                v-model="formInline.trainTime"
                type="datetime"
                :placeholder="pageType === 'detail' ? '无' : '请选择记录时间'"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD h:m:s"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="温度(℃):" prop="trainHour">
              <el-input
                v-model="formInline.trainHour"
                :placeholder="pageType === 'detail' ? '无' : '请输入温度(℃)'"
                :disabled="pageType === 'detail'"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="湿度(%):" prop="trainAddress">
              <el-input
                v-model="formInline.trainAddress"
                :placeholder="pageType === 'detail' ? '无' : '请输入湿度(%)'"
                :disabled="pageType === 'detail'"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="输出电压(V):" prop="effectiveCompany">
              <el-input
                v-model="formInline.effectiveCompany"
                :placeholder="pageType === 'detail' ? '无' : '请输入输出电压(V)'"
                :disabled="pageType === 'detail'"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="零地电压(V):" prop="trainContent">
              <el-input
                v-model="formInline.trainContent"
                :placeholder="pageType === 'detail' ? '无' : '请输入零地电压(V)'"
                :disabled="pageType === 'detail'"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
  </app-container>
</template>