<!--信息记录-->
<template>
  <div class="app-container approval_handle">
    <div class="approval_handle-page" v-if="pageType==1">
      <div class="info_title">
        <li @click="handleClick('','','apply')">
          <img class="title-img" src="@/assets/ZDimages/gasManage3_0/icon_xxjl_sljl.png">
          <i>申领记录</i>
        </li>
        <i></i>
        <li @click="handleClick('','','enter')">
          <img class="title-img" src="@/assets/ZDimages/gasManage3_0/icon_xxjl_rkjl.png">
          <i>入库记录</i>
        </li>
        <i></i>
        <li @click="handleClick('','','use')">
          <img class="title-img" src="@/assets/ZDimages/gasManage3_0/icon_xxjl_syjl.png">
          <i>使用记录</i>
        </li>
        <i></i>
        <li @click="handleClick('','','out')">
          <img class="title-img" src="@/assets/ZDimages/gasManage3_0/icon_xxjl_ckjl.png">
          <i>出库记录</i>
        </li>
        <i></i>
        <li @click="handleClick('','','abnormal')">
          <img class="title-img" src="@/assets/ZDimages/gasManage3_0/icon_xxjl_ycjl.png">
          <i>异常记录</i>
        </li>
        <i></i>
        <li @click="handleClick('','','alarm')">
          <img class="title-img" src="@/assets/ZDimages/gasManage3_0/icon_xxjl_bjjl.png">
          <i>报警记录</i>
        </li>
      </div>
      <!-- 出库信息统计 -->
      <div class="out_stock" >
        <div id="out_stock"></div>
        <div class="select_border">
          <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-select v-model="queryParams.category" placeholder="请选择">
              <el-option :label="item.dictLabel" :value="item.dictLabel" v-for="(item,index) in materialTypeList" :key="index"></el-option>
            </el-select>
          </el-form>
        </div>
      </div>

      <div class="statistics">
        <!-- 申领统计 -->
        <div class="statistics_l">
          <div id="apply"></div>
          <div class="select_border">
            <el-form :model="queryParams2" ref="queryForm" :inline="true">
              <el-select v-model="queryParams2.category" placeholder="请选择">
                <el-option :label="item.dictLabel" :value="item.dictLabel" v-for="(item,index) in materialTypeList" :key="index"></el-option>
              </el-select>
            </el-form>
          </div>
        </div>
        <!-- 用气量统计 -->
        <div class="statistics_r">
          <div id="gas"></div>
          <div class="select_border">
            <el-form :model="queryParams3" ref="queryForm" :inline="true">
              <el-select v-model="queryParams3.category" placeholder="请选择">
                <el-option :label="item.dictLabel" :value="item.dictLabel" v-for="(item,index) in materialTypeList" :key="index"></el-option>
              </el-select>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <!--申领记录 -->
    <apply-record v-if="pageType==2"></apply-record>
    <!--入库记录 -->
    <enter-record v-if="pageType==3"></enter-record>
    <!--使用记录 -->
    <use-record v-if="pageType==4"></use-record>
    <!--出库记录 -->
    <out-record v-if="pageType==5"></out-record>
    <!--异常记录 -->
    <abnormal-record v-if="pageType==6"></abnormal-record>
    <!--报警记录 -->
    <alarm-record v-if="pageType==7"></alarm-record>
  </div>
</template>

<script>

import {
  gasApplyStatistics,
  gasCategoryList,
  outStatistics,
  supplierList,
  useGasStatistics
} from '@/api/gasManage3_0/gasManage'
import { getToken } from "@/utils/auth";
import echarts from 'echarts'
import applyRecord from "./applyRecord.vue"
import enterRecord from "./enterRecord.vue"
import useRecord from "./useRecord.vue"
import outRecord from "./outRecord.vue"
import abnormalRecord from "./abnormalRecord.vue"
import alarmRecord from "./alarmRecord.vue"

export default {
  name: "info",
  components: {
    applyRecord,
    enterRecord,
    useRecord,
    outRecord,
    abnormalRecord,
    alarmRecord
  },
  data() {
    return {
      pageType:1,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
        category:'气瓶',
      },
      queryParams2: {
        pageNum: 1,
        pageSize:20,
        category:'气瓶',
      },
      queryParams3: {
        pageNum: 1,
        pageSize:20,
        category:'气瓶',
      },
      materialTypeList:[],
    };
  },
  created() {

  },

  methods: {
    handleClick(index,row,doType){
      let _this=this;
      if(doType=='apply'){//申请记录
        _this.pageType=2;
      }else if(doType=='enter'){//入库记录
        _this.pageType=3;
      }else if(doType=='use'){//使用记录
        _this.pageType=4;
      }else if(doType=='out'){//出库记录
        _this.pageType=5;
      }else if(doType=='abnormal'){//异常
        _this.pageType=6;
      }else if(doType=='alarm'){//报警记录
        _this.pageType=7;
      }else if(doType=='back'){//返回
        _this.pageType=1;
      }

    },
    //气瓶类目
    gasCategoryList(){
      let _this=this;
      gasCategoryList().then( response => {
        let res=response.rows;
        _this.materialTypeList=res;
      });
    },
    //出库
    outStockFun:function(dataX,dataY,dataY2){
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        title: {
          left:'1%',
          top:12,
          text: '出入库信息统计',
          textStyle: {
            color: "#333333",
            fontSize:16,
          },
        },
        grid: {
          left: '1%',
          right: '4%',
          bottom: '14%',
          top:'24%',
          containLabel: true
        },
        legend: {
          data: ['入库(个)', '出库(个)'],
          left:'12%',
          top:12,
          textStyle: {
            color: "#333333"
          },
          itemWidth: 12,
          itemHeight: 10,
          // itemGap: 35
        },
        xAxis: {
          type: 'category',
          data:dataX,
          axisLine: {
            lineStyle: {
              color: '#ccc'

            }
          },
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#7DFFFD'
            }
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              color: '#666666',
              fontSize:16,
            }
          },
        },

        yAxis: {

          nameTextStyle:{
            color:'#ccc',
            align:'center',

            fontSize:18,
          },
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#7DFFFD'
            }
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              color: '#666666',
              fontSize:16,
            }
          },
        },

        series: [{
          name: '入库(个)',
          type: 'bar',
          barWidth: '14',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#88C8FF'
              }, {
                offset: 1,
                color: '#0183FA'
              }]),
              barBorderRadius:[12,12,0,0],
            },
          },
          data: dataY
        },
          {
            name: '出库(个)',
            type: 'bar',
            barWidth: '14',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#F28E26'
                }, {
                  offset: 1,
                  color: '#FFDEBC'
                }]),
                barBorderRadius:[12,12,0,0],
              }

            },
            data: dataY2
          }]
      };
      var out_stock = echarts.init(document.getElementById('out_stock'));
      out_stock.setOption(option);

    },
    //申领统计
    applyFun:function(dataX,dataY){
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        title: {
          left:'2%',
          top:12,
          text: '气瓶申请统计',
          textStyle: {
            color: "#333333",
            fontSize:16,
          },
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '14%',
          top:'24%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: dataX,
          axisLine: {
            lineStyle: {
              color: '#ccc'

            }
          },
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#7DFFFD'
            }
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              color: '#666666',
              fontSize:16,
            }
          },
        },

        yAxis: {
          nameTextStyle:{
            color:'#ccc',
            align:'center',

            fontSize:18,
          },
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#7DFFFD'
            }
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              color: '#666666',
              fontSize:16,
            }
          },
        },

        series: [{
          name: '申请',
          type: 'bar',
          barWidth: '14',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#88C8FF'
              }, {
                offset: 1,
                color: '#0183FA'
              }]),
              barBorderRadius:[12,12,0,0],
            },
          },
          showBackground:true,
          data: dataY
        }]
      };
      var apply = echarts.init(document.getElementById('apply'));
      apply.setOption(option);
    },
    //用气量统计
    gasFun:function(dataX,dataY){
      var option = {
        title: {
          left:'2%',
          top:12,
          text: '用气量统计',
          textStyle: {
            color: "#333333",
            fontSize:16,
          },
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '14%',
          top:'24%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#ccc'

            }
          },
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#7DFFFD'
            }
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              color: '#666666',
              fontSize:16,
            }
          },
          data: dataX,
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#ccc'

            }
          },
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#7DFFFD'
            }
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              color: '#666666',
              fontSize:16,
            }
          },
        },
        series: [{
          data: dataY,
          label:{
            show:true,
            color:'#fff',
            formatter:function(data){
              return data.value;
            }
          },
          type: 'line',
          smooth: false,//让折线平滑
          symbolSize:0,   //拐点圆的大小
          itemStyle: {
            normal: {
              color: "#917FFF",
              lineStyle:{
                width:2,
                type:'solid'  //'dotted'虚线 'solid'实线
              }
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#917FFF'
              }, {
                offset: 1,
                color: 'rgba(63,187,254, 0.2)'
              }])
            }
          },
        }]
      };
      var gas = echarts.init(document.getElementById('gas'));
      gas.setOption(option);
    },
    //出入库信息统计
    outStatistics(){
      let _this=this;
      outStatistics().then( response => {
        let res=response.data;
        let dataX=[];
        let dataY=[];
        let dataY2=[];
        if(response.code==200){
          res.forEach(function(item){
            dataX.push(item.date)
            dataY.push(item.inNum)
            dataY2.push(item.outNum)
          })
          this.outStockFun(dataX,dataY,dataY2);
        }
      });
    },
    //气瓶申请统计
    gasApplyStatistics(){
      let _this=this;
      gasApplyStatistics().then( response => {
        let res=response.data;
        let dataX=[];
        let dataY=[];
        if(response.code==200){
          res.forEach(function(item){
            dataX.push(item.date)
            dataY.push(item.amount)
          })
          this.applyFun(dataX,dataY);
        }
      });
    },
    //用气量统计
    useGasStatistics(){
      let _this=this;
      useGasStatistics().then( response => {
        let res=response.data;
        let dataX=[];
        let dataY=[];
        if(response.code==200){
          res.forEach(function(item){
            dataX.push(item.date)
            dataY.push(item.amount)
          })
          this.gasFun(dataX,dataY);
        }
      });
    },
  },

  mounted(){



    this.gasCategoryList()
    this.outStatistics()
    this.gasApplyStatistics()
    this.useGasStatistics()

  },
};
</script>

<style lang="scss" scoped>
.approval_handle {
  display: flex!important;
  flex-direction: column;
  .approval_handle-page{
    flex:1;
    display: flex!important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    padding:20px 20px 20px!important;
    border-radius:10px;
    .info_title{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 40px;
      padding-bottom: 36px;
      border-bottom: 2px solid #E0E0E0;
      >li{
        list-style-type: none;
        text-align: center;
        cursor: pointer;
        >img{
          width: 80px;
          height: 80px;
        }
        >i{
          font-style: normal;
          display: block;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #333333;
          line-height: 24px;
        }
      }
      >i{
        display: inline-block;
        font-style: normal;
        width: 208px;
        border-bottom: 1px dotted #0183FA;
        position: relative;
        top: -10px;
      }
    }
    .select_border{
      position: absolute;
      top: 12px;
      right: 20px;
    }
    .out_stock{
      width: 100%;
      height: 300px;
      position: relative;
      #out_stock{
        width: 100%;
        height: 300px;
      }
    }
    .statistics{
      display: flex;
      justify-content: flex-start;
      width: 100%;
      height: 320px;
      .statistics_l{
        width: 50%;
        height: 320px;
        position: relative;
        #apply{
          width: 100%;
          height: 320px;
        }
      }
      .statistics_r{
        width: 50%;
        height: 330px;
        position: relative;
        #gas{
          width: 100%;
          height: 320px;
        }
      }
    }

    .button-box{
      width:200px;
      display: flex;
    }
  }

}
</style>
