<template>
  <div>
    <table class="tab-content" style="width: 100%">
      <tr>
        <td class="bg-title">评审指标</td>
        <td class="bg-title">评审指标选项</td>
        <td class="bg-title">专家打分</td>
      </tr>
      <tr v-for="(item,index) in tableData" :key="'tr1'+index">
        <td>{{ item.oneLevel }}</td>
        <td>
          {{ item.towLevel1 }}<br />
          {{ item.towLevel2 }}<br />
          {{ item.towLevel3 }}
        </td>
        <td style="text-align: center;">
          <span v-if="item.order==1">{{ value.score1 }}</span>
          <span v-if="item.order==2">{{ value.score2 }}</span>
          <span v-if="item.order==3">{{ value.score3 }}</span>
          <span v-if="item.order==4">{{ value.score4 }}</span>
          <span v-if="item.order==5">{{ value.score5 }}</span>
          <span v-if="item.order==6">{{ value.score6 }}</span>
          <span v-if="item.order==7">{{ value.score7 }}</span>
        </td>
      </tr>
      <tr>
        <td class="bg-title" style="text-align: right;">是否推荐立项支持</td>
        <td colspan="2">
          <a-tag :color="'#87d068'" v-if="value.supportState==1">是</a-tag>
          <a-tag :color="'#f50'" v-if="value.supportState==0">否</a-tag>
        </td>
      </tr>
      <tr>
        <td class="bg-title" style="text-align: right;">评审结果</td>
        <td colspan="2">
          <a-tag :color="'#87d068'" v-if="value.evaluationType==1">{{ evaluationTypeA }}</a-tag>
          <a-tag :color="'#2db7f5'" v-if="value.evaluationType==2">{{ evaluationTypeB }}</a-tag>
          <a-tag :color="'#f50'" v-if="value.evaluationType==3">{{ evaluationTypeC }}</a-tag>
        </td>
      </tr>
      <tr>
        <td style="text-align: right;">意见与建议</td>
        <td colspan="2" style="text-align: left;">
          <div v-html="toTextarea(value.remark)"></div>
        </td>
      </tr>
      <tr>
        <td style="text-align: right;">总得分</td>
        <td colspan="2" style="text-align: left;">
          <span>{{ value.totalScore }}</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { toTextarea, getEvaluationType } from '@/views/utils/common'

export default {
  name: "scoreInfo",
  components: {},
  props: {
    value: {
      type: Object,
      default () {
        return null;
      },
    },
  },
  data () {
    return {
      tableData: [
        { order: 1, oneLevel: "1.特色与创新性、拟研究的科学问题的重要性或潜在应用价值（20分）", towLevel1: "A.好 (20-16)", towLevel2: "B.较好 (15-12)", towLevel3: "C.一般 (11-0)", score: 20, grade: null, },
        { order: 2, oneLevel: "2.立项依据的充分性和研究的科学价值（15分）", towLevel1: "A.好 (15-12) ", towLevel2: "B.较好 (11-9) ", towLevel3: " C.一般 (8-0)", score: 15, grade: null, },
        { order: 3, oneLevel: "3.研究内容的合理性和完整性（15分）", towLevel1: "A.合理完整 (15-12) ", towLevel2: "B.较合理完整 (11-9) ", towLevel3: " C.一般 (8-0)", score: 15, grade: null, },
        { order: 4, oneLevel: "4.预期目标及考核指标（15分）", towLevel1: "A.明确 (15-12) ", towLevel2: " B.较明确 (11-9)  ", towLevel3: "C.一般 (8-0)", score: 15, grade: null, },
        { order: 5, oneLevel: "5.研究方案和技术路线的可行性（15分）", towLevel1: "A.可行 (15-12)", towLevel2: "B.较可行 (11-9)  ", towLevel3: "C.一般 (8-0)", score: 15, grade: null, },
        { order: 6, oneLevel: "6.前期工作基础、支撑条件及主持人的科研能力（15分）", towLevel1: "A.好 (15-12) ", towLevel2: "B.较好 (11-9) ", towLevel3: " C.一般 (8-0)", score: 15, grade: null, },
        { order: 7, oneLevel: "7.组织运行管理与风险分析（5分）", towLevel1: "A.风险小 (5-4) ", towLevel2: "B.有一定风险 (3-2) ", towLevel3: " C.风险较大 (1-0)", score: 5, grade: null, },
      ],
    };
  },
  computed: {
    evaluationTypeA () {
      return getEvaluationType(0)
    },
    evaluationTypeB () {
      return getEvaluationType(1)
    },
    evaluationTypeC () {
      return getEvaluationType(2)
    },
  },
  created () {

  },
  methods: {
    toTextarea,
  },
};
</script>
<style scoped lang="less">
.app-content {
  table {
    table-layout: fixed;
    width: 100%;
    border: 1;
    border-collapse: collapse;
  }
  table tr td,
  th {
    border: 1px solid #e8e8e8;
    padding: 6px 6px;
    color: rgba(0, 0, 0, 0.65);
  }
  table tr th {
    text-align: center;
  }
  table tr {
    th:first-child {
      width: 4%;
    }
    th:nth-child(2) {
      width: 6%;
    }
    th:nth-child(3) {
      width: 8%;
    }
    th:nth-child(4) {
      width: 18%;
    }
    th:nth-child(5) {
      width: 6%;
    }
    th:nth-child(6) {
      width: 6%;
    }
    th:nth-child(7) {
      width: 40%;
    }
  }
  table {
    ::v-deep .ant-row {
      border: 0 !important;
    }
    ::v-deep .ant-row .ant-col {
      border: 0 !important;
      min-height: 30px !important;
    }
    ::v-deep .ant-form-item-control {
      line-height: 30px !important;
    }
    ::v-deep .ant-form-item {
      margin: 0 !important;
    }
    ::v-deep .ant-input-number {
      height: 30px !important;
    }
    ::v-deep .ant-input-number-input {
      height: 30px !important;
    }
  }
}
.none-bottom {
  ::v-deep .ant-col {
    border-bottom: 0 !important;
  }
}
</style>
ant-tabs