<template>
  <view
    class="quick-access flex flex-row ml-12 pt-8 pb-8 scroll-x whitespace-nowrap"
  >
    <view
      class="item border-box rounded-50 flex flex-row items-center"
      v-for="(item, index) in itemList"
      :key="index"
      @click="sendReply(item)"
    >
      <view class="flex items-center justify-center">
        <image v-if="item.icon" class="icon" :src="item.icon" />
        <text class="font-size-14 color-2D91FF line-height-20">
          {{ item.title }}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { Command } from "@/model/ChatModel";
import { SEND_MESSAGE_COMMAND_TYPE } from "@/constant/constant";

const itemList = ref([
  {
    icon: "",
    title: "快速预定",
    type: Command.quickBooking,
  },
  {
    icon: "",
    title: "探索发现",
    type: Command.discovery,
  },
  {
    icon: "",
    title: "呼叫服务",
    type: Command.callServiceCard,
  },
  {
    icon: "https://oss.nianxx.cn/mp/static/version_101/home/more.png",
    title: "更多",
    type: Command.more,
  },
]);

const sendReply = (item) => {
  // 更多服务
  if (item.type === Command.more) {
    uni.$emit("SHOW_MORE_POPUP");
    return;
  }

  // 快速预定
  if (item.type === Command.quickBooking) {
    uni.navigateTo({ url: "/pages-quick/list" });
    return;
  }

  uni.$emit(SEND_MESSAGE_COMMAND_TYPE, item);
};
</script>

<style lang="scss" scoped>
@import "./styles/index.scss";
</style>
