<!--
 * @Author: zwq
 * @Date: 2022-09-15 10:22:53
 * @LastEditors: zwq
 * @LastEditTime: 2023-01-09 14:20:53
 * @Description: U图
-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <query-form
      ref="queryForm"
      :f-type="2"
      :page-name="'U图'"
      :data-form="dataForm"
      :groupTypeShow="true"
      :showRaw="false"
      @getDataList="getDataList"
      @rawData="rawData"
      @exportHandle="exportHandle"
    />
    <el-row :gutter="6" v-if="chartVisible">
      <el-col :span="24">
        <chart-line
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          ref="CGraph"
          :chartLineName="'CGraph'"
          :yName="'单位缺陷'"
          :title="chartTitle"
          :data-list="dataList.list"
        ></chart-line>
      </el-col>
    </el-row>
    <el-row :gutter="6" v-else>
      <el-empty description="无数据"></el-empty>
    </el-row>
  </el-card>
</template>

<script>
import queryForm from "../query-form";
import processPage from "@/mixins/process-page";
import chartLine from "../charts/echart-3line.vue";
export default {
  mixins: [processPage],
  data() {
    return {
      dataForm: {
        groupType: 1,
      },
      loading: true,
      urlOptions: {
        exportUrl: "/basic/unit/export",
      },
      chartVisible: false,
      chartTitle: "U图",
    };
  },
  components: {
    queryForm,
    chartLine,
  },
  created() {
    this.$nextTick(() => {
      this.$refs.queryForm.getArr();
    });
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.$refs.queryForm.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.loading = true;
        this.$http
          .post("/processInspection/UGraph", {
            ...this.dataForm,
          })
          .then(({ data: res }) => {
            this.dataListLoading = false;
            if (res.code !== 0) {
              this.dataList = [];
              this.rightList = [];
              this.loading = false;
              return this.$message.error(res.msg);
            }
            this.dataList = res.data;
            this.loading = false;
            if (this.dataList.list.length > 0) {
              this.chartVisible = true;
              this.$nextTick(() => {
                this.$refs.CGraph.initChartLine();
              });
            } else {
              this.chartVisible = false;
              this.$message({
                message: "没有发现数据",
                type: "warning",
              });
            }
          })
          .catch(() => {});
      });
    },
    rawData() {
      console.log("原始数据");
    },
  },
};
</script>

<style scoped>
.rightDiv {
  padding: 8px 16px;
  font-size: 16px;
  background-color: #fdfdfd;
  border-bottom: 1px solid #f5f5f5;
  overflow: hidden;
}
</style>
