<template>
  <div class="assessment-module">
    <h2>企业能效碳效评估</h2>
    <h3>数据质量评价</h3>
    <el-tabs v-model="activeName">
      <el-tab-pane label="指标完整性" name="completeness">
        <el-button @click="exportData" style="margin-bottom: 10px;">导出数据</el-button>
        <el-table :data="completenessData" style="width: 100%" v-show="activeName === 'completeness'">
          <el-table-column prop="company" label="企业信息" />
          <el-table-column prop="name" label="指标名称" />
          <el-table-column prop="value" label="评分" />
          <el-table-column label="描述">
            <template #default="scope">
              {{ scope.row.description }}
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="actionDate" label="行动日期" />
        </el-table>
        <div ref="completenessChart" style="width: 800px; height: 400px; margin-top: 20px;" v-show="activeName === 'completeness'"></div>
      </el-tab-pane>
      <el-tab-pane label="上报及时性" name="timeliness">
        <el-button @click="exportData" style="margin-bottom: 10px;">导出数据</el-button>
        <el-table :data="timelinessData" style="width: 100%" v-show="activeName === 'timeliness'">
          <el-table-column prop="name" label="指标名称" />
          <el-table-column prop="value" label="评分" />
          <el-table-column label="描述">
            <template #default="scope">
              {{ scope.row.description }}
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="actionDate" label="上报日期" />
          <el-table-column prop="actionDate2" label="截止日期" />
        </el-table>
        <div ref="timelinessChart" style="width: 800px; height: 400px; margin-top: 20px;" v-show="activeName === 'timeliness'"></div>
      </el-tab-pane>
      <el-tab-pane label="数据准确性" name="accuracy">
        <el-button @click="exportData" style="margin-bottom: 10px;">导出数据</el-button>
        <el-table :data="accuracyData" style="width: 100%" v-show="activeName === 'accuracy'">
          <el-table-column prop="name" label="指标名称" />
          <el-table-column prop="value" label="评分" />
          <el-table-column label="描述">
            <template #default="scope">
              {{ scope.row.description }}
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="actionDate" label="预测数据值" />
          <el-table-column prop="actionDate2" label="实际数据值" />
        </el-table>
        <div ref="accuracyChart" style="width: 800px; height: 400px; margin-top: 20px;" v-show="activeName === 'accuracy'"></div>
      </el-tab-pane>
      <el-tab-pane label="质量评分体系" name="qualityScore">
        <el-button @click="exportData" style="margin-bottom: 10px;">导出数据</el-button>
        <el-table :data="qualityScoreData" style="width: 100%" v-show="activeName === 'qualityScore'">
          <el-table-column prop="name" label="企业名称" />
          <el-table-column prop="completenessScore" label="完整性得分" />
          <el-table-column prop="timelinessScore" label="及时性得分" />
          <el-table-column prop="accuracyScore" label="准确性得分" />
          <el-table-column prop="overallScore" label="综合评分" />
        </el-table>
        <div ref="qualityScoreChart" style="width: 800px; height: 400px; margin-top: 20px;" v-show="activeName === 'qualityScore'"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { ElMessage, ElLoading, ElTag } from 'element-plus'

const activeName = ref('completeness')

const completenessData = [
  { company: '奇趣科技有限公司', name: '能源消耗总量', value: 85, description: '总能源消耗量', status: '正常', actionDate: '2023-10-01' },
  { company: '神秘生物研究所', name: '可再生能源使用比例', value: 90, description: '可再生能源占比', status: '良好', actionDate: '2023-10-02' },
  { company: '幽灵电子厂', name: '碳排放总量', value: 80, description: '总碳排放量', status: '正常', actionDate: '2023-10-03' },
  { company: '隐形材料公司', name: '单位产值能耗', value: 88, description: '每单位产值的能耗', status: '良好', actionDate: '2023-10-04' },
  { company: '幻影能源集团', name: '单位产值碳排放', value: 82, description: '每单位产值的碳排放', status: '正常', actionDate: '2023-10-05' },
  { company: '超时空科技', name: '节能改造项目数', value: 87, description: '节能改造项目的数量', status: '良好', actionDate: '2023-10-06' },
  { company: '未来创新实验室', name: '绿色建筑比例', value: 92, description: '绿色建筑的比例', status: '优秀', actionDate: '2023-10-07' },
  { company: '暗物质研究室', name: '清洁能源投资', value: 89, description: '清洁能源的投资金额', status: '良好', actionDate: '2023-10-08' },
  { company: '量子计算中心', name: '碳足迹管理', value: 84, description: '碳足迹管理的情况', status: '正常', actionDate: '2023-10-09' },
  { company: '虚拟现实工作室', name: '环境管理体系认证', value: 86, description: '环境管理体系的认证情况', status: '良好', actionDate: '2023-10-10' },
]

const timelinessData = [
  { name: '能源消耗数据上报', value: 95, description: '能源消耗数据的上报情况', status: '优秀', actionDate: '2023-10-01',actionDate2: '2023-10-02' },
  { name: '碳排放数据上报', value: 90, description: '碳排放数据的上报情况', status: '良好', actionDate: '2023-10-02',actionDate2: '2023-10-04' },
  { name: '节能改造项目进展', value: 85, description: '节能改造项目的进展情况', status: '正常', actionDate: '2023-10-03',actionDate2: '2023-10-05' },
  { name: '绿色建筑数据', value: 92, description: '绿色建筑的数据上报情况', status: '优秀', actionDate: '2023-10-04',actionDate2: '2023-10-06' },
  { name: '清洁能源投资数据', value: 88, description: '清洁能源投资的数据上报情况', status: '良好', actionDate: '2023-10-05',actionDate2: '2023-10-07' },
  { name: '碳足迹管理数据', value: 91, description: '碳足迹管理的数据上报情况', status: '优秀', actionDate: '2023-10-06',actionDate2: '2023-10-08' },
  { name: '环境管理体系认证数据', value: 93, description: '环境管理体系认证的数据上报情况', status: '优秀', actionDate: '2023-10-07',actionDate2: '2023-10-09' },
  { name: '能源审计报告', value: 89, description: '能源审计报告的上报情况', status: '良好', actionDate: '2023-10-08',actionDate2: '2023-10-10' },
  { name: '碳排放核查报告', value: 90, description: '碳排放核查报告的上报情况', status: '良好', actionDate: '2023-10-09',actionDate2: '2023-10-11' },
  { name: '节能减排措施实施情况', value: 87, description: '节能减排措施实施情况的上报', status: '正常', actionDate: '2023-10-10',actionDate2: '2023-10-12' }
]

const accuracyData = [
  { name: '能源消耗数据', value: 90, description: '能源消耗数据的准确性', status: '优秀', actionDate: '2213',actionDate2: '4654' },
  { name: '碳排放数据', value: 100, description: '碳排放数据的准确性', status: '优秀', actionDate: '4311',actionDate2: '5435' },
  { name: '节能改造项目数据', value: 98, description: '节能改造项目数据的准确性', status: '优秀', actionDate: '1233',actionDate2: '2343' },
  { name: '绿色建筑数据', value: 97, description: '绿色建筑数据的准确性', status: '优秀', actionDate: '2313',actionDate2: '4353' },
  { name: '清洁能源投资数据', value: 100, description: '清洁能源投资数据的准确性', status: '优秀', actionDate: '1231',actionDate2: '4531' },
  { name: '碳足迹管理数据', value: 97, description: '碳足迹管理数据的准确性', status: '优秀', actionDate: '1521',actionDate2: '2432' },
  { name: '环境管理体系认证数据', value: 100, description: '环境管理体系认证数据的准确性', status: '优秀', actionDate: '2412',actionDate2: '4335' },
  { name: '能源审计报告数据', value: 100, description: '能源审计报告数据的准确性', status: '优秀', actionDate: '3212',actionDate2: '5675' },
  { name: '碳排放核查报告数据', value: 99, description: '碳排放核查报告数据的准确性', status: '优秀', actionDate: '1231',actionDate2: '5435' },
  { name: '节能减排措施实施数据', value: 100, description: '节能减排措施实施数据的准确性', status: '优秀', actionDate: '2312',actionDate2: '3453' },
]

const qualityScoreData = [
  { name: '奇趣科技有限公司', completenessScore: 85, timelinessScore: 95, accuracyScore: 90, overallScore: 90,value:90 },
  { name: '神秘生物研究所', completenessScore: 90, timelinessScore: 90, accuracyScore: 100, overallScore: 93,value:93 },
  { name: '幽灵电子厂', completenessScore: 80, timelinessScore: 85, accuracyScore: 98, overallScore: 87,value:87 },
  { name: '隐形材料公司', completenessScore: 88, timelinessScore: 92, accuracyScore: 97, overallScore: 92,value:92 },
  { name: '幻影能源集团', completenessScore: 82, timelinessScore: 91, accuracyScore: 100, overallScore: 91,value:91 },
  { name: '超时空科技', completenessScore: 87, timelinessScore: 89, accuracyScore: 97, overallScore: 91,value:91 },
  { name: '未来创新实验室', completenessScore: 92, timelinessScore: 93, accuracyScore: 100, overallScore: 95,value:95 },
  { name: '暗物质研究室', completenessScore: 89, timelinessScore: 89, accuracyScore: 99, overallScore: 92,value:92 },
  { name: '量子计算中心', completenessScore: 84, timelinessScore: 90, accuracyScore: 100, overallScore: 91,value:91 },
  { name: '虚拟现实工作室', completenessScore: 86, timelinessScore: 87, accuracyScore: 100, overallScore: 91,value:91 },
]

const completenessChart = ref(null)
const timelinessChart = ref(null)
const accuracyChart = ref(null)
const qualityScoreChart = ref(null)

const getStatusType = (status) => {
  switch (status) {
    case '正常':
      return 'info'
    case '良好':
      return 'success'
    case '优秀':
      return 'primary'
    default:
      return 'warning'
  }
}

const initChart = (chartRef, title, data, chartType) => {
  const chart = echarts.init(chartRef.value)
  let option = {}
  switch (chartType) {
    case 'bar':
      option = {
        //让标题居中
        title: {
          text: title,
          left:'center'
        },
        tooltip: {},
        xAxis: {
          data: data.map(item => item.name),
          axisLabel: {
            rotate: 45,
            interval: 0
          }
        },
        yAxis: {},
        series: [{
          name: '评分',
          type: 'bar',
          data: data.map(item => item.value)
        }]
      }
      break
    case 'pie':
      option = {
        title: {
          text: title,
          left:'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          name: '评分',
          type: 'pie',
          radius: '50%',
          data: data.map(item => ({ name: item.name, value: item.value })),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      break
    case 'line':
      option = {
        title: {
          text: title,
          left:'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: data.map(item => item.name),
          axisLabel: {
            rotate: 45,
            interval: 0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '评分',
          type: 'line',
          data: data.map(item => item.value)
        }]
      }
      break
  }
  chart.setOption(option)
}

const exportData = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '正在导出数据...',
    background: 'rgba(0, 0, 0, 0.7)',
  })

  setTimeout(() => {
    loading.close()
    ElMessage.success('数据导出成功')
  }, 2000)
}

onMounted(() => {
  initChart(completenessChart, '指标完整性', completenessData, 'bar')
  initChart(timelinessChart, '上报及时性', timelinessData, 'pie')
  initChart(accuracyChart, '数据准确性', accuracyData, 'line')
})

watch(activeName, (newVal) => {
  if (newVal === 'completeness') {
    initChart(completenessChart, '指标完整性', completenessData, 'bar')
  } else if (newVal === 'timeliness') {
    initChart(timelinessChart, '上报及时性', timelinessData, 'pie')
  } else if (newVal === 'accuracy') {
    initChart(accuracyChart, '数据准确性', accuracyData, 'line')
  } else if (newVal === 'qualityScore') {
    initChart(qualityScoreChart, '综合评分', qualityScoreData, 'bar')
  }
})
</script>

<style scoped>
.assessment-module {
  padding: 20px;
}
</style>
