<template>
    <el-dialog draggable :title="title" v-model="formVisible" width="30%" :before-close="closeDialog">
        <el-form :model="formdata" label-width="100px" :rules="rules" ref="ruleForm">
            <el-form-item label="模板名称" prop="name">
                <el-input placeholder="模板名称" v-model="formdata.name" style="width: 100%" maxlength="32" show-word-limit @input="handleInput"></el-input>
            </el-form-item>
            <el-form-item label="部门" prop="deptId">
                <Area
                    v-model="formdata.deptId"
                    style="width: 100%"
                    collapse-tags
                    :props="{ multiple: true, label: 'name', value: 'id', emitPath: false }"
                />
            </el-form-item>

            <el-form-item label="模板类型" prop="reportType">
                <el-select style="width: 100%" v-model="formdata.reportType" placeholder="请选择模板类型" filterable>
                    <el-option
                        v-for="item in classificationData"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="报表类型" prop="reportForm">
                <el-select style="width: 100%" v-model="formdata.reportForm" placeholder="请选择报表类型" filterable>
                    <el-option
                        v-for="item in reportFormList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="preservation">确 定</el-button>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import Area from '@/components/form/area/index.vue'
import { getCustomReportTemplateById } from '@/api/harmonic-boot/luckyexcel'
import { ref, reactive } from 'vue'
const emit = defineEmits(['submitForm'])
const title = ref('')
const list = ref({})
const ruleForm = ref()
const formVisible = ref(false)
const classificationData = [
    {
        label: '电能质量报表类型',
        id: '1'
    },
    {
        label: '用能报表类型',
        id: '2'
    }
]
const reportFormList = [
    {
        value: '1',
        label: '分析报表'
    },
    {
        value: '2',
        label: '统计报表'
    },
    {
        value: '3',
        label: '自定义报表'
    }
]
const rules = {
    name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
    deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
    reportType: [{ required: true, message: '请选择模板类型', trigger: 'change' }],
    reportForm: [{ required: true, message: '请选择报表类型', trigger: 'change' }]
}
const formdata = ref({
    name: '',
    deptId: [],
    reportType: '',
    reportForm: ''
})
// 确定
const preservation = () => {
    ruleForm.value.validate((valid: boolean) => {
        if (valid) {
            emit('submitForm', formdata.value, title.value)
            formVisible.value = false
        }
    })
}

// 关闭
const closeDialog = () => {
    formVisible.value = false
}
const open = (text: string, row?: any) => {
    title.value = text
    if (row.id) {
        getCustomReportTemplateById({ id: row.id }).then(res => {
            formdata.value = res.data
            formdata.value.deptId = res.data.valueTitle.split(',')
        })
    }

    formVisible.value = true
}

const handleInput = (value: string) => {
    // 过滤空格
    const filteredValue = value.replace(/\s/g, '')
    if (filteredValue !== value) {
        formdata.value.name = filteredValue
    }
}

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