<script setup name="memberOpinion">
import store from '@/store'
import Accessory from '@/components/accessory/index.vue'

defineProps({
  memberOpinions: Array
})
const { reviewResultOptions } = store.dictStore.globalDicts || {}
</script>
<template>
  <div class="memberOpinion">
    <div v-for="(item,index) in memberOpinions" :key="index" class="box mb-16">
      <div class="flex items-center justify-between title">
        <p class="name font-bold flex items-center">
          <span>{{ item.creator }}</span>
          <el-tag v-if="item.isFinal" class="ml-8">最终评审意见</el-tag>
        </p>
        <p class="time">
          <svg-icon name="time" class="mr-2" />
          <span>{{ item.createOn }}</span>
        </p>
      </div>
      <div class="content">
        <div v-for="(option,key) in item.reviewTemplateOptions" :key="key" class="item">
          <p class="label">{{ option.title }}：</p>
          <div>
            <p class="value">{{ option.optionsValue }}。</p>
            <p class="value">{{ option.otherAdvice }}</p>
          </div>

        </div>
        <div class="item">
          <p class="label">其他意见或建议：</p>
          <p class="value">{{ item. otherAdvice }}</p>
        </div>
        <div class="item">
          <p class="label">附件：</p>
          <p class="value">
            <accessory :file-name="item.attachFile?.originalFileName" :file-id="item?.attachFileId" />
          </p>
        </div>
        <div class="item">
          <p class="label">评审结果：</p>
          <p class="value ">
            <span
              :class="`dot ${item.reviewResult===1?'bg-success':item.reviewResult===2?'bg-warning':'bg-danger'}`"
            ></span>
            &nbsp;<span>{{ reviewResultOptions[item.reviewResult] }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less">
.memberOpinion{
  .box{
    background: #FFFFFF;
    box-shadow: 0px 3px 6px 0px rgba(62,99,170,0.06);
    border-radius: 4px;
    border: 1px solid #D8DADF;
    padding: 24px;
    .title{
      margin-bottom: 24px;
      .time{
        display: flex;
        align-items: center;
        color: rgba(0,0,0,0.45);
      }
    }
    .content{
      .item{
        display: flex;
        align-items: center;
        &:not(:last-of-type){
          margin-bottom: 8px;
        }
      }
      .label{
        color: rgba(0,0,0,0.45);
      }
      .value{
        color: rgba(0,0,0,0.65);
      }
    }
  }
}
</style>
