<template>
  <div style="height:600px;overflow-y:auto;">
    <div class="mainTitle">{{evaluation.name}}</div>
    <div v-for="content in evaluationContents" :key="content.id">
      <a-comment>
        {{content.showIndex + '.' + content.name + '&nbsp;(' + content.score + '分)'}}
      </a-comment>
      <a-comment v-if="content.hasSubitem">
        <a-comment v-for="item in content.contentItems" :key="item.id">
          {{item.showIndex + '.' + item.name + '&nbsp;(' + item.score + '分)'}}<br />
          <a-radio-group v-if="item.valueType == 1" @change="radioGroupItemValueChange($event,item)" :disabled="disabled">
            <a-radio v-for="record in item.itemValues" :value="record.id" :key="record.id">{{record.name}}</a-radio>
          </a-radio-group>
          <a-checkbox-group v-if="item.valueType == 2" @change="checkBoxItemValueChange($event,item)" :disabled="disabled">
            <a-checkbox v-for="record in item.itemValues" :value="record.id" :key="record.id">{{record.name}}</a-checkbox>
          </a-checkbox-group>
          <!-- {{item.name}}&nbsp; -->
          <a-input-number v-if="item.valueType == 3" :min="0.5" :step="0.5" :max="item.score" :precision="1" :disabled="disabled" @change="e => onNumberItemValueChange(e, record, col)" />
        </a-comment>
      </a-comment>
      <a-comment v-else>
        <a-radio-group v-if="content.valueType == 1" @change="radioGroupContentValueChange($event,content)" :disabled="disabled">
          <a-radio v-for="record in content.contentValues" :value="record.id" :key="record.id">{{record.name}}</a-radio>
        </a-radio-group>
        <a-checkbox-group v-if="content.valueType == 2" @change="checkBoxContentValueChange($event, content)" :disabled="disabled">
          <a-checkbox v-for="record in content.contentValues" :value="record.id" :key="record.id">{{record.name}}</a-checkbox>
        </a-checkbox-group>
        <!-- {{content.name}}&nbsp; -->
        <a-input-number v-if="content.valueType == 3" :min="0.5" :step="0.5" :max="content.score" :precision="1" :disabled="disabled" @change="e => onNumberContentValueChange(e, content, col)" />
      </a-comment>
    </div>
    <div style="clear: both;height: 20px;"></div>
  </div>
</template>

<script>
export default {
  name: 'EvaluationContentView',
  props: {
    value: {
      type: String,
      default: () => {
        return null
      },
    },
    controlDisabled: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
  data() {
    return {
      evaluation: {},
      evaluationContents: [],
      disabled: true
    }
  },
  created() {
    this.getEvaluationById()
    this.getEvaluationContentByEvalId()
    this.disabled = this.controlDisabled
  },
  methods: {
    getEvaluationById() {
      let par = { id: this.value }
      this.$api.systemManage.getEvaluationById(par).then(({ data = {} }) => {
        if (data) {
          this.evaluation = data
        }
      }).catch(() => {})
    },
    getEvaluationContentByEvalId() {
      let par = { id: this.value }
      this.$api.systemManage.getEvaluationContentByEvalId(par).then(({ data = {} }) => {
        if (data) {
          this.evaluationContents = data
        }
      }).catch(() => {})
    },
    radioGroupItemValueChange(event, item) {

    },
    checkBoxItemValueChange(event, item) {

    },
    onNumberItemValueChange(value, record, column) {

    },
    radioGroupContentValueChange(event, content) {

    },
    checkBoxContentValueChange(event, content) {

    },
    onNumberContentValueChange(value, record, column) {

    }
  }
}
</script>

<style scoped>
::v-deep .ant-comment-inner {
  padding: 5px 0
}
::v-deep .ant-modal-body {
  line-height: 2.5;
}
.mainTitle {
  text-align: center;
  font-size: 15pt;
}
</style>