<template>
    <el-dialog draggable title="详情" v-model="dialogVisible" width="1400px" :before-close="handleClose">
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="指标" name="1">
                <el-divider content-position="left" style="font-size: 18px">问题基本信息</el-divider>
                <el-form :model="addData" :inline="true" disabled label-width="100px">
                    <el-form-item label="所属单位:">
                        <el-input v-model="addData.orgName" placeholder="请填写"></el-input>
                    </el-form-item>

                    <el-form-item label="问题名称:">
                        <el-input v-model="addData.problemName" placeholder="请填写"></el-input>
                    </el-form-item>

                    <el-form-item label="问题编号:">
                        <el-input v-model="addData.powerQualityProblemNo" placeholder="请填写"></el-input>
                    </el-form-item>
                    <el-form-item label="问题来源:">
                        <el-select v-model="addData.problemSources" filterable>
                            <el-option
                                v-for="item in problemData"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <!-- 在线监测超标问题 -->
                <el-form :inline="true" label-width="100px" disabled v-if="problemSources == '在线监测告警'">
                    <el-form-item label="变电站:">
                        <el-input v-model="addData.sustationName"></el-input>
                    </el-form-item>
                    <el-form-item label="母线:">
                        <el-input v-model="addData.barName"></el-input>
                    </el-form-item>
                    <el-form-item label="监测点名称:">
                        <el-input v-model="addData.measurementPointName"></el-input>
                    </el-form-item>
                    <el-form-item label="监测点编号:">
                        <el-input v-model="addData.measurementPointId"></el-input>
                    </el-form-item>
                    <el-form-item label="监测对象类型:">
                        <el-input v-model="addData.loadType"></el-input>
                    </el-form-item>
                    <el-form-item label="监测对象:">
                        <el-input v-model="addData.objName"></el-input>
                    </el-form-item>
                    <el-form-item label="电压等级:">
                        <el-input v-model="addData.voltageLevel"></el-input>
                    </el-form-item>
                </el-form>
                <!-- 普测超标 -->
                <el-form :inline="true" label-width="100px" disabled v-if="problemSources == '普测超标'">
                    <el-form-item label="普测计划名称:">
                        <el-input v-model="addData.planName" placeholder="请填写"></el-input>
                    </el-form-item>
                    <el-form-item label="所属变电站:">
                        <el-input v-model="addData.substationName" placeholder="请填写"></el-input>
                    </el-form-item>

                    <el-form-item label="母线名称:">
                        <el-input v-model="addData.busBarName" placeholder="请填写"></el-input>
                    </el-form-item>

                    <el-divider content-position="left" style="font-size: 18px; font-weight: bolder">
                        问题指标
                    </el-divider>

                    <el-form-item label="稳态指标:">
                        <el-checkbox-group v-model="addData.steadyIndicator">
                            <el-checkbox v-for="(item, ind) in steadyIndicatorList" :key="ind" :label="item.code">
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <el-form-item label="暂态指标:">
                        <el-checkbox-group v-model="addData.transientIndicators">
                            <el-checkbox v-for="(item, ind) in transientIndicatorsList" :key="ind" :label="item.code">
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
                <!-- 用户投诉 -->
                <el-form :inline="true" label-width="100px" disabled v-if="problemSources == '用户投诉'">
                    <el-form-item label="用户投诉名称:">
                        <el-input v-model="addData.userName" placeholder="请填写"></el-input>
                    </el-form-item>
                    <el-form-item label="投诉用户编号:">
                        <el-input v-model="addData.userNo" placeholder="请填写"></el-input>
                    </el-form-item>

                    <el-form-item label="投诉时间:">
                        <el-input v-model="addData.complaintTime" placeholder="请填写"></el-input>
                    </el-form-item>

                    <el-form-item label="投诉内容:">
                        <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4 }"
                            style="width: 400px"
                            placeholder="请输入内容"
                            v-model="addData.complaintContent"
                        ></el-input>
                    </el-form-item>

                    <el-divider content-position="left" style="font-size: 18px; font-weight: bolder">
                        问题指标
                    </el-divider>

                    <el-form-item label="稳态指标:">
                        <el-checkbox-group v-model="addData.steadyIndicator">
                            <el-checkbox v-for="(item, ind) in steadyIndicatorList" :key="ind" :label="item.code">
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <el-form-item label="暂态指标:">
                        <el-checkbox-group v-model="addData.transientIndicators">
                            <el-checkbox v-for="(item, ind) in transientIndicatorsList" :key="ind" :label="item.code">
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>

                <!-- 终端异常 -->
                <el-form :inline="true" label-width="auto" disabled v-if="problemSources == '终端异常'">
                    <el-form-item label="异常终端名称:">
                        <el-input v-model="addData.abnormalDevName" placeholder="请填写"></el-input>
                    </el-form-item>
                    <el-form-item label="发现异常时间:">
                        <el-input v-model="addData.abnormalDevTime" placeholder="请填写"></el-input>
                    </el-form-item>
                    <br />
                    <el-form-item label="终端异常描述:">
                        <el-input
                            type="textarea"
                            style="width: 400px"
                            :autosize="{ minRows: 2, maxRows: 4 }"
                            v-model="addData.eventDescription"
                        ></el-input>
                    </el-form-item>
                    <el-divider content-position="left" style="font-size: 18px; font-weight: bolder">
                        问题指标
                    </el-divider>

                    <el-form-item label="稳态指标:">
                        <el-checkbox-group v-model="addData.steadyIndicator">
                            <el-checkbox v-for="(item, ind) in steadyIndicatorList" :key="ind" :label="item.code">
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <br />
                    <el-form-item label="暂态指标:">
                        <el-checkbox-group v-model="addData.transientIndicators">
                            <el-checkbox v-for="(item, ind) in transientIndicatorsList" :key="ind" :label="item.code">
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="流程" name="2">
                <Filling v-if="dialogVisible" :isDisabled="true" :audit="true" ref="FillingRef" />
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import {
    getAbnormalDetail,
    getComplaintDetail,
    getGeneralSurveyDetail,
    getExcessiveDetail
} from '@/api/process-boot/electricitymanagement'
import { useDictData } from '@/stores/dictData'
import Filling from './filling.vue'

const dictData = useDictData()
const addData: any = ref({})
const FillingRef = ref()
const activeName = ref(`1`)
const dialogVisible: any = ref(false)
const problemSources = ref('')
const problemData = dictData.getBasicData('Problem_Sources')
const steadyIndicatorList = dictData.getBasicData('Steady_Indicator')
const transientIndicatorsList = dictData.getBasicData('Transient_Indicators')
const open = async (row: any) => {
    dialogVisible.value = true
    let res: any = {}
    problemSources.value = row.problemSources
    if (row.problemSources == '终端异常') {
        res = await getAbnormalDetail(row.powerQualityProblemNo)
    } else if (row.problemSources == '在线监测告警') {
        res = await getExcessiveDetail(row.powerQualityProblemNo)
    } else if (row.problemSources == '用户投诉') {
        res = await getComplaintDetail(row.powerQualityProblemNo)
    } else if (row.problemSources == '普测超标') {
        res = await getGeneralSurveyDetail(row.powerQualityProblemNo)
    }

    setTimeout(() => {
        addData.value = res.data
        FillingRef.value.open(row)
    }, 0)
}

// 取消
const handleClose = () => {
    dialogVisible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.el-tabs__content) {
    height: 100% !important;
}
</style>
