<template>
    <div class="app-container">
        <div class="filter-container">
            <el-date-picker
            class="filter-item ml-20"
            v-model="listQuery.startTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="开始日期"
            style="width: 135px"
        />
        <span class="filter-item ml-20"> - </span>
        <el-date-picker
            class="filter-item ml-20"
            v-model="listQuery.endTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="结束日期"
            style="width: 135px"
        />
        <el-radio-group v-model="listQuery.type" class="toptype">
            <el-radio label="1">日志类型</el-radio>
            <el-radio label="2">操作类型</el-radio>
            <el-radio label="3">操作人</el-radio>
        </el-radio-group>
        <el-button style="margin-left: 20px" class="filter-item" type="primary" @click="handleFilter">
          查询
        </el-button>
        <el-button style="margin-left: 20px" class="filter-item"  @click="resetFilter">
          重置
        </el-button>
        <span style="margin-left: 40px;">总数:{{sumNum}}</span>
        <span class="ml-20"> 成功:{{successNum}}</span>
        <span class="ml-20"> 失败:{{failedNum}}</span>
      </div>
      <div style="width: 95%;height:650px;">
        <h3 style="text-align: center;">日志类型</h3>
        <div id="eChartBox" style="width: 60%;height:90%;margin: 0 auto;"></div>
      </div>

    </div>
  </template>

  <script>
  import * as echarts from 'echarts';
  import { getAnalyseData } from '@/api/system/log'
  export default {
    data() {
      return {
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: false,
        listQuery: {
          operTime:'',
          type:'1',
          startTime: '',
          endTime: '' 
        },
        rangeDate:[],
        echartData:[
            {
            value: 45,
            name: "CARD",
            },
            {
            value: 25,
            name: "SSD",
            },
            {
            value: 15,
            name: "ADD",
            },
            {
            value: 8,
            name: "CBC",
            },
            {
            value: 7,
            name: "FLASH",
            },
        ],
        sumNum:0,
        successNum:0,
        failedNum:0,
      }
    },
    mounted() {
      this.listQuery.startTime = this.getCurrentDate()
      this.listQuery.endTime = this.getCurrentDate()
      this.listQuery.operTime = this.getCurrentDate()+' - '+this.getCurrentDate();
      this.rangeDate = [this.getCurrentDate(),this.getCurrentDate()]
      this.getData()

    },
    methods: {
        getData() {

          if (this.listQuery.startTime && this.listQuery.endTime) {
              this.listQuery.operTime = this.listQuery.startTime + " - " + this.listQuery.endTime
          } else {
              this.listQuery.operTime = ''
          }
        //   if(this.rangeDate && this.rangeDate.length>0){
        //     this.listQuery.operTime = this.rangeDate[0]+' - '+this.rangeDate[1];
        //   }
          getAnalyseData(this.listQuery).then((response) => {
            this.sumNum = response.data.allNum||0
            this.successNum = response.data.sNum||0
            this.failedNum= response.data.eNum||0
            this.echartData = response.data.list.map((item,index)=>{
              let obj = {
                name:item,
                value:response.data.nums[index]
              }
              return obj
            });
            this.getInitData()
          })
        },
        // 查询
        handleFilter() {
            this.listQuery.pageNum = 1
            this.getData()
        },
        //重置
        resetFilter() {
            this.listQuery={
                rangeDate:[],
                type:'1',
                startTime: '',
                endTime: '',
            },
            this.listQuery.startTime = this.getCurrentDate()
            this.listQuery.endTime = this.getCurrentDate()
            this.handleFilter()
        },
        getInitData() {
            let option = {
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)",
                },
                series: [
                    {
                    name: "日志分析",
                    type: "pie",
                    radius: "68%",
                    center: ["50%", "50%"],
                    clockwise: false,
                    data: this.echartData,
                    label: {
                        normal: {
                        textStyle: {
                            color: "#999",
                            fontSize: 14,
                        },
                        },
                    },
                    labelLine: {
                        normal: {
                        show: false,
                        },
                    },
                    itemStyle: {
                        normal: {
                        borderWidth: 4,
                        borderColor: "#ffffff",
                        },
                        emphasis: {
                        borderWidth: 0,
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                        },
                    },
                    },
                ],
                color: ["#00acee", "#52cdd5", "#79d9f1", "#a7e7ff", "#c8efff"],
                backgroundColor: "#fff",
            };
            let myCharts = echarts.init(document.querySelector('#eChartBox'));
            myCharts.setOption(option)
        },
        getCurrentDate() {
          let now = new Date();
          let year = now.getFullYear();
          let month = now.getMonth() + 1;
          if(month<10){
            month = '0'+month
          }
          let day = now.getDate();
          if(day<10){
            day = '0'+day
          }
          return year + "-" + month + "-" + day;
        }
    }
  }
  </script>
  <style>
    .toptype{
      margin-left: 2%;
    }
  </style>
