<template>
  <div class="part-box part-box-pad answer-rate-analysis">
    <div class="part-box-head">
      <h3>
        <span>本院与全校答对率对比分析</span>
      </h3>
      <!-- modules -->
      <div class="module-select">
        <div
          v-for="mod in dataList"
          :key="mod.id"
          :class="[
            'module-select-item',
            {
              'module-select-item-act': mod.id === curData.id
            }
          ]"
          @click="modChange(mod)"
        >
          {{ mod.moduleName }}
        </div>
      </div>
    </div>
    <div class="chart-box chart-ddldb">
      <v-chart
        :option="curData.answerAnalyseOption"
        v-if="curData.answerAnalyseOption"
      ></v-chart>
    </div>
    <div class="chart-table">
      <table class="table ddldb-table">
        <tr>
          <th rowspan="2" style="width: 50px;">编号</th>
          <th rowspan="2">{{ curData.moduleName }}模块</th>
          <th rowspan="2">题数</th>
          <th colspan="2" class="text-center">平均得分率</th>
        </tr>
        <tr>
          <th>全校</th>
          <th>本院</th>
        </tr>
        <tr v-for="(elem, eindex) in curDioList" :key="eindex">
          <td style="width: 50px;">{{ elem.dimensionCode }}</td>
          <td>{{ elem.dimensionName }}</td>
          <td>{{ elem.totalCount }}</td>
          <td>{{ elem.schScoreRate }}%</td>
          <td>{{ elem.colScoreRate }}%</td>
        </tr>
      </table>

      <div v-if="curDioList.length" class="table-more" @click="showMoreList">
        <i class="el-icon-plus"></i>查看更多数据
      </div>
      <p
        class="report-tips"
        v-if="curData.batterThanAllCodes || curData.worseThanAllCodes"
      >
        与全体平均水平相比
        <span v-if="curData.batterThanAllCodes">
          ，掌握较好的为<b>【{{ curData.batterThanAllCodes }}】</b>
        </span>
        <span v-if="curData.worseThanAllCodes">
          ，有待加强的为<b>【{{ curData.worseThanAllCodes }}】</b>
        </span>
      </p>
    </div>

    <!-- PreviewMoreAnswerRateDialog -->
    <PreviewMoreAnswerRateDialog
      ref="PreviewMoreAnswerRateDialog"
      :datas="curData"
    />
  </div>
</template>

<script>
import PreviewMoreAnswerRateDialog from "./PreviewMoreAnswerRateDialog";

export default {
  name: "answer-rate-analysis",
  components: { PreviewMoreAnswerRateDialog },
  props: {
    dataList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      curData: {},
      curDioList: []
    };
  },
  watch: {
    dataList(val) {
      if (val.length) this.modChange(val[0]);
    }
  },
  methods: {
    modChange(data) {
      this.curData = data;
      this.curDioList = data.dioList.slice(0, 5);
    },
    showMoreList() {
      this.$refs.PreviewMoreAnswerRateDialog.open();
    }
  }
};
</script>
