<template>
  <div class="work-inherit">
    <CardTitle :data="data">
      <template v-slot:card-title-more>
        <a :href="href">
          <p class="subtitle" v-if="chatNumber !== 0" @click.stop="onClickChatRecord">
            附带{{ chatNumber }}条聊天记录
          </p>
        </a>
      </template>
    </CardTitle>
    <div class="content">
      <div class="user">
        <User :data="data.user_info" size="small" />
      </div>
      <p class="text">{{ inheritText }}</p>
    </div>
    <WlPopUp v-model="chatPopupVisible" position="bottom" class="popup" round>
      <div v-if="chatCantReadVisible">
        <div class="header">
          <WlHeader showClose @onClose="chatPopupVisible = false">聊天记录</WlHeader>
          <div class="search">
            <WlSearch />
          </div>
        </div>
        <div class="content">
          <WlPic :src="cant_read_pic_url" />
        </div>
      </div>
      <div v-else>
        <div class="header">
          <WlHeader showClose @onClose="chatPopupVisible = false"
            >{{ data.user_info.nick_name }}的聊天记录</WlHeader
          >
        </div>
        <div class="content">
          <ClChatList
            :params="chatParams"
            :base_setting="base_setting"
            type="inheritDialogueList"
          />
        </div>
      </div>
    </WlPopUp>
  </div>
</template>

<script>
import User from "@RecordCard/components/Common/User/index.vue";
import CardTitle from "@RecordCard/components/Common/CardTitle/index.vue";
import WlPopUp from "weiling-mobile-ui/lib/WlPopUp";
import WlPic from "weiling-mobile-ui/lib/WlPic";
import WlSearch from "weiling-mobile-ui/lib/WlSearch";
import WlHeader from "weiling-mobile-ui/lib/WlHeader";
import ClChatList from "weiling-mobile-ui/lib/ClChatList";
import Store from "@RecordCard/utils/store.js";
import useGetChatDetailUrl from "@RecordCard/hooks/useGetChatDetailUrl";
import { cdn_domain } from "@RecordCard/utils/cdn";
import Api from "@RecordCard/api/chat";
export default {
  name: "WorkInherit",
  components: { User, CardTitle, WlPopUp, WlPic, WlSearch, WlHeader, ClChatList },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  inject: ["external_userid"],
  computed: {
    inheritText() {
      const { history_type = "" } = this.data;
      return history_type === "DIALOGUE_OFF_INHERIT" ? "离职继承" : "在职转移";
    },
    chatNumber() {
      const { dialogue_card_vo = {} } = this.data;
      const { message_count = 0 } = dialogue_card_vo;
      return message_count;
    },
    chatCantReadVisible() {
      const { dialogue_card_vo = {} } = this.data;
      const { can_read_dialogue = false } = dialogue_card_vo;
      return !can_read_dialogue;
    },
    chatParams() {
      const { user_info = {} } = this.data || {};
      const { id = "" } = user_info;
      return {
        type: 2,
        keyword: "",
        user_id: id,
        rc_id: Store.rc_id,
        corp_id: Store.corp_id,
        sid: Store.sid,
        external_userid: this.external_userid,
        order: [],
      };
    },
  },
  watch: {
    chatParams: {
      handler() {
        const { dialogue_card_vo = {} } = this.data;
        const { is_has_room_dialogue = true } = dialogue_card_vo;
        if (!is_has_room_dialogue) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      chatPopupVisible: false,
      base_setting: Store,
      href: "javascript:void(0)",
      cant_read_pic_url: cdn_domain + "/frontend/images/chat-no-auth.png",
    };
  },
  methods: {
    onClickChatRecord() {
      const { dialogue_card_vo = {} } = this.data;
      const { is_has_room_dialogue = true } = dialogue_card_vo;
      if (is_has_room_dialogue) {
        this.chatPopupVisible = true;
      }
    },
    getData() {
      Api.getInherentDialogueSessionChatList({ ...this.chatParams, page_count: 1, limit: 10 }).then(({ data }) => {
        const { chat_infos = [] } = data || {};
        if (chat_infos.length !== 0) {
          const { last_msg = {} } = chat_infos[0];
          const { id = "" } = last_msg;
          this.href = useGetChatDetailUrl(id);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.work-inherit {
  padding-bottom: j(10px);
  box-sizing: border-box;
  .subtitle {
    cursor: pointer;
    font-weight: 400;
    font-size: j(13px);
    color: #454545;
    margin-left: j(8px);
  }
  .content {
    margin-top: j(8px);
    @extend %flex-middle;
    .text {
      font-weight: 500;
      font-size: j(12px);
      color: var(--wl-text-color-placeholder, #c1c1c1);
      margin-left: j(6px);
    }
  }
}
.popup {
  height: 80%;
  @extend %flex-direction-column;
  .header {
    flex-shrink: 0;
    .search {
      width: 100%;
      padding: 0 j(15px);
      box-sizing: border-box;
    }
  }
  .content {
    flex: 1;
  }
}
</style>
