<template>
    <div>
        <DatePicker ref="datePickerRef" style="display: none" />
        <div class="boxLeft" :class="show ? 'show' : 'noshow'" :style="height">
            <!-- 综合评估 -->
            <div>
                <div class="title">
                    <span>综合评估</span>
                    <span class="info" @click="open(0)">
                        详情
                        <ArrowRight style="width: 12px" />
                    </span>
                </div>
                <div class="evaluate">
                    <div v-for="item in evaluate" style="width: 40px">
                        <div>{{ item.name }}</div>
                        <div style="margin-top: 5px">{{ item.value }}</div>
                    </div>
                </div>
            </div>
            <!-- 稳态电能质量水平评估 -->
            <div>
                <div class="title">
                    <span>稳态电能质量水平评估</span>
                    <span class="info" @click="open(1)">
                        详情
                        <ArrowRight style="width: 12px" />
                    </span>
                </div>
                <div :style="boxHeight" class="boxR">
                    <div class="top">
                        <span>
                            监测点越限占比:
                            <span class="num">65%</span>
                        </span>
                        <el-select v-model="value" style="width: 120px" size="small">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <MyEChart :style="EchHeight" :options="WTCharts" />
                </div>
            </div>
            <!-- 暂态电能质量水平评价 -->
            <div>
                <div class="title">
                    <span>暂态电能质量水平评价</span>
                    <span class="info" @click="open(2)">
                        详情
                        <ArrowRight style="width: 12px" />
                    </span>
                </div>
                <div :style="boxHeight" class="boxR">
                    <div class="top">
                        <span>
                            暂态事件严重度:
                            <span class="num">65%</span>
                        </span>
                        <el-select v-model="value" style="width: 120px" size="small">
                            <el-option
                                v-for="item in options1"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <MyEChart :style="EchHeight" :options="WTCharts" />
                </div>
            </div>
            <!-- 技术监督管理 -->
            <div>
                <div class="title">
                    <span>技术监督管理(问题数)</span>
                    <span class="info" @click="open(3)">
                        详情
                        <ArrowRight style="width: 12px" />
                    </span>
                </div>
                <div :style="boxHeight" class="boxR">
                    <div class="evaluate bottom">
                        <div v-for="item in JDlist" style="width: 80px">
                            <div>{{ item.name }}</div>
                            <div style="margin-top: 5px">{{ item.value }}</div>
                        </div>
                    </div>
                    <el-row style="height: calc(100% - 62px)">
                        <el-col :span="12" class="col" style="border-right: 1px solid #ccc">
                            <div>
                                <span>异常问题总数：</span>
                                <span style="color: #2dcd28">60个</span>
                            </div>
                            <div>
                                <span style="width: 120px">已关联工单数：</span>
                                <span style="color: #81b337">60个</span>
                            </div>
                            <div>
                                <span style="width: 120px">　工单转换率：</span>
                                <span style="color: #338dff">60%</span>
                            </div>
                        </el-col>
                        <el-col :span="12" class="col">
                            <div>
                                <span>异常问题总数：</span>
                                <span style="color: #2dcd28">60个</span>
                            </div>
                            <div>
                                <span style="width: 120px">已关联工单数：</span>
                                <span style="color: #81b337">60个</span>
                            </div>
                            <div>
                                <span style="width: 120px">　工单转换率：</span>
                                <span style="color: #338dff">60%</span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <img
            class="imgR"
            :style="show ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"
            @click="show = !show"
            src="@/assets/img/QH.png"
        />
        <!-- 评估 -->
        <Evaluate ref="evaluateRef" />
        <!-- 稳态 -->
        <steadyState ref="steadyStateRef" />
        <!-- 暂态 -->
        <temporaryState ref="temporaryStateRef" />
        <!-- 技术 -->
        <technique ref="techniqueRef" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, provide } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { ArrowRight } from '@element-plus/icons-vue'
import Evaluate from './details/evaluate.vue'
import steadyState from './details/steadyState.vue'
import temporaryState from './details/temporaryState.vue'
import technique from './details/technique.vue'
import DatePicker from '@/components/form/datePicker/index.vue'
const dictData = useDictData()
const show = ref(false)
const height = mainHeight(30)
const boxHeight: any = mainHeight(270, 3)
const EchHeight: any = mainHeight(370, 3)
const evaluateRef = ref()
const steadyStateRef = ref()
const datePickerRef = ref()
const temporaryStateRef = ref()
const techniqueRef = ref()
const options = ref([
    {
        label: '电压偏差',
        value: '1'
    },
    {
        label: '频率偏差',
        value: '2'
    },
    {
        label: '电压总谐波畸变率',
        value: '3'
    },
    {
        label: '电压闪变',
        value: '4'
    },
    {
        label: '三相电压不平衡度',
        value: '5'
    }
])
const options1 = ref([
    {
        label: '暂降',
        value: '1'
    },
    {
        label: '暂升',
        value: '2'
    },
    {
        label: '中断',
        value: '3'
    }
])
const evaluate = ref([
    {
        name: '承德',
        value: 5
    },
    {
        name: '廊坊',
        value: 5
    },
    {
        name: '张家口',
        value: 5
    },
    {
        name: '秦皇岛',
        value: 5
    },
    {
        name: '唐山',
        value: 5
    },
    {
        name: '超高压',
        value: 5
    },
    {
        name: '风光储',
        value: 5
    }
])
const JDlist = ref([
    {
        name: '技术监督计划',
        value: 5
    },
    {
        name: '用户投诉',
        value: 5
    },
    {
        name: '谐波普测',
        value: 5
    },
    {
        name: '在线系统',
        value: 5
    }
])
const WTCharts = ref({
    xAxis: {
        name: '%',
        type: 'value',
        max: 100
    },
    legend: {
        show: false
    },
    yAxis: {
        type: 'category',
        data: ['承德', '廊坊', '唐山', '承德', '廊坊', '唐山']
    },
    grid: {
        top: '10px',
        left: '30px',
        right: '30px',
        bottom: '0px'
    },

    options: {
        dataZoom: null,
        series: [
            {
                name: '占比',
                type: 'bar',
                data: [3, 4, 5, 3, 4, 5],
                label: {
                    show: true,
                    position: 'right',
                    fontSize: 12,
                    formatter: function (params: any) {
                        return `${params.value}%`
                    }
                }
            }
        ]
    }
})

const value = ref('')
const open = (e: number) => {
    if (e == 0) {
        evaluateRef.value.open()
    } else if (e == 1) {
        steadyStateRef.value.open()
    } else if (e == 2) {
        temporaryStateRef.value.open()
    } else if (e == 3) {
        techniqueRef.value.open()
    }
}
const info = (row: any) => {
    let form = {
        id: row.orgNo,
        deptIndex: row.orgNo,
        orgId: row.orgNo,
        ids: [],
        statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
        isUpToGrid: row.isUpToGrid,
        startTime: datePickerRef.value.timeValue[0],
        searchBeginTime: datePickerRef.value.timeValue[0],
        endTime: datePickerRef.value.timeValue[1],
        searchEndTime: datePickerRef.value.timeValue[1],
        type: datePickerRef.value.interval
    }
}
defineExpose({ info })
</script>

<style lang="scss" scoped>
.boxLeft {
    background-color: #fff;
    width: 400px;
    padding: 10px;
    font-size: 13px;
    overflow: hidden;
}

.title {
    // height: ;
    display: flex;
    justify-content: space-between;
    font-weight: 550;
    height: 22px;
    line-height: 22px;
    padding-left: 5px;
    width: 100%;
    background-image: linear-gradient(to right, #a4e5da, #fff);

    .info {
        font-weight: normal;
        display: flex;
        font-size: 12px;
        cursor: pointer;
    }
}
.evaluate {
    height: 60px;
    border: 1px solid #ccc;
    margin: 10px 0;
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    text-align: center;
}
.boxR {
    border: 1px solid #ccc;
    margin: 10px 0;
    padding: 5px;
    .num {
        color: #2478f2;
    }
    .top {
        display: flex;
        justify-content: space-between;
    }
    .bottom {
        margin: 0;
        border: 0px;
    }
}
:deep(.el-select) {
    min-width: 120px;
}
.col {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.imgR {
    position: absolute;
    padding: 10px;
    top: calc(50% - 80px);
    left: -23px;
    z-index: 1;
    height: 200px;
    cursor: pointer;
}
.show {
    transition: all 0.3s ease;
    width: 0px;
    padding: 0;
    overflow: hidden;
}
.noshow {
    width: 400px;
    padding: 10px;
    transition: all 0.3s ease;
}
</style>
