<template>
  <view class="IM-container">
    <status-bar :backgroundColor="'#fff'" v-if="true"></status-bar>
    <view class="IM-setting">
      <view class="IM-status">
        <image
          class="img"
          :src="
            msgInfo.mine.user_avatar || '../../static/images/user-avatar.jpg'
          "
        />
        <text>{{ msgInfo.mine.user_nickname }}</text>
        <!-- <text class="status-color"></text> -->
        <!-- <u-icon name="arrow-down">arrow-down</u-icon> -->
      </view>
      <view class="setting-icon-block">
        <u-icon
          class="u-icon icon-kefu"
          custom-prefix="custom-icon-kefu custom-icon"
          size="24"
          color="#666"
          @click="senMsgAdmin"
        ></u-icon>
        <u-icon
          class="u-icon icon-shezhi"
          custom-prefix="custom-icon-shezhi custom-icon"
          size="20"
          color="#666"
          @click="skipuIMsetting"
        ></u-icon>
      </view>
    </view>
    <favorite-loading
      class="IM-loading"
      v-show="loading"
      :color="'#fe4119'"
      text=""
      animation="spinner15"
    ></favorite-loading>
    <view class="tabs-block">
      <!-- <tui-tabs
        :tabs="tabs"
        :currentTab="currentTab"
        bottom="50%"
        :backgroundColor="'#f2f2f2'"
        :width="300"
        :itemWidth="'50%'"
        :bold="true"
        color="#000"
        selectedColor="#fd806b"
        :sliderWidth="180"
        :sliderHeight="56"
        sliderBgColor="#fff"
        :unlined="true"
        @change="handleTab"
      ></tui-tabs> -->
      <view class="IM-msg-content">
        <view class="IM-msg-node" v-if="msgList.length <= 0 && !loading">
          <view class="IM-msg-node-bg"></view>
          <view class="IM-msg-node-tips">暂无消息</view>
        </view>
        <view class="IM-msg-block">
          <scroll-view
            class="uni-swiper-list"
            scroll-y
            :scroll-top="0"
            enhanced
            :show-scrollbar="false"
          >
            <view
              class="user-info-block"
              v-for="(item, index) of msgList"
              :key="index"
            >
              <view class="user-img-content">
                <view class="user-img-block">
                  <image
                    class="img"
                    :src="
                      item.avatar || '../../static/images/chat/user-avatar.jpg'
                    "
                  />
                </view>
                <u-badge
                  class="im-weidu-badge"
                  :show="true"
                  shape="horn"
                  :value="item.weidu || 0"
                  max="99"
                ></u-badge>
              </view>
              <view class="msg-info-block" @click="skiupMsg(item)">
                <view class="msg-title">{{ item.username }}</view>
                <u-icon name="arrow-right"></u-icon>
                <!-- <view class="msg-info"
                  >老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天</view
                > -->
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <tabbar tabbarName="IM"></tabbar>
  </view>
</template>

<script>
import tuiTabs from "../../components/tui-tabs.vue";
// import layui from './layui/layui.js'
import { GetImConfig } from "../../api/im";
import statusBar from "../../components/status-bar.vue";
import { mapState } from "vuex";
import tabbar from "@/components/tabbar/tabbar.vue";
import favoriteLoading from "@/components/favorite-loading/favorite-loading.vue";
export default {
  components: {
    tuiTabs,
    statusBar,
    tabbar,
    favoriteLoading,
  },
  data() {
    return {
      currentTab: 0,
      tabs: [
        {
          name: "今日未回复",
          num: 3,
        },
        {
          name: "顾客消息",
        },
        {
          name: "平台通知",
        },
      ],
      msgInfo: {
        mine: {
          user_nickname: "阿凡达",
        },
      },
      msgList: [],
      loading: false,
    };
  },
  onShow() {
    this.getImConfig();
  },
  onLoad() {},
  computed: {
    ...mapState("user", ["uid", "userInfo", "socket", "imWeidu", "getMsg"]),
  },
  watch: {
    imWeidu: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.msgList = this.msgList.map((item) => {
            if (this.imWeidu.hasOwnProperty(item.id) && item.id !== "userId") {
              // 如果存在，则将obj中对应的值合并到当前项
              return {
                ...item, // 保留原数组项的所有属性
                ...this.imWeidu[item.id], // 合并obj中对应id的值
              };
            }
            return item;
          });
        }
      },
      deep: true,
    },
    getMsg: {
      handler(newValue, oldValue) {
        if (newValue) {
          const exists = this.msgList.some((item) => item.id == newValue.id);

          if (!exists) {
            const newItem = {
              user_id: newValue.user_id,
              friend_id: newValue.friend_id,
              username: newValue.username,
              avatar: newValue.avatar,
              user_nickname: newValue.username,
              user_avatar: newValue.avatar,
              rid: 2,
              id: newValue.id,
              weidu: 1,
            };

            this.msgList = [...this.msgList, newItem];
          }
        }
      },
    },
  },
  methods: {
    async getImConfig() {
      this.loading = true;
      let res = await GetImConfig({ type: "json", uid: this.uid });

      if (res && res.status == 200) {
        this.msgInfo = res.data;

        if (res.data.friend.length > 0) {
          let _imWeiDu = uni.getStorageSync("imWeiDu");
          if (_imWeiDu) {
            this.msgList = res.data.friend[0].list.map((item) => {
              if (_imWeiDu.hasOwnProperty(item.id) && item.id !== "userId") {
                return {
                  ...item,
                  ..._imWeiDu[item.id],
                };
              }
              return item;
            });
          } else {
            this.msgList = res.data.friend[0].list;
          }
        }
      }
      this.loading = false;
    },
    handleTab(e) {
      this.currentTab = e.index;
    },
    skiupMsg(item) {
      console.log(item);
      this.$store.commit("user/REMOVE_IM_KEY", item.id.toString());
      uni.navigateTo({
        url: `/pages/IM/IMmsgContent?item=${JSON.stringify(item)}`,
      });
    },
    senMsgAdmin() {
      let item = {
        user_friend_id: 36,
        user_id: 10001,
        friend_id: 10001,
        friend_note: "",
        user_friend_addtime: "2025-05-09 10:03:33",
        friend_state: 2,
        friend_invite: 2,
        username: "系统客服",
        avatar:
          "https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/media/media/plantform/20250307/c4cab676e06a49b282c2cbbe481f0fa1.png",
        sign: "",
        level_name: "v1",
        user_nickname: "系统客服",
        user_avatar:
          "https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/media/media/plantform/20250307/c4cab676e06a49b282c2cbbe481f0fa1.png",
        user_sign: "",
        user_level_name: "v1",
        rid: 2,
        id: 776395489,
      };

      uni.navigateTo({
        url: `/pages/IM/IMmsgContent?item=${JSON.stringify(item)}`,
      });
    },
    skipuIMsetting() {
      uni.navigateTo({
        url: "/pages/IM/IMsetting",
      });
    },
  },
};
</script>

<style lang="scss">
.IM-container {
  .IM-setting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    border-bottom: 1px solid rgba(238, 238, 238, 0.5);
    // background: rgba(238, 238, 238,0.5);

    .IM-status {
      display: flex;
      align-items: center;
      gap: 10rpx;
      .img {
        width: 96rpx;
        height: 96rpx;
        border-radius: 100%;
      }
    }

    .setting-icon-block {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20rpx;
    }
  }
  .tabs-block {
    background: #f2f2f2;
  }

  .IM-msg-content {
    .IM-msg-block {
      padding: 0;
      background: #fff;
      .uni-swiper-list {
        height: calc(100vh - 120px);

        .user-info-block {
          display: flex;
          align-items: center;
          margin: 30rpx;
          border-bottom: 1px solid rgba(238, 238, 238, 0.5);
          padding-bottom: 30rpx;

          &:last-child {
            border: none;
          }

          .user-img-content {
            position: relative;
            .user-img-block {
              width: 64rpx;
              height: 64rpx;
              background: #eee;
              border-radius: 100%;
              overflow: hidden;

              .img {
                width: 100%;
                height: 100%;
              }
            }
            .im-weidu-badge {
              position: absolute;
              right: -50%;
              top: 0;
            }
          }

          .msg-info-block {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left: 24rpx;

            .msg-title {
              // font-weight: bold;
            }

            .msg-info {
              color: #7f7f7f;
              width: 38%; /* 设置容器宽度 */
              white-space: nowrap; /* 防止文本换行 */
              overflow: hidden; /* 隐藏溢出的文本 */
              text-overflow: ellipsis; /* 显示省略号 */
            }
          }
        }
      }
    }
    .IM-msg-node {
      display: flex;
      flex-flow: column;
      align-items: center;
      margin-top: 20%;
      background: #fff;

      .IM-msg-node-bg {
        width: 400rpx;
        height: 400rpx;
        background-image: url("../../static/no-im-msg.png");
        background-size: 100% 100%;
        border-radius: 50%;
      }

      .IM-msg-node-tips {
        color: #aaaaaa;
      }
    }
  }
  .u-icon {
    flex-direction: column-reverse;
  }

  .icon-kefu {
    // margin-right: 40rpx;
  }

  .IM-loading {
    margin: 60% auto;
    display: flex;
  }
}
</style>
