<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 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 evaluate-item" 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 == 'expertComment'">
                      {{ 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 disabled-void-color="#ddd" text-color="#ff9900" score-template="{value} 分"></el-rate>
                    </div>
                  </div>
                </div>
              </div>
              <div class="value" v-else>
                {{ value.value }}
              </div>
            </div>
          </div>
          <div style="flex:1;text-align:right;">
            <el-button @click="backToList">返回</el-button>
          </div>
        </el-card>
      </div>
    </transition>
  </div>
</template>
<script lang="ts" setup>
import { getDetail, getFile } from '@/api/evaluate/detail';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const id:any = computed(() => proxy?.$route.query.id);
const from = computed(() => proxy?.$route.query.from);
const { item_stage } = toRefs<any>(proxy?.useDict('item_stage'));
const stageOptions = computed(() => item_stage.value);
const getStage = (id:any) => {
  let item = stageOptions.value.find((item:any) => item.value == id);
  return item?.label || '';
};
const evaluateInfo = ref({
  expertName: {
    name: '专家姓名',
    value: ''
  },
  workUnit: {
    name: '工作单位',
    value: ''
  },
  duty: {
    name: '职务',
    value: ''
  },
  projectName: {
    name: '共同参与项目',
    value: ''
  },
  itemStage: {
    name: '项目阶段',
    value: ''
  },
  evaluateTime: {
    name: '评价时间',
    value: ''
  },
  evaluateContent: {
    name: '评价内容',
    value: {
      busLevelScore: 0,
      workAttitudeScore: 0,
      rightApprovalScore: 0,
      isPresent: 1,
      expertComment: '',
      evaluateFile: null
    }
  }
});
const rate = computed(() => {
  return [
    {
      name: '业务水平',
      key: 'busLevelScore',
      value: evaluateInfo.value.evaluateContent.value.busLevelScore
    },
    {
      name: '工作态度',
      key: 'workAttitudeScore',
      value: evaluateInfo.value.evaluateContent.value.workAttitudeScore
    },
    {
      name: '合规评审',
      key: 'rightApprovalScore',
      value: evaluateInfo.value.evaluateContent.value.rightApprovalScore
    },
    {
      name: '是否出席',
      key: 'isPresent',
      value: evaluateInfo.value.evaluateContent.value.isPresent
    },
    {
      name: '专家评语',
      key: 'expertComment',
      value: evaluateInfo.value.evaluateContent.value.expertComment
    },
    {
      name: '线下评价文件',
      key: 'evaluateFile',
      value: evaluateInfo.value.evaluateContent.value.evaluateFile
    }
  ];
});
const getEvaluateInfo = async () => {
  let res:any = await getDetail(id.value);
  if (res.code != 200) {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    });
    return;
  }
  evaluateInfo.value.expertName.value = res.data.evaluateUser;
  evaluateInfo.value.workUnit.value = res.data.workUnit;
  evaluateInfo.value.duty.value = res.data.expertPost;
  evaluateInfo.value.projectName.value = res.data.itemId;
  evaluateInfo.value.itemStage.value = getStage(res.data.itemStage);
  evaluateInfo.value.evaluateTime.value = res.data.createTime;
  evaluateInfo.value.evaluateContent.value = {
    busLevelScore: +res.data.busLevelScore,
    workAttitudeScore: +res.data.workAttitudeScore,
    rightApprovalScore: +res.data.rightApprovalScore,
    isPresent: +res.data.isPresent,
    expertComment: res.data.expertComment,
    evaluateFile: null
  };
  if (!res.data.evaluateFile) return;
  let file_res = await getFile(res.data.evaluateFile);
  if (file_res.code != 200) {
    ElNotification({
      title: '提示',
      message: file_res.msg,
      type: 'error'
    });
    return;
  }
  evaluateInfo.value.evaluateContent.value.evaluateFile = {
    name: file_res.data?.[0]?.originalName || '',
    url: file_res.data?.[0]?.url || ''
  };
};

const downloadFile = (file:any) => {
  let a = document.createElement('a');
  a.href = file.url;
  a.download = file.name;
  a.click();
};
const router = useRouter();
const backToList = () => {
  if(from.value == 'inspection'){
    router.back();
    return
  }
  proxy?.$tab.closePage(proxy?.$route).then(() => {
    proxy?.$router.replace(from.value == 'mutual' ? '/project/evaluate/mutual' : '/project/evaluate/list');
  });
};
onActivated(() => {
  getEvaluateInfo();
});
onMounted(() => {
  getEvaluateInfo();
});
</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;
}
.association-content {
  height: 300px;
}
.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);
  }
}
.audit-content {
  line-height: 32px;
  font-size: 14px;
  color: #606266;
}
.evaluate-item{
  margin-bottom: 18px;
}
</style>
