<!-- 数据统计 -->
<script lang="ts" setup name="EnergyConsumptionCount">
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { getEnergyConsumptionRank, getEnergyConsumptionRatio } from '@/api/api/energy/count'
import PieChart from '@/components/Echart/PieChart.vue'
// 查询参数
const searchQuery = ref({
  deptName: '',
  createTimeEnd: '',
  createTimeStart: '',
})
const TimeRanges = ref()
watch(() => TimeRanges.value, (newVal: string[]) => {
  if (newVal && newVal.length) {
    searchQuery.value.createTimeStart = newVal[0]
    searchQuery.value.createTimeEnd = newVal[1]
  }
  else {
    searchQuery.value.createTimeStart = ''
    searchQuery.value.createTimeEnd = ''
  }
}, { deep: true })
const columns = ref([
  { text: '单位名称', value: 'deptName', align: 'center' },
  { text: '总体碳排(KG)', value: 'totalCarbonEmissions', align: 'center' },
])
const rankList = ref<any[]>([])
const rankLoading = ref(true)

const ratioList = ref<any[]>([])
const ratioLoading = ref(true)
const search = () => {
  if (!searchQuery.value.createTimeStart || !searchQuery.value.createTimeEnd) {
    ElMessage.warning('请选择完整时间段')
    return
  }
  // 碳排排行榜TOP10
  rankLoading.value = true
  getEnergyConsumptionRank(searchQuery.value).then((res) => {
    console.log(res.data, '碳排排行榜TOP10')
    rankList.value = res.data
    rankLoading.value = false
  }).catch(() => {
    rankLoading.value = false
  })
  // 碳排总占比
  ratioLoading.value = true
  getEnergyConsumptionRatio(searchQuery.value).then((res) => {
    console.log(res.data, '碳排总占比')
    ratioList.value = res.data.map((item: any) => ({
      name: item.name,
      value: item.value,
    }))
    ratioLoading.value = false
  }).catch(() => {
    ratioLoading.value = false
  })
}
onMounted(() => {
  TimeRanges.value = [dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
  setTimeout(() => {
    search()
  })
  setTimeout(() => {
    search()
  }, 500)
})
</script>

<template>
  <search-area @search="search">
    <search-item>
      <el-input v-model="searchQuery.deptName" placeholder="单位名称" type="text" />
    </search-item>
    <search-item>
      <el-date-picker
        v-model="TimeRanges" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="创建开始时间" end-placeholder="创建结束时间"
        clearable
      />
    </search-item>
  </search-area>
  <div class="container">
    <!-- 碳排排行榜TOP10 -->
    <div class="left">
      <div class="title">
        碳排排行榜TOP10
      </div>
      <div class="table">
        <normal-table
          :data="rankList" :total="0" :columns="columns" :query="{}" :list-loading="rankLoading"
          :pagination="false" :is-multi="false" :height="530"
        >
          <template #preColumns>
            <el-table-column label="#" width="55" align="center">
              <template #default="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
          </template>
        </normal-table>
      </div>
      <div />
    </div>
    <!-- 碳排总占比 -->
    <div class="right">
      <div class="title">
        碳排总占比
      </div>
      <div v-loading="ratioLoading" class="chart">
        <pie-chart v-if="ratioList.length" :data="ratioList" style="width: 100%;" height="530px" />
        <el-empty v-else :size="200" description="暂无数据" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  background-color: #fff;
  padding: 10px;
  margin-top: 10px;
  border-radius: 7px;
  display: flex;
  justify-content: space-around;

  .left {
    width: 48%;
    // background-color: aquamarine;
    // height: 400px;

    .title {
      font-weight: 700;
      padding-bottom: 10px;
    }
  }

  .right {
    width: 48%;
    // background-color: rgb(93 102 99);
    // height: 400px;

    .title {
      font-weight: 700;
      padding-bottom: 10px;
    }

    .chart {
      width: 100%;
      height: 530px;
      // background-color: aqua;
    }
  }
}
</style>