<template>
  <div class="grade-analysis">
    <div class="part-box">
      <div class="part-box-top">
        <Button type="success" icon="md-download" @click="toExport"
          >导出</Button
        >
      </div>
      <Table
        ref="TableList"
        :columns="columns"
        :data="levelData"
        :span-method="handleSpan"
        disabled-hover
        border
        v-if="levelData.length"
      ></Table>
    </div>
    <div class="part-box">
      <v-chart :options="barOption" v-if="barOption" autoresize></v-chart>
    </div>
  </div>
</template>

<script>
import { levels } from "@/constants/apiTempData";
import chartOption from "@/constants/chartOptions";

export default {
  name: "grade-analysis",
  data() {
    return {
      barOption: {},
      levelData: [],
      columns: [
        {
          title: "科目",
          key: "subject"
        },
        {
          title: "档位",
          key: "name"
        },
        {
          title: "范围",
          key: "range",
          render: (h, param) => {
            return h("div", `${param.row.range[0]}~${param.row.range[1]}`);
          }
        },
        {
          title: "数量",
          key: "count"
        },
        {
          title: "占比",
          key: "percent"
        },
        {
          title: "预设占比",
          key: "pt"
        },
        {
          title: "差值",
          key: "ptDis"
        },
        {
          title: "累计数量",
          key: "gcount"
        },
        {
          title: "累计占比",
          key: "percent"
        },
        {
          title: "调整",
          key: "justify"
        }
      ]
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    parseGroupBarData(datas) {
      if (!datas.length) {
        return { names: [], dataList: [] };
      }
      var names = datas[0].data.map(function(item) {
        return item.markerName;
      });
      var dataList = datas.map(function(item) {
        return {
          name: item.name,
          data: item.data.map(function(elem) {
            return elem.prop;
          })
        };
      });
      return {
        names: names,
        dataList: dataList
      };
    },
    initData() {
      let chartLabels = [],
        chartData = [];
      levels.map(item => {
        chartLabels.push(item.name);
        chartData.push(item.gpercent);
      });
      this.barOption = chartOption.getLineOption(
        { chartData, chartLabels },
        "档位分布图"
      );

      this.levelData = levels.map(item => {
        return {
          ...item,
          subject: "速写",
          ptDis: 2,
          justify: 200
        };
      });
    },
    handleSpan({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 0) {
        return { rowspan: this.levelData.length, colspan: 1 };
      } else if (rowIndex > 0 && columnIndex === 0) {
        return { rowspan: 0, colspan: 0 };
      }
    },
    toExport() {}
  }
};
</script>
