<template>
    <el-dialog draggable v-model="dialogVisible" :title="title" width="80%" :before-close="handleClose">
        <div v-loading="loading">
            <div style="height: 45vh">
                <vxe-table height="auto" v-bind="defaultAttribute" :data="List">
                    <vxe-column field="dept" title="负责单位"></vxe-column>
                    <vxe-column field="substation" title="变电站名称"></vxe-column>
                    <vxe-column field="deviceName" title="终端名称"></vxe-column>
                    <vxe-column field="lineName" title="监测点名称"></vxe-column>
                    <vxe-column
                        field="businessType"
                        title="监测对象类型"
                        :formatter="row => industry.find((item: any) => item.id == row.cellValue)?.name || '/'"
                    ></vxe-column>
                    <vxe-column field="objectName" title="监测对象名称"></vxe-column>
                    <vxe-column
                        field="targetType"
                        title="指标类型"
                        :formatter="row => exceeded.find((item: any) => item.id == row.cellValue)?.name || '/'"
                    ></vxe-column>
                    <vxe-column
                        field="overLimitDay"
                        title="累计超标天数"
                        :formatter="row => (row.cellValue != null ? row.cellValue : '/')"
                    ></vxe-column>
                </vxe-table>
            </div>
            <el-form :model="form" ref="formRef" class="form-two mt10 alarmForm" :rules="rules" label-width="auto">
                <el-form-item label="问题描述:" prop="issueDetail">
                    <el-input
                        v-model="form.issueDetail"
                        :rows="2"
                        type="textarea"
                        clearable
                        style="width: 100%"
                        placeholder="请输入问题描述"
                    ></el-input>
                </el-form-item>

                <el-form-item label="整改意见:" prop="reformAdvice">
                    <el-input
                        v-model="form.reformAdvice"
                        :rows="2"
                        type="textarea"
                        clearable
                        style="width: 100%"
                        placeholder="请输入整改意见"
                    ></el-input>
                </el-form-item>

                <!-- <el-form-item label="编号：" prop="year">
                <div style="width: 100%; display: flex; justify-content: space-between">
                    <el-input style="width: 49%" v-model="form.year" placeholder="请输入年份">
                        <template #append>年份</template>
                    </el-input>
                    <el-input style="width: 49%" v-model="form.number" placeholder="请输入编号">
                        <template #append>编号</template>
                    </el-input>
                </div>
            </el-form-item> -->
            </el-form>
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submit" :loading="loading">发起</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, defineEmits } from 'vue'
import { useDictData } from '@/stores/dictData'
import { ElMessage } from 'element-plus'
import { report } from '@/api/process-boot/electricitymanagement'

import { defaultAttribute } from '@/components/table/defaultAttribute'
const emits = defineEmits(['onSubmit'])
const dictData = useDictData()
const dialogVisible = ref(false)
const title: any = ref('')
const industry = dictData.getBasicData('Business_Type')
const form: any = ref({})
const exceeded = dictData.getBasicData('Steady_Statis')
const loading = ref(false)
const resetForm = () => {
    form.value = {
        issueDetail: '',
        reformAdvice: '',
        year: new Date().getFullYear() + '',
        number: '0'
    }
}
const List = ref([])
resetForm()
const rules = {
    issueDetail: [{ required: true, message: '请输入问题描述', trigger: 'blur' }],
    reformAdvice: [{ required: true, message: '请输入整改意见', trigger: 'blur' }],
    year: [{ required: true, message: '请输入编号', trigger: 'blur' }],
    number: [{ required: true, message: '请输入编号', trigger: 'blur' }]
}
const formRef = ref()
const submit = () => {
    console.log('🚀 ~ open ~ form.value:', form.value)
    formRef.value.validate(valid => {
        if (valid) {
            loading.value = true
            report({
                ...form.value,
                type: title.value == '发起预警单' ? 1 : 2,
                idList: List.value.map(item => item.id)
            })
                .then(res => {
                    loading.value = false
                    ElMessage.success('发起成功')

                    dialogVisible.value = false
                    emits('onSubmit')
                })
                .catch(() => {
                    loading.value = false
                })
        } else {
            console.log('表单验证失败')
            return false
        }
    })
}

const open = (row: any) => {
    dialogVisible.value = true
    resetForm()
    List.value = row.row
    title.value = row.text

    form.value = { ...form.value, ...row.form }
}

const handleClose = () => {
    formRef.value && formRef.value.resetFields()
    dialogVisible.value = false
}

defineExpose({ open })
</script>
<style lang="scss" scoped></style>
