<!-- 质量监督报告新建 -->
<script name="QualityReportAdd" lang="ts" setup>
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import dayjs from 'dayjs'
import recordDialog from './recordDialog.vue'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { getDictByCode } from '@/api/system/dict'
import { getSearchDept } from '@/api/quality/supervise/record'
import useUserStore from '@/store/modules/user'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件
const labelList = ref<{ id: string; value: string; name: string }[]>()// 实验室代码
const deptList = ref<{ deptName: string; deptId: string }[]>([]) // 部门列表
const ruleForm = ref({
  bizLabCode: '', // 实验室
  deptId: '', // 部门
  fileCode: '', // 文件编号
  fileName: '质量监督报告', // 文件名称
  creatorName: '', // 创建者
  creator: '', // 创建者
  logTime: '', // 记录时间
  records: [], // 关联监督记录
  processInfo: '', // 监督的过程统计
  problemProcessDesc: '', // 存在问题过程综述
  betterProcessDesc: '', // 运行情况较好过程综述
}) // 表单
const rules = ref<FormRules>({
  bizLabCode: [{ required: true, message: '实验室必选', trigger: ['blur', 'change'] }],
  deptId: [{ required: true, message: '部门必选', trigger: ['blur', 'change'] }],
  logTime: [{ required: true, message: '时间必选', trigger: ['blur', 'change'] }],
}) // 表单验证规则
const columns = ref<TableColumn[]>([
  { text: '文件编号', value: 'standardNo', align: 'center' },
  { text: '文件名称', value: 'standardNo', align: 'center' },
  { text: '质量监督员', value: 'standardNo', align: 'center' },
  { text: '部门', value: 'standardNo', align: 'center' },
  { text: '不符合标准', value: 'standardNo', align: 'center' },
  { text: '监督时间', value: 'standardNo', align: 'center' },
])
// 获取字典值
const fetchDict = () => {
// 获取实验室代码字典
  getDictByCode('bizLabCode').then((res) => {
    labelList.value = res.data
  })
  getSearchDept({ labCode: '' }).then((res) => {
    deptList.value = res.data
  })
}
fetchDict()
watch(() => ruleForm.value.bizLabCode, (newVal) => {
  if (newVal) {
    ruleForm.value.deptId = ''
    getSearchDept({ labCode: newVal }).then((res) => {
      deptList.value = res.data
    })
  }
}, {
  deep: true,
})
onMounted(() => {
  if ($route.path.includes('create')) {
    ruleForm.value.creator = userStore.id
    ruleForm.value.creatorName = userStore.name
    ruleForm.value.logTime = dayjs().format('YYYY-MM-DD HH:mm')
  }
})
// 质量监督记录弹窗
const recordRef = ref()
// 选择质量监督记录
const selectRecord = () => {
  recordRef.value.initDialog()
}
// 确认选择质量监督记录
const confirmRecord = (val: any) => {
  console.log(val, '选中')
  // ruleForm.value.records.push(val)
  // 监督的过程统计预置
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <!-- 监督记录弹窗 -->
    <record-dialog ref="recordRef" @add="confirmRecord" />
    <detail-page title="质量监督报告">
      <template #btns>
        <el-button type="primary">
          提交
        </el-button>
        <el-button type="primary">
          保存
        </el-button>
        <el-button type="info" @click="() => $router.go(-1)">
          关闭
        </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="deptId">
              <el-select
                v-model="ruleForm.deptId"
                placeholder="部门"
                class="short-input"
                filterable
                style="width: 100%;"
              >
                <el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName" :value="item.deptId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="文件编号">
              <el-input v-model.trim="ruleForm.fileCode" placeholder="系统自动生成" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="文件名称">
              <el-input v-model.trim="ruleForm.fileName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="质量监督员">
              <el-input v-model.trim="ruleForm.creatorName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="记录时间" prop="logTime">
              <el-date-picker
                v-model="ruleForm.logTime"
                type="datetime"
                style="width: 100%;"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </detail-block>
      <detail-block title="">
        <el-row :gutter="24" class="marg">
          <el-col :span="20">
            <el-form-item label="关联质量监督记录" label-width="160px">
              <el-button v-if="!$route.path.includes('detail')" type="primary" @click="selectRecord">
                选择质量监督记录
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="20">
            <el-form-item label="" label-width="160px">
              <normal-table
                :data="ruleForm.records" :columns="columns" :pagination="false"
                :is-showmulti-select="false" :is-multi="true"
              >
                <template #preColumns>
                  <el-table-column label="序号" align="center" width="60">
                    <template #default="scope">
                      {{ scope.$index + 1 }}
                    </template>
                  </el-table-column>
                </template>
              </normal-table>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="20">
            <el-form-item label="监督的过程统计" label-width="160px">
              <el-input v-model="ruleForm.processInfo" type="textarea" :rows="5" placeholder="监督的过程统计" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="20">
            <el-form-item label="运行情况较好过程综述" label-width="160px">
              <el-input v-model="ruleForm.betterProcessDesc" type="textarea" :rows="5" placeholder="运行情况较好过程综述" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="20">
            <el-form-item label="存在问题过程综述" label-width="160px">
              <el-input v-model="ruleForm.problemProcessDesc" type="textarea" :rows="5" placeholder="存在问题过程综述" />
            </el-form-item>
          </el-col>
        </el-row>
      </detail-block>
    </el-form>
  </app-container>
</template>