<!-- 管理评审工作详情页面 -->
<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 addFileDialog from './addOtherDialog.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: '',
  currentStageName: '',
  commanderName: '',
  currentStage: '0',
  reviewFileList: [] as any,
}) // 表单
const rules = ref<FormRules>({
}) // 表单验证规则
const isShowHandler = ref(true)
onMounted(() => {
  detailReviewWork({ id: $route.query.id }).then((res) => {
    console.log(res.data, '详情')
    ruleForm.value = res.data
    isShowHandler.value = new Date(dayjs(ruleForm.value.endTime).format()).getTime() - new Date().getTime() > 0
  })
})
// const currentStageList = ref<{ id: string; value: string; name: string }[]>()// 归档状态+
// // 获取字典值
// const fetchDict = () => {
//   getDictByCode('managementReviewCurrentStage').then((res) => {
//     currentStageList.value = res.data
//   })
// }
// fetchDict()
// 编辑
const updateRow = () => {
  $router.push({
    path: '/qreviewwork/update',
    query: { ...$route.query },
  })
}
const { proxy } = getCurrentInstance() as any
const btnList = ref([
  {
    name: '创建管理评审计划',
    url: '/qreviewplan/create?approvalStatusName=全部',
  },
  {
    name: '创建质量管理体系运行报告',
    url: '/qreviewrun/create',
  },
  {
    name: '创建质量目标评测报告',
    url: '/qreviewtarget/create',
  },
  {
    name: '创建其他评审材料',
    url: 'other',
  },
  {
    name: '创建有效性综合分析报告',
    url: '/qrevieweffectiveness/create',
  },
  {
    name: '创建技术能力分析报告',
    url: '/qreviewtechnology/create',
  },
  {
    name: '创建会议记录',
    url: '/meetinglist/create',
  },
  {
    name: '创建管理审核报告',
    url: '/qreviewreport/create?approvalStatusName=全部',
  },
  {
    name: '创建纠正措施处理单',
    url: '/correcthandle/create?approvalStatusName=全部',
  },
  {
    name: '创建预防措施处理单',
    url: '/preventhandle/create',
  },
])
// 创建其他评审材料
const fileRefD = ref()
const shortcut = (url: string) => {
  if (url === 'other') {
    fileRefD.value?.initDialog({ handlerType: 'other' })
    return
  }
  $router.push({
    path: url,
    query: {
      data: JSON.stringify(ruleForm.value),
    },
  })
}
const confirm = () => {
  detailReviewWork({ id: $route.query.id }).then((res) => {
    console.log(res.data, '详情')
    ruleForm.value = res.data
  })
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <!-- 创建其他评审材料 -->
    <add-file-dialog ref="fileRefD" @confirm="confirm" />
    <detail-page title="管理评审工作管理">
      <template #btns>
        <el-button v-if="proxy.hasPerm('/quality/review/work/update')" type="primary" @click="updateRow">
          编辑
        </el-button>
        <el-button v-if="proxy.hasPerm('/quality/review/work/download')" type="primary">
          下载
        </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-input v-model="ruleForm.workName" />
            </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="ruleForm.commanderName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="归档状态" prop="currentStage">
              <el-input v-model="ruleForm.currentStageName" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block>
    <detail-block v-if="$route.path.includes('detail') && isShowHandler" 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.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>