<template>
    <el-divider content-position="left" style="font-size: 18px; font-weight: bolder">问题基本信息</el-divider>
    <el-form :inline="true" label-width="auto">
        <el-form-item label="所属单位:">
            <el-input v-model="addData.orgName" clearable placeholder="请填写" disabled></el-input>
        </el-form-item>

        <el-form-item label="问题来源:">
            <el-select disabled v-model="addData.problemSources" placeholder="请选择" 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-item label="问题名称:">
            <el-input v-model="addData.problemName" clearable placeholder="请填写" disabled></el-input>
        </el-form-item>

        <el-form-item label="问题编号:">
            <el-input v-model="addData.powerQualityProblemNo" disabled clearable placeholder="请填写"></el-input>
        </el-form-item>
    </el-form>

    <el-divider content-position="left" style="font-size: 18px; font-weight: bolder">填报流程</el-divider>

    <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane label="原因分析" name="0">
            <process1
                :addData="addData"
                :List="List"
                :disabled="disabled"
                ref="process0Ref"
                @handleClose="handleClose"
            />
        </el-tab-pane>
        <el-tab-pane label="计划整改措施" name="1">
            <process2
                :addData="addData"
                :List="List"
                :disabled="disabled"
                ref="process1Ref"
                @handleClose="handleClose"
            />
        </el-tab-pane>
        <el-tab-pane label="实际采取措施" name="2">
            <process3
                :addData="addData"
                :List="List"
                :disabled="disabled"
                ref="process2Ref"
                @handleClose="handleClose"
            />
        </el-tab-pane>
        <el-tab-pane label="成效分析" name="3">
            <process4
                :addData="addData"
                :List="List"
                :disabled="disabled"
                ref="process3Ref"
                @handleClose="handleClose"
            />
        </el-tab-pane>
    </el-tabs>

    <!-- 原因分析 0 -->
    <!-- <process1
        v-if="control == 0"
        :addData="addData"
        :List="List"
        :disabled="disabled"
        ref="process0Ref"
        @handleClose="handleClose"
    /> -->
    <!-- 计划整改措施 1-->
    <!-- <process2
        v-if="control == 1"
        :addData="addData"
        :List="List"
        :disabled="disabled"
        ref="process1Ref"
        @handleClose="handleClose"
    /> -->
    <!-- 实际采取措施 2 -->
    <!-- <process3
        v-if="control == 2"
        :addData="addData"
        :List="List"
        :disabled="disabled"
        ref="process2Ref"
        @handleClose="handleClose"
    /> -->
    <!-- 成效分析  3 -->
    <!-- <process4
        v-if="control == 3"
        :addData="addData"
        :List="List"
        :disabled="disabled"
        ref="process3Ref"
        @handleClose="handleClose"
    /> -->

    <!-- 填报 -->
    <div style="display: flex; justify-content: center; margin-top: 10px" v-show="!disabled">
        <el-button type="primary" @click="Submit">提交审核</el-button>
        <el-button @click="handleClose">取消</el-button>
    </div>
    <!-- 审核 -->
    <el-form
        label-width="100px"
        :model="form"
        ref="ruleFormRef"
        :rules="rules"
        v-if="disabled && audit && flag && control == active"
    >
        <el-form-item prop="checkComment" label="审核意见:">
            <el-input
                type="textarea"
                style="width: 400px"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入内容"
                v-model="form.checkComment"
            ></el-input>
        </el-form-item>
    </el-form>
    <div
        style="display: flex; justify-content: center; margin-top: 10px"
        v-if="disabled && audit && flag && control == active"
    >
        <el-button type="primary" @click="adopt(1)">通过</el-button>
        <el-button type="primary" @click="adopt(0)">不通过</el-button>
        <el-button @click="handleClose">取消</el-button>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useDictData } from '@/stores/dictData'
import process1 from './process1.vue'
import process2 from './process2.vue'
import process3 from './process3.vue'
import process4 from './process4.vue'
import { ElMessage } from 'element-plus'
import {
    getAbnormalDetail,
    getComplaintDetail,
    getGeneralSurveyDetail,
    getExcessiveDetail,
    checkPowerQuality
} from '@/api/process-boot/electricitymanagement'
const emit = defineEmits(['beforeClose'])
const dictData = useDictData()
const addData: any = ref({})
const List: any = ref({})
const active = ref(4)
const control = ref()
const ruleFormRef = ref()
const activeName = ref('0')
const process0Ref = ref()
const process1Ref = ref()
const process2Ref = ref()
const process3Ref = ref()
const form = ref({
    checkComment: ''
})
const disabled = ref(false)
const prop = defineProps({
    isDisabled: {
        type: Boolean,
        default: false
    },
    audit: {
        type: Boolean,
        default: false
    },
    flag: {
        type: Boolean,
        default: false
    }
})

const problemData = dictData.getBasicData('Problem_Sources')
const open = async (row: any) => {
    addData.value = row
    let res: any = {}
    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(() => {
        List.value = res.data
        if (res.data.filePathYyfx == null) {
            active.value = 0
        } else if (res.data.filePathJhzg == null) {
            active.value = 1
            if (row.reportProcessStatus == 'Fail') {
                active.value = 0
            }
        } else if (res.data.filePathSjcq == null) {
            active.value = 2
            if (row.reportProcessStatus == 'Fail') {
                active.value = 1
            }
        } else if (res.data.filePathZlxg == null) {
            active.value = 3
            if (row.reportProcessStatus == 'Fail') {
                active.value = 2
            }
        }

        // 审核判断
        if (prop.audit) {
            active.value == 0 ? 0 : (active.value = active.value - 1)
        }

        control.value = active.value == 4 ? 3 : active.value
    }, 0)
}
const rules = {
    checkComment: [{ required: true, message: '请输入审核意见', trigger: 'blur' }]
}

const step = (e: number) => {
    if (active.value >= e) {
        control.value = e
        if (active.value == e && !prop.isDisabled) {
            disabled.value = false
        } else {
            disabled.value = true
        }
    }
}
onMounted(() => {
    if (prop.isDisabled) {
        disabled.value = prop.isDisabled
    }
})
// 提交
const Submit = () => {
    if (control.value == 0) {
        process0Ref.value.submit(0)
    } else if (control.value == 1) {
        process1Ref.value.submit(1)
    } else if (control.value == 2) {
        process2Ref.value.submit(2)
    } else if (control.value == 3) {
        process3Ref.value.submit(3)
    }
}
// 取消
const handleClose = () => {
    form.value.checkComment = ''
    emit('beforeClose')
}

// 审核
const adopt = (type: number) => {
    ruleFormRef.value.validate((valid: any) => {
        if (valid) {
            const adminInfo = window.localStorage.getItem('adminInfo')
            const adminName = adminInfo ? JSON.parse(adminInfo).name : ''

            checkPowerQuality({
                checkComment: form.value.checkComment,
                checkPerson: adminName,
                checkResult: type,
                powerQualityProblemNo: addData.value.powerQualityProblemNo,
                reportProcess: addData.value.reportProcess
            }).then((res: any) => {
                ElMessage.success(res.message)
                handleClose()
            })
        }
    })
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.el-upload-list__item) {
    width: 400px;
}
:deep(.el-tabs__content) {
    height: auto !important;
}
</style>
