<template>
    <el-row>
        <el-col :sm="12" :md="12" style="padding: 0 6px;">
            <el-card shadow="hover" header-bordered>
                <template #header>
					<div style="display: flex; justify-content: space-between">
                    <div class="redTitle" @click="goDq">转型金融贷前计算器</div>
                    <div>
                      <el-button style="margin-right:2px" @click="showDq">指标说明</el-button>
                      <el-button @click="goDq" type="primary">前往测算</el-button>
                    </div>
					</div>
                </template>
                <div style="height:400px" v-if="!chartShow"></div>
                <xt-chart :option="option" height="400px" v-else></xt-chart>
                <!-- 原生表格实现 -->
                <div class="table-container">
                  <table class="score-table">
                    <thead>
                      <tr>
                        <th>
                          <div>项目碳排放量</div>
                          <div style="font-size: 12px;">与基准线相比</div>
                        </th>
                        <th>企业分值区间</th>
                        <th>项目/企业等级</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr 
                        v-for="(item, index) in tableData" 
                        :key="index"
                        :class="['score-row', { 'current-row': item.isCurrent }]"
                        
                      >
                        <td :style="{ color: item.color, fontWeight: 'bold' }">{{ item.pf }}</td>
                        <td :style="{ color: item.color, fontWeight: 'bold' }">{{ item.score }}</td>
                        <td :style="{ color: item.color, fontWeight: 'bold' }">{{ item.level }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
            </el-card>
        </el-col>
        <el-col :sm="12" :md="12" style="padding: 0 6px;">
            <el-card shadow="hover" header-bordered>
                <template #header>
					<div style="display: flex; justify-content: space-between">
                    <div class="redTitle" @click="goDh">转型金融贷后计算器</div>
                    <div>
                      <el-button style="margin-right:2px" @click="showDh">指标说明</el-button>
                      <el-button @click="goDh" type="primary">前往测算</el-button>
                    </div>
					</div>
                </template>
                <div style="height:400px" v-if="!chartShow"></div>
                <xt-chart :option="option_dh" height="400px" v-else></xt-chart>
                <div class="table-container">
                  <table class="score-table">
                    <thead>
                      <tr>
                        <th>
                          <div>项目碳排放量</div>
                          <div style="font-size: 12px;">与基准线相比</div>
                        </th>
                        <th>企业分值区间</th>
                        <th>项目/企业等级</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr 
                        v-for="(item, index) in tableData_dh" 
                        :key="index"
                        :class="['score-row', { 'current-row': item.isCurrent }]"
                        
                      >
                        <td :style="{ color: item.color, fontWeight: 'bold' }">{{ item.pf }}</td>
                        <td :style="{ color: item.color, fontWeight: 'bold' }">{{ item.score }}</td>
                        <td :style="{ color: item.color, fontWeight: 'bold' }">{{ item.level }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-dialog
      v-model="dialogVisible"
    >
      <div v-for="(item, key) in descriptions" v-bind:key="key">
        <div style="font-size:16px; font-weight: bold;">{{ key }}</div>
        <div >{{ item }}</div>
      </div>
    </el-dialog>
</template>

<script setup>
import router from '@/router'
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
import xtChart from "@/components/xtChart/index.vue";

const goDq = () => {
    router.push('/carbon/work/my')
}
const goDh = () => {
    router.push('/carbon/work/my')
}

// 添加响应式变量
const currentData = ref([35, 20, 10, 10, 10, 8, 7]);
const currentData_dh = ref([35, 25, 13, 9, 9, 5, 2, 2]);
const dialogVisible = ref(false);
// 指标描述数据
const descriptions = ref({});

const showDq = () => {
  dialogVisible.value = true;
  descriptions.value = {
    '技术路径': '评估企业采用的技术方案是否先进、可行，是否符合低碳转型要求。包括技术创新性、成熟度、实施路径清晰度等维度。',
    '碳排放': '衡量企业碳排放水平和减排潜力。包括碳排放总量、碳强度、减排目标达成率等关键指标。',
    '企业碳治理': '评估企业碳管理体系和治理能力。包括碳管理制度、管理机构、信息披露、碳资产管理等方面。',
    '融资计划': '分析转型项目融资方案的合理性和可行性。包括资金需求、融资结构、成本控制、风险防范等要素。',
    '社会与治理协同效益': '评估项目对社会发展和公司治理的协同促进作用。包括就业创造、社区发展、治理结构优化等。',
    '数字化与智能化水平': '衡量企业数字化转型和智能化应用程度。包括数字化基础设施、数据应用、智能化改造等方面。',
    '环境协同效益': '评估项目对环境保护和生态改善的协同效应。包括污染物减排、资源循环利用、生态保护等。'
  }
}

const showDh = () => {
  dialogVisible.value = true;
  descriptions.value = {
    "减碳量": "核心指标，直接体现转型成效",
    "技术成熟度": "决定技术可行性与推广价值",
    "企业碳治理": "反映企业长期减碳意愿与能力",
    "融资计划": "体现项目落地与资金保障能力",
    "环境协同效益": "综合评价项目的社会与环境价值",
    "社会与治理协同效益": "体现企业全面可持续发展的能力",
    "创新与可持续竞争力": "体现企业是否具备持续引领行业绿色转型的能力",
    "数字化与智能化水平": "体现企业是否具备持续引领行业绿色转型的能力"
  }
}
// 计算当前总分
const currentScore = computed(() => {
  return currentData.value.reduce((sum, value) => sum + value, 0);
});

const currentScore_dh = computed(() => {
  return currentData_dh.value.reduce((sum, value) => sum + value, 0);
})

const tableData = computed(() => [
  { 
    pf: "低于10%及以上", 
    score: "80~100", 
    level: "领先",
    color: "rgba(76, 175, 80, 0.7)",
    isCurrent: currentScore.value >= 80
  },
  { 
    pf: "低于5%（含）~0%", 
    score: "60~79", 
    level: "良好",
    color: "rgba(33, 150, 243, 0.7)",
    isCurrent: currentScore.value >= 60 && currentScore.value < 80
  },
  { 
    pf: "低于0~5%", 
    score: "30~59", 
    level: "一般",
    color: "rgba(255, 152, 0, 0.7)",
    isCurrent: currentScore.value >= 30 && currentScore.value < 60
  },
  { 
    pf: "高于基准线", 
    score: "0~29", 
    level: "较差",
    color: "rgba(244, 67, 54, 0.7)",
    isCurrent: currentScore.value < 30
  }
]);

const tableData_dh = computed(() => [
  { 
    pf: "低于10%及以上", 
    score: "80~100", 
    level: "领先",
    color: "rgba(76, 175, 80, 0.7)",
    isCurrent: currentScore_dh.value >= 80
  },
  { 
    pf: "低于5%（含）~0%", 
    score: "60~79", 
    level: "良好",
    color: "rgba(33, 150, 243, 0.7)",
    isCurrent: currentScore_dh.value >= 60 && currentScore_dh.value < 80
  },
  { 
    pf: "低于0~5%", 
    score: "30~59", 
    level: "一般",
    color: "rgba(255, 152, 0, 0.7)",
    isCurrent: currentScore_dh.value >= 30 && currentScore_dh.value < 60
  },
  { 
    pf: "高于基准线", 
    score: "0~29", 
    level: "较差",
    color: "rgba(244, 67, 54, 0.7)",
    isCurrent: currentScore_dh.value < 30
  }
]);

// Watchers to update chart colors based on score
watch(currentScore, (score) => {
  if (score >= 80) {
    option.value.series[0].data[0].areaStyle.color = 'rgba(76, 175, 80, 0.3)';
  } else if (score >= 60) {
    option.value.series[0].data[0].areaStyle.color = 'rgba(33, 150, 243, 0.3)';
  } else if (score >= 30) {
    option.value.series[0].data[0].areaStyle.color = 'rgba(255, 152, 0, 0.3)';
  } else {
    option.value.series[0].data[0].areaStyle.color = 'rgba(244, 67, 54, 0.3)';
  }
});

watch(currentScore_dh, (score) => {
  if (score >= 80) {
    option_dh.value.series[0].data[0].areaStyle.color = 'rgba(76, 175, 80, 0.3)';
  } else if (score >= 60) {
    option_dh.value.series[0].data[0].areaStyle.color = 'rgba(33, 150, 243, 0.3)';
  } else if (score >= 30) {
    option_dh.value.series[0].data[0].areaStyle.color = 'rgba(255, 152, 0, 0.3)';
  } else {
    option_dh.value.series[0].data[0].areaStyle.color = 'rgba(244, 67, 54, 0.3)';
  }
});

// 红色主题雷达图配置
const option = ref({
  title: {
    text: '核算雷达图',
    textStyle: {
      color: '#c23531'
    }
  },
//   tooltip: {
    
//   },
  radar: {
    center: ['50%', '55%'],
    radius: '70%',
    indicator: [
      { name: '技术路径', max: 35 },
      { name: '碳排放', max: 20 },
      { name: '企业碳治理', max: 10 },
      { name: '融资计划', max: 10 },
      { name: '社会与治理协同效益', max: 10 },
      { name: '数字化与智能化水平', max: 8 },
      { name: '环境协同效益', max: 7 }
    ],
    axisName: {
      color: '#c23531',
    //   fontWeight: 'bold',
      fontSize: 16
    },
    splitLine: {
      lineStyle: {
        color: ['rgba(194, 53, 49, 0.3)']
      }
    },
    splitArea: {
      areaStyle: {
        color: ['rgba(194, 53, 49, 0.05)', 'rgba(194, 53, 49, 0.1)']
      }
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(194, 53, 49, 0.5)'
      }
    }
  },
  series: [
    {
      type: 'radar',
      data: [
        {
          value: currentData.value,
          name: '企业评估',
          areaStyle: {
            color: 'rgba(194, 53, 49, 0.4)'
          },
          lineStyle: {
            color: '#c23531',
            width: 2
          },
          itemStyle: {
            color: '#c23531'
          }
        }
      ]
    }
  ]
});

const option_dh = ref({
  title: {
    text: '核算雷达图',
    textStyle: {
      color: '#c23531'
    }
  },
//   tooltip: {
    
//   },
  radar: {
    center: ['50%', '55%'],
    radius: '70%',
    indicator: [
      { name: '减碳量', max: 35 },
      { name: '技术成熟度', max: 25 },
      { name: '企业碳治理', max: 13 },
      { name: '融资计划', max: 9 },
      { name: '环境协同效益', max: 9 },
      { name: '社会与治理协同效益', max: 5 },
      { name: '创新与可持续竞争力', max: 2 },
      { name: '数字化与智能化水平', max: 2 }
    ],
    axisName: {
      color: '#c23531',
    //   fontWeight: 'bold',
      fontSize: 16
    },
    splitLine: {
      lineStyle: {
        color: ['rgba(194, 53, 49, 0.3)']
      }
    },
    splitArea: {
      areaStyle: {
        color: ['rgba(194, 53, 49, 0.05)', 'rgba(194, 53, 49, 0.1)']
      }
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(194, 53, 49, 0.5)'
      }
    }
  },
  series: [
    {
      type: 'radar',
      data: [
        {
          value: currentData_dh.value,
          name: '企业评估',
          areaStyle: {
            color: 'rgba(194, 53, 49, 0.4)'
          },
          lineStyle: {
            color: '#c23531',
            width: 2
          },
          itemStyle: {
            color: '#c23531'
          }
        }
      ]
    }
  ]
});

// 模拟数据更新函数
const updateRadarData = () => {
  // 生成随机数据，但保持在合理范围内
  const newData = currentData.value.map((value, index) => {
    const maxValue = option.value.radar.indicator[index].max;
    const minValue = option.value.radar.indicator[index].max * 0.2; // 最小值
    const fluctuationRange = maxValue * 0.5; // 波动范围为最大值的10%
    const fluctuation = (Math.random() - 0.5) * 2 * fluctuationRange;
    let newValue = value + fluctuation;
    
    // 确保不超过最大值
    newValue = Math.min(newValue, maxValue);
    // 确保不小于0
    newValue = Math.max(newValue, minValue);
    return Math.round(newValue * 10) / 10; // 保留一位小数
  });
  
  currentData.value = newData;
  
  // 更新图表数据
  option.value.series[0].data[0].value = newData;
};

// 模拟数据更新函数
const updateRadarData_dh = () => {
  // 生成随机数据，但保持在合理范围内
  const newData = currentData_dh.value.map((value, index) => {
  const maxValue = option_dh.value.radar.indicator[index].max;
  const minValue = option_dh.value.radar.indicator[index].max * 0.2; // 最小值
  const fluctuationRange = maxValue * 0.5; // 波动范围为最大值的10%
  const fluctuation = (Math.random() - 0.5) * 2 * fluctuationRange;
  let newValue = value + fluctuation;
  
  // 确保不超过最大值
  newValue = Math.min(newValue, maxValue);
  // 确保不小于0
  newValue = Math.max(newValue, minValue);
  
  return Math.round(newValue * 10) / 10; // 保留一位小数
  });
  
  currentData_dh.value = newData;
  
  // 更新图表数据
  option_dh.value.series[0].data[0].value = newData;
};

// 定时器引用
let timer = null;
let timer_dh = null;
const chartShow = ref(false);
onMounted(() => {
  // 每4秒更新一次数据
  setTimeout(() =>{ chartShow.value = true;}, 200);
  timer = setInterval(updateRadarData, 4000);
  setTimeout(()=>{
    timer_dh = setInterval(updateRadarData_dh, 4000);
  }, 2000);
});

onUnmounted(() => {
  // 组件卸载时清除定时器
  if (timer) {
    clearInterval(timer);
  }
  if (timer_dh) {
    clearInterval(timer_dh);
  }
});
</script>

<style scoped>
.bigNav {
    font-size: 20px;
    font-weight: 500;
    color: #ee2416;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.redTitle {
    color: #ee2416;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    padding-left: 15px;
    transition: all 0.3s ease;
}

.redTitle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: linear-gradient(to bottom, #ee2416, #ff6b6b);
    border-radius: 2px;
}

.redTitle:hover {
    color: #ff6b6b;
    transform: translateX(5px);
}

/* 卡片样式优化 */
:deep(.el-card) {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 24px;
}

:deep(.el-card:hover) {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(238, 36, 22, 0.15);
}

:deep(.el-card__header) {
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
    border-bottom: 2px solid rgba(238, 36, 22, 0.1);
    padding: 20px 24px;
}

:deep(.el-card__body) {
    padding: 24px;
}

/* 表格容器样式 */
.table-container {
    margin-top: 28px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(238, 36, 22, 0.1);
}

/* 原生表格样式 */
.score-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/* 表头样式 */
.score-table thead {
    background: linear-gradient(135deg, #ee2416 0%, #ff6b6b 100%);
}

.score-table th {
    color: #fff;
    font-weight: 600;
    padding: 14px 16px;
    text-align: center;
    border-bottom: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
}

/* 表格行样式 */
.score-table tbody tr {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: white;
}

.score-table td {
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: #333;
    font-weight: 500;
}

/* 当前行高亮样式 */
.current-row {
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%) !important;
    transform: scale(1.01);
    box-shadow: 0 4px 16px rgba(238, 36, 22, 0.15);
    position: relative;
    z-index: 1;
    border-left: 4px solid #ee2416;
}

.current-row td {
    font-weight: 600;
    color: #ee2416;
}

/* 鼠标悬停效果 */
.score-table tbody tr:hover {
    background: linear-gradient(135deg, #fff9f9 0%, #ffffff 100%);
    transform: translateY(-2px) scale(1.005);
    box-shadow: 0 6px 20px rgba(238, 36, 22, 0.12);
    z-index: 2;
}

/* 按钮样式优化 */
:deep(.el-button) {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 10px 20px;
}

:deep(.el-button--primary) {
    background: linear-gradient(135deg, #ee2416 0%, #ff6b6b 100%);
    border: none;
    box-shadow: 0 2px 8px rgba(238, 36, 22, 0.3);
    color: #ffffff !important;
}

:deep(.el-button--primary:hover) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(238, 36, 22, 0.4);
    background: linear-gradient(135deg, #ff6b6b 0%, #ee2416 100%);
}

:deep(.el-button--default) {
    border-color: rgba(238, 36, 22, 0.3);
    color: #ee2416;
    background-color: #ffffff;
}

:deep(.el-button--default:hover) {
    background-color: rgba(238, 36, 22, 0.1);
    border-color: #ee2416;
}

/* 对话框样式优化 */
:deep(.el-dialog) {
    border-radius: 12px;
    overflow: hidden;
}

:deep(.el-dialog__header) {
    background: linear-gradient(135deg, #ee2416 0%, #ff6b6b 100%);
    padding: 20px;
    margin: 0;
}

:deep(.el-dialog__title) {
    color: #fff;
    font-weight: 600;
}

:deep(.el-dialog__body) {
    padding: 24px;
}

:deep(.el-dialog__headerbtn .el-dialog__close) {
    color: #fff;
    font-size: 18px;
}

/* 指标说明内容样式 */
:deep(.el-dialog__body > div) {
    margin-bottom: 20px;
    padding: 16px;
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
    border-radius: 8px;
    border-left: 4px solid #ee2416;
    transition: all 0.3s ease;
}

:deep(.el-dialog__body > div:hover) {
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(238, 36, 22, 0.1);
}

:deep(.el-dialog__body > div > div:first-child) {
    color: #ee2416;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

:deep(.el-dialog__body > div > div:last-child) {
    color: #666;
    line-height: 1.6;
    font-size: 14px;
}

/* 图表容器动画 */
:deep(.xt-chart) {
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>