<template>
  <view class="IM-container">
    <view class="IM-setting">
      <view class="IM-status">
        <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 name="photo">arrow-down</u-icon>
        <u-icon name="photo">arrow-down</u-icon>
      </view>
    </view>
    <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-block">
          <scroll-view
            class="uni-swiper-list"
            scroll-y
            :scroll-top="0"
            enhanced
            :show-scrollbar="false"
          >
            <view class="user-info-block">
              <view class="user-img-content">
                <view class="user-img-block">
                  <image class="img" src="../../static/logo.png" />
                </view>
              </view>
              <view class="msg-info-block">
                <view class="msg-title">昨日#3单 用户名sssssssss</view>
                <view class="msg-info"
                  >老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天</view
                >
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import tuiTabs from "../../components/tui-tabs.vue";
// import layui from './layui/layui.js'
import { GetImConfig  } from "../../api/im";
export default {
  components: {
    tuiTabs,
  },
  data() {
    return {
      currentTab: 0,
      tabs: [
        {
          name: "今日未回复",
          num: 3,
        },
        {
          name: "顾客消息",
        },
        {
          name: "平台通知",
        },
      ],
      msgInfo:{
        mine:{
          user_nickname:'阿凡达'
        }
      },
      msgList:[]
    };
  },
  onShow(){
    this.getImConfig();
  },
  onLoad(){
    
  },  
  created(){
    // this.getImConfig();
  },
  methods: {
    async getImConfig(){
      let res =  await GetImConfig({type:'json',uid:10001});
      console.log(res);
      if(res && res.status == 200){
        this.msgInfo = res.data;
        this.msgList = res.data.friend[0].list;
      }
    },
    handleTab(e) {
      this.currentTab = e.index;
    },
  },
};
</script>

<style lang="scss">
.IM-container {
  .IM-setting {
    display: flex;
    justify-content: space-between;
    padding: 32rpx 40rpx;

    .IM-status {
      display: flex;
      align-items: center;
    }

    .setting-icon-block {
      display: flex;
    }
  }
  .tabs-block {
    background: #f2f2f2;
  }

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

        .user-info-block {
          display: flex;
          align-items: center;
          margin-bottom: 40rpx;

          .user-img-content {
            .user-img-block {
              width: 80rpx;
              height: 80rpx;
              border-radius: 50%;
              overflow: hidden;

              .img {
                width: 100%;
                height: 100%;
              }
            }
          }

          .msg-info-block {
            margin-left: 24rpx;

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

            .msg-info {
              color: #7f7f7f;
              width: 38%; /* 设置容器宽度 */
              white-space: nowrap; /* 防止文本换行 */
              overflow: hidden; /* 隐藏溢出的文本 */
              text-overflow: ellipsis; /* 显示省略号 */
            }
          }
        }
      }
    }
  }
}
</style>