<template>
    <div class="model">
        <!-- 标题栏 -->
        <el-row :gutter="24" class="title-row">
            <el-col :span="12">
                <TitleComponent title="运行参数报表" subtitle="查看和分析光伏系统的各项运行参数的日、月、年报表数据" />
            </el-col>
            <!-- 表单控件区域：使用flex布局确保同排显示 -->
            <el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
                <div class="form-controls">
                    <div class="control-item">
                        <el-select placeholder="请选择时间" style="width: 100%;">
                            <el-option label="今天" value="all"></el-option>
                        </el-select>
                    </div>
                    <div class="control-item">
                        <el-select placeholder="请选择报表" style="width: 100%;">
                            <el-option label="日报表" value="all"></el-option>
                        </el-select>
                    </div>
                    <div class="control-item date-range">
                        <el-date-picker v-model="value1" type="daterange" range-separator="-" start-placeholder="开始"
                            end-placeholder="结束" style="width: 100%;" />
                    </div>
                    <div class="control-item">
                        <el-button @click="refreshData">
                            刷新数据
                            <el-icon class="el-icon--right">
                                <Refresh />
                            </el-icon>
                        </el-button>
                    </div>
                    <div class="control-item">
                        <el-button type="primary">
                            导出数据
                            <el-icon class="el-icon--right">
                                <UploadFilled />
                            </el-icon>
                        </el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!-- 数据展示-->
        <el-row :gutter="24">
            <el-col :span="6">
                <itembox title="总发电量" value="2,456.8" unit="KWh" growth="2.5%" growthLabel="较昨日" color="#186DF5"
                    chartType="bar" power="" icon-src="/src/assets/demo/shandian.png" type="down"
                    :chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
            </el-col>
            <el-col :span="6">
                <itembox title="平均效率" value="18.7" unit="%" growth="2.5%" growthLabel="较昨日" color="#00B87A"
                    chartType="line" icon-src="/src/assets/demo/huojian.png" type="up"
                    :chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
            </el-col>
            <el-col :span="6">
                <itembox title="设备温度" value="43.5" unit="℃" growth="2.5%" growthLabel="较昨日" color="#FFC300"
                    chartType="line" icon-src="/src/assets/demo/wendu.png" type="up"
                    :chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
            </el-col>
            <el-col :span="6">
                <itembox title="系统可用性" value="18.7" unit="%" growth="2.5%" growthLabel="较昨日" color="#7948EA"
                    chartType="line" icon-src="/src/assets/demo/use.png" type="up"
                    :chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
            </el-col>
        </el-row>
        <!-- 第一行图表 -->
        <el-row :gutter="24">
            <el-col :span="17">
                <qushiBar :chartData="timeRangeData"></qushiBar>
            </el-col>
            <el-col :span="7">
                <statusPie :chartData="statusPieData"></statusPie>
            </el-col>
        </el-row>
        <!-- 第二行图表 -->
        <el-row :gutter="24">
            <el-col :span="17">
                <qushiLine :chartData="temperatureData"></qushiLine>
            </el-col>
            <el-col :span="7">
                <fenxiLine></fenxiLine>
            </el-col>
        </el-row>
        <!-- 详情图表 -->
        <el-row :gutter="24">
           <el-col :span="24">
              <detailForm :tableData="tableData"></detailForm>
           </el-col>
        </el-row>
    </div>
</template>
<script setup>// import TitleComponent from '@/views/demo/components/TitleComponent.vue';
import TitleComponent from '@/components/TitleComponent/index.vue';
import qushiBar from '@/views/pvSystem/reportManager/components/qushiBar.vue';
import qushiLine from '@/views/pvSystem/reportManager/components/qushiLine.vue';
import itembox from '@/views/pvSystem/reportManager/components/itembox.vue';
import fenxiLine from '@/views/pvSystem/reportManager/components/fenxiLine.vue';
import statusPie from '@/views/pvSystem/reportManager/components/statusPie.vue';
import detailForm from '@/views/pvSystem/reportManager/components/detailForm.vue';
import { ref } from 'vue';

// 日期范围选择器数据绑定
const value1 = ref([]);

// mock数据定义
const timeRangeData = ref({
  hour: {
    xAxis: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00'],
    efficiencyData: [7, 10, 14, 17, 18, 19, 20]
  },
  day: {
    xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    efficiencyData: [12, 15, 17, 14, 18, 16, 19]
  },
  week: {
    xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
    efficiencyData: [10, 13, 16, 14, 18, 17]
  }
});

const temperatureData = ref({
  hour: {
    xAxis: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
    componentTemp: [22, 30, 38, 28, 44, 32, 42, 25, 35],
    ambientTemp: [18, 26, 32, 24, 40, 28, 36, 22, 30]
  },
  day: {
    xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    componentTemp: [25, 30, 35, 32, 38, 28, 30],
    ambientTemp: [20, 24, 29, 27, 32, 25, 26]
  },
  week: {
    xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
    componentTemp: [28, 32, 36, 33, 30, 35],
    ambientTemp: [24, 27, 30, 28, 26, 29]
  }
});

const statusPieData = ref({
  "正常运行": { value: 40, color: '#43CF7C' },
  "轻微异常": { value: 30, color: '#FFC300' },
  "故障": { value: 20, color: '#FF5733' },
  "维护中": { value: 10, color: '#2A82E4' }
});

const fenxiLineData = ref({
  hour: {
    xAxis: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00'],
    efficiencyData: [7, 10, 14, 17, 18, 19, 20]
  },
  day: {
    xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    efficiencyData: [12, 15, 17, 14, 18, 16, 19]
  },
  week: {
    xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
    efficiencyData: [10, 13, 16, 14, 18, 17]
  }
});

const tableData = ref([
  { time: '00:00', irradiance: 0, powerGeneration: 0.0, efficiency: 24.5, moduleTemperature: 23.5, inverterTemperature: 21.2, status: '停机' },
  { time: '08:00', irradiance: 12.5, powerGeneration: 17.2, efficiency: 28.1, moduleTemperature: 26.3, inverterTemperature: 20.3, status: '正常' },
  { time: '12:00', irradiance: 98.0, powerGeneration: 13.1, efficiency: 46.2, moduleTemperature: 23.5, inverterTemperature: 21.2, status: '正常' },
  { time: '15:00', irradiance: 65, powerGeneration: 16.8, efficiency: 31.1, moduleTemperature: 23.5, inverterTemperature: 21.2, status: '停机' },
  { time: '20:00', irradiance: 0, powerGeneration: 0.0, efficiency: 24.5, moduleTemperature: 23.5, inverterTemperature: 21.2, status: '停机' },
  { time: '01:00', irradiance: 0, powerGeneration: 0.0, efficiency: 22.8, moduleTemperature: 21.5, inverterTemperature: 19.8, status: '停机' },
  { time: '02:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.1, moduleTemperature: 22.1, inverterTemperature: 20.5, status: '停机' },
  { time: '03:00', irradiance: 0, powerGeneration: 0.0, efficiency: 22.9, moduleTemperature: 21.8, inverterTemperature: 19.9, status: '停机' },
  { time: '04:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.0, moduleTemperature: 22.0, inverterTemperature: 20.2, status: '停机' },
  { time: '05:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.2, moduleTemperature: 22.3, inverterTemperature: 20.7, status: '停机' },
  { time: '06:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.5, moduleTemperature: 22.6, inverterTemperature: 21.0, status: '停机' },
  { time: '07:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.8, moduleTemperature: 22.9, inverterTemperature: 21.2, status: '停机' },
  { time: '09:00', irradiance: 35.2, powerGeneration: 18.5, efficiency: 30.2, moduleTemperature: 28.5, inverterTemperature: 22.6, status: '正常' },
  { time: '10:00', irradiance: 65.8, powerGeneration: 15.3, efficiency: 35.6, moduleTemperature: 32.8, inverterTemperature: 24.5, status: '正常' },
  { time: '11:00', irradiance: 82.5, powerGeneration: 14.2, efficiency: 42.3, moduleTemperature: 38.2, inverterTemperature: 28.3, status: '正常' },
  { time: '13:00', irradiance: 95.3, powerGeneration: 13.8, efficiency: 45.8, moduleTemperature: 42.6, inverterTemperature: 31.5, status: '正常' },
  { time: '14:00', irradiance: 88.7, powerGeneration: 14.1, efficiency: 44.2, moduleTemperature: 40.8, inverterTemperature: 30.2, status: '正常' },
  { time: '16:00', irradiance: 72.5, powerGeneration: 15.8, efficiency: 38.6, moduleTemperature: 36.4, inverterTemperature: 27.1, status: '正常' },
  { time: '17:00', irradiance: 58.2, powerGeneration: 16.3, efficiency: 34.9, moduleTemperature: 33.2, inverterTemperature: 25.3, status: '正常' },
  { time: '18:00', irradiance: 42.8, powerGeneration: 17.5, efficiency: 31.4, moduleTemperature: 30.1, inverterTemperature: 23.5, status: '正常' },
  { time: '19:00', irradiance: 25.3, powerGeneration: 18.2, efficiency: 29.1, moduleTemperature: 27.6, inverterTemperature: 21.8, status: '正常' },
  { time: '21:00', irradiance: 0, powerGeneration: 0.0, efficiency: 24.8, moduleTemperature: 23.8, inverterTemperature: 21.5, status: '停机' },
  { time: '22:00', irradiance: 0, powerGeneration: 0.0, efficiency: 25.1, moduleTemperature: 24.1, inverterTemperature: 21.8, status: '停机' },
  { time: '23:00', irradiance: 0, powerGeneration: 0.0, efficiency: 25.3, moduleTemperature: 24.3, inverterTemperature: 22.0, status: '停机' }
]);

// 模拟API调用函数
const fetchData = async () => {
  // 模拟网络延迟
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        timeRangeData: timeRangeData.value,
        temperatureData: temperatureData.value,
        statusPieData: statusPieData.value,
        fenxiLineData: fenxiLineData.value,
        tableData: tableData.value
      });
    }, 500);
  });
};

// 初始化时获取数据
fetchData().then(data => {
  // 这里可以根据需要更新数据状态
  console.log('模拟接口数据获取成功:', data);
});

// 刷新数据函数
const refreshData = async () => {
  const newData = await fetchData();
  // 更新数据状态
  timeRangeData.value = newData.timeRangeData;
  temperatureData.value = newData.temperatureData;
  statusPieData.value = newData.statusPieData;
  fenxiLineData.value = newData.fenxiLineData;
  tableData.value = newData.tableData;
};
</script>
<style scoped lang="scss">
.model {
    padding: 20px 15px;
    background-color: rgba(242, 248, 252, 1);
}

.title-row {
    margin-bottom: 20px;
}

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

.el-row:last-child {
    margin-bottom: 0;
}

.form-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    flex-wrap: nowrap;
}

.control-item {
    flex: 0 0 auto;
    width: 130px;
}

.control-item.date-range {
    flex: 0 0 auto;
    width: 260px;
}

/* 确保按钮在小尺寸时也能正常显示 */
.control-item .el-button {
    white-space: nowrap;
}

/* 优化表单控件的宽度和间距 */
.el-select,
.el-date-picker {
    font-size: 14px;
}
</style>