<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :span="4">
            <a-form-item label="年份">
              <a-select v-model="queryParam.year" placeholder="请选择" @change="yearChange" >
                <a-select-option v-for="i in 50" :key="i+2019">
                  {{ i+2019 }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item label="月份">
              <a-select v-model="queryParam.month" placeholder="请选择" >
<!--                <a-select-option value="">空</a-select-option>-->
                <a-select-option value="01">1</a-select-option>
                <a-select-option value="02">2</a-select-option>
                <a-select-option value="03">3</a-select-option>
                <a-select-option value="04">4</a-select-option>
                <a-select-option value="05">5</a-select-option>
                <a-select-option value="06">6</a-select-option>
                <a-select-option value="07">7</a-select-option>
                <a-select-option value="08">8</a-select-option>
                <a-select-option value="09">9</a-select-option>
                <a-select-option value="10">10</a-select-option>
                <a-select-option value="11">11</a-select-option>
                <a-select-option value="12">12</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6" >
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery1">查询</a-button>
              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
              </span>
          </a-col>
          <a-col :span="24">
          <a-tabs defaultActiveKey="1">
          <a-tab-pane tab="故障类型" key="1">
          <a-col :span="24">
            <line-chart-multid title="故障类型次数统计" :height="500" :dataSource="dataSourceType"
                                :fields="fieldsType" :aliases="aliasType" />
          </a-col>
<!--            <a-col :span="24">-->
<!--              <bar title="故障类型统计" :height="400" :dataSource="countTypeSource" :fields="fieldsTypeBar" :aliases="aliasTypeBar"/>-->
<!--            </a-col>-->
          </a-tab-pane>
          <a-tab-pane tab="故障系统" key="2">
          <a-col :span="24">
            <line-chart-multid title="故障系统次数统计" :height="500" :dataSource="dataSourceSystem"
                               :fields="fieldsSystem" :aliases="aliasSystem"/>
          </a-col>
          </a-tab-pane>
          <a-tab-pane tab="故障等级" key="3">
          <a-col :span="24">
            <line-chart-multid title="故障等级次数统计" :height="500" :dataSource="dataSourceGrade"
                               :fields="fieldsGrade" :aliases="aliasGrade"/>
          </a-col>
          </a-tab-pane>
          </a-tabs>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
<!--    <div class="table-operator">-->
<!--      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>-->
<!--      <a-button type="primary" icon="download" @click="handleExportXls('设备信息统计表')">导出</a-button>-->
<!--      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">-->
<!--        <a-button type="primary" icon="import">导入</a-button>-->
<!--      </a-upload>-->
<!--      <a-dropdown v-if="selectedRowKeys.length > 0">-->
<!--        <a-menu slot="overlay">-->
<!--          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>-->
<!--        </a-menu>-->
<!--        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>-->
<!--      </a-dropdown>-->
<!--    </div>-->

    <!-- table区域-begin -->
<!--    <div>-->
<!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
<!--        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
<!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
<!--      </div>-->

<!--      <a-table-->
<!--        ref="table"-->
<!--        size="middle"-->
<!--        :scroll="{x:true}"-->
<!--        bordered-->
<!--        rowKey="id"-->
<!--        :columns="columns"-->
<!--        :dataSource="dataSource"-->
<!--        :pagination="ipagination"-->
<!--        :loading="loading"-->
<!--        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"-->
<!--        class="j-table-force-nowrap"-->
<!--        @change="handleTableChange">-->

<!--        <template slot="htmlSlot" slot-scope="text">-->
<!--          <div v-html="text"></div>-->
<!--        </template>-->
<!--        <template slot="imgSlot" slot-scope="text">-->
<!--          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>-->
<!--          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>-->
<!--        </template>-->
<!--        <template slot="fileSlot" slot-scope="text">-->
<!--          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>-->
<!--          <a-button-->
<!--            v-else-->
<!--            :ghost="true"-->
<!--            type="primary"-->
<!--            icon="download"-->
<!--            size="small"-->
<!--            @click="downloadFile(text)">-->
<!--            下载-->
<!--          </a-button>-->
<!--        </template>-->

<!--        <span slot="action" slot-scope="text, record">-->
<!--          <a @click="handleEdit(record)">编辑</a>-->

<!--          <a-divider type="vertical" />-->
<!--          <a-dropdown>-->
<!--            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>-->
<!--            <a-menu slot="overlay">-->
<!--              <a-menu-item>-->
<!--                <a @click="handleDetail(record)">详情</a>-->
<!--              </a-menu-item>-->
<!--              <a-menu-item>-->
<!--                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
<!--                  <a>删除</a>-->
<!--                </a-popconfirm>-->
<!--              </a-menu-item>-->
<!--            </a-menu>-->
<!--          </a-dropdown>-->
<!--        </span>-->

<!--      </a-table>-->
<!--    </div>-->

    <bu-fault-statistics-modal ref="modalForm" @ok="modalFormOk"></bu-fault-statistics-modal>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JSelectDevice from '@comp/jeecgbiz/JSelectDevice'
  import FaultStatistics from '@views/statistics/FaultStatistics'
  import BuFaultStatisticsModal from '@views/statistics/modules/BuFaultStatisticsModal'
  import LineChartMultid from '@comp/chart/LineChartMultid'
  import { getAction } from '@api/manage'
  import Bar from '@comp/chart/Bar'

  const DataSet = require('@antv/data-set')
  export default {
    name: 'BuFaultStatisticsList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      LineChartMultid,
      FaultStatistics,
      JSelectDevice,
      BuFaultStatisticsModal,
      Bar,
    },
    data () {
      return {
        description: '设备故障率管理页面',
        // queryParam:{year:"2020"},
        dataSourceType:[],
        dataSourceSystem:[],
        dataSourceGrade:[],
        // countTypeSource:[],
        // fieldsTypeBar:['',''],
        aliasType:[{field:'electric',alias:'电气故障'},{field:'machine',alias:'机械故障'}],
        fieldsType:['electric','machine'],
        aliasSystem:[{field:'electric',alias:'电力系统'},{field:'pressure',alias:'液压泵系统'},{field:'machine',alias:'机械系统'}],
        fieldsSystem:['electric','pressure','machine'],
        fieldsGrade:['commonly','important','urgent','veryUrgent'],
        aliasGrade:[{field:'commonly',alias:'一般'},{field:'important',alias:'重要'},{field:'urgent',alias:'紧急'},{field:'veryUrgent',alias:'非常紧急'}],
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          // {
          //   title:'设备名称',
          //   align:"center",
          //   dataIndex: 'deviceId_dictText'
          // },
          // {
          //   title:'故障等级',
          //   align:"center",
          //   dataIndex: 'repairGrade_dictText'
          // },
          // {
          //   title:'故障等级次数',
          //   align:"center",
          //   dataIndex: 'repairGradeTime'
          // },
          {
            title:'故障类型',
            align:"center",
            dataIndex: 'repairType'
          },
          // {
          //   title:'故障类型次数',
          //   align:"center",
          //   dataIndex: 'repairTypeTime'
          // },
          // {
          //   title:'故障系统次数',
          //   align:"center",
          //   dataIndex: 'faultSystem_dictText'
          // },
          // {
          //   title:'故障系统次数',
          //   align:"center",
          //   dataIndex: 'faultSystemTime'
          // },
          // {
          //   title:'总故障次数',
          //   align:"center",
          //   dataIndex: 'faultCategory'
          // },
          {
            title:'1月',
            align:"center",
            dataIndex: 'jan'
          },
          {
            title:'2月',
            align:"center",
            dataIndex: 'feb'
          },
          {
            title:'3月',
            align:"center",
            dataIndex: 'mar'
          },
          {
            title:'4月',
            align:"center",
            dataIndex: 'apr'
          },
          {
            title:'5月',
            align:"center",
            dataIndex: 'may'
          },
          {
            title:'6月',
            align:"center",
            dataIndex: 'jun'
          },
          {
            title:'7月',
            align:"center",
            dataIndex: 'jul'
          },          {
            title:'8月',
            align:"center",
            dataIndex: 'aug'
          },
          {
            title:'9月',
            align:"center",
            dataIndex: 'sep'
          },
          {
            title:'10月',
            align:"center",
            dataIndex: 'octo'
          },
          {
            title:'11月',
            align:"center",
            dataIndex: 'nov'
          },
          {
            title:'12月',
            align:"center",
            dataIndex: 'dece'
          },

          // {
          //   title: '操作',
          //   dataIndex: 'action',
          //   align:"center",
          //   fixed:"right",
          //   width:147,
          //   scopedSlots: { customRender: 'action' }
          // }
        ],
        url: {
          list: "/statistics/buFaultStatistics/list",
          delete: "/statistics/buFaultStatistics/delete",
          deleteBatch: "/statistics/buFaultStatistics/deleteBatch",
          exportXlsUrl: "/statistics/buFaultStatistics/exportXls",
          importExcelUrl: "/statistics/buFaultStatistics/importExcel",
          getMonthTypeCountInfo: "/statistics/buFaultStatistics/monthTypeStatistics",
          getDayTypeCountInfo: "/statistics/buFaultStatistics/dayTypeStatistics",
          getMonthSystemCountInfo: "/statistics/buFaultStatistics/monthSystemStatistics",
          getDaySystemCountInfo: "/statistics/buFaultStatistics/daySystemStatistics",
          getMonthGradeCountInfo: "/statistics/buFaultStatistics/monthGradeStatistics",
          getDayGradeCountInfo: "/statistics/buFaultStatistics/dayGradeStatistics",
          // getMonthBarTypeCountInfo: "/statistics/buFaultStatistics/lineSystemStatistics",
        },
        year:{},
        dictOptions:{},
      }
    },
    created() {
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      initDictConfig(){
      },
      searchQuery1() {
          if (this.queryParam.month === "01" || this.queryParam.month === "02" || this.queryParam.month === "03" || this.queryParam.month === "04" ||
            this.queryParam.month === "05" || this.queryParam.month === "06" || this.queryParam.month === "07" || this.queryParam.month === "08" ||
            this.queryParam.month === "09" || this.queryParam.month === "10" || this.queryParam.month === "11" || this.queryParam.month === "12") {
            this.types = "day";
            this.getUrlType(this.types, { year: this.queryParam.year, month: this.queryParam.month })
            this.getUrlSystem(this.types, { year: this.queryParam.year, month: this.queryParam.month })
            this.getUrlGrade(this.types, { year: this.queryParam.year, month: this.queryParam.month })
          } else {
            this.types = "month";
            this.getUrlType(this.types, { year: this.queryParam.year });
            this.getUrlSystem(this.types, { year: this.queryParam.year });
            this.getUrlGrade(this.types, { year: this.queryParam.year });
            // this.getUrlTypeBar(this.types,{year: this.queryParam.year});
          }
      },
      // 故障类型：根据月和天获取不同故障类型时的数量
      getUrlType(types,param){
        let url = "";
        if(types === 'month'){
          url = this.url.getMonthTypeCountInfo;
          // url = this.url.getMonthBarTypeCountInfo;
        }
        if (types === 'day'){
          url = this.url.getDayTypeCountInfo;
        }
        this.loadDate(url,types,param);
      },
      // 故障系统：根据月和天获取不同故障系统时的数量
      getUrlSystem(types,param){
        let url = "";
        if(types === 'month'){
          url = this.url.getMonthSystemCountInfo;
        }
        if (types === 'day'){
          url = this.url.getDaySystemCountInfo;
        }
        this.loadDateSystem(url,types,param);
      },
      // 故障等级：根据月和天获取不同故障等级时的数量
      getUrlGrade(types,param){
        let url = "";
        if(types === 'month'){
          url = this.url.getMonthGradeCountInfo;
        }
        if (types === 'day'){
          url = this.url.getDayGradeCountInfo;
        }
        this.loadDateGrade(url,types,param);
      },
      // getUrlTypeBar(types,param){
      //   let url = "";
      //   if(types === 'month'){
      //     url = this.url.getMonthTypeCountInfo;
      //   }
      //   if (types === 'day'){
      //     url = this.url.getDayTypeCountInfo;
      //   }
      //   this.loadDateTypeBar(url,types,param);
      // },
      loadDate(url,types,param) {
        getAction(url,param,'get').then((res) => {
          this.dataSourceType = [];
          if (types === 'month') {
            this.getMonthCountSource(res.result);
          }
          if (types === 'day'){
            this.getDayCountSource(res.result);
          }
        })
      },
      loadDateSystem(url,types,param) {
        getAction(url,param,'get').then((res) => {
          this.dataSourceSystem = [];
          if (types === 'month') {
            this.getMonthSystemCountSource(res.result);
          }
          if (types === 'day'){
            this.getDaySystemCountSource(res.result);
          }
        })
      },
      loadDateGrade(url,types,param) {
        getAction(url,param,'get').then((res) => {
          this.dataSourceGrade = [];
          if (types === 'month') {
            this.getMonthGradeCountSource(res.result);
          }
          if (types === 'day'){
            this.getDayGradeCountSource(res.result);
          }
        })
      },
      loadDateTypeBar(url,types,param) {
        getAction(url,param,'get').then((res) => {
          this.countTypeSource = [];
          if (types === 'month') {
            this.getMonthBarCountSource(res.result);
          }
          if (types === 'day'){
            this.getDayCountSource(res.result);
          }
        })
      },
      getMonthCountSource(data){
        for (let i = 0; i < data.length; i++) {
            this.dataSourceType.push({
              type: `${data[i].month}月`,
              electric: data[i].monthtypeonecount,
              machine: data[i].monthtypetwocount,
            })
        }
      },
      getMonthSystemCountSource(data){
        for (let i = 0; i < data.length; i++) {
          this.dataSourceSystem.push({
            type: `${data[i].month}月`,
            electric: data[i].monthsystemonecount,
            pressure: data[i].monthsystemtwocount,
            machine: data[i].monthsystemthreecount,
          })
        }
      },
      getMonthGradeCountSource(data){
        for (let i = 0; i < data.length; i++) {
          this.dataSourceGrade.push({
            type: `${data[i].month}月`,
            commonly: data[i].monthgradeonecount,
            important: data[i].monthgradetwocount,
            urgent: data[i].monthgradethreecount,
            veryUrgent: data[i].monthgradefourcount,
          })
        }
      },
      getDayCountSource(data){
        for (let i = 0; i < data.length; i++) {
          this.dataSourceType.push({
            type: `${data[i].day}日`,
            electric:data[i].daytypeonecount,
            machine:data[i].daytypetwocount,
          })
        }
      },
      getDaySystemCountSource(data){
        for (let i = 0; i < data.length; i++) {
          this.dataSourceSystem.push({
            type: `${data[i].day}日`,
            electric:data[i].daysystemonecount,
            pressure:data[i].daysystemtwocount,
            machine:data[i].daysystemthreecount,
          })
        }
      },
      getDayGradeCountSource(data){
        for (let i = 0; i < data.length; i++) {
          this.dataSourceGrade.push({
            type: `${data[i].day}日`,
            commonly:data[i].daygradeonecount,
            important:data[i].daygradetwocount,
            urgent:data[i].daygradethreecount,
            veryUrgent:data[i].daygradefourcount,
          })
        }
      },
      // getMonthBarCountSource(data){
      //   for (let i = 0; i < data.length; i++) {
      //       this.countTypeSource.push({
      //         x: data[i].month,
      //         y: data[i].monthcount
      //       })
      //   }
      // },

      searchQuery() {
        this.loadData(1);
      },
      loadData(arg) {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        //打开当前页面时默认展示某年份的统计数据
        // let date = new Date();
        // let year = new Date(date).getFullYear();
        // this.queryParam.year = year;
        // this.queryParam.year = "2020";
        var thisYear = "2020";
        this.queryParam.year = thisYear;
        this.types = "month";
        this.getUrlType(this.types, { year: thisYear });
        this.getUrlSystem(this.types, { year: thisYear });
        this.getUrlGrade(this.types, { year: thisYear });

        var params = this.getQueryParams();//查询条件
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records||res.result;
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      },
      yearChange(val){
        this.$set(this.queryParam,this.queryParam.year,val.value)//使用$set方法赋值
        // this.$forceUpdate();//也可以直接重新渲染实例
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>