<!-- 内部审核计划编辑页面 -->
<script name="QualityInternalPlanHandler" lang="ts" setup>
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import { getDictByCode } from '@/api/system/dict'
import useUserStore from '@/store/modules/user'
import { getUserList } from '@/api/system/user'
import { addInternalPlan, detailInternalPlan, updateInternalPlan } from '@/api/quality/internal/internalPlan'
import { valiateWork } from '@/utils/valiateWork'
import quality from '/public/config/quality.json'
import { filterUser } from '@/views/quality/internal/workManage/components/filterUser'
import { getStaffList } from '@/api/resource/register'
const $props = defineProps({
  showBase: {
    type: Boolean,
    default: true,
  },
})
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件
// 表单
const ruleForm = ref({
  bizLabCode: '', // 实验室
  fileCode: '', // 文件编号
  yearTime: '', // 年份
  yearNum: '', // 月份
  commanderName: '', // 质量负责人
  commanderId: '', // 质量负责人
  createTime: '', // 创建时间
  planTime: '', // 计划时间
  auditObjective: '', // 审核目的
  auditScope: '', // 审核范围
  auditBasis: '', // 审核依据
  groupLeader: '', // 组长
  planUserList: [] as any, // 组员
})
// 用户列表
const userList = ref<any[]>([])
const userList1 = ref<any[]>([])
const userList2 = ref<any[]>([])
// 表单验证规则
const rules = ref<FormRules>({
  bizLabCode: [{ required: true, message: '实验室必选', trigger: ['blur', 'change'] }],
  yearTime: [{ required: true, message: '年份必选', trigger: ['blur', 'change'] }],
  yearNum: [{ required: true, message: '月份必选', trigger: ['blur', 'change'] }],
  groupLeader: [{ required: true, message: '组长必选', trigger: ['blur', 'change'] }],
})
onMounted(() => {
  if ($route.path.includes('create')) {
    ruleForm.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // 创建时间
    ruleForm.value.commanderId = userStore.id
    ruleForm.value.commanderName = userStore.name
    // 预制内容
    // 审核目的
    ruleForm.value.auditObjective = '验证实验室的质量活动是否持续地符合质量管理体系文件要求和 GJB2725A-2001《测试实验室和校准实验室通用要求》。'
    // 审核范围
    ruleForm.value.auditScope = '质量管理体系所涉及的部门、岗位、人员、设备、设施、相关活动及实施记录。 受审核部门: 西昌实验室:热工力学组、电学电源组、无线电脉冲组、综合管理组 海口实验室:热工力学组、电学电源组、无线电脉冲组、综合管理组。'
    // 审核依据
    ruleForm.value.auditBasis = 'GJB2725A-2001测试实验室和校准实验室通用要求 实验室质量管理体系文件。'
  }
  else {
    rules.value.fileCode = [{ required: true, message: '文件编号必填', trigger: ['blur', 'change'] }]
    // 获取详情
    detailInternalPlan({ id: $route.query.id as string }).then((res) => {
      console.log(res.data, '详情1111')
      ruleForm.value = res.data
      if (res.data.planUserList) {
        ruleForm.value.planUserList = res.data.planUserList.map((item: any) => item.userName)
      }
      nextTick(() => {
        ruleFormRef.value?.clearValidate()
      })
    })
  }
})
const isSave = ref(false)
const createRow = (data: any, type: string) => {
  addInternalPlan({...data, planStatus: type === 'save'? '0': '1'}).then((res) => {
    // ElMessage.success('添加成功')
    // $router.go(-1)
    if (type === 'save') {
      ElMessage.success('保存成功')
      isSave.value = true
    }
    else {
      ElMessage.success('添加成功')
      $router.go(-1)
    }
  })
}
const updateRow = (data: any, type: string) => {
  updateInternalPlan({...data, planStatus: type === 'save'? '0': '1'}).then((res) => {
    // ElMessage.success('修改成功')
    // $router.go(-1)
    if (type === 'save') {
      ElMessage.success('保存成功')
      isSave.value = true
    }
    else {
      ElMessage.success('添加成功')
      $router.go(-1)
    }
  })
}
// 保存
const saveForm = async (formEl: FormInstance | undefined, type: string) => {
  if (!isSave.value && type === 'submit') {
    ElMessage.warning('请先保存')
    return
  }
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(async (res) => {
        const ress = await valiateWork(ruleForm.value.yearTime, ruleForm.value.yearNum, ruleForm.value.bizLabCode, '内部审核')
        if (!ress) { return }
        const data = {
          ...ruleForm.value,
          fileName: `${ruleForm.value.yearTime}年第${ruleForm.value.yearNum}次内部审核计划`,
        }
        if (ruleForm.value.planUserList.length) {
          data.planUserList = ruleForm.value.planUserList.map((item: any) => {
            return {
              userName: item,
              userId: userList.value[userList.value.findIndex(citem => citem.name === item)].id,
            }
          })
        }
        if ($route.path.includes('create') && type === 'save') {
          createRow(data, type)
        }
        else {
          updateRow(data, type)
        }
      })
    }
  })
}

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 internalAudit = ref<any[]>([]) // 内审员列表
// 获取字典值
const fetchDict = async () => {
  // 获取实验室字典
  getDictByCode('bizLabCode').then((res) => {
    labelList.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
  // })
  const res = await getUserList({ limit: 9999, offset: 1 })
  const allUserList = res.data.rows
  userList.value = res.data.rows
  // 获取内审员
  getStaffList({ limit: 9999, offset: 1 }).then((res) => {
    internalAudit.value = res.data.rows.filter((item: any) => item.auditorCertificate === 1).map((item: any) => ({
      deptName: item.deptName,
      name: item.staffName,
      id: allUserList.filter(citem => citem.account === item.account)[0]?.id,
    }))
  })
  // userList1.value = [...await filterUser(quality.roleTips['质量负责人']), ...await filterUser(quality.roleTips['内审组长'])]
  userList2.value = await filterUser(quality.roleTips['内审组员'])
}
fetchDict()
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page class="base-info" title="内部审核计划">
      <template #btns>
        <el-button v-if="!$route.path.includes('detail')" type="primary" @click="saveForm(ruleFormRef, 'submit')">
          提交
        </el-button>
        <el-button v-if="!$route.path.includes('detail')" type="primary" @click="saveForm(ruleFormRef, 'save')">
          保存
        </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="fileCode">
              <el-input v-model.trim="ruleForm.fileCode"
                :placeholder="$route.path.includes('create') ? '系统自动生成' : ''" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <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-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="质量负责人" prop="commanderName">
              <el-input v-model.trim="ruleForm.commanderName" placeholder="质量负责人" disabled />
            </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="创建时间"
                value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" style="width: 100%;" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </detail-block>
      <detail-block v-if="$props.showBase" title="">
        <el-row :gutter="24" class="marg">
          <el-col :span="20">
            <el-form-item label="计划时间" prop="planTime">
              <el-input v-model="ruleForm.planTime" placeholder="计划时间" :rows="3" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="20">
            <el-form-item label="审核目的" prop="auditObjective">
              <el-input v-model="ruleForm.auditObjective" placeholder="审核目的" :rows="3" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="20">
            <el-form-item label="审核范围" prop="auditScope">
              <el-input v-model="ruleForm.auditScope" placeholder="审核范围" :rows="6" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="20">
            <el-form-item label="审核依据" prop="auditBasis">
              <el-input v-model="ruleForm.auditBasis" placeholder="审核依据" :rows="3" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <el-form-item label="内审组">
              <el-col :span="24">
                <el-form-item label="组长" prop="groupLeader" label-width="60px">
                  <el-select v-model="ruleForm.groupLeader" filterable clearable placeholder="内审组组长"
                    style="width: 200px;">
                    <el-option v-for="(item) in internalAudit" :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="24" style="margin-top: 10px;">
                <el-form-item label="组员" prop="planUserList" label-width="60px">
                  <el-tooltip class="box-item" effect="dark"
                    :content="`${ruleForm.planUserList ? ruleForm.planUserList?.join() : ''}`" placement="bottom">
                    <el-select v-model="ruleForm.planUserList" multiple filterable clearable placeholder="内审组组员"
                      style="width: 200px;">
                      <el-option v-for="(item) in userList2" :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-form-item>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </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>