<!--
 * @Author: zwq
 * @Date: 2023-07-03 15:21:14
 * @LastEditors: zwq
 * @LastEditTime: 2023-07-14 14:10:48
 * @Description: 
-->
<template>
    <el-card shadow="never" class="aui-card--fill">
      <div class="mod-sys__user">
        <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
        <div style="height:20px;width:100%"></div>
        <el-row :gutter="4" style="margin-top:20px">
          <el-col :span="12" v-if="pieVisible">
            <pie-chart
              v-loading="pieLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              ref="pieRef"
              :e-type="1"
              :title="'问题类型分布图'"
              :data-list="pieData"
            ></pie-chart>
          </el-col>
          <el-col :span="12" v-else>
            <el-empty description="无数据"></el-empty>
          </el-col>
          <el-col :span="12" v-if="lineVisible">
            <line-chart
              v-loading="lineLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              ref="lineRef"
              :e-type="1"
              :title="'问题类型月份分布图'"
              :data-list="lineData"
            ></line-chart>
          </el-col>
          <el-col :span="12" v-else>
            <el-empty description="无数据"></el-empty>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </template>
  
  <script>
  import pieChart from "./components/pie-chart";
  import lineChart from "./components/line-chart";
  import basicPage from "@/mixins/basic-page";
  
  export default {
    mixins: [basicPage],
    data() {
      return {
        urlOptions: {
          pieURL: "/code/startEightDiscipline/problem/type/distribution",
          lineURL: "/code/startEightDiscipline/problem/type/month/distribution",
        },
        pieLoading: false,
        pieVisible: false,
        lineLoading: false,
        lineVisible: false,
        listQuery: {
          limit: 999,
          page: 1,
          total: 1,
        },
        formConfig: [
          {
            type: "datePicker",
            label: "日期",
            dateType: "daterange",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            rangeSeparator: "-",
            startPlaceholder: "开始时间",
            endPlaceholder: "结束时间",
            param: "time",
          },
          {
            type: "select",
            label: "8D类型",
            selectOptions: [
              { id: 1, name: "客诉问题" },
              { id: 2, name: "重大质量问题" },
              { id: 0, name: "重复发生问题" },
            ],
            param: "eightDisciplineType",
            defaultSelect: "",
          },
          {
            type: "button",
            btnName: "搜索",
            name: "search",
            color: "primary",
          },
        ],
        pieData: [],
        lineData: [],
      };
    },
    components: {
      pieChart,
      lineChart,
    },
    methods: {
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true;
        this.$http
          .post(this.urlOptions.pieURL, this.listQuery)
          .then(({ data: res }) => {
            this.dataListLoading = false;
            if (res.code !== 0) {
              this.pieData = [];
              this.pieLoading = false;
              return this.$message.error(res.msg);
            }
            this.pieLoading = false;
            this.pieData = res.data;
            if (this.pieData.length > 0) {
              this.pieVisible = true;
              this.$nextTick(() => {
                this.$refs.pieRef.initChartLine();
              });
            } else {
              this.pieVisible = false;
              this.$message({
                message: "没有发现数据",
                type: "warning",
              });
            }
          })
          .catch(() => {});
        this.$http
          .post(this.urlOptions.lineURL, this.listQuery)
          .then(({ data: res }) => {
            this.dataListLoading = false;
            if (res.code !== 0) {
              this.lineData = [];
              this.lineLoading = false;
              return this.$message.error(res.msg);
            }
            this.lineLoading = false;
            this.lineData = res.data;
            if (this.lineData.length > 0) {
              this.lineVisible = true;
              this.$nextTick(() => {
                this.$refs.lineRef.initChartLine();
              });
            } else {
              this.lineVisible = false;
              this.$message({
                message: "没有发现数据",
                type: "warning",
              });
            }
          })
          .catch(() => {});
      },
      //search-bar点击
      buttonClick(val) {
        switch (val.btnName) {
          case "search":
            this.listQuery.page = 1;
            this.listQuery.eightDisciplineType = val.eightDisciplineType;
            this.listQuery.startTime = val.time && val.time.length > 0 ? val.time[0] : "";
            this.listQuery.endTime = val.time && val.time.length > 0 ? val.time[1] : "";
            this.getDataList();
            break;
          default:
            console.log(val);
        }
      },
    },
  };
  </script>
  <style lang="scss">
  .mod-sys__user {
    > .el-row {
          display:flex;
          flex-wrap: wrap; 
      .el-col {
      }
    }
    .chart-box {
      min-height: 400px;
    }
  }
  </style>
  