<template>
  <div class="app-container">
    <div v-if="isPercentage" class="percentage" style="width: 210px;height: 90px;background: #fff;position: fixed;bottom: 0;left: 0;z-index: 9999999999999;">
      <h4 style="padding-left: 10px;line-height: 0;">导出进度：</h4>
      <el-progress style="padding-left: 10px;" :text-inside="true" :stroke-width="26" :percentage="percentage" />
    </div>
    <div class="filter-container">
      <div class="block">
        <el-date-picker v-model="yearDate" :clearable="false" type="year" placeholder="选择年" />
      </div>
    </div>

    <!-- 单头牛总费用 -->
    <el-row style="position: relative;">
      <p style="position: absolute;top:-12px;left:40%;color:#000">
        单头牛总费用
      </p>
      <el-col :span="24">
        <div id="barChart1" style="width: 100%;height:400px;" />
      </el-col>
    </el-row>

    <!-- 单头牛水费用 -->
    <el-row style="position: relative;">
      <p style="position: absolute;top:-12px;left:40%;color:#000">
        单头牛水费用
      </p>
      <el-col :span="24">
        <div id="barChart2" style="width: 100%;height:400px;" />
      </el-col>
    </el-row>

    <!-- 单头牛电费用 -->
    <el-row style="position: relative;">
      <p style="position: absolute;top:-12px;left:40%;color:#000">
        单头牛电费用
      </p>
      <el-col :span="24">
        <div id="barChart3" style="width: 100%;height:400px;" />
      </el-col>
    </el-row>

    <!-- 单头牛燃动费用 -->
    <el-row style="position: relative;">
      <p style="position: absolute;top:-12px;left:40%;color:#000">
        单头牛燃动费用
      </p>
      <el-col :span="24">
        <div id="barChart4" style="width: 100%;height:400px;" />
      </el-col>
    </el-row>

    <!-- 单头牛维修费用 -->
    <el-row style="position: relative;">
      <p style="position: absolute;top:-12px;left:40%;color:#000">
        单头牛维修费用
      </p>
      <el-col :span="24">
        <div id="barChart5" style="width: 100%;height:400px;" />
      </el-col>
    </el-row>
    <el-dialog
      :title="dialogStatus"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="80%"
    >
      <div class="lineChart">
        <el-button class="filter-item" type="success" icon="el-icon-edit" @click="handleDownload">导出</el-button>
        <div id="lineChart1" style="width: 100%;height:400px;" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons')
import { parseTime } from '@/utils/index.js'
import { json2excel } from '@/utils/index.js'
import waves from '@/directive/waves' // waves directive
import { GetDataByName, GetReportform } from '@/api/common'

import Cookies from 'js-cookie'
export default {
  name: 'Cattle',
  directives: { waves },
  data() {
    return {
      yearDate: new Date(),
      total: '',

      pasture: Cookies.get('pasturename'),
      year: new Date().getFullYear(),
      month: new Date().getMonth() <= 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1,
      deptment: '维修处',

      getBarChart1Parm: {
        name: 'geteCowAllList',
        parammaps: {
          year: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename')
        }
      },
      getLineChart1Parm: {
        name: 'geteCowAllMonthList',
        parammaps: {
          year: '',
          pastureName: Cookies.get('pasturename')
        }
      },
      getBarChart2Parm: {
        name: 'geteCowWaterList',
        parammaps: {
          year: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename')
        }
      },
      getLineChart2Parm: {
        name: 'geteCowWaterMonthList',
        parammaps: {
          year: '',
          pastureName: Cookies.get('pasturename')
        }
      },
      getBarChart3Parm: {
        name: 'geteCowElecList',
        parammaps: {
          year: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename')
        }
      },
      getLineChart3Parm: {
        name: 'geteCowElecMonthList',
        parammaps: {
          year: '',
          pastureName: Cookies.get('pasturename')
        }
      },
      getBarChart4Parm: {
        name: 'geteCowDieselList',
        parammaps: {
          year: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename')
        }
      },
      getLineChart4Parm: {
        name: 'geteCowDieselMonthList',
        parammaps: {
          year: '',
          pastureName: Cookies.get('pasturename')
        }
      },
      getBarChart5Parm: {
        name: 'geteCowMaintainList',
        parammaps: {
          year: new Date().getFullYear(),
          pastureName: Cookies.get('pasturename')
        }
      },
      getLineChart5Parm: {
        name: 'geteCowMaintainMonthList',
        parammaps: {
          year: '',
          pastureName: Cookies.get('pasturename')
        }
      },
      barChart1: null,
      lineChart1: null,
      barChart2: null,
      barChart3: null,
      barChart4: null,
      barChart5: null,

      chart_data1: {
        // pasture: ['宝鸡', '恒盛', '塞一', '塞二', '塞三', '塞四', '塞五', '通山', '合肥', '和林'],
        // nowYear: [123, 332, 222, 333, 444, 333, 222, 334, 234, 223],
        // lastYear: [22, 44, 77, 88, 444, 234, 342, 234, 234, 66]
      },
      chart_data2: {},
      chart_data3: {},
      chart_data4: {},
      chart_data5: {},
      line_chart_data1: {},

      dialogStatus: '',
      dialogFormVisible: false,
      requestParam: {},
      isPercentage: false,
      percentage: 1
    }
  },

  watch: {
    'yearDate': {
      deep: true,
      handler: function(newVal, oldVal) {
        var time = this.yearDate
        console.log(newVal.getFullYear())
        this.year = time.getFullYear()
        this.getBarChart1Parm.parammaps.receiveTime = time.getFullYear()
        this.getBarChart1Parm.parammaps.year = time.getFullYear()

        this.getBarChart2Parm.parammaps.receiveTime = time.getFullYear()
        this.getBarChart2Parm.parammaps.year = time.getFullYear()

        this.getBarChart3Parm.parammaps.receiveTime = time.getFullYear()
        this.getBarChart3Parm.parammaps.year = time.getFullYear()

        this.getBarChart4Parm.parammaps.receiveTime = time.getFullYear()
        this.getBarChart4Parm.parammaps.year = time.getFullYear()

        this.getBarChart5Parm.parammaps.receiveTime = time.getFullYear()
        this.getBarChart5Parm.parammaps.year = time.getFullYear()

        this.getBarChart1()
        this.getBarChart2()
        this.getBarChart3()
        this.getBarChart4()
        this.getBarChart5()
      }
    }
  },

  created() {
    this.getBarChart1()
    this.getBarChart2()
    this.getBarChart3()
    this.getBarChart4()
    this.getBarChart5()
  },
  mounted() {
    // this.roadBarChart1(this.chart_data1)
    // this.roadlineChart1(this.chart_data2, this.pasture, this.year)
    // this.roadlineChart2(this.chart_data3, this.pasture, this.month)
    //  this.roadpieChart1(this.chart_data4, this.month)
    // this.roadBarChart2(this.chart_data5, this.deptment)
  },
  methods: {
    // 单头牛总费用
    getBarChart1() {
      GetReportform(this.getBarChart1Parm).then(response => {
        console.log('图1', response)
        this.chart_data1 = response.data.chart_data
        this.roadBarChart1(this.chart_data1)
        var nowYear = response.data.chart_data.nowYear
        var total = 0
        if (nowYear !== null || nowYear !== undefined) {
          nowYear.forEach(function(item, index) {
            // console.log(parseFloat(item))
            total = total + parseFloat(item)
          })
        }
        this.total = total
      })
    },
    // 单头牛水费用
    getBarChart2() {
      GetReportform(this.getBarChart2Parm).then(response => {
        console.log('图2', response)
        this.chart_data2 = response.data.chart_data
        this.roadBarChart2(this.chart_data2)
        var nowYear = response.data.chart_data.nowYear
        var total = 0
        if (nowYear !== null || nowYear !== undefined) {
          nowYear.forEach(function(item, index) {
            // console.log(parseFloat(item))
            total = total + parseFloat(item)
          })
        }
        this.total = total
      })
    },
    // 单头牛电费用
    getBarChart3() {
      GetReportform(this.getBarChart3Parm).then(response => {
        console.log('图3', response)
        this.chart_data3 = response.data.chart_data
        this.roadBarChart3(this.chart_data3)
        var nowYear = response.data.chart_data.nowYear
        var total = 0
        if (nowYear !== null || nowYear !== undefined) {
          nowYear.forEach(function(item, index) {
            // console.log(parseFloat(item))
            total = total + parseFloat(item)
          })
        }
        this.total = total
      })
    },
    // 单头牛燃动费用
    getBarChart4() {
      GetReportform(this.getBarChart4Parm).then(response => {
        console.log('图4', response)
        this.chart_data4 = response.data.chart_data
        this.roadBarChart4(this.chart_data4)
        var nowYear = response.data.chart_data.nowYear
        var total = 0
        if (nowYear !== null || nowYear !== undefined) {
          nowYear.forEach(function(item, index) {
            // console.log(parseFloat(item))
            total = total + parseFloat(item)
          })
        }
        this.total = total
      })
    },
    // 单头牛维修费用
    getBarChart5() {
      GetReportform(this.getBarChart5Parm).then(response => {
        console.log('图5', response)
        this.chart_data5 = response.data.chart_data
        this.roadBarChart5(this.chart_data5)
        var nowYear = response.data.chart_data.nowYear
        var total = 0
        if (nowYear !== null || nowYear !== undefined) {
          nowYear.forEach(function(item, index) {
            // console.log(parseFloat(item))
            total = total + parseFloat(item)
          })
        }
        this.total = total
      })
    },

    // 单头牛总费用-折线
    getLineChart1() {
      this.getLineChart1Parm.parammaps.year = this.getBarChart1Parm.parammaps.year
      GetReportform(this.getLineChart1Parm).then(response => {
        console.log('单头牛总费用折线图', response)
        this.line_chart_data1 = response.data.chart_data
        this.roadlineChart1(this.line_chart_data1, this.pasture, this.year)
      })
    },
    // 单头牛水费用-折线
    getLineChart2() {
      this.getLineChart2Parm.parammaps.year = this.getBarChart2Parm.parammaps.year
      GetReportform(this.getLineChart2Parm).then(response => {
        console.log('点击折线图', response)
        this.line_chart_data1 = response.data.chart_data
        this.roadlineChart1(this.line_chart_data1, this.pasture, this.year)
      })
    },
    // 单头牛电费用-折线
    getLineChart3() {
      this.getLineChart3Parm.parammaps.year = this.getBarChart3Parm.parammaps.year
      GetReportform(this.getLineChart3Parm).then(response => {
        console.log('点击折线图', response)
        this.line_chart_data1 = response.data.chart_data
        this.roadlineChart1(this.line_chart_data1, this.pasture, this.year)
      })
    },
    // 单头牛燃动费用-折线
    getLineChart4() {
      this.getLineChart4Parm.parammaps.year = this.getBarChart4Parm.parammaps.year
      GetReportform(this.getLineChart4Parm).then(response => {
        console.log('点击折线图', response)
        this.line_chart_data1 = response.data.chart_data
        this.roadlineChart1(this.line_chart_data1, this.pasture, this.year)
      })
    },
    // 单头牛维修费用-折线
    getLineChart5() {
      this.getLineChart5Parm.parammaps.year = this.getBarChart5Parm.parammaps.year
      GetReportform(this.getLineChart5Parm).then(response => {
        console.log('点击折线图', response)
        this.line_chart_data1 = response.data.chart_data
        this.roadlineChart1(this.line_chart_data1, this.pasture, this.year)
      })
    },

    // 单头牛总费用
    roadBarChart1(chart_data1) {
      if (this.barChart1 != null) {
        this.barChart1.dispose()
      }
      this.barChart1 = echarts.init(document.getElementById('barChart1'))
      var option = {
        title: { text: '', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['实际费用', '预算', '去年同期'],
          right: 40
        },
        color: ['#2dc0e8', '#769cfc', '#FFB800'],
        grid: { left: '3%', right: '4%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category', name: '牧场', data: chart_data1.pasture, axisLabel: { interval: 0 }}],
        yAxis: [{ type: 'value', name: '价格/元', axisLabel: { formatter: '{value}' }}],
        series: [
          {
            name: '实际费用',
            type: 'bar',
            data: chart_data1.nowYear,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '预算',
            type: 'bar',
            data: chart_data1.budgetYear,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '去年同期',
            type: 'bar',
            data: chart_data1.lastYear,
            emphasis: { label: { show: true, position: 'inside' }}
          }
        ]
      }
      this.barChart1.setOption(option)
      window.onresize = function() {
        this.barChart1.resize()
      }
      var that = this
      this.barChart1.on('click', function(param, i) {
        console.log(param)
        that.pasture = param.name
        that.dialogStatus = that.pasture + that.getBarChart1Parm.parammaps.year + '年单头牛总费用'
        // 单头牛总费用-月
        that.requestParam.parammaps = {}

        that.requestParam.parammaps.year = that.getBarChart1Parm.parammaps.year
        that.requestParam.parammaps.formType = that.pasture + that.getBarChart1Parm.parammaps.year + '年单头牛总费用'
        that.dialogFormVisible = true
        that.getLineChart1Parm.parammaps.pastureName = param.name
        that.getLineChart1()
      })
    },
    // 单头牛水费用
    roadBarChart2(chart_data2) {
      if (this.barChart2 != null) {
        this.barChart2.dispose()
      }
      this.barChart2 = echarts.init(document.getElementById('barChart2'))
      var option = {
        title: { text: '', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['实际费用', '预算', '去年同期'],
          right: 40
        },
        color: ['#2dc0e8', '#769cfc', '#FFB800'],
        grid: { left: '3%', right: '4%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category', name: '牧场', data: chart_data2.pasture, axisLabel: { interval: 0 }}],
        yAxis: [{ type: 'value', name: '价格/元', axisLabel: { formatter: '{value}' }}],
        series: [
          {
            name: '实际费用',
            type: 'bar',
            data: chart_data2.nowYear,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '预算',
            type: 'bar',
            data: chart_data2.budgetYear,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '去年同期',
            type: 'bar',
            data: chart_data2.lastYear,
            emphasis: { label: { show: true, position: 'inside' }}
          }

        ]
      }
      this.barChart2.setOption(option)
      window.onresize = function() {
        this.barChart2.resize()
      }
      var that = this
      this.barChart2.on('click', function(param, i) {
        console.log(param)
        that.pasture = param.name
        that.dialogStatus = that.pasture + that.getBarChart2Parm.parammaps.year + '年单头牛水费用'
        that.dialogFormVisible = true
        that.getLineChart2Parm.parammaps.pastureName = param.name
        that.getLineChart2()
      })
    },
    // 单头牛电费用
    roadBarChart3(chart_data3) {
      if (this.barChart3 != null) {
        this.barChart3.dispose()
      }
      this.barChart3 = echarts.init(document.getElementById('barChart3'))
      var option = {
        title: { text: '', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['实际费用', '预算', '去年同期'],
          right: 40
        },
        color: ['#2dc0e8', '#769cfc', '#FFB800'],
        grid: { left: '3%', right: '4%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category', name: '牧场', data: chart_data3.pasture, axisLabel: { interval: 0 }}],
        yAxis: [{ type: 'value', name: '价格/元', axisLabel: { formatter: '{value}' }}],
        series: [
          {
            name: '实际费用',
            type: 'bar',
            data: chart_data3.nowYear,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '预算',
            type: 'bar',
            data: chart_data3.budgetYear,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '去年同期',
            type: 'bar',
            data: chart_data3.lastYear,
            emphasis: { label: { show: true, position: 'inside' }}
          }

        ]
      }
      this.barChart3.setOption(option)
      window.onresize = function() {
        this.barChart3.resize()
      }
      var that = this
      this.barChart3.on('click', function(param, i) {
        console.log(param)
        that.pasture = param.name
        that.dialogStatus = that.pasture + that.getBarChart3Parm.parammaps.year + '年单头牛电费用'
        that.dialogFormVisible = true
        that.getLineChart3Parm.parammaps.pastureName = param.name
        that.getLineChart3()
      })
    },
    // 单头牛燃动费用
    roadBarChart4(chart_data4) {
      if (this.barChart4 != null) {
        this.barChart4.dispose()
      }
      this.barChart4 = echarts.init(document.getElementById('barChart4'))
      var option = {
        title: { text: '', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['实际费用', '预算', '去年同期'],
          right: 40
        },
        color: ['#2dc0e8', '#769cfc', '#FFB800'],
        grid: { left: '3%', right: '4%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category', name: '牧场', data: chart_data4.pasture, axisLabel: { interval: 0 }}],
        yAxis: [{ type: 'value', name: '价格/元', axisLabel: { formatter: '{value}' }}],
        series: [
          {
            name: '实际费用',
            type: 'bar',
            data: chart_data4.nowYear,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '预算',
            type: 'bar',
            data: chart_data4.budgetYear,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '去年同期',
            type: 'bar',
            data: chart_data4.lastYear,
            emphasis: { label: { show: true, position: 'inside' }}
          }

        ]
      }
      this.barChart4.setOption(option)
      window.onresize = function() {
        this.barChart4.resize()
      }
      var that = this
      this.barChart4.on('click', function(param, i) {
        console.log(param)
        that.pasture = param.name
        that.dialogStatus = that.pasture + that.getBarChart4Parm.parammaps.year + '年单头牛燃动费用'
        that.dialogFormVisible = true
        that.getLineChart4Parm.parammaps.pastureName = param.name
        that.getLineChart4()
      })
    },
    // 单头牛维修费用
    roadBarChart5(chart_data5) {
      if (this.barChart5 != null) {
        this.barChart5.dispose()
      }
      this.barChart5 = echarts.init(document.getElementById('barChart5'))
      var option = {
        title: { text: '', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['实际费用', '预算', '去年同期'],
          right: 40
        },
        color: ['#2dc0e8', '#769cfc', '#FFB800'],
        grid: { left: '3%', right: '4%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category', name: '牧场', data: chart_data5.pasture, axisLabel: { interval: 0 }}],
        yAxis: [{ type: 'value', name: '价格/元', axisLabel: { formatter: '{value}' }}],
        series: [
          {
            name: '实际费用',
            type: 'bar',
            data: chart_data5.nowYear,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '预算',
            type: 'bar',
            data: chart_data5.budgetYear,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '去年同期',
            type: 'bar',
            data: chart_data5.lastYear,
            emphasis: { label: { show: true, position: 'inside' }}
          }

        ]
      }
      this.barChart5.setOption(option)
      window.onresize = function() {
        this.barChart5.resize()
      }
      var that = this
      this.barChart5.on('click', function(param, i) {
        console.log(param)
        that.pasture = param.name
        that.dialogStatus = that.pasture + that.getBarChart5Parm.parammaps.year + '年单头牛维修费用'
        that.dialogFormVisible = true
        that.getLineChart5Parm.parammaps.pastureName = param.name
        that.getLineChart5()
      })
    },

    roadlineChart1(line_chart_data1, pasture, year) {
      if (this.lineChart1 != null) {
        this.lineChart1.dispose()
      }
      this.lineChart1 = echarts.init(document.getElementById('lineChart1'))
      var option = {
        title: { text: '', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        toolbox: {
          show: true,
          right: '2%',
          feature: {
            magicType: { type: ['line'] },
            dataView: {
              readOnly: true
            }
          }
        },
        legend: {
          data: ['实际费用', '预算', '去年同期']
        },
        color: ['#42b983', '#769cfc', '#FFB800'],
        grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category', data: line_chart_data1.months, name: '月份', axisLabel: { interval: 0 }}],
        yAxis: [{ type: 'value', name: '价格/元', axisLabel: { formatter: '{value}' }}],
        series: [
          {
            name: '实际费用',
            type: 'line',
            data: line_chart_data1.nowYear,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '预算',
            type: 'line',
            data: line_chart_data1.budgetYear,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '去年同期',
            type: 'line',
            data: line_chart_data1.lastYear,
            emphasis: { label: { show: true, position: 'inside' }}
          }

        ],

        optionToContent: function(opt) {
          var axisData = opt.xAxis[0].data
          var series = opt.series
          // console.log(opt)
          // console.log(axisData)
          // console.log(series)
          let tdHeads = '<td  style="line-height:30px;width:25%;font-weight:700;color:#909399;">月份</td>' // 表头
          let tdBodys = ''
          series.forEach(function(item) {
            tdHeads += `<td style="line-height:30px;width:25%;font-weight:700;color:#909399;">${item.name}</td>`
          })
          let table = `<table id="table" border="1" style="user-select: text;width:100%;color:#606266;border:1px solid #EBEEF5;margin: 0 auto;border-collapse:collapse;line-height:20px;font-size:14px;text-align:center"><tbody><tr>${tdHeads} </tr>`
          for (let i = 0; i < axisData.length; i++) {
            for (let j = 0; j < series.length; j++) {
              tdBodys += `<td style="width:25%;line-height:20px;">${series[j].data[i]}</td>`
            }
            table += `<tr><td style="padding:0 10px;line-height:20px;">${axisData[i]}</td>${tdBodys}</tr>`
            tdBodys = ''
          }
          table += '</tbody></table>'
          return table
        }
      }
      this.lineChart1.setOption(option)
      window.onresize = function() {
        this.lineChart1.resize()
      }
    },

    roadlineChart2(line_chart_data1, pasture, year) {
      if (this.lineChart1 != null) {
        this.lineChart1.dispose()
      }
      this.lineChart1 = echarts.init(document.getElementById('lineChart1'))
      var option = {
        title: { text: '', textStyle: { color: '#769cfc' }},
        tooltip: { trigger: 'axis' },
        toolbox: {
          show: true,
          right: '2%',
          feature: {
            magicType: { type: ['line'] },
            dataView: {
              readOnly: true
            }
          }
        },
        legend: {
          data: ['实际费用', '预算', '去年同期']
        },
        color: ['#42b983', '#769cfc', '#FFB800'],
        grid: { left: '3%', right: '5%', bottom: '4%', containLabel: true },
        xAxis: [{ type: 'category', data: line_chart_data1.months, name: '月份', axisLabel: { interval: 0 }}],
        yAxis: [{ type: 'value', name: '价格/元', axisLabel: { formatter: '{value}' }}],
        series: [
          {
            name: '实际费用',
            type: 'line',
            data: line_chart_data1.nowYear,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '预算',
            type: 'line',
            data: line_chart_data1.budgetYear,
            emphasis: { label: { show: true, position: 'inside' }}
          },
          {
            name: '去年同期',
            type: 'line',
            data: line_chart_data1.lastYear,
            emphasis: { label: { show: true, position: 'inside' }}
          }

        ],
        optionToContent: function(opt) {
          const axisData = opt.xAxis[0].data
          console.log(axisData, '-------------')
          const series = opt.series
          let tdHeads = '<td  style="line-height:30px;width:25%;font-weight:700;color:#909399;">月份</td>' // 表头
          let tdBodys = ''
          series.forEach(function(item) {
            tdHeads += `<td style="line-height:30px;width:25%;font-weight:700;color:#909399;">${item.name}</td>`
          })
          let table = `<table id="table" border="1" style="user-select: text;height:350px;width:100%;color:#606266;border:1px solid #EBEEF5;margin: 0 auto;border-collapse:collapse;line-height:20px;font-size:14px;text-align:center"><tbody><tr>${tdHeads} </tr>`
          // let table = `<table id="table" border="1" style="user-select: text;width:100%;color:#606266;border:1px solid #EBEEF5;margin: 0 auto;border-collapse:collapse;line-height:22px;font-size:14px;text-align:center"><tbody><tr>${tdHeads} </tr>`
          for (let i = 0; i < axisData.length; i++) {
            for (let j = 0; j < series.length; j++) {
              tdBodys += `<td style="width:25%;line-height:20px;">${series[j].data[i]}</td>`
            }
            table += `<tr><td style="padding:0 10px;line-height:20px;">${axisData[i]}</td>${tdBodys}</tr>`
            tdBodys = ''
          }
          table += '</tbody></table>'
          return table
        }
      }
      this.lineChart1.setOption(option)
      window.onresize = function() {
        this.lineChart1.resize()
      }
    },

    handleDownload() {
      this.$alert('正在导出中，请勿刷新或离开本页面，若导出时间过长，建议缩小导出数据范围重新导出', {})
      this.isPercentage = true
      this.percentage = 1
      var timer = setInterval(() => {
        this.percentage += 5
        if (this.percentage > 95) {
          this.percentage = 99
          clearInterval(timer)
        }
        this.percentage = this.percentage
      }, 1000)
      console.log(this.line_chart_data1)
      const downloadList = []
      for (let i = 0; i < 12; i++) {
        downloadList.push({ 'budgetYear': this.line_chart_data1.budgetYear[i], 'lastYear': this.line_chart_data1.lastYear[i], 'month': this.line_chart_data1.months[i], 'nowYear': this.line_chart_data1.nowYear[i] })
      }
      if (downloadList !== []) {
        this.percentage = 99
        setTimeout(() => {
          this.isPercentage = false
        }, 2000)
      }
      const elecExcelDatas = [
        {
          tHeader: ['月份', '实际费用', '预算', '去年同期'],
          filterVal: ['month', 'nowYear', 'budgetYear', 'lastYear'],
          tableDatas: downloadList,
          sheetName: this.dialogStatus + '数据'
        }
      ]
      json2excel(elecExcelDatas, this.dialogStatus + '数据', true, 'xlsx')
    }

  }
}
</script>
<style>
.el-row {
    margin-bottom: 40px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>

<style lang="scss" scoped>

.dashboard-editor-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

#lineChart1 :nth-child(3){
  top: 0px !important;
}
</style>
