<template>
    <van-popup v-model:show="show" position="bottom" :close-on-click-overlay="false" safe-area-inset-bottom @close="handleClose">
        <div class="container">
            <div class="header-placeholder">
                <div class="header">
                    <span class="reset" @click="handleReset">重置</span>
                    <span class="confirm" @click="handleConfirm">确认</span>
                </div>
            </div>
            <div class="content">
                <div class="item" v-for="(item, index) in dataList" :key="index"
                    :class="{ active: selectItemIndex == index }" @click="selectItemIndex = index">
                    <span>{{ item.classifyType }}</span>
                </div>
            </div>
        </div>
    </van-popup>
</template>
<script setup>
import { selectTypeList } from '@/api/publish'
const emits = defineEmits(["confirm", "close"])

const dataList = ref([])
const getList = async () => {
    const res = await selectTypeList()
    dataList.value = res.data
}
getList()

const selectItemIndex = ref(null)
const handleConfirm = () => {
    emits('confirm', dataList.value[selectItemIndex.value])
    show.value = false
}
const handleReset = () => {
    selectItemIndex.value = null
}
const handleClose = () => {
    emits('close')
}

const show = ref(false)
const open = () => {
    show.value = true
}
const close = () => {
    show.value = false
}
defineExpose({
    open,
    close
})
</script>
<style lang="scss" scoped>
.container {
    max-height: 50vh;
    padding: 0 20px;

    .header-placeholder {
        height: 55px;

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
            position: fixed;
            width: calc(100vw - 40px);
            height: 55px;
            background-color: #ffffff;
            color: #545454;

            .confirm {
                color: #0e7ce3;
            }
        }
    }

    .content {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        padding-bottom: 15px;

        .item {
            background-color: #eef1f3;
            flex: 0 0 calc((100vw - 70px) / 3);
            padding: 15px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            color: #676767;
            font-size: 15px;

            span {
                max-width: 80%;
            }
        }

        .active {
            background-color: #0e7ce3;
            color: #ffffff;
        }
    }
}
</style>