<template>
    <div class="analysisReport" :class="!theme ? 'themeDark' : 'themeLight'">
        <div class="analysisReportMain">
            <div class="main_top">
                <p class="topPsty">分析报告</p>
                <div class="seach">
                    <el-form class="generat-seach" :inline="true">
                        <el-form-item label="场站" class="!mb-0">
                            <el-select v-model="station" clearable class="w-[150px]">
                                <el-option v-for="item in stationList" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选择时间">
                            <el-date-picker v-model="pickerVal" type="monthrange" value-format="YYYY-MM"
                                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
                        </el-form-item>
                        <el-form-item class="!mb-0">
                            <el-button type="primary" @click="addform">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="main" :style="{ height: tableHeight}">
                <div class="tableDataMain warn-table">
                    <el-table :data="tableData" size="small">
                        <el-table-column resizable align="center" type="index" label="序号" />
                        <el-table-column resizable align="center" prop="station" label="场站名称" />
                        <el-table-column resizable align="center" prop="time" label="时间" />
                        <el-table-column resizable align="center" prop="wtidcount" label="风机数量" />
                        <el-table-column resizable align="center" label="操作">
                            <template #default="scope">
                                <el-button size="small" type="danger" @click="handleReport(scope.$index, scope.row)">
                                    查看报告
                                </el-button>
                            </template>
                        </el-table-column>
                        <template #empty>
                            <div class="nodata">
                                <img :src="nodata" alt="">
                                <p class="nodataText">暂无数据，敬请期待</p>
                            </div>
                        </template>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
    <el-dialog custom-class="windLifeDialog" v-model="centerDialogVisible" width="50%" center
        :before-close="handleClose" style="padding: 15px 40px;">
        <div id="pdfDom" :class="!theme ? 'block' : 'white'"
            :style="!theme ? 'background-color: #040c0b' : 'background-color: #fff'">
            <h3 style="font-weight: bolder; font-size: 18px;text-aling:center;margin-bottom: 20px;text-align: center"
                :style="!theme ? 'color: #fff' : 'color: #000'">风电场性能分析报告</h3>
            <div style="margin-bottom: 20px">
                <p>
                    <span class="ml-5" style="width: 500px;">场站： {{ nbdata.name }}</span>
                    <span class="ml-77">风机型号： {{ nbdata.model }}</span>
                </p>
                <p>
                    <span class="ml-5">风机数量： {{ nbdata.jrwindQuantityLd }}</span>
                    <span class="ml-87">装机容量(MW)： {{ nbdata.jrwindCapacity }}</span>
                </p>
                <p>
                    <span class="ml-5">报告生成日期： {{ time }}</span>
                    <span class="ml-70">数据分析周期： {{ eltime }}</span>
                </p>
            </div>
            <h3 style="font-weight: bolder; font-size: 18px;margin-bottom: 10px"
                :style="!theme ? 'color: #fff' : 'color: #000'">概述：</h3>
            <p class="ml-7">
                报告基于曲线偏差率、静态偏差对风、容量系数、停机时长、分别对场站{{ nbdata.quantity }}台风机进行了性能分析，其中有{{wtcount}}台风机指标严重异常，信息如下：
            </p>
            <h3 style="font-weight: bolder; font-size: 18px;margin: 10px 0"
                :style="!theme ? 'color: #fff' : 'color: #000'">
                1、曲线偏差率
            </h3>
            <div class="warn-table">
                <p class="ml-7">
                    曲线偏差率对不同风速区间的实际功率和保证功率做偏差率分析，高偏差率表明存在需要进一步调查潜在问题，偏差率负值表明实际功率低于保证功率
                </p>
                <el-table class="toolSty" :data="curve" :span-method="objectSpanMethod" border
                    style="width: 100%; margin-top: 20px">
                    <el-table-column prop="section" align="center" label="风速区间" width="180" />
                    <el-table-column prop="module" align="center" label="偏差率" />
                    <el-table-column prop="wtidcount" align="center" label="风机数量" />
                    <el-table-column prop="windturbineId" show-overflow-tooltip align="center" label="风机编号">
                        <!-- <template #default="scope">
                            <el-tooltip class="box-item" effect="dark" :content="scope.row.windturbineId"
                                placement="top-start">
                            </el-tooltip>
                        </template> -->
                    </el-table-column>
                </el-table>
            </div>
            <h3 style="font-weight: bolder; font-size: 18px;margin: 10px 0"
                :style="!theme ? 'color: #fff' : 'color: #000'">
                2、静态偏航对风
            </h3>
            <div class="warn-table">
                <p class="ml-7">
                    静态偏航对风指风机的叶片与风向之间的偏差，偏差角度过大表明对风存在问题，以下为5-10m风速区间的对风误差
                </p>
                <el-table class="toolSty" :data="staticwind" :span-method="objectSpanMethod" border
                    style="width: 100%; margin-top: 20px">
                    <el-table-column prop="section" align="center" label="严重程度" width="180" />
                    <el-table-column prop="wtidcount" align="center" label="风机数量" />
                    <!-- <el-table-column prop="amount1" label="风机数量" /> -->
                    <el-table-column prop="windturbineId" show-overflow-tooltip align="center" label="风机编号" />
                </el-table>
            </div>
            <h3 style="font-weight: bolder; font-size: 18px;margin: 10px 0"
                :style="!theme ? 'color: #fff' : 'color: #000'">
                3、容量系数
            </h3>
            <div class="warn-table">
                <p class="ml-7">
                    容量系数是风机发电量能力的指标，数值越低，说明发电效率越低
                </p>
                <el-table class="toolSty" :data="mrlxs" :span-method="objectSpanMethod" border
                    style="width: 100%; margin-top: 20px">
                    <el-table-column prop="section" align="center" label="容量系数" width="180" />
                    <!-- <el-table-column prop="name" label="偏差率" /> -->
                    <el-table-column prop="wtidcount" align="center" label="风机数量" />
                    <el-table-column prop="windturbineId" show-overflow-tooltip align="center" label="风机编号" />
                </el-table>
            </div>
            <h3 style="font-weight: bolder; font-size: 18px;margin: 10px 0"
                :style="!theme ? 'color: #fff' : 'color: #000'">
                4、桨距角
            </h3>
            <div class="warn-table">
                <p class="ml-7">
                    桨距角分析并网开桨和停机收桨，并网状态下桨距角趋近于0度最优，停机状态下桨距角趋近于90度最优
                </p>
                <el-table class="toolSty" :data="blade" :span-method="objectSpanMethod" border
                    style="width: 100%; margin-top: 20px">
                    <el-table-column prop="section" align="center" label="桨距角" width="180" />
                    <!-- <el-table-column prop="name" label="偏差率" /> -->
                    <el-table-column prop="wtidcount" align="center" label="风机数量" />
                    <el-table-column prop="windturbineId" show-overflow-tooltip align="center" label="风机编号" />
                </el-table>
            </div>
            <h3 style="font-weight: bolder; font-size: 18px;margin: 10px 0"
                :style="!theme ? 'color: #fff' : 'color: #000'">
                5、停机时间
            </h3>
            <div class="warn-table">
                <p class="ml-7">
                    小风速下停机时间越长反应出低风速风机切入不及时，暴风天气不停机反应出风机切出不及时
                </p>
                <el-table class="toolSty" :data="stoptime" :span-method="objectSpanMethod" border
                    style="width: 100%; margin-top: 20px">
                    <el-table-column prop="section" align="center" label="风速区间" width="180" />

                    <el-table-column prop="wtidcount" align="center" label="风机数量" />
                    <el-table-column prop="remark" align="center" label="累计时间(min)" />
                    <el-table-column prop="windturbineId" show-overflow-tooltip align="center" label="风机编号" />
                </el-table>
            </div>
            <!-- <h3 style="font-weight: bolder; font-size: 18px; color: black">
    5、损失电量
</h3>
<p class="ml-7">
    损失电量指因故障或维护等原因导致风机未能正常发电，损失电量占比越高，存在的问题越明显
</p>
<el-table
    :data="tableData1"
    :span-method="objectSpanMethod"
    border
    style="width: 100%; margin-top: 20px"
>
    <el-table-column prop="id" align="center" label="损失占比" width="180" />

    <el-table-column prop="amount1" align="center" label="风机数量" />
    <el-table-column prop="amount2" align="center" label="风机编号" />
</el-table> -->
            <h3 style="font-weight: bolder; font-size: 18px;margin: 10px 0"
                :style="!theme ? 'color: #fff' : 'color: #000'">
                结论及建议
            </h3>
            <p class="ml-7">
                综上统计周期内数据分析，{{ nbdata.name }}的{{hjwtid}}台风机出现频率最高为{{hjcount}}次，可做为重点检修对象，详细可参考分析系统分析功能。
            </p>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <!-- <el-button type="primary" @click="centerDialogVisible = false">
        确定
    </el-button> -->
                <el-button @click="exportPDF" type="primary" :loading="loading">导出 PDF</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup name="report">
    import httpRequest from '@/utils/request.js'
    import jsPDF from 'jspdf';
    import html2canvas from 'html2canvas';
    import htmlToPdf from "./fixGetPDF";
    import {
        ref,
        onMounted,
        reactive,
        watch,
        nextTick
    } from "vue";
    import {
        useStore
    } from 'vuex';

    const pickerVal = ref([]);
    const curve = ref([]);
    const mrlxs = ref([]);
    const blade = ref([]);

    const staticwind = ref([]);
    const stoptime = ref([]);
    const nbdata = ref({});
    const loading = ref(false)
    const tableHeight = ref(window.innerHeight - 120 + 'px')

    const exportPDF = () => {
        loading.value = true;
        // 调用htmlToPdf工具函数
        htmlToPdf.getPdf(
            document.querySelector("#pdfDom"),
            "风电场性能分析报告"
        );
        // 定时器模拟按钮loading动画的时间
        setTimeout(() => {
            loading.value = false;
            ElMessage.success('打印成功!');
        }, 1000);
        centerDialogVisible.value = false
    }


    const centerDialogVisible = ref(false);
    /**场站 */
    const stationList = ref([]);
    const funGetStation = async () => {
        const res = await httpRequest.get("/base/station");
        stationList.value = res.data;
    };
    /**查询表格数据 */
    const tableData = ref();
    const station = ref("");
    const addform = async () => {
        const res = await httpRequest.get(
            `/report/list?station=${station.value}&st=${pickerVal.value[0]}&et=${pickerVal.value[1]}`
        );

        //    res.data.forEach((ele)=>{
        //        ele.time=ele.time.slice(0, 7);
        //    })
        tableData.value = res.data;
    };

    let val1 = ref();
    let value2 = ref();
    const BeginChange = (val) => {
        // console.log(val);
        val1.value = val;
        // console.log(val);
    };
    const EndChange = (val) => {
        // console.log(val);
        value2.value = val;
    };
    let time = ref();
    let eltime = ref();
    let wtcount = ref()
    let hjwtid = ref()
    let hjcount = ref()
    const handleReport = async (index, row) => {
        time.value = row.time;
        //   console.log(index, row)
        centerDialogVisible.value = true;
        const res = await httpRequest.get(
            `/report/info?station=${row.station}&date=${row.time}`
        );
        nbdata.value = res.data.station;
        //    console.log('nb',nbdata.value);
        if (res.data.info.curve.length) {
            res.data.info.curve.forEach((ele) => {
                ele.module = "偏差率负值";
            });
        }

        curve.value = res.data.info.curve;
        mrlxs.value = res.data.info.mrlxs;
        blade.value = res.data.info.blade;
        staticwind.value = res.data.info.staticwind;
        stoptime.value = res.data.info.stoptime;
        eltime.value = res.data.time;
        wtcount.value = res.data.wtcount;
        hjwtid.value = res.data.hjwtid;
        hjcount.value = res.data.hjcount;

        nextTick(() => {
            document.getElementsByClassName('.toolSty')
        })

    };

    const handleClose = (() => {
        reset();
        centerDialogVisible.value = false;
    })

    const reset = (() => {
        curve.value = [];
        mrlxs.value = [];
        blade.value = [];
        staticwind.value = [];
        stoptime.value = [];
        eltime.value = '';
        wtcount.value = '';
        hjwtid.value = '';
        hjcount.value = '';
    });


    const theme = ref(null)
    const store = useStore()
    watch(() => store.state.theme, (newVal, oldVal) => {
        theme.value = newVal
        funGetStation()
        addform()
    }, {
        deep: true
    })

    onMounted(() => {
        funGetStation();
        theme.value = store.state.theme
        tableHeight.value = window.innerHeight - 120 + 'px'
        addform()
    });
</script>
<style lang="less" scoped>
    .analysisReport {
        height: 100%;

        .analysisReportMain {
            height: 100%;

            .main_top {
                height: 40px;
                display: flex;
                align-items: center;

                .topPsty {
                    position: relative;
                    top: 5px;
                    padding: 7px 20px;
                    font-size: 12px;
                    font-weight: 600;
                    margin-left: 10px;
                    border-radius: 3px;
                }

                .seach {
                    padding: 20px 0 0 20px;
                }
            }

            .main {
                width: 100%;
                padding: 10px;

                .tableDataMain {
                    width: calc(100% - 20px);
                }
            }
        }
    }

    .themeDark {

        .analysisReportMain {
            .main_top {

                .topPsty {
                    color: #1C99FF;
                    background: #1E2126;
                }
            }

            .main {
                background: #161f1e;

                .tableDataMain {
                    margin-top: 5px;
                    background: #212223;
                }
            }
        }


    }

    .themeLight {
        padding: 0;

        .analysisReportMain {
            .main_top {

                .topPsty {
                    color: #2778FF;
                    background: #FFFFFF;
                }
            }

            .main {
                background: #edeffb;

                .tableDataMain {
                    background: #fff;
                    margin-top: 5px;
                }
            }

            .analysisReportMain {
                padding: 20px 0;
                border-radius: 10px;
                background: #fff;

            }
        }


    }
</style>