<template>
  <div>

    <div ref="lxHeader">
      <lx-header icon="md-apps" text="入库统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
      </lx-header>
    </div>
    <div class="wrap" :style="{'height':mapHeight+'px'}">
      <div>
        <el-date-picker @change="changeDate" v-model="dateRange" value-format="yyyy-MM-dd" type="daterange"
          :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
          align="right">
        </el-date-picker>
      </div>
      <echartsLine v-if="showCharts" ref="echartsLine1" :lineDataX='monthX' :lineDataY='monthY'>
      </echartsLine>
    </div>
  </div>
</template>

<script>
  import echartsLine from "@/views/reports/components/echartsLine.vue";
  import {
    stocksCharts
  } from "@/api/charts.js"
  export default {
    components: {
      echartsLine
    },
    data() {
      return {
        mapHeight: 0,
        monthX: [],
        monthY: [{
          name:'采购',
          type:'bar',
          data:[]
        },{
          name:'盘点',
          type:'bar',
          data:[]
        },{
          name:'回库',
          type:'bar',
          data:[]
        }],
        showCharts: false,
        start_time: '',
        end_time: '',
        dateRange:[],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }

    },
    created() {
      this.initHeight()

    },
    methods: {
      initHeight() {
        let winHeight = document.body.clientHeight
        this.mapHeight = winHeight - 150
        console.log(winHeight)
        this.start_time = this.recentTime(-14, 'yyyy-MM-dd')
        this.end_time = this.getNowDate()
        this.dateRange = [this.start_time,this.end_time]
        this.getCharts()
      },
      changeDate(e) {
        var that = this;
        this.dateRange = e;
        that.start_time = e[0];
        that.end_time = e[1];
        this.getCharts();
      },
      async getCharts() {
        this.monthX = []
        this.monthY=[{
          name:'采购',
          type:'bar',
          data:[]
        },{
          name:'盘点',
          type:'bar',
          data:[]
        },{
          name:'回库',
          type:'bar',
          data:[]
        },{
          name:'请示',
          type:'bar',
          data:[]
        }],
        this.showCharts = false
        const res = await stocksCharts({
          start_time: this.start_time,
          end_time: this.end_time
        })
        for (var m of res) {
          this.monthX.push(m.date.split('-')[1] + "-" + m.date.split('-')[2])
          for(var k of m.detail){
            for(var j of this.monthY){
              if(k.rukuleixing==j.name){
                j.data.push(k.total)
              }
            }
          }
        }
        this.showCharts = true
      },
      getNowDate() {
        const timeOne = new Date()
        const year = timeOne.getFullYear()
        let month = timeOne.getMonth() + 1
        let day = timeOne.getDate()
        month = month < 10 ? '0' + month : month
        day = day < 10 ? '0' + day : day
        const NowDate = `${year}-${month}-${day}`
        return NowDate
      },
      recentTime(day, fmt, time) {
        //获取当前时间的毫秒值
        let now = (time ? new Date(time) : new Date()).getTime();
        // 获取前后n天时间
        let recent = new Date(now + day * 24 * 60 * 60 * 1000);

        // key：正则匹配表达式，value：对应的时间、日期
        let fmtObj = {
          'M+': recent.getMonth() + 1, //月份
          'd+': recent.getDate(), //日
          'h+': recent.getHours(), //时
          'm+': recent.getMinutes(), //分
          's+': recent.getSeconds(), //秒
        };
        // 获取匹配年份替换
        if (/(y+)/.test(fmt)) {
          //RegExp.$1 匹配结果，替换成对应的长度。如：yyyy就替换成整个年份2021，yy就替换成后两位21，以此类推
          fmt = fmt.replace(RegExp.$1, (recent.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        for (let key in fmtObj) {
          if (new RegExp(`(${key})`).test(fmt)) {
            //日期，时、分、秒替换，判断fmt是否需要补0，如：yyyy-M-d h:m:s 不补0,yyyy-MM-dd hh:mm:ss 则自动补0
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length == 1 ?
              fmtObj[key] :
              ('00' + fmtObj[key]).substr(('' + fmtObj[key]).length),
            );
          }
        }
        return fmt;
      }
    },

  }
</script>

<style>
  .wrap {
    width: 100%;
    background-color: #fff;
    padding:15px;
  }
</style>
