<template>
  <div class="quality-analysis">
    <div class="part-box part-box-head">
      <div class="part-box-head-left">
        <Form label-position="left" inline>
          <FormItem>
            <Select
              v-model="filter.subject"
              @on-change="subjectChange"
              placeholder="科目"
            >
              <Option
                v-for="(item, index) in subjects"
                :key="index"
                :value="item.subject"
                :label="item.name"
              ></Option>
            </Select>
          </FormItem>
          <FormItem>
            <Select v-model="filter.areaCode" placeholder="考区">
              <Option
                v-for="area in areas"
                :key="area.id"
                :value="area.areaCode"
                :label="area.areaName"
              ></Option>
            </Select>
          </FormItem>
          <FormItem>
            <DatePicker
              v-model="searchTime"
              type="datetimerange"
              @on-change="searchTimeChange"
              placeholder="查询时间段"
              style="width: 400px"
              transfer
            ></DatePicker>
          </FormItem>
          <FormItem>
            <Button
              class="btn-form-search"
              size="small"
              type="primary"
              :disabled="!filter.subject || !filter.areaCode"
              @click="toSearch"
              >查询</Button
            >
          </FormItem>
        </Form>
      </div>
      <div class="part-box-head-right">
        <Button
          type="success"
          shape="circle"
          icon="upload-white icon"
          @click="toExport"
          >导出表格</Button
        >
      </div>
    </div>

    <Row :gutter="20">
      <Col span="12">
        <div class="part-box" v-if="levelsPropReportData">
          <echart-render
            chart-title="档位分布图"
            :chart-data="levelsPropReportData"
            chart-type="barGroup"
          ></echart-render>
        </div>
      </Col>
      <Col span="12">
        <div class="part-box" v-if="deviationReportData">
          <echart-render
            chart-title="累计偏差"
            :chart-data="deviationReportData"
            :chart-color="['#FF7786']"
            chart-type="barReverse"
          ></echart-render>
        </div>
      </Col>
    </Row>

    <Row :gutter="20">
      <Col span="12">
        <div class="part-box" v-if="distanceReportData">
          <echart-render
            chart-title="累计误差"
            :chart-data="distanceReportData"
            :chart-color="['#22C0FF']"
            chart-type="bar"
          ></echart-render>
        </div>
      </Col>
      <Col span="12">
        <div class="part-box" v-if="callbackReportData">
          <echart-render
            chart-title="打回次数"
            :chart-data="callbackReportData"
            :chart-color="['#41CD7D']"
            chart-type="bar"
          ></echart-render>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import {
  levelsPropReport,
  deviationReport,
  distanceReport,
  callbackReport,
  subjectList,
  areaList
} from "@/api";
import EchartRender from "@/components/EchartRender";
import { filterObjNull } from "@/plugins/utils";

export default {
  name: "quality-analysis",
  components: { EchartRender },
  data() {
    return {
      filter: {
        workId: this.$route.params.workId,
        subject: "",
        areaCode: "",
        startTime: null,
        endTime: null
      },
      searchTime: [],
      levelsPropReportData: null,
      distanceReportData: null,
      deviationReportData: null,
      callbackReportData: null,
      subjects: [],
      areas: []
    };
  },
  mounted() {
    this.getSubjects();
  },
  methods: {
    async getSubjects() {
      this.subjects = await subjectList(this.filter.workId);
    },
    async getAreaList() {
      const data = await areaList({
        workId: this.filter.workId,
        subject: this.filter.subject
      });
      this.areas = data.map(item => {
        return {
          id: item.id,
          areaName: item.areaName,
          areaCode: item.areaCode
        };
      });
    },
    subjectChange() {
      this.filter.areaCode = "";
      this.getAreaList();
    },
    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 = filterObjNull({
        ...this.filter
      });
      const requests = [
        levelsPropReport(datas),
        deviationReport(datas),
        distanceReport(datas),
        callbackReport(datas)
      ];
      const data = await Promise.all(requests);

      this.levelsPropReportData = this.parseGroupBarData(data[0]);

      this.deviationReportData = this.parseBarData(data[1]);

      this.distanceReportData = this.parseBarData(data[2]);

      this.callbackReportData = this.parseBarData(data[3]);
    },
    searchTimeChange(val) {
      this.filter.startTime = val[0] || null;
      this.filter.endTime = val[1] || null;
    },
    toExport() {}
  }
};
</script>
