<template>
  <div class="quality-analysis">
    <div class="part-box">
      <Form label-position="left" inline>
        <FormItem label="科目：">
          <Select v-model="filter.subject" placeholder="请选择科目">
            <Option
              v-for="(item, index) in subjects"
              :key="index"
              :value="item.subject"
              :label="item.name"
            ></Option>
          </Select>
        </FormItem>
        <FormItem label="查询时间段：">
          <DatePicker
            v-model="searchTime"
            type="datetimerange"
            placeholder="请选择查询时间段"
            style="width: 400px"
            transfer
          ></DatePicker>
        </FormItem>
        <FormItem>
          <Button type="primary" icon="ios-search" @click="toSearch"
            >查询</Button
          >
          <Button type="primary" icon="md-download" @click="toExport"
            >导出</Button
          >
        </FormItem>
      </Form>

      <div class="analysis-part" v-if="levelsPropReportOption">
        <v-chart :options="levelsPropReportOption" autoresize></v-chart>
      </div>
    </div>
  </div>
</template>

<script>
import {
  levelsPropReport,
  distanceReport,
  callbackReport,
  subjectList
} from "@/api";
import chartOption from "@/constants/chartOptions";

export default {
  name: "quality-analysis",
  data() {
    return {
      filter: {
        workId: this.$route.params.workId,
        subject: ""
      },
      searchTime: [],
      levelsPropReportOption: null,
      distanceReportOption: null,
      callbackReportOption: null,
      subjects: []
    };
  },
  mounted() {
    this.getSubjects();
  },
  methods: {
    async getSubjects() {
      this.subjects = await subjectList(this.filter.workId);
    },
    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
      };
    },
    parseBarData(datas) {
      var names = [];
      var dataList = [];
      datas.map(function(item, index) {
        names[index] = item.userName;
        dataList[index] = item.sumCount;
      });
      return {
        names: names,
        dataList: dataList
      };
    },
    async toSearch() {
      const datas = {
        ...this.filter,
        startTime: this.searchTime[0],
        endTime: this.searchTime[1]
      };
      const requests = [
        levelsPropReport(datas),
        distanceReport(datas),
        callbackReport(datas)
      ];
      const data = await Promise.all(requests);

      this.levelsPropReportOption = chartOption.getBarGroupOption(
        this.parseGroupBarData(data[0]),
        "档位分布图"
      );
      this.distanceReportOption = chartOption.getBarOption(
        this.parseBarData(data[1]),
        "差值和"
      );
      this.callbackReportOption = chartOption.getBarOption(
        this.parseBarData(data[2]),
        "打回次数"
      );
    },
    toExport() {}
  }
};
</script>
