<template>
  <div class="chat-list">
    <div class="search-header">
      <WlSearch
        class="search"
        v-model="searchData"
        @onChange="onSearchChange"
        @onClear="onSearchClear"
        :closable="true"
      />
      <slot name="search_right"></slot>
    </div>
    <div class="content">
      <WlLoadMore
        v-model="isLoading"
        :finished="isFinished"
        @load="getData"
        :finished_text="chat_list.length === 0 ? '' : '没有更多了'"
      >
        <div v-for="item in chat_list" :key="item.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">
                    <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>
import WlPic from "@packages/components/Common/WlPic/src/index.vue";
import WlLoadMore from "@packages/components/Common/WlLoadMore/src/index.vue";
import WlSearch from "@packages/components/Common/WlSearch/src/index.vue";
import Api from "./api/index";
import { chatFormatMillisecond } from "@packages/utils/moment";
import useGetChatDetailUrl from "@packages/hooks/useGetChatDetailUrl";
import { chat_no_result } from "@packages/utils/cdn";
export default {
  name: "ClChatList",
  components: {
    WlPic,
    WlLoadMore,
    WlSearch,
  },
  props: {
    params: {
      type: Object,
      default: () => {},
    },
    need_detail: {
      type: Boolean,
      default: true,
    },
    base_setting: {
      type: Object,
      default: () => {},
    },
    type: {
      type: String,
      default: "session",
    },
  },
  data() {
    return {
      searchData: "",
      chatInfos: [],
      isFinished: false,
      isLoading: false,
      page_count: 1,
      limit: 10,
      chat_no_result,
    };
  },
  computed: {
    chat_list() {
      const list = this.chatInfos.map((ele) => {
        // chat_type  1-单聊 3-群聊
        const { last_msg = {}, chat_type = 1, head_img_url = "", nick_name = "" } = ele;
        const {
          create_time = "",
          msg_type = "",
          msg_detail = "",
          from_user = {},
          id = "",
        } = 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 = "" } = this.base_setting;
        return {
          head_img_url,
          type: chat_type === 3 ? "group" : "single",
          time: chatFormatMillisecond(create_time, "YYYY年MM月DD日"),
          msg_type,
          msg_content,
          position,
          msg_id: id,
          nick_name,
          href: this.need_detail ? useGetChatDetailUrl(domain, id) : "javascript:void(0)",
          origin_data: ele,
        };
      });

      return list;
    },
  },
  methods: {
    getData() {
      if (this.page_count === 1) this.chatInfos = [];
      const { node_env = "" } = this.base_setting;
      if (this.type === "inheritDialogueList") {
        Api.getInherentDialogueSessionChatList(
          {
            ...this.params,
            keyword: this.searchData,
            page_count: this.page_count,
            limit: this.limit,
          },
          node_env
        ).then((res) => {
          const { data = {} } = res;
          const { chat_infos = [], able_to_page_down = true } = data;
          if (able_to_page_down) {
            this.isFinished = true;
          }
          this.chatInfos = chat_infos;
        });
      } else {
        Api.getSessionChatList(
          {
            ...this.params,
            keyword: this.searchData,
            page_count: this.page_count,
            limit: this.limit,
          },
          node_env
        ).then((res) => {
          const { data = {} } = res;
          const { chat_infos = [], able_to_page_down = true } = data;
          if (able_to_page_down) {
            this.isFinished = true;
          }
          this.chatInfos = chat_infos;
        });
      }
    },
    onSearchChange(val) {
      this.searchData = val;
      this.getData();
      this.$emit("onSearch", val);
    },
    onSearchClear() {
      this.searchData = "";
      this.getData();
      this.$emit("onSearch", "");
    },
    onClickChat(item) {
      const { origin_data = {} } = item;
      this.$emit("onClick", origin_data);
    },
  },
  watch: {
    params: {
      handler(val) {
        const { keyword = "" } = val;
        this.searchData = keyword;
        this.getData();
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.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: #c1c1c1;
    }
  }
}
.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;
          @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: #ff9444;
          background: rgba(255, 148, 68, 0.1);
        }
        .position {
          font-weight: 400;
          color: #979797;
          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: #c1c1c1;
    flex: 1;
    width: 100%;
    @extend %flex-middle;
    .recall {
      flex-shrink: 0;
      color: #ff7676;
    }
    .msg {
      @include textEllipsis(1);
    }
  }
}
</style>
