<template>
<!--  <div class="size-card-wrapper">-->
<!--    <a-divider orientation="left">按类别</a-divider>-->
    <a-row>
      <a-card>
      <a-col :span="12">
        <a-radio-group :value="barType" @change="statisticst">
          <a-radio-button value="year">按年统计</a-radio-button>
          <a-radio-button value="month">按月统计</a-radio-button>
          <a-radio-button value="system">按故障系统统计</a-radio-button>
          <a-radio-button value="grade">按故障等级统计</a-radio-button>
          <a-radio-button value="type">按故障种类统计</a-radio-button>
<!--          <a-radio-button value="close">按是否关闭统计</a-radio-button>-->
<!--          <a-radio-button value="des">按故障现象统计</a-radio-button>-->
        </a-radio-group>
      </a-col>
<!--        <a-col :span="6">-->
<!--          <a-form v-if="barType === 'month'" layout="inline" style="margin-top: -4px">-->
<!--            <a-form-item label="年份">-->
<!--              <a-select :default-value="queryYear" style="width: 120px" @change="handleBarDate">-->
<!--                <a-select-option v-for="i in 99" :key="i+2019">-->
<!--                  {{ i+2019 }}-->
<!--                </a-select-option>-->
<!--              </a-select>-->
<!--            </a-form-item>-->
<!--            <a-button style="margin-top: 2px" type="primary" icon="search" @click="queryDatebar">查询</a-button>-->
<!--          </a-form>-->
<!--        </a-col>-->
      <a-col :span="24">
          <bar  class="statistic" title="故障统计" :dataSource="countSource" :height="200"/>
      </a-col>
<!--      <a-col :span="24">-->
<!--          <line-chart-multid  title="故障等级统计"  :height="400"/>-->
<!--      </a-col>-->
      </a-card>
    </a-row>
<!--  </div>-->
</template>

<script>
  import Col from 'ant-design-vue/es/grid/Col'
  import moment from "moment"
  import { getAction } from '@api/manage'
  import LineChartMultid from '@comp/chart/LineChartMultid'
  import PieOne from '@views/statistics/PieOne'
  import Bar from '@/components/chart/Bar'
  import BarMultid from '@comp/chart/BarMultid'
  import PieTwo from '@views/statistics/PieTwo'

  export default {
    name: 'FaultStatistics',
    components: {
      BarMultid,
      LineChartMultid,
      Col,
      Bar,
      PieOne,
      PieTwo,
    },
  data() {
    return {
      description: '故障统计页面',
      // 查询条件
      queryParam: {},
      // 数据集
      countSource: [],
      // dateSource: [],
      // 柱状图
      barType: 'year',
      barDate: ['month', 'month'],
      barValue: [],
      // 饼状图
      // pieType: 'year',
      // pieDate: ['month', 'month'],
      // pieValue: [],
      // 统计图类型
      tabStatus:"bar",
      // tabStatus:"pie",
      url: {
        getYearCountInfo: "/repair/buRepairRecord/yearStatistics",
        getMonthCountInfo:"/repair/buRepairRecord/monthStatistics",
        getWorkCountInfo:"/repair/buRepairRecord/workStatistics",
        getGradeCountInfo:"/repair/buRepairRecord/gradeStatistics",
        getSystemCountInfo:"/repair/buRepairRecord/systemStatistics",
        getTypeCountInfo:"/repair/buRepairRecord/typeStatistics",
        // getCloseCountInfo:"/repair/buRepairRecord/closeStatistics",
      },
      queryYear:'',
      nowTime:''
    }
  },
  created() {
    let timeStamp=new Date();
    let year = new Date(timeStamp).getFullYear();
    this.queryYear=year;
    let url = this.url.getYearCountInfo;
    this.loadDate(url,'year',{});
  },
methods: {
  moment,
    loadDate(url,type,param) {
    console.log(type,param);
    getAction(url,param,'get').then((res) => {
      if (res.success) {
        this.countSource = [];
        if(type === 'year'){
          this.getYearCountSource(res.result);
        }
        if(type === 'month'){
          this.getMonthCountSource(res.result);
        }
        if(type === 'work'){
          this.getWorkCountSource(res.result);
        }
        if (type === 'grade'){
          this.getGradeCountSource(res.result);
        }
        if (type === 'system'){
          this.getSystemCountSource(res.result);
        }
        if (type === 'type'){
          this.getTypeCountSource(res.result);
        }
        // if (type === 'close'){
        //   this.getCloseCountSource(res.result);
        // }
      }else{
        var that=this;
        that.$message.warning(res.message);
      }
    })
  },
  getYearCountSource(data){
    for (let i = 0; i < data.length; i++) {
      if(this.tabStatus === "bar"){
        this.countSource.push({
          x: `${data[i].year}年`,
          y: data[i].yearcount
        })
      }else{
        this.countSource.push({
          item: `${data[i].year}年`,
          count:data[i].yearcount
        })
      }
    }
  },
  getMonthCountSource(data){
    for (let i = 0; i < data.length; i++) {
      if(this.tabStatus === "bar"){
        this.countSource.push({
          x: `${data[i].month}月`,
          y: data[i].monthcount
        })
      }else{
        this.countSource.push({
          item: data[i].month,
          count:data[i].monthcount
        })
      }
    }
  },
  getWorkCountSource(data){
    for (let i = 0; i < data.length; i++) {
      if(this.tabStatus ==="bar"){
        this.countSource.push({
          x: data[i].work,
          y: data[i].workcount
        })
      }else{
        this.countSource.push({
          item: data[i].classifyname,
          count:data[i].cntrnocount
        })
      }
    }
  },
  getGradeCountSource(data){
    for (let i = 0; i < data.length; i++) {
      if(this.tabStatus ==="bar"){
        this.countSource.push({
          x: data[i].grade,
          y: data[i].gradecount
        })
      }else{
        this.countSource.push({
          item: data[i].classifyname,
          count:data[i].cntrnocount
        })
      }
    }
  },
  getSystemCountSource(data){
    for (let i = 0; i < data.length; i++) {
      if(this.tabStatus ==="bar"){
        this.countSource.push({
          x: data[i].system,
          y: data[i].systemcount
        })
      }else{
        this.countSource.push({
          item: data[i].classifyname,
          count:data[i].cntrnocount
        })
      }
    }
  },
  getTypeCountSource(data){
    for (let i = 0; i < data.length; i++) {
      if(this.tabStatus ==="bar"){
        this.countSource.push({
          x: data[i].type,
          y: data[i].typecount
        })
      }else{
        this.countSource.push({
          item: data[i].classifyname,
          count:data[i].cntrnocount
        })
      }
    }
  },
  // getCloseCountSource(data){
  //   for (let i = 0; i < data.length; i++) {
  //     if(this.tabStatus ==="bar"){
  //       this.countSource.push({
  //         x: data[i].close,
  //         y: data[i].closecount
  //       })
  //     }else{
  //       this.countSource.push({
  //         item: data[i].classifyname,
  //         count:data[i].cntrnocount
  //       })
  //     }
  //   }
  // },
  // 选择统计类别
  statisticst(e) {
    // if(this.tabStatus === "pie"){
    //   this.pieType = e.target.value;
    //   this.queryDatepie();
    // }else{
      this.barType = e.target.value;
      this.queryDatebar();
    // }
  },
  // 按月份查询
  queryDatebar(){
    if(this.barType==='month'){
      this.getUrl(this.barType,{queryYear:this.queryYear});
    }else{
      this.getUrl(this.barType,{});
    }
  },
  // queryDatepie(){
  //   if(this.pieValue.length>0){
  //     this.getUrl(this.pieType,{startTime:this.pieValue[0]._d,endTime:this.pieValue[1]._d});
  //   }else{
  //     this.getUrl(this.pieType,{});
  //   }
  // },
  // 重置按钮
  // searchReset(){
  //   if(this.tabStatus === "pie"){
  //     this.pieValue = [];
  //   }else{
  //     this.barValue = [];
  //   }
  //   if(this.barType==='month'){
  //     this.getUrl(this.barType,{queryYear:this.queryYear});
  //   }else{
  //     this.getUrl(this.barType,{});
  //   }
  // },
  // 选择请求url
  getUrl(type,param){
    let url = "";
    if(type === 'year'){
      url = this.url.getYearCountInfo;
    }
    if(type === 'month'){
      url = this.url.getMonthCountInfo;
    }
    if(type === 'work'){
      url = this.url.getWorkCountInfo;
    }
    if (type === 'grade'){
      url = this.url.getGradeCountInfo;
    }
    if (type === 'system'){
      url = this.url.getSystemCountInfo;
    }
    if (type === 'type'){
      url = this.url.getTypeCountInfo;
    }
    // if (type === 'close'){
    //   url = this.url.getCloseCountInfo;
    // }
    this.loadDate(url,type,param);
  },
  // 选择月份日期
  handleBarDate(value) {
    this.queryYear=value
    this.barValue = value
  },
  // handlePieDate(value, mode) {
  //   this.pieValue = value
  //   this.pieDate = [
  //     mode[0] === 'date' ? 'month' : mode[0],
  //     mode[1] === 'date' ? 'month' : mode[1]
  //   ]
  // },
}
}
</script>

<style scoped>
.ant-card-body .table-operator {
  margin-bottom: 18px;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}

.anty-row-operator button {
  margin: 0 5px
}

.ant-btn-danger {
  background-color: #ffffff
}

.ant-modal-cust-warp {
  height: 100%
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden
}

.statistic {
  padding: 0px !important;
  margin-top: 50px;
}

.statistic h4 {
  margin-bottom: 20px;
  text-align: center !important;
  font-size: 24px !important;;
}

.statistic #canvas_1 {
  width: 100% !important;
}
</style>