<template>
    <div class="container">
        <div class="title">添加爱情故事</div>
        <el-form ref="formRef" :model="formData" :rules="rules">
            <el-row>


                <el-col :span="12">
                    <el-form-item :label-width="labelWidth" label="标题" prop="love_story_title">
                        <el-input v-model='formData.love_story_title' type="text" placeholder='请输入标题'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label-width="labelWidth" label="作者" prop="love_story_author">
                        <el-input v-model='formData.love_story_author' type="text" placeholder='请输入作者'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label-width="labelWidth" label="地点" prop="love_story_place">
                        <el-input v-model='formData.love_story_place' type="text" placeholder='请输入地点'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label-width="labelWidth" label="日期" prop="love_story_date">
                        <el-date-picker v-model="formData.love_story_date" type="date" value-format="YYYY-MM-DD"
                            placeholder="日期" />
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item :label-width='labelWidth' label='封面' prop='love_story_cover'>
                        <input ref="love_story_cover" type="file" accept=".jpg,.png,.jpeg">
                    </el-form-item>
                </el-col>

                <el-col :span='12'>
                    <el-form-item :label-width='labelWidth' label='音乐' prop='love_story_music'>
                        <input ref="love_story_music" type="file" accept=".mp3,.m4a,.flac">
                    </el-form-item>
                </el-col>
                <client-only>
                    <el-col :span="24">
                        <el-form-item :label-width="labelWidth" label="内容" prop="love_story_content">
                            <RichText v-model='formData.love_story_content' :min-height='196'></RichText>
                        </el-form-item>
                    </el-col>
                </client-only>

            </el-row>
        </el-form>

        <div class="btn-box">
            <button class="liuguang-btn" @click="router.back()">
                返回
            </button>
            <button class="liuguang-btn" @click="handleAddClick(formRef)">
                提交
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </div>
</template>
  
<script setup>
import { ElMessage } from 'element-plus'

// --业务参数
const router = useRouter()
const love_story_music = ref(null)
const love_story_cover = ref(null)


// --业务方法



// --基础参数
const isBtnLod = ref(false);
const formRef = ref();
const labelWidth = 90;
const formData = reactive({});

const uoloadData = ref({
    dirName: "LoveStory"
})

const rules = reactive({
    love_story_title: [
        {
            required: true,
            message: '标题不能为空'
        }
    ],
    love_story_place: [
        {
            required: true,
            message: '地点不能为空'
        }
    ],
    love_story_date: [
        {
            required: true,
            message: '日期不能为空'
        }
    ],

});



// --基础方法

// 打开弹窗时执行

const handleAddClick = async (formEl) => {
    if (!formEl) return;
    formEl.validate(async (valid) => {
        if (!valid) {
            return;
        }
        if (!love_story_cover.value.value) {
            ElMessage({
                message: "请上传封面",
                type: 'error',
            })
        }

        useFetch('/api/loveStory/addLoveStory', {
            method: "post", body: {
                love_story_title: formData.love_story_title,
                love_story_author: formData.love_story_author,
                love_story_place: formData.love_story_place,
                love_story_date: formData.love_story_date,
                love_story_cover: love_story_cover.value.value,
                love_story_music: love_story_music.value.value,
                love_story_content: formData.love_story_content,
            }
        }).then(res => {
            let resvalue = res.data.value
            if (resvalue.code == 0) {
                ElMessage({
                    message: "提交成功",
                    type: 'success',
                })
                formData.value = {}
                setTimeout(() => {
                    router.push("/love-story/1")
                }, 2000);
            } else {
                ElMessage({
                    message: resvalue.msg,
                    type: 'error',
                })
            };
        })
    });
};

</script>
  
<style lang="scss" scoped>
.title {
    display: flex;
    justify-content: center;
    font-size: 25px;
    font-weight: bold;
    margin: 50px 0;
}

.btn-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
}

.btn-box button:nth-child(1) {
    margin-right: 30px;
}

.liuguang-btn {
    width: 200px;
    height: 70px;
    background: linear-gradient(to left top, pink 50%, rgb(247, 189, 201) 50%);
    border-style: none;
    color: #fff;
    font-size: 23px;
    letter-spacing: 3px;
    font-family: 'Lato';
    font-weight: 600;
    outline: none;
    cursor: pointer;
    position: relative;
    padding: 0px;
    overflow: hidden;
    transition: all .5s;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}

.liuguang-btn span {
    position: absolute;
    display: block;
}

.liuguang-btn span:nth-child(1) {
    height: 3px;
    width: 200px;
    top: 0px;
    left: -200px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), #f6e58d);
    border-top-right-radius: 1px;
    border-bottom-right-radius: 1px;
    animation: span1 2s linear infinite;
    animation-delay: 1s;
}

@keyframes span1 {
    0% {
        left: -200px
    }

    100% {
        left: 200px;
    }
}

.liuguang-btn span:nth-child(2) {
    height: 70px;
    width: 3px;
    top: -70px;
    right: 0px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #f6e58d);
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    animation: span2 2s linear infinite;
    animation-delay: 2s;
}

@keyframes span2 {
    0% {
        top: -70px;
    }

    100% {
        top: 70px;
    }
}

.liuguang-btn span:nth-child(3) {
    height: 3px;
    width: 200px;
    right: -200px;
    bottom: 0px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0), #f6e58d);
    border-top-left-radius: 1px;
    border-bottom-left-radius: 1px;
    animation: span3 2s linear infinite;
    animation-delay: 3s;
}

@keyframes span3 {
    0% {
        right: -200px;
    }

    100% {
        right: 200px;
    }
}

.liuguang-btn span:nth-child(4) {
    height: 70px;
    width: 3px;
    bottom: -70px;
    left: 0px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0), #f6e58d);
    border-top-right-radius: 1px;
    border-top-left-radius: 1px;
    animation: span4 2s linear infinite;
    animation-delay: 4s;
}

@keyframes span4 {
    0% {
        bottom: -70px;
    }

    100% {
        bottom: 70px;
    }
}

.liuguang-btn:hover {
    transition: all .5s;
    transform: rotate(-3deg) scale(1.1);
    box-shadow: 0px 3px 5px rgba(0, 0, 0, .4);
}

.liuguang-btn:hover span {
    animation-play-state: paused;
}
</style>
  