<!-- 内部审核工作管理新建 -->
<script name="QualityInternalWorkAdd" lang="ts" setup>
import { ElMessage, type FormInstance, type FormRules, type UploadUserFile } from 'element-plus'
import fileList from './fileList.vue'
import { getDictByCode } from '@/api/system/dict'
import { getUserList } from '@/api/system/user'
import { addWork, detailWork } from '@/api/quality/internal/workManage'
const $route = useRoute()
const $router = useRouter()
const ruleFormRef = ref<FormInstance>() // from组件
// 表单
const ruleForm = ref({
  yearTime: '',
  yearNum: '',
  bizLabCode: '',
  beginTime: '',
  endTime: '',
  commanderId: '', // 质量负责人
  groupLeader: '', // 组长
  teamMembers: [] as any, // 组员
  currentStage: '12', // 当前阶段
  internalAuditFiles: [],
  workName: '',
})
// 表单验证规则
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'] }],
  groupLeader: [{ required: true, message: '内审组长必选', trigger: ['blur', 'change'] }],
  teamMembers: [{ required: true, message: '内审组员必选', trigger: ['blur', 'change'] }],
})
const labelList = 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 currentStageList = ref<{ id: string; value: string; name: string }[]>([])// 当前阶段
// 获取字典
const fetchDict = () => {
  // 获取实验室代码字典
  getDictByCode('bizLabCode').then((res) => {
    labelList.value = res.data
  })
  // 当前阶段
  getDictByCode('qualityCurrentStage').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
  })
}
fetchDict()
const fileRef = ref()
// 新建
const createRow = () => {
  const data = {
    ...ruleForm.value,
    internalAuditFiles: fileRef.value.list,
    workName: `${ruleForm.value.yearTime}年第${ruleForm.value.yearNum}次内部审核工作`,
  }
  if (ruleForm.value.teamMembers.length) {
    data.teamMembers = data.teamMembers.join(',')
  }
  addWork(data).then((res) => {
    ElMessage.success('添加成功')
    $router.go(-1)
  })
}
// 保存按钮
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      if ($route.path.includes('create')) {
        createRow()
      }
      // else if ($route.path.includes('update')) {
      //   updateRow()
      // }
    }
  })
}
// 页面挂载
onMounted(() => {
  if ($route.path.includes('create')) {
    // console.log('新建')
  }
  else {
    // 获取详情
    detailWork({ id: $route.query.id as string }).then((res) => {
      for (const i in res.data) {
        if (typeof res.data[i] === 'number') {
          res.data[i] = String(res.data[i])
        }
      }
      ruleForm.value = res.data
      if (res.data.teamMembers) {
        ruleForm.value.teamMembers = res.data.teamMembers.split(',')
      }
      else {
        ruleForm.value.teamMembers = []
      }
    })
  }
})
const { proxy } = getCurrentInstance() as any
const btnList = ref([
  {
    name: '创建现场审核计划',
    url: '/internalscene/create?approvalStatusName=全部',
  },
  {
    name: '创建内部审核工作登记表',
    url: '/internalregistration/create?approvalStatusName=全部',
  },
  {
    name: '创建内部审核检查表',
    url: '/internalinspect/create?approvalStatusName=全部',
  },
  {
    name: '创建会议记录',
    url: '/meetinglist/create',
  },
  {
    name: '创建内部不符合项报告',
    url: '/internaldissatisfied/create',
  },
  {
    name: '创建纠正措施处理单',
    url: '/correcthandle/create?approvalStatusName=全部',
  },
  {
    name: '创建预防措施处理单',
    url: '/preventhandle/create',
  },
  {
    name: '创建内部审核报告',
    url: '/internalreport/create?approvalStatusName=全部',
  },
])
const shortcut = (url: string) => {
  $router.push({
    path: url,
    query: {
      data: JSON.stringify(ruleForm.value),
    },
  })
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page title="内部审核工作管理">
      <template #btns>
        <el-button v-if="$route.path.includes('create')" 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="工作名称" style="display: flex;">
              <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"
                style="width: 100%;"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="开始时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker
                v-model="ruleForm.endTime"
                type="date"
                style="width: 100%;"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="结束时间"
              />
            </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.createUserName" /> -->
              <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="groupLeader">
              <el-select v-model="ruleForm.groupLeader" filterable clearable placeholder="内审组组长" style="width: 100%;">
                <el-option v-for="(item) in userList" :key="item.id" :label="item.name" :value="item.name">
                  <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="teamMembers">
              <el-tooltip
                v-if="$route.path.includes('detail')"
                class="box-item"
                effect="dark"
                :content="`${ruleForm.teamMembers ? ruleForm.teamMembers?.join() : ''}`"
                placement="bottom"
              >
                <el-select v-model="ruleForm.teamMembers" multiple filterable collapse-tags clearable placeholder="内审组组员" style="width: 100%;">
                  <el-option v-for="(item) in userList" :key="item.id" :label="item.name" :value="item.name">
                    <span style="float: left;">{{ item.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px;">{{ item.deptName }}</span>
                  </el-option>
                </el-select>
              </el-tooltip>
              <el-select v-else v-model="ruleForm.teamMembers" multiple filterable collapse-tags clearable placeholder="内审组组员" style="width: 100%;">
                <el-option v-for="(item) in userList" :key="item.id" :label="item.name" :value="item.name">
                  <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"
                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>
    <detail-block v-if="$route.path.includes('detail')" title="快捷操作">
      <el-form :model="{}" label-width="120px">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label=" ">
              <div class="btn-container">
                <el-button v-for="item in btnList" :key="item.name" type="primary" @click="shortcut(item.url)">
                  {{ item.name }}
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block>
    <file-list ref="fileRef" :data="ruleForm.internalAuditFiles" />
  </app-container>
</template>

<style lang="scss" scoped>
// 详情页面隐藏小红点
.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>