<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="mb-[10px]">
        <el-card shadow="hover">
          <div class="model-title">查看项目信息</div>
          <div class="model-content">
            <div v-for="(value, key) in projectInfo" class="flex mb-[18px] item-style" :key="key">
              <div class="label">{{ value.name }}：</div>
              <div class="value" v-if="key == 'file'">
                <div class="project-file-list" v-if="value.value.length" v-for="item in value.value">
                  <div>{{ item.name }}</div>
                  <div class="download" @click="downloadFile(item)">下载</div>
                </div>
                <div v-else>-</div>
              </div>
              <div class="value" v-else>
                {{ value.value || '-' }}
              </div>
            </div>
          </div>
          <div class="model-title">关联信息
            <span style="color: red; font-size: 13px; margin-left: 5px;">
            （请前往“文档管理”上传专利、论文信息）
          </span></div>
          <div class="association-content mb-[18px]">
            <el-tabs v-model="activeName">
              <el-tab-pane key="expert" label="专家" name="expert">
                <el-table :data="expertList" height="100%">
                  <el-table-column
                    :label="label"
                    :align="align || 'center'"
                    prop="expertName"
                    :min-width="minWidth || '100px'"
                    v-for="{ label, prop, align, minWidth } in headers"
                    :key="prop"
                  >
                    <template #default="{ row }">
                      <div v-if="prop == 'major'">
                        <div v-if="row.majorList?.length > 0">
                          <div v-for="major in row.majorList">
                            <span v-if="major.major && major.degree">{{ major.major || '-' }}（{{ degreeType(major.degree) || '-' }}）</span>
                            <span v-else>-</span>
                          </div>
                        </div>
                        <div v-else>-</div>
                      </div>
                      <span v-else>{{ row[prop] || '-' }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane key="patent" label="专利" name="patent">
                <div class="file-item" v-if="patents.length > 0">
                  <div class="file-list" v-for="(item, index) in patents">
                    <div class="file-item-content">
                      <div class="file-label">专利号：</div>
                      <div>{{ item.nameInvention || 1 }}</div>
                    </div>
                    <div class="file-item-content">
                      <div class="file-label">发明创造名称：</div>
                      <div>{{ item.patentNumber || 2 }}</div>
                    </div>
                    <div class="file-item-content">
                      <div class="file-label">论文文件:</div>
                      <div class="file-value">
                        <div>{{ item.originalName || '-' }}</div>
                        <a :href="item.url || ''" :download="item.originalName" class="download" target="_blank">下载</a>
                      </div>
                    </div>
                    <el-divider v-if="index < patents.length - 1" />
                  </div>
                </div>
                <div v-else>暂无专利</div>
              </el-tab-pane>
              <el-tab-pane key="paper" label="论文" name="paper">
                <div class="file-item" v-if="papers.length > 0">
                  <div class="file-list" v-for="(item, index) in papers">
                    <div class="file-item-content">
                      <div class="file-label">论文名称:</div>
                      <div>{{ item.paperName || 1 }}</div>
                    </div>
                    <div class="file-item-content">
                      <div class="file-label">期刊号:</div>
                      <div>{{ item.periodicalNumber || 2 }}</div>
                    </div>
                    <div class="file-item-content">
                      <div class="file-label">论文文件:</div>
                      <div class="file-value">
                        <div>{{ item.originalName || '-' }}</div>
                        <a :href="item.url || ''" :download="item.originalName" class="download" target="_blank">下载</a>
                      </div>
                    </div>
                    <el-divider v-if="index < papers.length - 1" />
                  </div>
                </div>
                <div v-else>暂无论文</div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <template v-if="type != 'summarizeView'">
            <div class="model-title">总结审核</div>
            <div class="audit-content">
              <div class="flex mb-[18px] item-style">
                <div class="label">提交人：</div>
                <div class="value">{{ audit.user || '-' }}</div>
              </div>
              <div class="flex mb-[18px] item-style">
                <div class="label">提交时间：</div>
                <div class="value">{{ audit.time || '-' }}</div>
              </div>
              <div class="flex mb-[18px] item-style" v-if="type == 'audit'">
                <div class="label"></div>
                <div class="value flex-1">
                  <el-radio-group v-model="audit.status">
                    <el-radio label="3">通过</el-radio>
                    <el-radio label="4">驳回</el-radio>
                  </el-radio-group>
                  <el-input v-if="audit.status == 4" v-model="audit.result" placeholder="请输入" type="textarea" :rows="5" resize="none"></el-input>
                </div>
              </div>
              <template v-else>
                <div class="flex mb-[18px] item-style">
                  <div class="label">审核状态：</div>
                  <div class="value">{{ audit.status == null ? '未审核' : audit.status == 3 ? '通过' : '驳回' }}</div>
                </div>
                <div class="flex mb-[18px] item-style" v-if="audit.status != 3">
                  <div class="label">驳回理由：</div>
                  <div class="value">{{ audit.status == null ? '-' : audit.result || '-' }}</div>
                </div>
              </template>
            </div>
            <template v-if="isEvaluate">
              <div class="model-title">评价信息</div>
              <div class="model-content">
                <div v-for="(value, key) in evaluateInfo" class="flex mb-[18px] item-style" :key="key">
                  <div class="label">{{ value.name }}：</div>
                  <div class="value evaluate-content pt-[18px] pr-[18px]" v-if="key == 'evaluateContent'">
                    <div class="flex mb-[18px]" v-for="item in rate">
                      <div v-if="item.value != null" class="flex">
                        <div class="content-label">{{ item.name }}：</div>
                        <div class="value" v-if="item.key == 'evaluateFile'">
                          <div class="file-list" v-if="item.value">
                            <div>{{ item.value.name }}</div>
                            <div class="download" @click="downloadFile(item.value)">下载</div>
                          </div>
                        </div>
                        <div class="value" v-else-if="item.key == 'projectSummaryEvaluation'">
                          {{ item.value }}
                        </div>
                        <div class="value" v-else-if="item.key == 'isPresent'">
                          {{ ['未出席', '出席'][item.value] }}
                        </div>
                        <div class="value" v-else>
                          <el-rate v-model="item.value" show-score disabled text-color="#ff9900" score-template="{value} 分"></el-rate>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="value" v-else>
                    {{ value.value }}
                  </div>
                </div>
              </div>
            </template>
          </template>
          <div style="flex: 1; text-align: right">
            <el-button @click="backToList">返回</el-button>
            <el-button type="primary" @click="confirmAudit" v-if="type == 'audit'">确定</el-button>
          </div>
        </el-card>
      </div>
    </transition>
  </div>
</template>
<script lang="ts" setup>
import { getSummarizeInfo, getSummarizeLogInfo, AuditSummarize, getProductPaperFiles, getProductPatentFiles } from '@/api/project/summarize';
import { getFile } from '@/api/evaluate/detail';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const id: any = computed(() => proxy?.$route.query.id);
const auditid: any = computed(() => proxy?.$route.query.auditid);
const type = computed(() => proxy?.$route.query.type);
const { item_stage } = toRefs<any>(proxy?.useDict('item_stage'));
const { perform_work_type } = toRefs<any>(proxy?.useDict('perform_work_type'));
const { degree_type } = toRefs<any>(proxy?.useDict('degree_type'));
const degreeType = (id) => {
  let item = degree_type.value.find((item) => item.value == id);
  return item?.label || '';
};
const itemStage = computed(() => item_stage.value);
const getStage = (id) => {
  let item = itemStage.value.find((item) => item.value == id);
  return item?.label || '';
};
const performWorkType = computed(() => perform_work_type.value);
const projectInfo = ref({
  num: {
    name: '项目总结编号',
    value: ''
  },
  summaryName: {
    name: '项目总结名称',
    value: ''
  },
  classification: {
    name: '总结分类',
    value: ''
  },
  project: {
    name: '所属项目',
    value: ''
  },
  projectOverview: {
    name: '项目概况',
    value: ''
  },
  reviewArea: {
    name: '评审范围',
    value: ''
  },
  reviewConclusion: {
    name: '评审结论',
    value: ''
  },
  feedback: {
    name: '反馈与建议',
    value: ''
  },
  improve: {
    name: '后续改进措施',
    value: ''
  },
  file: {
    name: '附件资料',
    value: []
  }
});
const expertList = ref([]);
const patents = ref([]);
const papers = ref([]);
const isEvaluate = ref(false);
const getProjectInfo = async () => {
  let res = await getSummarizeInfo(id.value);
  if (res.code != 200) {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    });
    return;
  }
  if (!res.data) return;
  projectInfo.value.num.value = res.data.id;
  projectInfo.value.summaryName.value = res.data.productSummarizeName;
  projectInfo.value.classification.value = getStage(res.data.productSummarizeType) + '总结';
  projectInfo.value.project.value = res.data.productName;
  projectInfo.value.projectOverview.value = res.data.productGeneral;
  projectInfo.value.reviewArea.value = res.data.reviewScope;
  projectInfo.value.reviewConclusion.value = res.data.reviewConclusion;
  projectInfo.value.feedback.value = res.data.feedback;
  projectInfo.value.improve.value = res.data.subsequent;
  projectInfo.value.file.value = JSON.parse(res.data.attachment);
  expertList.value = res.data.zjkExpertList.map((e) => {
    return {
      ...e,
      performWorkId: e.performWorkId
        ?.split(',')
        .map((e) => {
          let item = performWorkType.value.find((t) => t.value == e);
          return item?.label || '';
        })
        .join(',')
    };
  });
  let paperRes = await getProductPaperFiles({ productId: res.data.productId, reviewSn: res.data.reviewSn });
  if (paperRes.code != 200) {
    ElNotification({
      title: '提示',
      message: paperRes.msg,
      type: 'error'
    });
    return;
  }
  papers.value = paperRes.data;
  let patentRes = await getProductPatentFiles({ productId: res.data.productId, reviewSn: res.data.reviewSn });
  if (patentRes.code != 200) {
    ElNotification({
      title: '提示',
      message: patentRes.msg,
      type: 'error'
    });
    return;
  }
  patents.value = patentRes.data;
  console.log(patents.value);
  console.log(papers.value);
  if (type.value != 'summarizeView') {
    await getAuditInfo();
  }
};

const activeName = ref('expert');

const downloadFile = (file) => {
  let a = document.createElement('a');
  a.href = file.url;
  a.download = file.name;
  a.click();
};
const headers = ref<any>([
  {
    label: '专家姓名',
    prop: 'expertName'
  },
  {
    label: '联系方式',
    prop: 'contact'
  },
  {
    label: '工作单位',
    prop: 'workUnit'
  },
  {
    label: '职务',
    prop: 'duty'
  },
  {
    label: '专业/学历',
    prop: 'major'
  },
  {
    label: '研究领域',
    prop: 'performWorkId'
  }
]);
const backToList = () => {
  proxy?.$tab.closePage(proxy?.$route).then(() => {
    proxy?.$router.replace(type.value == 'summarizeView' ? '/project/summarize' : '/project/audit');
  });
};

const audit = ref<any>({
  user: '',
  time: '',
  status: '',
  result: ''
});
const getAuditInfo = async () => {
  const res = await getSummarizeLogInfo(auditid.value);
  if (res.code != 200) {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    });
    return;
  }
  audit.value.user = res.data.subBy;
  audit.value.time = res.data.subTime;
  audit.value.status = res.data.auditStatus;
  audit.value.result = res.data.auditRemark;
  isEvaluate.value = res.data.isEvaluate == 1;
  if (isEvaluate.value) {
    await getEvaluateInfo(res.data?.zjkProjectEvaluation || {});
  }
};
const confirmAudit = async () => {
  if (audit.value.status == '') {
    ElNotification({
      title: '提示',
      message: '请选择审核状态',
      type: 'error'
    });
    return;
  }
  if (audit.value.status == 4 && audit.value.result == '') {
    ElNotification({
      title: '提示',
      message: '请输入驳回理由',
      type: 'error'
    });
    return;
  }
  let params = {
    id: auditid.value,
    auditStatus: audit.value.status,
    auditRemark: audit.value.result
  };
  let res = await AuditSummarize(params);
  if (res.code != 200) {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    });
    return;
  }
  ElNotification({
    title: '提示',
    message: '审核成功',
    type: 'success'
  });
  proxy?.$router.replace({ query: { id: id.value, auditid: auditid.value, type: 'view' } });
};
const evaluateInfo = ref({
  evaluator: {
    name: '评价人',
    value: ''
  },
  evaluateTime: {
    name: '评价时间',
    value: ''
  },
  evaluateContent: {
    name: '评价内容',
    value: {
      goalAchievement: 0,
      deliveryQuality: 0,
      costControl: 0,
      riskManagement: 0,
      projectValue: 0,
      projectSummaryEvaluation: '',
      evaluateFile: null
    }
  }
});
const rate = computed(() => {
  return [
    {
      name: '目标达成',
      key: 'goalAchievement',
      value: evaluateInfo.value.evaluateContent.value.goalAchievement
    },
    {
      name: '交付质量',
      key: 'deliveryQuality',
      value: evaluateInfo.value.evaluateContent.value.deliveryQuality
    },
    {
      name: '成本控制',
      key: 'costControl',
      value: evaluateInfo.value.evaluateContent.value.costControl
    },
    {
      name: '风险管理',
      key: 'riskManagement',
      value: evaluateInfo.value.evaluateContent.value.riskManagement
    },
    {
      name: '项目价值',
      key: 'projectValue',
      value: evaluateInfo.value.evaluateContent.value.projectValue
    },
    {
      name: '项目总结评价',
      key: 'projectSummaryEvaluation',
      value: evaluateInfo.value.evaluateContent.value.projectSummaryEvaluation
    },
    {
      name: '线下评价文件',
      key: 'evaluateFile',
      value: evaluateInfo.value.evaluateContent.value.evaluateFile
    }
  ];
});
const getEvaluateInfo = async (res) => {
  evaluateInfo.value.evaluator.value = res?.createBy || '-';
  evaluateInfo.value.evaluateTime.value = res?.createTime || '-';
  evaluateInfo.value.evaluateContent.value = {
    goalAchievement: res?.goalAchievement || 0,
    deliveryQuality: res?.deliveryQuality || 0,
    costControl: res?.costControl || 0,
    riskManagement: res?.riskManagement || 0,
    projectValue: res?.projectValue || 0,
    projectSummaryEvaluation: res?.projectSummaryEvaluation || '-',
    evaluateFile: null
  };
  if (!res?.evaluateFile) return;
  let file_res = await getFile(res?.evaluateFile);
  if (file_res.code != 200) {
    ElNotification({
      title: '提示',
      message: file_res.msg,
      type: 'error'
    });
    return;
  }
  if (file_res.data?.length == 0) return;
  evaluateInfo.value.evaluateContent.value.evaluateFile = {
    name: file_res.data?.[0]?.originalName,
    url: file_res.data?.[0]?.url
  };
};
onActivated(() => {
  getProjectInfo();
});
onMounted(() => {
  getProjectInfo();
});
</script>
<style lang="scss" scoped>
.back-to-list {
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  top: 10px;
  left: 10px;
  line-height: 20px;
  &:hover * {
    color: var(--el-color-primary);
  }
}
.label {
  width: 200px;
  text-align: right;
  font-weight: 700;
}
.evaluate-content {
  flex: 1;
  background-color: #f5f5f5;
  border-radius: 6px;
  .value {
    flex: 1;
  }
}
.content-label {
  text-align: right;
  font-weight: 700;
  width: 118px;
}
.model-title {
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: bold;
}
.model-content {
  line-height: 32px;
  font-size: 14px;
  color: #606266;
}
.item-style {
  align-items: flex-start;
  gap: 8px;
}

.audit-content {
  line-height: 32px;
  font-size: 14px;
  color: #606266;
}
.file-item {
  background-color: #f1f1f1;
  padding: 18px;
  border-radius: 6px;
  font-size: 14px;
  .file-item-content {
    display: flex;
    align-items: center;
    &:not(:last-child) {
      margin-bottom: 10px;
    }
    .file-label {
      width: 110px;
      padding-right: 10px;
      text-align: right;
      color: #606266;
      font-weight: bold;
    }
    .file-value {
      display: flex;
      align-items: center;
      gap: 10px;
      line-height: 32px;
      color: #606266;
      .download {
        cursor: pointer;
        color: var(--el-color-primary);
      }
    }
  }
}

.project-file-list {
  display: flex;
  align-items: center;
  max-width: 100%;
  gap: 10px;
  font-size: 14px;
  line-height: 32px;
  color: #606266;
  .download {
    cursor: pointer;
    color: var(--el-color-primary);
  }
}
</style>
