<template>
  <div class="quality-analysis">
    <div class="part-box">
      <Form label-position="left" inline>
        <FormItem label="科目：">
          <Select v-model="subjectId" placeholder="请选择科目">
            <Option value=""></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-chart :options="barOption" v-if="barOption" autoresize></v-chart>
      </div>
    </div>
  </div>
</template>

<script>
import { qualityAnalysisDetail } from "@/api";
import chartOption from "@/constants/chartOptions";

export default {
  name: "quality-analysis",
  data() {
    return {
      subjectId: "",
      searchTime: [],
      barOption: {}
    };
  },
  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() {
      const data = [
        {
          data: [{ prop: 37.5, markerId: 98, markerName: "pj001" }],
          name: "A"
        },
        { data: [{ prop: 62.5, markerId: 98, markerName: "pj001" }], name: "B" }
      ];
      this.barOption = chartOption.getBarGroupOption(
        this.parseGroupBarData(data),
        "档位分布图"
      );
    },
    async toSearch() {
      const datas = {
        subjectId: this.subjectId,
        startTime: this.searchTime[0],
        endTime: this.searchTime[1]
      };
      const data = await qualityAnalysisDetail(datas);
      console.log(data);
    },
    toExport() {}
  }
};
</script>
