<template>
  <div>
    <table class="tab-content" cellpadding="3" cellspacing="3" style="width: 98%">
      <tr>
        <td class="bg-title">一级指标(固定)</td>
        <td class="bg-title">二级指标(供参考)</td>
        <td class="bg-title" colspan="3">评价意见(供参考)</td>
        <td class="bg-title">专家打分</td>
      </tr>
      <tr v-for="(item, index) in tableData" :key="index" style="line-height: 25px">
        <td :rowspan="item.rowspan" v-if="item.rowspan != 0" class="bg-title">
          {{ item.oneLevel }}
        </td>
        <td>{{ item.towLevel }}</td>
        <td>{{ item.title1 }}</td>
        <td>{{ item.title2 }}</td>
        <td>{{ item.title3 }}</td>
        <td>
          <a-form-model-item :prop="'score' + (index + 1)">
            <a-input-number v-model="item.grade" :min="0" :max="item.score" :step="1" @change="numberChange(index)" style="width: 90%"/>
          </a-form-model-item>
        </td>
      </tr>
      <tr>
        <td class="bg-title">评审意见</td>
        <td colspan="4">
          <a-form-model-item prop="remark">
            <a-textarea placeholder="评审意见" v-model="remark" @change="AreaChange()" :maxLength="1000" style="width: 90%; height: 120px; margin-top: 6px" />
          </a-form-model-item>
        </td>
        <td style="text-align: center">总分：{{ totalScore }}分</td>
      </tr>
      <tr>
        <td class="bg-title">是否推荐立项支持</td>
        <td colspan="2">
          <a-form-model-item prop="supportState">
            <a-radio-group v-model="supportState" @change="supportStateChange">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </td>
        <td class="bg-title">评审结果</td>
        <td colspan="2">
          <a-form-model-item prop="evaluationType">
            <a-radio-group v-model="evaluationType" @change="EcaluationChange" disabled>
              <a-radio :value="1">A类(通过)</a-radio>
              <a-radio :value="2">B类(修改)</a-radio>
              <a-radio :value="3">C类(不通过)</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
const formData = {
  id: null,
  projId: null,
  expertId: null,
  expertName: null,
  score1: null,
  score2: null,
  score3: null,
  score4: null,
  score4: null,
  score5: null,
  score6: null,
  score7: null,
  score8: null,
  score9: null,
  score10: null,
  score11: null,
  score12: null,
  score13: null,
  score14: null,
  score15: null,
  score16: null,
  score17: null,
  totalScore: null,
  supportState: null,
  remark: null,
  projName: null,
  projNo: null,
};
const plainOptions = ['A', 'B', 'C'];

export default {
  name: "technologyEvalucation",
  props: {
    value: {
      type: Object,
      default: () => {
        return formData;
      },
    },
  },
  data() {
    return {
      
      tableData: [
        { rowspan: 1, oneLevel: "1.意义及必要性(5分)", towLevel: "A：项目实施的意义及必要性（5分）", title1: "重要（4-5分）", title2: "较重要（2-3分）", title3: "一般（0-1分）", score: 5, grade: null, },
        
        { rowspan: 2, oneLevel: "2.目标及考核指标（10分）", towLevel: "A：目标定位及可考核性（5分）", title1: "明确量化可考（4-5分）", title2: "较明确可考（2-3分）", title3: "一般（0-1分）", score: 5, grade: null, },
        { rowspan: 0, oneLevel: "2.目标及考核指标（10分）", towLevel: "B：绩效目标设置合理性（5分）", title1: "准确合理（4-5分）", title2: "较准确合理（2-3分）", title3: "一般（0-1分）", score: 5, grade: null, },
        
        { rowspan: 3, oneLevel: "3.主要内容（20分）", towLevel: "A：研发内容与目标实现关联度（6分）", title1: "高（5-6分）", title2: "中（2-4分）", title3: "低（0-1分）", score: 6, grade: null, },
        { rowspan: 0, oneLevel: "3.主要内容（20分）", towLevel: "B：研究成果产业化成熟度（6分）", title1: "好（5-6分）", title2: "较好（2-4分）", title3: "一般（0-1分）", score: 6, grade: null, },
        { rowspan: 0, oneLevel: "3.主要内容（20分）", towLevel: "C：产业化市场竞争力及预期效益（8分）", title1: "好（7-8分）", title2: "较好（3-6分）", title3: "一般（0-2分）", score: 8, grade: null, },

        { rowspan: 3, oneLevel: "4.项目实施方案（技术路线）（25分）", towLevel: "A：技术路线和实施方案设计（10分）", title1: "合理（7-10分）", title2: "较合理（3-6分）", title3: "一般（0-2分）", score: 10, grade: null, },
        { rowspan: 0, oneLevel: "4.项目实施方案（技术路线）（25分）", towLevel: "B：技术关键选择及创新性先进性（8分）", title1: "突出（7-8分）", title2: "较突出（3-6分）", title3: "一般（0-2分）", score: 8, grade: null, },
        { rowspan: 0, oneLevel: "4.项目实施方案（技术路线）（25分）", towLevel: "C：年度计划安排（7分）", title1: "合理（6-7分）", title2: "较合理（3-5分）", title3: "一般（0-2分）", score: 7, grade: null, },

        { rowspan: 3, oneLevel: "5.工作基础及支撑条件（15分）", towLevel: "A：负责人及团队创新能力（7分）", title1: "强（6-7分）", title2: "较强（2-5分）", title3: "一般（0-1分）", score: 7, grade: null, },
        { rowspan: 0, oneLevel: "5.工作基础及支撑条件（15分）", towLevel: "B：研发平台及科研条件保障（4分）", title1: "好（4分）", title2: "较好（3分）", title3: "一般（1分）", score: 4, grade: null, },
        { rowspan: 0, oneLevel: "5.工作基础及支撑条件（15分）", towLevel: "C：前期工作基础（4分）", title1: "好（4分）", title2: "较好（3分）", title3: "一般（1分）", score: 4, grade: null, },

        { rowspan: 3, oneLevel: "6.组织运行与管理（15分）", towLevel: "A：经费预算合理性（6分）", title1: "合理（5-6分）", title2: "较合理（2-4分）", title3: "一般（0-1分）", score: 6, grade: null, },
        { rowspan: 0, oneLevel: "6.组织运行与管理（15分）", towLevel: "B：任务分工和权益分配（4分）", title1: "合理（4分）", title2: "较合理（3分）", title3: "一般（1分）", score: 4, grade: null, },
        { rowspan: 0, oneLevel: "6.组织运行与管理（15分）", towLevel: "C：项目组织协调及管理措施（5分）", title1: "完善（4-5分）", title2: "较完善（2-3分）", title3: "一般（0-1分）", score: 5, grade: null, },

        { rowspan: 2, oneLevel: "7.风险分析（10分）", towLevel: "A：项目组织实施风险（6分）", title1: "风险小（5-6分）", title2: "有一定风险（3-4分）", title3: "风险较大（0-2分）", score: 6, grade: null, },
        { rowspan: 0, oneLevel: "7.风险分析（10分）", towLevel: "B：目标实现风险（4分）", title1: "风险小（4分）", title2: "有一定风险（3分）", title3: "风险较大（0分）", score: 4, grade: null, },
      ],
      remark: "",
      supportState: null,
      evaluationType: 0,
      totalScore: 0,
      plainOptions,
      disabled: true,
    };
  },
  created() {
    this.tableData[0].grade = this.value.score1
    this.tableData[1].grade = this.value.score2
    this.tableData[2].grade = this.value.score3
    this.tableData[3].grade = this.value.score4
    this.tableData[4].grade = this.value.score5
    this.tableData[5].grade = this.value.score6
    this.tableData[6].grade = this.value.score7
    this.tableData[7].grade = this.value.score8
    this.tableData[8].grade = this.value.score9
    this.tableData[9].grade = this.value.score10
    this.tableData[10].grade = this.value.score11
    this.tableData[11].grade = this.value.score12
    this.tableData[12].grade = this.value.score13
    this.tableData[13].grade = this.value.score14
    this.tableData[14].grade = this.value.score15
    this.tableData[15].grade = this.value.score16
    this.tableData[16].grade = this.value.score17
    this.remark = this.value.remark
    this.supportState = this.value.supportState
    this.evaluationType = this.value.evaluationType
    this.calTotalScore()
  },
  methods: {
    numberChange(index) {
      switch (index + 1) {
        case 1:
          this.value.score1 = this.tableData[index].grade;
          break;
        case 2:
          this.value.score2 = this.tableData[index].grade;
          break;
        case 3:
          this.value.score3 = this.tableData[index].grade;
          break;
        case 4:
          this.value.score4 = this.tableData[index].grade;
          break;
        case 5:
          this.value.score5 = this.tableData[index].grade;
          break;
        case 6:
          this.value.score6 = this.tableData[index].grade;
          break;
        case 7:
          this.value.score7 = this.tableData[index].grade;
          break;
        case 8:
          this.value.score8 = this.tableData[index].grade;
          break;
        case 9:
          this.value.score9 = this.tableData[index].grade;
          break;
        case 10:
          this.value.score10 = this.tableData[index].grade;
          break;
        case 11:
          this.value.score11 = this.tableData[index].grade;
          break;
        case 12:
          this.value.score12 = this.tableData[index].grade;
          break;
        case 13:
          this.value.score13 = this.tableData[index].grade;
          break;
        case 14:
          this.value.score14 = this.tableData[index].grade;
          break;
        case 15:
          this.value.score15 = this.tableData[index].grade;
          break;
        case 16:
          this.value.score16 = this.tableData[index].grade;
          break;
        case 17:
          this.value.score17 = this.tableData[index].grade;
          break;
      }
      this.calTotalScore()
    },
    calTotalScore() {
      this.totalScore = 0;
      this.tableData.forEach((e) => {
        if (e.grade != null) {
          this.totalScore += e.grade;
        }
        this.DetermineType()
      });
    },
    DetermineType() {
      if (this.totalScore >= 80)
        this.evaluationType = 1
      else if (this.totalScore < 80 && this.totalScore >= 60)
        this.evaluationType = 2
      else
        this.evaluationType = 3
      this.EcaluationChange()
    },
    AreaChange() {
      this.value.remark = this.remark
    },
    supportStateChange() {
      this.value.supportState = this.supportState
    },
    EcaluationChange() {
      this.value.evaluationType = this.evaluationType
    }
  },
};
</script>

<style scoped lang="less">
.tab-content {
  ::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;
  }
}
table,
tr,
td {
  border: 1px solid #f0f0f0;
  font-size: 10pt;
  text-align: left;
  line-height: 25px;
  height: 25px;
}
.bg-title {
  background-color: #f8fafc;
  font-weight: bold;
  text-align: center;
}
.target-value {
  text-align: center;
}
</style>