<template>
  <div class="container" style="position: relative">
    <function-area2 select="week" @change="changeTime"/>
    <ve-line :data="chartData" :title="titleObj" :extend="extend" :settings="chartSettings"/>
  </div>
</template>

<script>
import { gasTrend } from '@/api/gasOverview'
import FunctionArea2 from './FunctionArea2'
export default {
  name: 'GasCountByDay',
  components: { FunctionArea2 },
  props: {
    deviceType: {
      type: String,
      required: true
    },
    title: {
      type: String,
      default: '用气走势图'
    }
  },
  data() {
    return {
      listQuery: {
        deviceType: '', // 设备类型:15,16,17
        intervalDay: 7
      },
      titleObj: {
        text: '用气走势图'
      },
      chartSettings: {
        labelMap: { date: '日期' },
        metrics: [],
        dimension: ['date']
      },
      extend: {
        grid: {
          top: 120,
          left: 20
        },
        yAxis: {
          name: '用气量（m³）',
          position: 'left'
        },
        legend: {
          // type: 'scroll',
          top: '40px'
        }
      },
      chartData: {
        columns: [],
        rows: []
      }
    }
  },
  watch: {
    deviceType(val) {
      this.listQuery.deviceType = val
    }
  },
  mounted() {
    this.titleObj = {
      text: this.title
    }
    this.fetchData()
  },
  methods: {
    // 获取数据
    fetchData() {
      this.listQuery.deviceType = this.deviceType
      gasTrend(this.listQuery).then(response => {
        const typeNames = []
        const chartDataRows = []
        if (response.data.length > 0) {
          response.data.map((item, index) => {
            typeNames.push(item[0].typeName)
            for (let i = 0; i < item.length; i++) {
              let result = {}
              if (index === 0) {
                result = { date: item[i].date }
                chartDataRows.push(result)
              } else {
                result = chartDataRows[i]
              }
              result[item[i].typeName] = item[i].count
            }
          })
          // const area = response.data[0].data.map(item => item.typeTime)
          this.chartData.columns = ['date', ...typeNames]
          this.chartSettings.metrics = typeNames
          this.chartSettings.labelMap = { 'date': '日期' }
          this.chartData.rows = chartDataRows
        }
      })
      // 模拟数据
      // this.chartData.rows = [
      //   { date: '11月29日', dept1: 153, dept2: 43, dept3: 1, dept4: 1, dept5: 1, dept6: 7, dept7: 6, dept8: 2, dept9: 1, dept10: 3 },
      //   { date: '11月30日', dept1: 150, dept2: 30, dept3: 2, dept4: 1, dept5: 4, dept6: 6, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
      //   { date: '12月1日 ', dept1: 143, dept2: 23, dept3: 3, dept4: 2, dept5: 2, dept6: 7, dept7: 3, dept8: 2, dept9: 1, dept10: 3 },
      //   { date: '12月2日 ', dept1: 173, dept2: 23, dept3: 4, dept4: 4, dept5: 1, dept6: 1, dept7: 8, dept8: 2, dept9: 1, dept10: 3 },
      //   { date: '12月3日 ', dept1: 272, dept2: 52, dept3: 5, dept4: 1, dept5: 4, dept6: 7, dept7: 9, dept8: 2, dept9: 1, dept10: 3 },
      //   { date: '12月4日 ', dept1: 253, dept2: 53, dept3: 6, dept4: 5, dept5: 5, dept6: 2, dept7: 9, dept8: 2, dept9: 1, dept10: 3 }
      // ]
    },
    changeTime(days) {
      this.listQuery.intervalDay = days
      this.fetchData()
    }
  }
}
</script>