<!-- 质量管理体系有效性综合分析报告编辑页面 -->
<script name="ReviewEffectivenesReportHandler" lang="ts" setup>
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import reportContent from './reportContent.vue'
import { getReviewWorkList } from '@/api/quality/review/work'
import { getDictByCode } from '@/api/system/dict'
import useUserStore from '@/store/modules/user'
import { addReviewEffect, detailReviewEffect, updateReviewEffect } from '@/api/quality/review/effectiveness'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件
const ruleForm = ref({
  bizLabCode: '',
  fileCode: '',
  fileName: '质量管理体系有效性综合分析报告',
  repContents: [
    {
      inspectionContent: '质量管理体系适宜性',
      inspectionMethod: '程序文件、管理规定的适宜性',
      inspectionRes: '',
      refStandard: '',
      editable: true,
    },
    {
      inspectionContent: '质量管理体系适宜性',
      inspectionMethod: '质量目标实现情况',
      inspectionRes: '',
      refStandard: '',
      editable: true,
    },
    {
      inspectionContent: '质量管理体系适宜性',
      inspectionMethod: '纠正和预防措施的实施情况',
      inspectionRes: '',
      refStandard: '',
      editable: true,
    },
    {
      inspectionContent: '监督检查的结果',
      inspectionMethod: '管理和监督人员的报告',
      inspectionRes: '',
      refStandard: '',
      editable: true,
    },
    {
      inspectionContent: '监督检查的结果',
      inspectionMethod: '审核的结果',
      inspectionRes: '',
      refStandard: '',
      editable: true,
    },
    {
      inspectionContent: '监督检查的结果',
      inspectionMethod: '以往管理评审决策的跟踪结果',
      inspectionRes: '',
      refStandard: '',
      editable: true,
    },
    {
      inspectionContent: '监督检查的结果',
      inspectionMethod: '实验室间比对和能力测试结果',
      inspectionRes: '',
      refStandard: '',
      editable: true,
    },
    {
      inspectionContent: '',
      inspectionMethod: '情况变化的因素',
      inspectionRes: '',
      refStandard: '',
      editable: true,
    },
    {
      inspectionContent: '',
      inspectionMethod: '改进的建议',
      inspectionRes: '',
      refStandard: '',
      editable: true,
    },
  ],
  commanderName: '',
  commanderId: '',
  createTime: '',
  managementReviewId: '',
  remarks: '',
}) // 表单
const rules = ref<FormRules>({
  bizLabCode: [{ required: true, message: '实验室必选', trigger: ['blur', 'change'] }],
  managementReviewId: [{ required: true, message: '评审工作必选', trigger: ['blur', 'change'] }],
}) // 表单验证规则
onMounted(() => {
  if ($route.path.includes('create')) {
    ruleForm.value.createTime = dayjs().format('YYYY-MM-DD') // 记录时间
    ruleForm.value.commanderId = userStore.id
    ruleForm.value.commanderName = userStore.name
    // 自动填充
    if ($route.query.data) {
      const data = JSON.parse($route.query.data as string)
      console.log(data, 'data')
      ruleForm.value.bizLabCode = data.bizLabCode
      ruleForm.value.managementReviewId = data.id
    }
  }
  else {
    rules.value.fileCode = [{ required: true, message: '文件编号必填', trigger: ['blur', 'change'] }]
    detailReviewEffect({ id: $route.query.id }).then((res) => {
      if (!res.data.repContents) {
        res.data.repContents = []
      }
      ruleForm.value = res.data
      nextTick(() => {
        ruleFormRef.value.clearValidate()
      })
    })
  }
})
// 保存
const saveRow = (data: any) => {
  ($route.path.includes('create') ? addReviewEffect : updateReviewEffect)(data).then((res) => {
    ElMessage.success('操作成功')
    close()
  })
}
const contentRef = ref()
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then((res) => {
        const data = {
          ...ruleForm.value,
          repContents: contentRef.value.list,
        }
        saveRow(data)
      })
    }
  })
}
const labelList = ref<{ id: string; value: string; name: string }[]>()// 实验室代码
const workList = ref<{ id: string; value: string; name: string }[]>()// 实验室代码
const fetchDict = () => {
  // 获取实验室代码字典
  getDictByCode('bizLabCode').then((res) => {
    labelList.value = res.data
  })
  // 评审工作
  getReviewWorkList({ limit: 999, offset: 1 }).then((res) => {
    workList.value = res.data.rows.map((item: any) => ({ name: item.workName, value: item.id, id: item.id }))
  })
}
fetchDict()
function close() {
  if ($route.query.data) {
    $router.go(-1)
  }
  else {
    $router.push({
      path: '/qreview/qrevieweffectiveness',
    })
  }
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page title="质量管理体系有效性综合分析报告">
      <template #btns>
        <el-button v-if="!$route.path.includes('detail')" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
    </detail-page>
    <el-form ref="ruleFormRef" :model="ruleForm" :class="$route.path.includes('detail') ? 'isDetail' : ''" :rules="rules" label-position="right" label-width="120px" class="form" :disabled="$route.path.includes('detail')">
      <detail-block title="">
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="实验室" prop="bizLabCode">
              <el-select
                v-model="ruleForm.bizLabCode"
                placeholder="实验室"
                class="short-input"
                filterable
                style="width: 100%;"
              >
                <el-option v-for="item in labelList" :key="item.id" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="文件编号" prop="fileCode">
              <el-input v-model.trim="ruleForm.fileCode" :placeholder="$route.path.includes('create') ? '系统自动生成' : ''" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="文件名称" prop="fileName" label-width="140">
              <el-input v-model.trim="ruleForm.fileName" placeholder="文件名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="质量负责人" prop="commanderName">
              <el-input v-model.trim="ruleForm.commanderName" disabled placeholder="质量负责人" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间" prop="createTime">
              <el-date-picker
                v-model="ruleForm.createTime"
                type="date"
                placeholder="创建时间"
                style="width: 100%;"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="关联管理评审工作" prop="managementReviewId" label-width="140">
              <el-select
                v-model="ruleForm.managementReviewId"
                placeholder="关联管理评审工作"
                class="short-input"
                filterable
                style="width: 100%;"
              >
                <el-option v-for="item in workList" :key="item.id" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </detail-block>
      <detail-block title="">
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="ruleForm.remarks" placeholder="备注" />
            </el-form-item>
          </el-col>
        </el-row>

        <report-content ref="contentRef" :data="ruleForm.repContents" />
      </detail-block>
    </el-form>
  </app-container>
</template>

<style lang="scss" scoped>
.user-container {
  width: 100%;
  height: 120px;
  overflow-y: scroll;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
}

.mx-1 {
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 5px;
}

.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 {
      content: "";
      display: none;
    }
  }
}
</style>