<template>
    <div class="container">
        <van-form @submit="handleNext" required colon>
            <div class="content">
                <div class="header">
                    <span class="title">基本信息</span>
                    <div class="title-line"></div>
                </div>
                <div class="form">
                    <van-field v-model="formData.author" name="作者" label="作者" placeholder="请填写作者"
                        :rules="[{ required: true, message: '请填写作者' }]" />
                    <van-field v-model="formData.typeClassify" is-link readonly name="picker" label="类型" placeholder="请选择类型"
                        @click="openTypePopup" :rules="[{ required: true, message: '请选择类型' }]" />
                    <van-field v-model="formData.sourceDitch" is-link readonly name="picker" label="来源类型"
                        placeholder="请选择来源类型" @click="openSourceTypePopup"
                        :rules="[{ required: true, message: '请选择来源类型' }]" />
                    <van-field v-model="formData.sourceName" is-link readonly name="picker" label="来源渠道"
                        placeholder="请选择来源渠道" @click="openSourceChannelPopup"
                        :rules="[{ required: true, message: '请选择来源渠道' }]" />
                    <van-field v-model="formData.tagName" is-link readonly name="picker" label="标签" placeholder="请选择标签"
                        @click="openTagsPopup" :rules="[{ required: true, message: '请选择标签' }]" />
                </div>
            </div>
            <div class="footer" ref="footerRef">
                <div>
                    <van-button plain hairline round type="primary" @click="handlePre">上一步</van-button>
                </div>
                <div>
                    <van-button round type="primary" native-type="submit">下一步</van-button>
                </div>
            </div>
        </van-form>
    </div>
    <type-popup ref="typePopupRef" @confirm="confirmTypePopup"></type-popup>
    <source-type-popup ref="sourceTypePopupRef" @confirm="confirmSourceTypePopup"></source-type-popup>
    <source-channel-popup ref="sourceChannelPopupRef" @confirm="confirmSourceChannelPopup"></source-channel-popup>
    <tags-popup ref="tagsPopupRef" @confirm="confirmTagsPopup"></tags-popup>
</template>
<script setup>
import TypePopup from '../../../components/TypePopup/index.vue'
import SourceTypePopup from '../../../components/SourceTypePopup/index.vue'
import SourceChannelPopup from '../../../components/SourceChannelPopup/index.vue'
import TagsPopup from '../../../components/TagsPopup/index.vue'
import useUserStore from "@/store/user.js"
const emits = defineEmits(["confirm"])
const footerRef = ref()
const userStore = useUserStore()
const formData = ref({
    createBy: userStore.userinfo?.user?.name,
    author: userStore.userinfo?.user?.name,
    userId: userStore.userinfo?.user?.id,
})

const handlePre = () => {
    emits('confirm', { code: 'pre' })
}

const handleNext = () => {
    emits('confirm', { code: 'next', catalog: formData.value })
}

const typePopupRef = ref()
const openTypePopup = () => {
    typePopupRef.value.open()
}
const confirmTypePopup = (e) => {
    formData.value.typeClassify = e.classifyType
}

const sourceTypePopupRef = ref()
const openSourceTypePopup = () => {
    sourceTypePopupRef.value.open()
}
const confirmSourceTypePopup = (e) => {
    formData.value.sourceDitch = e.sourceName
}

const sourceChannelPopupRef = ref()
const openSourceChannelPopup = () => {
    sourceChannelPopupRef.value.open()
}
const confirmSourceChannelPopup = (e) => {
    formData.value.sourceName = e.sourceName
}

const tagsPopupRef = ref()
const openTagsPopup = () => {
    tagsPopupRef.value.open()
}
const confirmTagsPopup = (e) => {
    formData.value.tagId = e.id
    formData.value.tagName = e.title
}
</script>
<style lang="scss" scoped>
.container {
    padding-top: 10px;
    background-color: #f6f6f6;

    .content {
        padding: 10px;
        background-color: #ffffff;

        .header {
            display: flex;
            font-size: 16px;
            flex-direction: column;
            align-items: center;
            gap: 6px;

            .title {
                color: #545454;
            }

            .title-line {
                background-color: #2879fe;
                height: 4px;
                width: 15px;
                border-radius: 5px;
            }
        }

        .form {
            margin-top: 10px;

            .van-cell-group--inset {
                margin: 0;

                .van-cell {
                    margin-top: 10px;
                    font-size: 15px;
                }
            }
        }
    }

    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        padding: 15px 10px;
        box-shadow: -1px -1px 5px rgba(0, 0, 0, 0.1);
        align-items: center;
        height: 38px;
        z-index: 999;

        .info {
            font-size: 14px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .info-content {
                color: #2879fe;
            }
        }

        :deep(.van-button--normal) {
            padding: 0 20px;
            height: 35px;
            font-size: 15px;
        }
    }
}
</style>