<template>
  <div class="chat-list" data-weiling-mobile-ui-bc-chat-list>
    <div class="search-header">
      <WlSearch
        class="search"
        v-model="search_value"
        @onChange="onSearchChange"
        @onClear="onSearchClear"
        :closable="true"
      />
      <slot name="search_right"></slot>
    </div>
    <div class="content">
      <WlLoadMore
        v-model="is_loading"
        :finished="is_finished"
        @load="getData"
        :finished_text="chat_list.length === 0 ? '' : '没有更多了'"
      >
        <div v-for="item in chat_list" :key="item.msg_id">
          <a :href="item.href">
            <div class="chat-list-item" @click="onClickChat(item)">
              <div class="avatar">
                <WlPic :src="item.head_img_url" />
              </div>
              <div class="content">
                <div class="base-wrap">
                  <div class="base" v-if="item.nick_name">
                    <p class="name">{{ item.nick_name }}</p>
                    <div class="position" v-if="item.position">
                      {{ item.position }}
                    </div>
                    <div class="group" v-if="item.type === 'group'">外部群</div>
                  </div>
                  <p class="time">{{ item.time }}</p>
                </div>
                <div class="text">
                  <p class="recall" v-if="item.msg_type === 'recall'">
                    [已撤回]
                  </p>
                  <p class="msg">{{ item.msg_content }}</p>
                </div>
              </div>
            </div>
          </a>
        </div>
        <div class="empty" v-if="chat_list.length === 0">
          <div class="pic">
            <WlPic :src="chat_no_result" />
          </div>
          <p class="text">没有找到相关聊天记录</p>
        </div>
      </WlLoadMore>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "BCChatList",
};
</script>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { chat_no_result } from "@mobileUI/utils/cdn";
import { chatFormatMillisecond } from "@mobileUI/utils/dayjs";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";
import useGetChatDetailUrl from "@mobileUI/hooks/useGetChatDetailUrl";
import WlSearch from "@mobileUI/components/WlSearch/src/index.vue";
import WlLoadMore from "@mobileUI/components/WlLoadMore/src/index.vue";
import { getSessionChatList, getInherentDialogueSessionChatList } from "./api";
type TType = "inheritDialogueList";
type Props = {
  env_data: TEnv.TEnvData;
  type: TType;
  keyword: string;
  user_id?: string;
  need_detail?: boolean;
  external_userid?: string;
};
const props = withDefaults(defineProps<Props>(), {
  env_data: () => {
    return {
      sid: "",
      token: "",
      domain: "",
      corp_id: "",
      node_env: "dev",
      app_id: "",
      card_resource: "",
    };
  },
  type: "inheritDialogueList",
  keyword: "",
  user_id: "",
  need_detail: true,
  external_userid: "",
});

const emit = defineEmits<{
  (e: "onSearch", val: string);
  (e: "onClick", val: string);
}>();

const limit = 10;
const chatInfos = ref([]);
const page_count = ref(1);
const search_value = ref("");
const is_loading = ref(false);
const is_finished = ref(false);

const chat_list = computed(() => {
  return chatInfos.value.map((ele) => {
    // chat_type  1-单聊 3-群聊
    const {
      last_msg = {},
      chat_type = 1,
      head_img_url = "",
      nick_name = "",
    } = ele;
    const {
      id = "",
      msg_type = "",
      from_user = {},
      msg_detail = "",
      create_time = "",
    } = last_msg;
    const { position = "", nick_name: from_user_name } = from_user;
    let msg_content = "";
    if (msg_type === "text") {
      const { text = {} } = msg_detail;
      const { content = "" } = text;
      msg_content = chat_type === 3 ? `${from_user_name}: ${content}` : content;
    } else if (msg_type === "image") {
      msg_content = "[图片]";
    } else if (msg_type === "voice") {
      msg_content = "[语音]";
    } else if (msg_type === "emotion") {
      msg_content = "[表情]";
    } else if (msg_type === "recall") {
      const { text = {} } = msg_detail;
      const { content = "" } = text;
      msg_content = content;
    }
    const { domain = "" } = props.env_data;
    return {
      msg_type,
      position,
      nick_name,
      msg_id: id,
      msg_content,
      head_img_url,
      origin_data: ele,
      type: chat_type === 3 ? "group" : "single",
      time: chatFormatMillisecond(create_time, "YYYY-MM-DD"),
      href: props.need_detail
        ? useGetChatDetailUrl(domain, id)
        : "javascript:void(0)",
    };
  });
});

const getData = () => {
  if (page_count.value === 1) chatInfos.value = [];
  const { node_env = "", corp_id, sid } = props.env_data;
  if (props.type === "inheritDialogueList") {
    getInherentDialogueSessionChatList(
      {
        sid,
        corp_id,
        external_userid: props.external_userid,
        user_id: props.user_id,
        keyword: search_value.value,
        page_count: page_count.value,
        limit,
      },
      node_env,
    ).then((res) => {
      const { data = {} } = res;
      const { chat_infos = [], able_to_page_down = true } = data;
      if (able_to_page_down) {
        is_finished.value = true;
      }
      chatInfos.value = chat_infos;
    });
  } else {
    getSessionChatList(
      {
        sid,
        corp_id,
        external_userid: props.external_userid,
        user_id: props.user_id,
        keyword: search_value.value,
        page_count: page_count.value,
        limit,
      },
      node_env,
    ).then((res) => {
      const { data = {} } = res;
      const { chat_infos = [], able_to_page_down = true } = data;
      if (able_to_page_down) {
        is_finished.value = true;
      }
      chatInfos.value = chat_infos;
    });
  }
};

const onSearchChange = (val) => {
  search_value.value = val;
  getData();
  emit("onSearch", val);
};

const onSearchClear = () => {
  onSearchChange("");
};

const onClickChat = (item) => {
  const { origin_data = {} } = item;
  emit("onClick", origin_data);
};

watch(
  () => props.keyword,
  (val) => {
    search_value.value = val;
    getData();
  },
  {
    immediate: true,
  },
);
</script>

<style lang="scss">
.chat-list[data-weiling-mobile-ui-bc-chat-list] {
  height: 100%;
  @extend %flex-direction-column;

  .search-header {
    flex-shrink: 0;
    padding: 0 j(15);

    margin-bottom: j(4);
    box-sizing: border-box;
    @extend %flex-middle-center;

    .search {
      flex: 1;
    }
  }

  .content {
    flex: 1;

    .empty {
      @extend %flex-direction-column;
      @extend %flex-middle-center;

      .pic {
        width: 100%;
      }

      .text {
        font-weight: 600;
        font-size: j(18);
        color: var(--wl-text-color-placeholder);
      }
    }
  }

  .chat-list-item {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding-left: j(15);

    .avatar {
      width: j(48);
      height: j(48);
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      margin-right: j(7);
    }

    .content {
      box-sizing: border-box;
      flex: 1;
      padding: j(10) j(15);
      @include halfBorder("bottom", #f1f1f1);

      .base-wrap {
        margin-bottom: j(6);
        @extend %flex-middle;
        .base {
          flex: 1;
          @extend %flex-middle;

          .name {
            font-weight: 500;
            font-size: j(17);
            color: #0e0e0e;
            flex: 1;
            width: 100%;
            @include textEllipsis(1);
          }

          .position,
          .group {
            padding: j(3) j(6);
            box-sizing: border-box;
            border-radius: j(4);
            font-size: j(12);
            flex-shrink: 0;
            margin-left: j(3);
          }

          .group {
            font-weight: 500;
            color: var(--wl-warning-color);
            background: rgba(255, 148, 68, 0.1);
          }

          .position {
            font-weight: 400;
            color: var(--wl-text-color-secondary-2);
            background: rgba(151, 151, 151, 0.1);
          }
        }

        .time {
          flex-shrink: 0;
          font-weight: 500;
          font-size: j(12);
          color: #dadada;
        }
      }
    }

    .text {
      font-weight: 400;
      font-size: j(15);
      color: var(--wl-text-color-placeholder);
      flex: 1;
      width: 100%;
      @extend %flex-middle;

      .recall {
        flex-shrink: 0;
        color: #ff7676;
      }

      .msg {
        @include textEllipsis(1);
      }
    }
  }
}
</style>
