<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-date-picker
        v-model="formInline.faultStartTime"
        type="datetime"
        placeholder="选择日期时间"
        align="right">
      </el-date-picker>-----
      <el-date-picker
        v-model="formInline.faultEndTime"
        type="datetime"
        placeholder="选择日期时间"
        align="right">
      </el-date-picker>
      <el-button @click="look()">观看</el-button>
    </el-form>

<!--    <el-button @click="par()">柱状图</el-button>-->
<!--    <el-button @click="pie()">饼状图</el-button>-->
    <el-table v-loading="loading" :data="breakdownList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="主键" align="center" prop="id" />
      <el-table-column label="故障码" align="center" prop="faultCode" />
      <el-table-column label="车辆标识" align="center" prop="vin" />
      <el-table-column label="故障状态" align="center" prop="faultState" />
      <el-table-column label="故障产生时间" align="center" prop="faultStartTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.faultStartTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="故障解决时间" align="center" prop="faultEndTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.faultEndTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="故障等级" align="center" prop="faultLevel" width="180"></el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <div id="main" rel="stylesheet" style="height: 400px;width: 400px;display: flex;
    align-items: center;justify-content: center"></div>
    <div id="main2" rel="stylesheet" style="height: 400px;width: 400px;display: flex;
    align-items: center;justify-content: center"></div>


  </div>
</template>

<script>
import { listBreakdown, pies } from "@/api/goods/breakdown";
import * as echarts from "echarts";
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
// 例如：import 《组件名称》 from '《组件路径》,
export default {
  // import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    // 这里存放数据"
    return {
      a: [],
      b: [],
      c: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      formInline: {
        faultStartTime: null,
        faultEndTime: null
      },
      // 显示搜索条件
      showSearch: true,
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        console.log(this.queryParams)
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 总条数
      total: 0,
      // 遮罩层
      loading: true,
      // 故障列表
      breakdownList: [],
      // 多选框选中数据
      handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
      },
    }
  },
  // 计算属性 类似于data概念",
  computed: {},
  // 监控data中的数据变化",
  watch: {},
  // 方法集合",
  methods: {
    look() {
      this.getPers()
      this.par()
      this.pie()
    },
    /** 查询企业列表 */
    getList() {
      this.loading = true;
      listBreakdown(this.queryParams).then(response => {
        this.breakdownList = response.data.rows;
        this.total = response.data.total;
        this.loading = false;
        console.log(response)
      });
    },
    getPers() {
      pies(this.formInline).then(res => {
        let a1 = []
        let b1 = []
          res.data.forEach(ren => {
            a1.push(ren.name)
            b1.push(ren.value)
            this.a = a1;
            this.b = b1;
          })
          this.c = res.data
      })

      // setTimeout(() => {
      //   this.par()
      //   this.pie()
      // },5000)


    },
    //柱状图
    par() {
      // 基本柱状图
      const option = {
        title: {
          text: '平面展示'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: this.a
        },
        series: [
          {
            type: 'bar',
            data: this.b
          },
        ]
      };

      const myChart = echarts.init(document.getElementById("main"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      // window.addEventListener("resize", () => {
      //   myChart.resize();
      // });
    },
    //饼状图
    pie() {
      const option =  {
        title: {
          text: '百分比展示',
          subtext: '占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.c
            ,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      const myChart = echarts.init(document.getElementById("main2"));
      myChart.setOption(option);
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）",
  created() {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
    this.getList()
    this.getPers()
  },
  beforeCreate() {
  }, // 生命周期 - 创建之前",
  beforeMount() {
  }, // 生命周期 - 挂载之前",
  beforeUpdate() {
  }, // 生命周期 - 更新之前",
  updated() {
  }, // 生命周期 - 更新之后",
  beforeDestroy() {
  }, // 生命周期 - 销毁之前",
  destroyed() {
  }, // 生命周期 - 销毁完成",
  activated() {
  } // 如果页面有keep-alive缓存功能，这个函数会触发",
}
</script>
<style scoped>

</style>
