<script name="fillReviewComments" setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import reviewComments from '../components/reviewComments.vue'
import memberOpinion from '../components/memberOpinion.vue'
import { template } from '@/http/apis/expertManage/reviewTemplateConfig'
import { listForGroupLeader, save, templatesById } from '@/http/apis/expertManage/expertReview'

const { proxy } = getCurrentInstance(),
  router = useRouter(),
  route = useRoute(),

  // 获取模板
  templateData = ref(),
  getTemplate = async () => {
    const res = await template({ templateType: route.query.reviewType, regionCode: route.query.regionCode })
    templateData.value = res.data
    reviewVisible.value = true
  },
  reviewVisible = ref(false),
  // 提交
  loading = ref(false),
  reviewCommentsRef = ref(),
  submit = () => {
    reviewCommentsRef.value.validForm(async (valid) => {
      if (valid) {
        loading.value = true
        const postData = {
          meetingId: route.query.meetingId,
          projectId: route.query.projectId,
          projectCode: route.query.projectCode,
          ...reviewCommentsRef.value.form,
          reviewTemplateOptions: reviewCommentsRef.value.form.templates.map(i => {
            return {
              ...i,
              optionSerialNo: Array.isArray(i.optionSerialNo) ? i.optionSerialNo.map(r => r) : [i.optionSerialNo]
            }
          }),
          attachFileId: reviewCommentsRef.value.form.attachments?.length && reviewCommentsRef.value.form.attachments[0].response.data.id || undefined,
          isFinal: route.query.type * 1 === 2,
          templates: undefined,
          attachments: undefined
        }
        try {
          await save(postData)
          proxy.$message.success('提交成功')
          loading.value = false
          router.go(-2)
        } catch (e) {
          loading.value = false
        }
      }
    })
  },
  // 组员意见-抽屉
  drawerVisible = ref(false),
  templatesData = ref([]), // 模板数据
  memberOpinions = ref([]), // 组员意见
  showDrawer = async () => {
    const res = await listForGroupLeader({ projectId: route.query.projectId, meetingId: route.query.meetingId })
    const res1 = await templatesById({ templateIds: res.data.map(i => i.templateId).join(',') })
    templatesData.value = res1.data
    memberOpinions.value = res.data && res.data.map(i => {
      return {
        ...i,
        reviewTemplateOptions: i.reviewTemplateOptions && i.reviewTemplateOptions.map(temp => {
          const data = templatesData.value.find(j => i.templateId === j.templateId).templates
          return {
            ...temp,
            title: data.find(r => r.serialNo === temp.questionSerialNo)?.title,
            optionsValue: data.find(r => r.serialNo === temp.questionSerialNo)?.options.filter(j => temp.optionSerialNo.includes(j.serialNo)).map(j => j.option).join('、')
          }
        }) || []
      }
    }) || []
    drawerVisible.value = true
  }
onMounted(() => {
  getTemplate()
})
</script>

<template>
  <div class="footerPage">
    <el-card class="w-full" shadow="never">
      <el-row :gutter="16">
        <el-col :span="14">
          <review-comments v-if="reviewVisible" ref="reviewCommentsRef" :template-data="templateData" />
        </el-col>

        <!--      最终意见显示按钮-->
        <el-col v-if="route.query.type*1===2" :span="10">
          <div
            v-if="!drawerVisible"
            class="viewBtn"
            @click="showDrawer"
          >
            <svg-icon name="eye" />
            <span>查看评审意见</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <div class="footer">
      <el-button type="primary" :loading="loading" @click="submit">提交</el-button>
      <el-button @click="router.go(-1)">关闭</el-button>
    </div>
  </div>
  <el-drawer
    v-model="drawerVisible"
    title="组员意见"
    style="position: absolute"
    direction="rtl"
    size="40%"
    :modal="false"
    :append-to-body="false"
    modal-class="myDrawerModal"
  >
    <member-opinion :member-opinions="memberOpinions" />
  </el-drawer>
</template>
<style lang="less">
.viewBtn{
  width: 36px;
  background: rgba(0,87,255,0.08);
  border-radius: 4px;
  border: 1px solid #0057FF;
  padding: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  color: #0057FF;
  cursor: pointer;
}
.myDrawerModal{
  position: static !important;
}
</style>
