<!-- 管理评审工作管理编辑页面 -->
<script name="QualityReviewWorkHandler" lang="ts" setup>
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import fileList from './fileList.vue'
import { getDictByCode } from '@/api/system/dict'
import useUserStore from '@/store/modules/user'
import { getUserList } from '@/api/system/user'
import { addReviewWork, detailReviewWork, updateReviewWork } from '@/api/quality/review/work'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件
const ruleForm = ref({
  yearTime: '',
  yearNum: '',
  workName: '',
  bizLabCode: '',
  beginTime: '',
  endTime: '',
  commanderId: '',
  currentStage: '0',
  reviewFileList: [] as any,
}) // 表单
const rules = ref<FormRules>({
  yearTime: [{ required: true, message: '年份必选', trigger: ['blur', 'change'] }],
  yearNum: [{ required: true, message: '月份必选', trigger: ['blur', 'change'] }],
  bizLabCode: [{ required: true, message: '实验室必选', trigger: ['blur', 'change'] }],
  beginTime: [{ required: true, message: '开始时间必选', trigger: ['blur', 'change'] }],
  endTime: [{ required: true, message: '结束时间必选', trigger: ['blur', 'change'] }],
  commanderId: [{ required: true, message: '质量负责人必选', trigger: ['blur', 'change'] }],
}) // 表单验证规则
onMounted(() => {
  if ($route.path.includes('create')) {
    // ruleForm.value.logTime = dayjs().format('YYYY-MM-DD HH:mm') // 记录时间
    // ruleForm.value.commanderId = userStore.id
    // ruleForm.value.createName = userStore.name
  }
  if (!$route.path.includes('create')) {
    detailReviewWork({ id: $route.query.id }).then((res) => {
      console.log(res.data, '详情')
      ruleForm.value = res.data
    })
  }
})
// 文件组件实例
const fileRef = ref()
const saveRow = (data: any) => {
  ($route.path.includes('create') ? addReviewWork : updateReviewWork)(data).then((res) => {
    ElMessage.success('操作成功')
    // $router.go(-1)
    $router.push({
      path: '/qreview/qreviewwork',
    })
  })
}
// 保存
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,
          workName: `${ruleForm.value.yearTime}年第${ruleForm.value.yearNum}次管理评审`,
          reviewFileList: fileRef.value.list,
        }
        saveRow(data)
      })
    }
  })
}
const labelList = ref<{ id: string; value: string; name: string }[]>()// 实验室代码+
const currentStageList = ref<{ id: string; value: string; name: string }[]>()// 归档状态+
const yearList = ref<{ id: string; value: string; name: string }[]>([])// 年度
const monthList = ref<{ id: string; value: string; name: string }[]>([])// 月份
const userList = ref<any[]>([])
// 获取字典值
const fetchDict = () => {
  // 获取实验室代码字典
  getDictByCode('bizLabCode').then((res) => {
    labelList.value = res.data
  })
  // 归档状态
  getDictByCode('managementReviewCurrentStage').then((res) => {
    currentStageList.value = res.data
  })
  // 循环出最近十年的year
  // 获取当前年份
  const year = new Date().getFullYear() + 5
  for (let i = year; i > year - 10; i--) {
    yearList.value?.push({
      name: String(i),
      value: String(i),
      id: String(i),
    })
  }
  yearList.value?.reverse()
  // 月份
  for (let i = 1; i < 13; i++) {
    monthList.value?.push({
      name: String(i),
      value: String(i),
      id: String(i),
    })
  }
  // 用户
  getUserList({ offset: 1, limit: 99999 }).then((res) => {
    userList.value = res.data.rows.filter((item: any) => item.roleName.includes('质量负责') || item.roleName.includes('质量监督'))
  })
}
fetchDict()
</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="() => $router.go(-1)">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block title="">
      <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')">
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="审核工作名称" prop="createName">
              <el-form-item label="" label-width="0px" prop="yearTime">
                <el-select
                  v-model="ruleForm.yearTime"
                  placeholder="年份"
                  class="short-input"
                  filterable
                  style="width: 80px;"
                >
                  <el-option v-for="item in yearList" :key="item.id" :label="item.name" :value="item.value" />
                </el-select>
                年第
              </el-form-item>
              <el-form-item label="" label-width="0px" prop="yearNum">
                <el-select
                  v-model="ruleForm.yearNum"
                  placeholder="次数"
                  class="short-input"
                  filterable
                  style="width: 80px;"
                >
                  <el-option v-for="item in monthList" :key="item.id" :label="item.name" :value="item.value" />
                </el-select>
                次管理评审
              </el-form-item>
            </el-form-item>
          </el-col>
          <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="beginTime">
              <el-date-picker
                v-model="ruleForm.beginTime"
                type="date"
                placeholder="开始时间"
                style="width: 100%;"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker
                v-model="ruleForm.endTime"
                type="date"
                placeholder="结束时间"
                style="width: 100%;"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="质量负责人" prop="commanderId">
              <!-- <el-input v-model.trim="ruleForm.commanderId" placeholder="创建人" /> -->
              <el-select v-model="ruleForm.commanderId" filterable clearable placeholder="质量负责人" style="width: 100%;">
                <el-option v-for="(item) in userList" :key="item.id" :label="item.name" :value="item.id">
                  <span style="float: left;">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px;">{{ item.deptName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="归档状态" prop="currentStage">
              <el-select
                v-model="ruleForm.currentStage"
                placeholder="归档状态"
                class="short-input"
                filterable
                style="width: 100%;"
              >
                <el-option v-for="item in currentStageList" :key="item.id" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block>
    <file-list ref="fileRef" :data="ruleForm.reviewFileList" />
  </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;
}
</style>