<template>
    <el-dialog class="cn-operate-dialog" width="500px" v-model.trim="dialogVisible" :title="title">
        <el-form :inline="false" ref="formRef" :model="form" label-width="auto" class="form-one" :rules="rules">
            <el-form-item label="报表名称" prop="modelTypeName">
                <el-input maxlength="32" show-word-limit 
                    
                    
                    v-model.trim="form.modelTypeName"
                    placeholder="请输入报表名称"
                />
            </el-form-item>
            <el-form-item label="报表类型" prop="modelType">
                <el-select style="width: 100%" v-model.trim="form.modelType" placeholder="请选择报表类型">
                    <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-item label="排序" prop="sort">
                <el-input-number v-model.number="form.sort" style="width: 100%;" :min="0" />
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit" :loading="loading">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import TableStore from '@/utils/tableStore'
import { ElMessage } from 'element-plus'
import { add, update } from '@/api/user-boot/role'
import { useAdminInfo } from '@/stores/adminInfo'
import { updateSysExcel, addSysExcel } from '@/api/harmonic-boot/luckyexcel'
const adminInfo = useAdminInfo()
const tableStore = inject('tableStore') as TableStore
// do not use same name with ref
const form = reactive({
    modelTypeName: '',
    id: '',
    sort: 100,
    modelType: ''
})
const loading = ref(false)
const reportFormList = [
    {
        value: '1',
        label: '分析报表'
    },
    {
        value: '2',
        label: '统计报表'
    },
    {
        value: '4',
        label: '治理前后对比报表'
    },
    {
        value: '3',
        label: '自定义报表'
    }
]
const rules = {
    modelTypeName: [{ required: true, message: '请输入报表名称', trigger: 'blur' }],
    modelType: [{ required: true, message: '请选择报表类型', trigger: 'change' }],
    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]

}
const dialogVisible = ref(false)
const title = ref('新增菜单')
const formRef = ref()
const open = (text: string, data?: anyObj) => {
    formRef.value?.resetFields()
    title.value = text
    dialogVisible.value = true
    if (data) {
        form.id = data.id
        form.modelTypeName = data.excelName
        form.modelType = data.excelType
        form.sort = data.sort
    } else {
        form.id = ''
        form.modelTypeName = ''
        form.modelType =''
        form.sort = 100
    }
}
const submit = async () => {
    formRef.value.validate(async valid => {
        if (valid) {
            loading.value = true
            if (form.id) {
                await updateSysExcel(form)
            } else {
                await addSysExcel(form)
            }
            ElMessage.success('保存成功')
            tableStore.index()
            dialogVisible.value = false
            loading.value = false
        }
    })
}

defineExpose({ open })
</script>
