<template>
    <div class="add-and-edit-form">
        <!-- 基本信息表单 -->
        <TitleTip title="基本信息" />
        <el-form
            ref="addAndEditForm"
            label-width="120px"
            :model="addAndEditForm"
            :rules="addAndEditFormRules"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="addAndEditForm.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="类型" prop="type">
                        <el-input v-model="addAndEditForm.type" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="标签名称" prop="name">
                        <el-input v-model="addAndEditForm.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="标签属性" prop="type">
                        <el-input v-model="addAndEditForm.type" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="描述" prop="description">
                        <el-input
                            clearable
                            type="textarea"
                            placeholder="请输入描述"
                            :autosize="{ minRows: 3, maxRows: 6 }"
                            v-model="addAndEditForm.description"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <!-- 底部按钮 -->
        <el-row class="add-and-edit-form-footer">
            <el-button size="mini" type="info" @click="handleCancel">
                取消
            </el-button>
            <el-button size="mini" type="primary" @click="handleSave">
                保存
            </el-button>
        </el-row>
    </div>
</template>

<script>
import TitleTip from '@/components/TitleTip'
import UploadFileFormData from '@/components/UploadFileFormData'
export default {
    name: 'AddAndEditForm',
    components: { TitleTip, UploadFileFormData },
    data() {
        return {
            currentTab: '1', // 当前激活的Tab名称
            // 基本信息表单
            addAndEditForm: {
                name: '', // 名称
                type: '', // 类型
                file: [], // 附件
                cover: [], // 封面
                version: '', // 版本
                belongProduct: '', // 归属产品
                description: '', // 描述
            },
            // 基本信息表单校验规则
            addAndEditFormRules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请输入类型', trigger: 'blur' },
                ],
                file: [
                    { required: true, message: '请上传附件', trigger: 'blur' },
                ],
                cover: [
                    { required: true, message: '请上传封面', trigger: 'blur' },
                ],
                version: [
                    {
                        required: true,
                        message: '请输入版本',
                        trigger: 'blur',
                    },
                ],
                description: [
                    {
                        required: true,
                        message: '请输入描述',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },

    methods: {
        // 取消操作
        handleCancel() {
            // 重置基本信息表单
            this.$refs.addAndEditForm?.resetFields()

            this.$emit('closeDialog', false)
        },
        // 保存操作：校验所有表单
        async handleSave() {
            this.$message.closeAll()
            try {
                await this.$refs.addAndEditForm.validate()

                this.$message.success('保存成功')
                this.$emit('closeDialog', true)
            } catch (error) {
                // 校验失败，提示用户
                this.$message.error('请完善所有必填项后再保存')
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.add-and-edit-form {
    width: 100%;
    height: 100%;
    padding-bottom: 70px;

    .add-and-edit-form-footer {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 60px;
        padding: 10px;
        border-top: 1px solid #e5e6e7;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
