<template>
  <div>
    <div v-loading.fullscreen.lock="loadingFull" />

    <div style="margin-bottom:20px;">
      <el-date-picker
        v-model="rangeTime"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        :clearable="false"
      />
      <el-button
        type="primary"
        @click="search"
      >
        查询
      </el-button>
    </div>
    <div class="title">库存出入库统计</div>
    <div
      ref="style_num_echart"
      :style="{ height: height, width: width }"
    />
  </div>
</template>

<script>
import echarts from 'echarts'
import { stockeStatistical } from '@/api/stock/statistics'

export default {
  props: {
    width: {
      type: String,
      default: '600px'
    },
    height: {
      type: String,
      default: '600px'
    }
  },
  data() {
    return {
      chart: null,
      timeLineMap: [],
      dataMap: {},
      lengedMap: ['出库', '入库'],
      cycle: '3',
      dateYf: [],
      dataYs: [],
      rangeTime: '',
      startTime: '',
      endTime: '',
      chukuList: '',
      rukuList: '',
      proTime: '',
      search_content: '',
      time: '',
      loadingFull: false
    }
  },
  created() {
    console.log('999999')
    const myDate = new Date()
    const date = myDate.toLocaleDateString()
    const date1 = date.replace(/\//g, '-')
    const time1 = myDate.toLocaleTimeString()
    const time2 = time1.split('午')
    const time = time2[1]
    const data1 = date1 + ' ' + time
    this.time = data1
    this.startTime = data1
    this.endTime = data1
    this.rangeTime = data1 + '至' + data1
    console.log(this.startTime, 'this.startTime')
    this.stockeStatistical()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    search() {
      this.startTime = this.rangeTime[0]
      this.endTime = this.rangeTime[1]
      console.log(this.startTime, 'rangeTime')
      console.log(this.endTime, 'rangeTime')
      this.stockeStatistical()
    },
    createObjectByArray(arr, type) {
      const obj = {}
      arr.forEach(k => {
        obj[k] = type ? [] : {}
      })
      return obj
    },
    async stockeStatistical() {
      this.loadingFull = true
      const params = {
        start_time: this.startTime,
        end_time: this.endTime
      }
      stockeStatistical(params).then(res => {
        console.log(res, 'res,data')
        this.statisticalList = res.data
        if (res.code === 200) {
          var arr = []
          var arr1 = []
          var arr2 = []
          for (let i = 0, leng = res.data.length; i < leng; i++) {
            arr.push(res.data[i].date)
            arr1.push(res.data[i].out_num)
            arr2.push(res.data[i].put_num)
          }
          this.dateYf = arr1
          this.dateYs = arr2
          this.timeLineMap = arr
          console.log(this.timeLineMap, 'xAxis')
          this.initChart()
        } else {
          alert(res.message)
        }
        this.loadingFull = false
      }).catch((error) => {
        console.log(error, 'error')
        this.loadingFull = false
      })
    },
    // 订单金额环比
    async getOrderAccount() {},
    initChart() {
      this.$nextTick(() => {
        this.chart = echarts.init(this.$refs.style_num_echart)
        this.chart.clear()
        this.chart.setOption({
          title: {
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: this.lengedMap
          },
          xAxis: {
            type: 'category',
            // data: this.timeLineMap.map(s => `${s - this.cycle < 0 ? 0 : s - this.cycle} - ${s}小时`)
            data: this.timeLineMap
          },
          yAxis: {
            type: 'value'
          },
          dataZoom: [
            {
              type: 'slider'
            },
            { type: 'inside' }
          ],
          color: ['#63b2ee', '#f19272 ', '#76da91'],
          series: [
            {
              name: '出库',
              type: 'line',
              data: this.dateYf
            },
            {
              name: '入库',
              type: 'line',
              data: this.dateYs
            }
          ]
        })
        window.onresize = this.chart.resize
      })
    }
  }
}
</script>
<style scoped>
.title{
font-size: 28px;
font-weight: 550;
text-align: center;
margin-bottom: 10px;
}
</style>
