<template>
    <view class="quick-access">
        <view class="quick-access-scroll">
            <view
                class="quick-access-item"
                v-for="(item, index) in itemList"
                :key="index"
                @click="sendReply(item)"
            >
                <image
                    class="quick-access-item-bg"
                    src="/static/quick/quick_icon_bg.png"
                    mode="aspectFill"
                ></image>
                <view class="quick-access-item-title">
                    <image :src="item.icon"></image>
                    <text>{{ item.title }}</text>
                </view>
                <text class="quick-access-item-content">{{
                    item.content
                }}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { onMounted, ref } from "vue";
const itemList = ref([]);

const emits = defineEmits(["replySent"]);

const sendReply = (item) => {
    emits("replySent", item); // 向父组件传递数据
};

onMounted(() => {
    initData();
});

const initData = () => {
    itemList.value = [
        {
            icon: "/static/quick/quick_icon_yuding.png",
            title: "快速预定",
            content: "预定门票、房间、餐食",
            type: "Command.quickBooking",
        },
        {
            icon: "/static/quick/quick_icon_find.png",
            title: "探索发现",
            content: "探索玩法、出片佳地",
            type: "Command.discovery",
        },
        {
            icon: "/static/quick/quick_icon_order.png",
            title: "订单/工单",
            content: "我的订单/工单",
            type: "MyOrder",
        },
        {
            icon: "/static/quick/quick_icon_call.png",
            title: "呼叫服务",
            content: "加水、客房服务等",
            type: "Command.createWorkOrder",
        },
    ];
};
</script>

<style lang="scss" scoped>
.quick-access {
    width: 100%;

    &-scroll {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .quick-access-item {
        flex: 0 0 104px;
        border-radius: 8px;
        margin: 4px 4px 8px 4px;
        box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
        padding: 12px;
        display: inline-flex;
        flex-direction: column;

        position: relative;

        &:first-child {
            margin-left: 12px;
        }

        &:last-child {
            margin-right: 12px;
        }

        .quick-access-item-bg {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            border-radius: 8px;
            width: 128px;
            height: 56px;
        }

        .quick-access-item-title {
            display: flex;
            align-items: center;
            z-index: 1;

            image {
                width: 16px;
                height: 16px;
                margin-right: 4px;
            }

            text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 12px;
                color: #201f32;
                line-height: 16px;
            }
        }

        .quick-access-item-content {
            z-index: 1;
            margin-top: 4px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #678cad;
            line-height: 18px;
        }
    }
}
</style>
