<template>
  <van-popup v-model="visible" position="bottom" :style="{ height: '100%' }" @open="onOpen">
    <van-nav-bar title="娑堟伅" left-arrow @click-left="onClickLeft" />
    <div class="conversation-list">
      <div class="conversation" v-for="(item, index) in conversationList" :key="index">
        <!-- C2C -->
        <div class="conversation-cell conversation-cell-C2C" @click="startConv(item)">
          <div class="profile">
            <avatar :size="42">
              <div class="peer-name">{{ item.userProfile.nick }}</div>
            </avatar>
            <van-badge v-if="item.unreadCount" class="badge" :content="item.unreadCount" max="99" />
          </div>
          <div class="message">
            <div class="title">
              <span class="name">{{ item.userProfile.nick }}</span>
              <span class="date">{{ dateTimeFormat(item.lastMessage) }}</span>
            </div>
            <div class="last-message">
              {{ item.lastMessage.messageForShow }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { Popup, NavBar, Badge } from "vant";
import TIM from "tim-js-sdk/tim-js-friendship";
import Avatar from "@components/avatar.vue";
import dayjs from "dayjs";
import { mapState } from "vuex";

export default {
  name: "message-list",
  components: {
    Avatar,
    [Popup.name]: Popup,
    [NavBar.name]: NavBar,
    [Badge.name]: Badge,
  },
  props: {
    visible: Boolean,
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      conversationList: (state) => state.conversation.conversationList.filter((x) => x.type === TIM.TYPES.CONV_C2C),
    }),
  },
  methods: {
    onOpen() {},
    onClickLeft() {
      this.$emit("update:visible", false);
      this.$emit("close");
    },
    dateTimeFormat({ lastTime }) {
      const messageDate = dayjs.unix(lastTime); // 鏃堕棿鎴�(绉�)杞棩鏈熸牸寮�
      // 鍒ゆ柇鏄惁浠婂ぉ
      if (dayjs().isSame(messageDate, "day")) {
        return messageDate.format("HH:mm");
      } else {
        // 鏄惁鏄ㄥぉ
        if (dayjs().isSame(dayjs(messageDate).subtract(1, "day"), "day")) {
          return "鏄ㄥぉ";
        } else {
          return messageDate.format("MM鏈圖D鏃�");
        }
      }
    },
    startConv({ conversationID }) {
      this.$store.dispatch("checkoutConversation", conversationID).then(() => {
        this.$emit("checkoutConversation");
      });
    },
  },
};
</script>

<style scoped lang="less">
.conversation-list {
  height: calc(100% - 46px);
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  .conversation {
    width: 100%;
    height: 79px;
    &-cell {
      width: 100%;
      height: 100%;
      display: flex;
      padding: 18px 16px;
      box-sizing: border-box;
      justify-content: space-between;
      .profile {
        position: relative;
        .peer-name {
          width: 100%;
          height: 100%;
          //border-radius: 50%;
          overflow: hidden;
          margin-right: 16px;
          background: #0e71ff;
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .badge {
          position: absolute;
          right: 0;
          top: 0;
          transform: translate(50%, 0);
        }
      }
      .message {
        width: 281px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
          display: flex;
          flex-direction: row;
          width: 100%;
          align-items: center;
          justify-content: space-between;
          .name {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC, serif;
            font-weight: 400;
            color: #303133;
            line-height: 22px;
          }
          .date {
            font-size: 12px;
            font-family: PingFang SC-Regular, PingFang SC, serif;
            font-weight: 400;
            color: #909399;
            line-height: 20px;
          }
        }
        .last-message {
          width: 194px;
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC, serif;
          font-weight: 400;
          color: #909399;
          line-height: 22px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>