<template>
    <el-dialog draggable title="填报" v-model="dialogVisible" width="70%" :before-close="handleClose">
        <el-divider content-position="left" style="font-size: 18px; font-weight: bolder">问题基本信息</el-divider>
        <el-form :inline="true">
            <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="请选择">
                    <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-steps :active="active" finish-status="success" simple>
            <el-step>
                <template #title><span @click="step(0)">原因分析</span></template>
            </el-step>
            <el-step>
                <template #title><span @click="step(1)">计划整改措施</span></template>
            </el-step>
            <el-step>
                <template #title><span @click="step(2)">实际采取措施</span></template>
            </el-step>
            <el-step>
                <template #title><span @click="step(3)">成效分析</span></template>
            </el-step>
        </el-steps>

        <!-- 原因分析 0 -->
        <el-form
            :model="causeAnalysisData"
            v-if="control == 0"
            :rules="rules"
            ref="form"
            label-width="140px"
            class="form"
        >
            <el-form-item label="电网侧原因:" prop="reportProcessContentYyfx">
                <el-checkbox-group v-model="causeAnalysisData.reportProcessContentYyfx">
                    <el-checkbox v-for="(item, ind) in CauseList" :key="ind" :label="item.code">
                        {{ item.name }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-divider></el-divider>

            <el-form-item label="用户侧原因:" prop="userReportProcessContentYyfx">
                <el-checkbox-group v-model="causeAnalysisData.userReportProcessContentYyfx">
                    <el-checkbox v-for="(item, ind) in userCauseList" :key="ind" :label="item.code">
                        {{ item.name }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-row v-if="addData.problemSources == '用户投诉' || addData.problemSources == '设备异常'">
                <el-divider></el-divider>

                <el-form-item label="电网侧受影响设备:" prop="powerGridAffectDev">
                    <el-checkbox-group v-model="causeAnalysisData.powerGridAffectDev">
                        <el-checkbox v-for="(item, ind) in powerGridAffectDevList" :key="ind" :label="item.code">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-divider></el-divider>

                <el-form-item label="用户侧受影响设备:" prop="userAffectDev">
                    <el-checkbox-group v-model="causeAnalysisData.userAffectDev">
                        <el-checkbox v-for="(item, ind) in userAffectDevList" :key="ind" :label="item.code">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-row>

            <el-divider></el-divider>

            <el-form-item label="事件描述:" prop="eventDescriptionYyfx">
                <el-input
                    style="width: 400px"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea"
                    placeholder="请输入内容"
                    v-model="causeAnalysisData.eventDescriptionYyfx"
                ></el-input>
            </el-form-item>
            <el-form-item class="item" label="原因分析报告:" style="margin-top: 10px" prop="fileNameYyfx">
                <!-- <File ref="File" /> -->
            </el-form-item>
        </el-form>
        <!-- 计划整改措施 1-->

        <el-row :gutter="20"></el-row>
        <div style="display: flex; justify-content: center; margin-top: 10px">
            <el-button type="primary" class="ml20" @click="Submit">提交审核</el-button>
            <el-button type="primary" class="ml20" @click="handleClose">取消</el-button>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const addData: any = ref({})
const active = ref(1)
const control = ref()
const dialogVisible: any = ref(false)
const causeAnalysisData = ref({
    reportProcessContentYyfx: [],
    userReportProcessContentYyfx: [],
    eventDescriptionYyfx: '',
    fileNameYyfx: '', //原因分析报告文件名称
    filePathYyfx: '', //原因分析报告文件路径
    powerGridAffectDev: [],
    userAffectDev: []
})
const rules = {
    reportProcessContentYyfx: [{ required: true, message: '请选择', trigger: 'change' }],
    userReportProcessContentYyfx: [{ required: true, message: '请选择', trigger: 'change' }],
    eventDescriptionYyfx: [{ required: true, message: '请填写事件描述', trigger: 'blur' }],
    powerGridAffectDev: [{ required: true, message: '请选择', trigger: 'change' }],
    userAffectDev: [{ required: true, message: '请选择', trigger: 'change' }],
    fileNameYyfx: [{ required: true, message: '请上传文件', trigger: 'blur' }]
}

// 电网侧原因
const CauseList = dictData.getBasicData('Grid-side_Reasons')
// 用户侧原因
const userCauseList = dictData.getBasicData('User_Reasons')
// 电网侧受影响设备
const powerGridAffectDevList = dictData.getBasicData('Grid_Unit')
// 用户侧受影响设备
const userAffectDevList = dictData.getBasicData('Customer_Unit')
const OnlineList = dictData.getBasicData('Problem_Sources')

const problemData = dictData.getBasicData('Problem_Sources')
const open = (row: any) => {
    dialogVisible.value = true
    addData.value = row
}
const step = (e: number) => {
    if (active.value >= e) {
        control.value = e
    }
}

// 提交
const Submit = () => {}
// 取消
const handleClose = () => {
    dialogVisible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>
