<template>
  <!-- input bar -->
  <div class="flex justify-between items-center min-h-input-bar bg-white">
    <button
      v-if="false"
      @click="inputType === 1 ? (inputType = 2) : (inputType = 1)"
      class="w-7 h-7 mx-2.5 text-center select-none focus:outline-none"
    >
      <i v-if="inputType === 1" class="iconfont text-primary text-xl"
        >&#xe604;</i
      >
      <i v-else class="iconfont text-primary text-xl">&#xe60d;</i>
    </button>

    <ChatInputTextVue
      v-if="inputType === 1"
      @send="handleSend"
      @click="showMenu = false"
      class="pl-5"
    />

    <!-- 没有输入文字，显示 `加号` 按钮 -->
    <!-- v-if="!inputText" -->
    <button
      v-if="false"
      @click="showMenu ? (showMenu = false) : (showMenu = true)"
      class="w-7 h-7 mx-2.5 text-center select-none focus:outline-none"
    >
      <i class="iconfont !text-xl text-black">&#xe605;</i>
    </button>
    <!-- 有输入文字，显示 `发送` 按钮 -->
    <button
      v-else
      @click="inputText.trim().length !== 0 && handleSend()"
      class="
        mx-2.5
        px-4
        py-1.5
        flex
        items-center
        rounded-md
        text-center
        select-none
        focus:outline-none
        text-app-white
      "
      style="background: rgb(7, 193, 99)"
    >
      发送
    </button>
  </div>

  <!-- input menu -->
  <div
    v-show="showMenu"
    class="min-h-input-menu flex items-center px-8 text-sm text-subtle"
  >
    <ChatInputAlbumVue />
    <!-- <ChatInputCameraVue /> -->
  </div>
</template>

<script lang="ts">
/* eslint-disable */
import { defineComponent, ref } from "vue";
import { ChatMessageTypes } from "@/types/chatMessageTypes";
import { messageStore } from "@/store/messagesStore";
import { MessageContent } from "@/types/chat-message";
import ChatInputTextVue from "./ChatInputText.vue";
import ChatInputAlbumVue from "./ChatInputAlbum.vue";
import ChatInputCameraVue from "./ChatInputCamera.vue";
import { getFromId } from "@/store/appCallerStore";
import { textInputStore } from "@/store/textInputStore";
import { v4 as uuidv4 } from "uuid";
import { useRoute } from "vue-router";
import { getUserMsg } from "@/utils/userMsg";
import { eRole } from "@/types/roleType";
import ChatDBService from "@/db/ChatDBService";

export default defineComponent({
  props: {
    serviceShowValue: String,
  },
  components: {
    ChatInputTextVue,
    ChatInputAlbumVue,
    ChatInputCameraVue,
  },

  setup(props) {
    const route = useRoute();
    const enum InputType {
      text = 1,
      voice,
    }

    const target = route.query.targetId as string;

    /** 输入框类型，文本 or 语音 */
    const inputType = ref(InputType.text);

    /** 输入文本 */
    const inputText = textInputStore.inputText;

    /** 菜单是否弹出 */
    const showMenu = ref(false);

    /** 发送消息 */
    const sendChatMessage = (payload: {
      type: ChatMessageTypes;
      content: MessageContent;
    }) => {
      messageStore.sendMessage({
        type: payload.type,
        content: payload.content,
        target: route.query.targetId as string,
      });
      textInputStore.clearTextMessage();
    };

    // 币的出售方才可以发送自己的「收款方式」给对方；
    // 出售方可能是承兑商，也可能是普通用户；
    // 如果用户找承兑商买币，那么承兑商的界面上显示「收款方式」按钮，
    // 如果用户找承兑商卖币，那么用户的界面上显示「收款方式」按钮。
    // const showReceiptInput = ref(false)

    // getOrderInfo().then((orderInfo) => {
    //     // 当前用户是承兑商还是普通用户
    //     const isUserMerchant = orderInfo.value.merchantZbId === from

    //     const merchantShowInputCase = isUserMerchant && orderInfo.value.type == 2
    //     const userShowInputCase = !isUserMerchant && orderInfo.value.type == 1

    //     if (merchantShowInputCase || userShowInputCase) {
    //         showReceiptInput.value = true
    //     }
    // })

    const handleSend = () => {
      console.log("handle send");
      const isStaff = getUserMsg()?.role === eRole.staff;
      const isUser = getUserMsg()?.role === eRole.user;

      if (isUser && route.query.outlet !== undefined) {
        /* 当前角色是客户，
        并且和网点机器人进行聊天
         */
        messageStore.displayNewMessage({
          content: {
            content: inputText.value,
          },
          from: getFromId() as string,
          target: target,
          uuid: uuidv4(),
          state: "success",
          datetime: new Date().getTime(),
          type: ChatMessageTypes.robot,
        });
        ChatDBService.getInstance().handleEveryReceive({
          msg: {
            content: {
              content: inputText.value,
            },
            from: getFromId() as string,
            target: target,
            uuid: uuidv4(),
            state: "success",
            datetime: new Date().getTime(),
            type: ChatMessageTypes.robot,
          },
          masterId: getFromId() as string,
          isChattingWithTargetId: true,
          isRoboot: true,
        });
        textInputStore.clearTextMessage();
      } else {
        sendChatMessage({ type: 1, content: { content: inputText.value } });
      }
    };

    return {
      inputType,
      inputText,
      showMenu,
      sendChatMessage,
      handleSend,
      // showReceiptInput,
    };
  },
});
</script>
<style lang="less" scoped>
.min-h-input-bar {
  min-height: 60px;
}
</style>
