<template>
  <div>
    <div style="margin: 0 15px">
      <div style="text-align: right">
        <el-button type="primary" class="mb-20" @click="DataReportExport()">
          导出
        </el-button>
      </div>

      <el-table
        :data="tableData6"
        border
        stripe
        style="max-width: 100%"
        :key="Math.random()"
        :header-cell-style="headClass"
      >
        <template v-for="(item, index) in cols" :key="index">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            align="center"
            min-width="120"
          >
            <template #default="scope">
              <span>
                {{ scope.row[item.prop] }}
              </span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
  </div>
</template>
<script>
import { defineComponent, watch, ref, onMounted } from 'vue'
import * as api from '@/api/dataManage/energyReport.js'
import { ElMessage } from 'element-plus'
// import { ElNotification } from 'element-plus'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'consumConfig',
  components: {},
  props: ['tableDatas', 'typeSrarch', 'deviceChecked', 'dateTime'],

  setup(props) {
     const store = useStore()
    const Update = (row) => {
      console.log('', row)
    }
    const cycle = ref(0)
    const deviceCode = ref('')
    const timeArr = ref([])

    //处理数据
    const getData = async () => {
      var aa = props.tableDatas.listDate
      var newArr = []
      aa.forEach((item, index) => {
        newArr.push({ label: item, prop: index.toString() })
      })

      newArr.push(
        { label: '合计', prop: 'total' },
        { label: '单位', prop: 'unit' }
      )
      newArr.unshift({ label: '名称', prop: 'name' })
      // console.log(newArr)
      cols.value = newArr

      var bb = props.tableDatas.list
      var obj = {}
      bb.forEach((item, index) => {
        obj[index] = item
      })
      obj.name = props.tableDatas.name
      obj.unit = 'kWh'
      obj.total = sum(props.tableDatas.list).toFixed(2)
      // console.log(obj)
      tableData6.value[0] = obj
    }
    const cols = ref([
      // { label: '名称', prop: 'name' },
      // { label: '合计', prop: 'total' },
      // { label: '单位', prop: 'unit' },
      // { label: '2020-22-20', prop: 1 },
    ])
    const tableData6 = ref([
      // {
      //   0: 559.2,
      //   1: 616.8,
      //   2: 583.99,
      //   3: 546.39,
      //   4: 498.8,
      //   5: 574.41,
      //   6: 780.4,
      //   7: 794.39,
      //   8: 767.59,
      // },
    ])

    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA !important;color: black'
    }

    // 求和
    function sum(arr) {
      var s = 0
      for (var i = arr.length - 1; i >= 0; i--) {
        s += arr[i]
      }
      return s
    }

    //导出
    const DataReportExport = () => {
      store.commit('TimeAll_function', timeArr.value)
        const time = store.state.Time_Data

      api.monthlyReportExport({
          cycle: cycle.value,
            startTime: time[0],
            endTime: time[1],
            deviceCode: deviceCode.value,
      }).then((requset) => {
        if (requset.status === 'SUCCESS') {
          window.location.href = window.PLATFROM_CONFIG.fileUrl + requset.data
          ElMessage.success({
            message: '导出成功',
            type: 'success',
          })
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

    const writeValue = (val) => {
      val
      getData()

      cycle.value = props.typeSrarch
      deviceCode.value = props.deviceChecked
      timeArr.value = props.dateTime
    }

    //监听变化
    watch(
      () => props.tableDatas,
      (newVal, oldVal, clear) => {
        // 执行异步任务，并得到关闭异步任务的 id
        // alert(1)
        // console.log(newVal)
        let id = writeValue(newVal, oldVal)
        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
        clear(() => clearTimeout(id))
      },
      { lazy: true }
    )
    onMounted(() => {
      getData()
    })

    return {
      headClass,
      Update, //修改偏差配置事件
      cols,
      // cellStyle,
      tableData6,
      DataReportExport,
      cycle,
      deviceCode,
      timeArr,
      store,
      // newArr
    }
  },
})
</script>