<template>
  <div class="bodyBoxs">

    <div class="boxs">
      <div style="width: 100%" class="home-index-box" v-loading="loading">
        <!--折线趋势图-->
        <div class="graph-doubleLine-warp">
          <el-row :gutter="20">
            <el-col :span="16">
              <div class="selection-box">
                <el-button-group style="margin-right: 10px;">
                  <el-button @click="changeDay">今日</el-button>
                  <el-button @click="changeWeek">最近7天</el-button>
                  <el-button @click="changeMonth">最近30天</el-button>
                </el-button-group>
                <el-date-picker v-model="selectGatheringTime" type="daterange" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="getData">
                </el-date-picker>

              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <div id="home_DoubleLine" style="width: 100%;height: 550px;"></div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRouteData } from '@/api/index'

import ECharts from 'echarts'
//、折线图
let lineDefaultOpt = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    bottom: 0,
    left: 'center'
  },
  grid: {
    left: 30,
    bottom: 50,
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLine: {
      lineStyle: {
        color: ['#666666'],
        width: 1,
        type: 'solid'
      }
    }
  },
  yAxis: {
    type: 'value',
    boundaryGap: ['0%', '20%'],
    axisLine: {
      lineStyle: {
        color: ['#666666'],
        width: 1,
        type: 'solid'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#C4C4C4',
        width: 1,
        type: 'dashed'
      }
    }
  },
  series: []
}

export default {
  data() {
    return {
      //折线图
      doubleLineOption: lineDefaultOpt,
      selectGatheringTime: [],
      loading: false,
      tableData: [],
      isDis: false,
      isDay: 0,
      isMonth: 0
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    changeDay() {
      this.isDay = 1;
      this.selectGatheringTime = []
      this.getData()
    },
    changeWeek() {
      this.isDay = 0;
      this.selectGatheringTime = []
      this.getData()
    },
    changeMonth() {
      this.isDay = 0;
      this.isMonth = 1;
      this.selectGatheringTime = []
      this.getData()
      this.isMonth = 0;
    },
    getData() {
      this.$api.statsIndexData({
        selectGatheringTime: this.selectGatheringTime,
        isDay: this.isDay,
        isMonth: this.isMonth,
      }).then((res) => {
        this.isDay = 0;
        this.isDis = true;
        if (res.code == 0) {
          this.tableData = res.data;
          this.getDoubleLineData()//收款折线数据
        } else {
          this.$message({
            message: res.message,
            type: 'success'
          });
        }
      }).catch((res) => {
        this.loading = false;
      });
    },
    /**
     * eChart初始化 params:
     * domId :传入DomId
     * theme: eChart 的 主题
     * opt: 初始值
     */
    eChartsInit(domId, theme, opt) {
      ECharts.init(document.getElementById(domId), theme).setOption(opt)
      window.addEventListener('resize', () => {
        ECharts.init(document.getElementById(domId), theme).resize()
      })
    },
    //获取折线数据
    getDoubleLineData() {
      var task = this.tableData.task
      var build = this.tableData.build
      var arr2 = this.tableData.zuiJ7TianTime//['2021-01-05','2021-01-02','2021-01-03','2021-01-04','2021-01-05']
      var list = [{
        name: 'task',
        type: 'line',
        symbol: 'circle',
        symbolSize: [5, 5],
        data: task
      },
      {
        name: 'build',
        type: 'line',
        symbol: 'circle',
        symbolSize: [5, 5],
        data: build
      }
      ]
      this.doubleLineOption.series = list
      this.doubleLineOption.xAxis.data = arr2
      this.eChartsInit('home_DoubleLine', 'light', this.doubleLineOption)
    },
  }
}
</script>

<style scoped>
.bodyBoxs {
  width: 100%;
  height: 769px;
  padding: 40px;
  box-sizing: border-box;
}

.boxs {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 20px;
  padding: 60px;
  color: #727272;
}

.boxs p {
  margin-bottom: 40px;
}
</style>
