<template>
  <el-container style="height: 90vh; border: 1px solid #eee; padding: 20px;">
    <el-tabs v-model="activeTab" type="border-card" style="width:100%;">
      <el-tab-pane label="基础类配置" name="config">
        <el-container>
          <el-aside style="width: 600px; margin-right: 20px;">
            <div class="config-container">
              <el-form ref="formRef" :model="form" :rules="rules" label-width="150px" @submit.native.prevent="saveConfig">
                <el-form-item label="基准率参数" prop="baseParams">
                  <el-input v-model="form.baseParams" placeholder="请输入基准率参数"></el-input>
                </el-form-item>
                <el-form-item label="年度能源消费总量" prop="scenarioParams">
                  <el-input v-model="form.scenarioParams" placeholder="请输入年度能源消费总量"></el-input>
                </el-form-item>
                <el-form-item label="工业能耗比例" prop="boundaryParams">
                  <el-input v-model="form.boundaryParams" placeholder="工业能耗比例"></el-input>
                </el-form-item>
                <el-form-item label="建筑能耗比例" prop="otherParams">
                  <el-input v-model="form.otherParams" placeholder="请输入建筑能耗比例"></el-input>
                </el-form-item>
                <el-form-item label="交通能耗比例" prop="remarks">
                  <el-input v-model="form.remarks" type="textarea" placeholder="请输入交通能耗比例"></el-input>
                </el-form-item>
                <el-form-item label="日期" prop="date">
                  <el-date-picker
                      v-model="form.date"
                      type="date"
                      placeholder="请选择日期"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                  ></el-date-picker>
                </el-form-item>
                <el-button type="primary" @click="saveConfig">保存配置</el-button>
              </el-form>
            </div>
            <el-card shadow="hover" style="margin-top: 20px;">
              <div slot="header">
                <span>情景分析</span>
              </div>
              <el-table :data="scenarioData" style="width: 100%">
                <el-table-column prop="carbonEmission1" label="" width="150"></el-table-column>
                <el-table-column prop="renewableEnergyRatio1" label="情景1" width="150"></el-table-column>
<!--                <el-table-column prop="carbonEmission2" label="碳排放 (情景2)" width="150"></el-table-column>-->
                <el-table-column prop="renewableEnergyRatio2" label="情景2" width="150"></el-table-column>
              </el-table>
            </el-card>
          </el-aside>
          <el-main style="flex: 1; display: block; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
            <h2>碳排放形势预测分析</h2>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-card shadow="hover">
                  <div slot="header">
                    <span>历史碳排放数据</span>
                  </div>
                  <div>
                    <el-table :data="historicalData" style="width: 100%">
                      <el-table-column prop="year" label="年份" width="100"></el-table-column>
                      <el-table-column prop="emission" label="碳排放量 (吨)" width="180"></el-table-column>
                    </el-table>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="hover">
                  <div slot="header">
                    <span>未来碳排放预测</span>
                  </div>
                  <div>
                    <el-table :data="futureData" style="width: 100%">
                      <el-table-column prop="year" label="年份" width="100"></el-table-column>
                      <el-table-column prop="predictedEmission" label="预测碳排放量 (吨)" width="180"></el-table-column>
                    </el-table>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 20px;">
              <el-col :span="24">
                <el-card shadow="hover">
                  <div slot="header">
                    <span>碳排放趋势图</span>
                  </div>
                  <div>
                    <div id="chart" style="width: 100%; height: 400px;"></div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-tab-pane>
      <el-tab-pane label="情景依托类配置" name="newTab">
        <!-- 新标签页的内容 -->
        <NewPage />
      </el-tab-pane>
      <el-tab-pane label="规划边界类配置" name="newTab2">
        <!-- 新标签页的内容 -->
        <NewPage2 />
      </el-tab-pane>
    </el-tabs>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts';
import NewPage from "@/views/b/aa/NewPage.vue";
import NewPage2 from "@/views/b/aa/NewPage2.vue";

const activeTab = ref('config');

const form = ref({
  baseParams: '',
  scenarioParams: '',
  boundaryParams: '',
  otherParams: '',
  remarks: '',
  date: ''
});

const formRef = ref(null);

const rules = {
  baseParams: [
    { required: true, message: '请输入基础类参数', trigger: 'blur' }
  ],
  scenarioParams: [
    { required: true, message: '请输入情景依托类参数', trigger: 'blur' }
  ],
  boundaryParams: [
    { required: true, message: '请输入规划边界类参数', trigger: 'blur' }
  ],
  otherParams: [
    { required: true, message: '请输入其他参数', trigger: 'blur' }
  ],
  remarks: [
    { required: true, message: '请输入备注', trigger: 'blur' }
  ],
  date: [
    { required: true, message: '请选择日期', trigger: 'change' }
  ]
};

const historicalData = ref([
  { year: '2020', emission: 1000 },
  { year: '2021', emission: 1100 },
  { year: '2022', emission: 1200 },
  { year: '2023', emission: 1300 },
  { year: '2024', emission: 1400 }
]);

const futureData = ref([
  { year: '2025', predictedEmission: 1500 },
  { year: '2026', predictedEmission: 1600 },
  { year: '2027', predictedEmission: 1700 },
  { year: '2028', predictedEmission: 1800 },
  { year: '2029', predictedEmission: 1900 }
]);

const scenarioData = ref([
  { carbonEmission1: '碳排放', renewableEnergyRatio1: '1100 吨', carbonEmission2: '1100 吨', renewableEnergyRatio2: '1200 吨' },
  { carbonEmission1: '再生能源比例', renewableEnergyRatio1: '32%', carbonEmission2: '1200 吨', renewableEnergyRatio2: '37%' }
]);

const saveConfig = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage({
        message: '保存成功',
        type: 'success'
      });
    } else {
      ElMessage({
        message: '请填写完整的信息',
        type: 'error'
      });
      return false;
    }
  });
};

onMounted(() => {
  const chart = echarts.init(document.getElementById('chart'));
  const option = {
    title: {
      text: '碳排放趋势图'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025', '2026', '2027']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '历史数据',
        type: 'line',
        data: [1521, 1543, 1578, 1456, 1347, 1435, 1654]
      },
      {
        name: '预测数据',
        type: 'line',
        data: [null, null, null, null, null, null, null, 1700, 1800, 1900]
      }
    ]
  };
  chart.setOption(option);
});
</script>

<style scoped>
.el-container {
  height: 100vh;
  border: 1px solid #eee;
  padding: 20px;
  background-color: #f5f7fa;
}

.el-aside {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.config-container {
  max-width: 600px;
  width: 100%;
}

h1, h2 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 20px;
  text-align: left;
}

.el-form {
  max-width: 100%;
  margin: 0 auto;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  color: #606266;
  font-weight: bold;
}

.el-textarea__inner {
  height: 100px;
}

.el-button {
  margin-top: 20px;
  width: 100%;
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
  font-size: 16px;
  padding: 12px 20px;
  border-radius: 4px;
  transition: all 0.3s;
}

.el-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.el-card {
  margin-bottom: 20px;
}

.el-table {
  width: 100%;
}

#chart {
  width: 100%;
  height: 400px;
}
</style>
