<!-- 计量计划-编辑 -->
<script lang="ts" setup name="PlanEdit">
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import planList from './table.vue'
import { addGroup, detailGroup, updateGroup } from '@/api/eqpt/device/group'
import { getDictByCode } from '@/api/system/dict'
import useUserStore from '@/store/modules/user'
import { editBtn, submitBtn } from '@/utils/applyBtns'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件
const statusName = $route.query.statusName as string
const title = ref('')
// 显示标题
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
}
// 对话框类型：create,update
const dialogStatus = ref('create')
const ruleForm = ref({
  approvalStatus: '', // 审批状态
  createDeptId: 0,
  createDeptName: '',
  createTime: '',
  createUserId: 0,
  createUserName: '',
  decisionItem: 0,
  equipmentIds: [],
  id: 0,
  month: '',
  planCategory: '',
  planName: '',
  planNo: '',
  planType: '',
  processId: '',
  remark: '',
  season: '',
  taskId: '',
  updateTime: '',
  year: '',
}) // 表单
const rules = ref<FormRules>({
  groupName: [{ required: true, message: '分组名称必填', trigger: 'blur' }],
  remark: [{ required: true, message: '备注必填', trigger: 'blur' }],
}) // 表单验证规则
// 弹窗初始化
const initDialog = () => {
  dialogStatus.value = $route.params.type as string
  ruleFormRef.value?.resetFields()
  // if ($route.params.type === 'create') {
  //   ruleForm.value.groupInfo.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // 创建时间
  //   ruleForm.value.groupInfo.createUserId = userStore.id
  //   ruleForm.value.groupInfo.createUserName = userStore.name
  // }
  // else {
  //   console.log($route.query.row, 'data')
  //   const data = JSON.parse($route.query.row as string)
  //   detailGroup({ groupId: data.id }).then((res) => {
  //     ruleForm.value = res.data
  //   })
  // }
}
// 获取计划分类列表
const planTypeList = ref()
const fetchTypeList = () => {
  getDictByCode('eqptPlanType').then((res) => {
    planTypeList.value = res.data
  })
}
fetchTypeList()
onMounted(() => {
  initDialog()
})
// 关闭弹窗
const close = () => {
  $router.back()
}
const tableRef = ref()
// 保存
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid && tableRef.value.checkCertificateList()) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then((res) => {
        ruleForm.value.equipmentList = tableRef.value.list
        if ($route.params.type === 'create') {
          addGroup(ruleForm.value).then((res) => {
            ElMessage.success('添加成功')
            close()
          })
        }
        else {
          updateGroup(ruleForm.value).then((res) => {
            ElMessage.success('修改成功')
            close()
          })
        }
      })
    }
  })
}
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  formEl?.resetFields()
  close()
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <approval-dialog ref="approvalDialogRef" @on-success="() => { $router.back() }" />
    <detail-page class="base-info-device" :title="`计量计划-${textMap[dialogStatus]}`">
      <template #btns>
        <el-button v-if="statusName === '待审批'" type="primary" @click="apply('agree')">
          同意
        </el-button>
        <el-button v-if="statusName === '待审批'" type="primary" @click="apply('refuse')">
          拒绝
        </el-button>
        <el-button v-if="editBtn(statusName, dialogStatus)" type="primary" @click="editForm()">
          编辑
        </el-button>
        <el-button v-if="submitBtn(statusName, dialogStatus)" type="primary" @click="submitForm()">
          提交
        </el-button>
        <el-button v-if="submitBtn(statusName, dialogStatus)" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </el-button>
        <el-button v-if="statusName === '已通过'" type="primary">
          打印
        </el-button>
        <el-button v-if="statusName === '已取消' || statusName === '审批'" type="info" @click="delForm()">
          删除
        </el-button>
        <el-button v-if="statusName === '审批中'" type="info" @click="cancelForm()">
          取消
        </el-button>
        <el-button type="info" @click="resetForm(ruleFormRef)">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com>
      <el-form
        ref="ruleFormRef" :model="ruleForm" :rules="[]" label-position="right" label-width="110px" class="form"
        :class="[dialogStatus === 'detail' ? 'isDetail' : '']" :disabled="dialogStatus === 'detail'"
      >
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="计划编号">
              <el-input v-model.trim="ruleForm.equipmentNo" placeholder="系统自动生成" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计划名称" prop="equipmentName">
              <el-input v-model.trim="ruleForm.equipmentName" placeholder="设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计划分类" prop="usageStatus">
              <el-select v-model="ruleForm.usageStatus" placeholder="选择计划分类" style="width: 100%;">
                <el-option v-for="item in planTypeList" :key="item.id" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="创建单位" prop="productCountry">
              <el-input v-model.trim="ruleForm.productCountry" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建人" prop="manufacturer">
              <el-input v-model.trim="ruleForm.manufacturer" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间" prop="productDate">
              <el-date-picker
                v-model="ruleForm.productDate" type="date" format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择创建时间" class="normal-date" style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model.trim="ruleForm.remark" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block-com>
    <detail-block-com>
      <plan-list ref="tableRef" :data="[]" :status="$route.params.type as string" />
    </detail-block-com>
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
</style>