<template>
  <div class="in-and-out">
    <!-- 入栏 / 出栏 饼状图 -->
    <!-- <div id="J_chartPieBox" class="chart-box"></div> -->
    <!-- <el-row :gutter="20"> -->
      <!-- <el-col :span="24"> -->
        <el-card>
          <el-form inline size="mini">
            <el-form-item>
              <el-button type="danger" :disabled="ifMonth" @click="clickChange">月</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" :disabled="!ifMonth" @click="clickChange">日</el-button>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="form.time"
                type="datetimerange"
                align="right"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['08:00:00', '16:00:00']"
                @change="timeChange"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
            <!-- <el-form-item>
              <el-button @click="get" icon="el-icon-search">查 询</el-button>
            </el-form-item> -->
          </el-form>
          <div id="J_chartLineBox" class="chart-box"></div>
        </el-card>
      <!-- </el-col> -->
      <!-- <el-col :span="24">
        <el-card>
          <div id="J_chartBarBox" class="chart-box"></div>
        </el-card>
      </el-col> -->
      <!-- <el-col :span="24"> -->
        <!-- <el-card>
          <div id="J_chartPieBox" class="chart-box"></div>
        </el-card> -->
      <!-- </el-col> -->
      <!-- <el-col :span="12">
        <el-card>
          <div id="J_chartScatterBox" class="chart-box"></div>
        </el-card>
      </el-col> -->
    <!-- </el-row> -->
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    data () {
      return {
        chartLine: null,
        statistics: null,
        date: [],
        total: [],
        ifMonth: true,
        form: {
          time: []
        },
        subtext: ''
      }
    },
    mounted () {
      this.initChartLine()
    },
    activated () {
      this.initChartLine()
    },
    methods: {
      // // 折线图
      initChartLine () {
        this.date = []
        this.total = []
        this.$http({
          url: this.$http.adornUrl(`/management/yearpigbase/suchStatistics${this.ifMonth? 'Month': 'Day'}`),
          method: "get",
          params: this.$http.adornParams({
            'startTime': this.form.time[0],
            'endTime': this.form.time[1]
          })
        }).then( ({ data }) => {
          console.log(data.data);
          if (data && data.code === 0) {
            data.data.forEach(item => {
              this.date.push(item.date)
              this.total.push(item.total)
            })
            if (data.data.length === 0) {
              this.subtext = '暂无数据'
              this.$notify.error({
                title: '注意',
                message: '这段时间内没有猪只出栏',
                duration: 0
              })
            }
            var option = {
              // backgroundColor: '#2c343c',
              'title': {
                'text': '出栏统计折线图',
                'x': 'center',
                'subtext': this.subtext
              },
              'tooltip': {
                'trigger': 'axis'
              },
              'legend': {
                'data': [ '出栏猪只数量'],
                'x': '100',
                'y': '30px'
              },
              'grid': {
                'left': '3%',
                'right': '4%',
                'bottom': '3%',
                'containLabel': true
              },
              'toolbox': {
                'feature': {
                  'saveAsImage': { }
                }
              },
              'xAxis': {
                'type': 'category',
                'boundaryGap': false,
                'data': this.date
              },
              'yAxis': {
                'type': 'value'
              },
              'series': [
                {
                  'name': '出栏猪只数量',
                  'type': 'line',
                  'stack': '总量',
                  'data': this.total,
                  symbolSize: 8,
                  smooth: true
                }
              ]
            }
            this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
            this.chartLine.setOption(option)
            window.addEventListener('resize', () => {
              this.chartLine.resize()
            })
          }
        })
        
      },
      // 获取起始与结束时间
      timeChange (val) {
        // console.log(val);
        // let start = new Date(val[0])
        // let end = new Date(val[1])
        // let now = new Date()
        // console.log(start);
        // if (start > now || end > now) {
        //   this.form.time = []
        //   this.$message.error('请勿选择超出现在的时刻')
        //   return
        // }
        this.initChartLine()
      },
      clickChange () {
        this.ifMonth = !this.ifMonth
        this.initChartLine()
      }
    }
  }
</script>

<style lang="scss">
  .in-and-out {
    // > .el-alert {
    //   margin-bottom: 10px;
    // }
    // > .el-row {
    //   margin-top: -10px;
    //   margin-bottom: -10px;
    //   .el-col {
    //     padding-top: 10px;
    //     padding-bottom: 10px;
    //   }
    // }
    .chart-box {
      min-height: 600px;
    }
  }
</style>
