<template>
  <div class="app-main app-content">
    <block v-if="!$util.isEmpty(list.data)">
      <block v-for="(item,index) in list.data" :key="index">
        <tui-list-cell
          :arrow="true"
          @click="pageTo({
					url: '/admin/member/detail',
					query: {
						id: item.id
					}
				})"
        >
          <div class="tui-msg-box">
            <img :src="item.avatar" class="tui-msg-pic" mode="widthFix" />
            <div class="tui-msg-item">

              <div class="tui-msg-name">
                <div class="tui-user-name">{{item.name}}</div>

                <appVipModule class="level-img" :vipImg="`${constant.imgUrl}/retail/member/grade/member.png`" />

                <!-- <appVipModule
                  v-if="item.member > 0"
                  class="level-img"
                  :vipImg="`${constant.imgUrl}/retail/member/grade/${item.userAsset.member}.png`"
                />
                <template v-else>
                  <appVipModule
                    v-if="item.mobile == ''"
                    class="level-img"
                    :vipImg="`${constant.imgUrl}/retail/member/grade/customer.png`"
                  />

                  <appVipModule
                    v-else
                    class="level-img"
                    :vipImg="`${constant.imgUrl}/retail/member/grade/member.png`"
                  />
                  
                </template> -->


              </div>

              <div class="tui-msg-content">
                <span>{{item.visitTime}}</span>
              </div>
            </div>
          </div>

          <div class="tui-msg-right">
            <badge-module
              type="danger"
              :dot="item.level==3?true:false"
              v-if="item.messageNum>0"
            >{{item.messageNum}}</badge-module>
          </div>
        </tui-list-cell>
      </block>
    </block>
    <block v-else>
      <app-wrapper-empty :is-empty="$util.isEmpty(list.data)" />
    </block>
    <kd-entrance></kd-entrance>
  </div>
</template>

<script>
import AppTabs from "@/components/plugin/tabs";
import TuiListCell from "@/components/plugin/list-cell";
import BadgeModule from "@/components/plugin/badge";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import appVipModule from "@/components/module/app-vip";
import AppTag from '@/components/module/app-tag.vue'
import { list } from "@/mixins";
import { getClass, getList } from "@/api/member";
export default {
  name: "admin-memebr",
  components: {
    AppTabs,
    TuiListCell,
    BadgeModule,
    AppWrapperEmpty,
    appVipModule,
    AppTag,
  },
  mixins: [list],
  data() {
    return {
    };
  },
  onPullDownRefresh() {
    this.resetList();
    this._list().then(res => {
      uni.stopPullDownRefresh();
    });
  },
  onReachBottom() {
    if (!this.list.finished) {
      this._list().then(res => {
        uni.stopPullDownRefresh();
      });
    } else {
      uni.stopPullDownRefresh();
    }
  },
  onLoad(option) {
    // this.init()
  },
  methods: {
    init() {
      if(!this.AUTHORITY_SHOW) {
        this._list();
      }
    },
    // 列表
    _list() {
      return getList({
        search: "",
        page: this.list.page,
        ...this.form
      }).then(res => {
        this.completes(res)
      });
    },
    // 跳转
    detail(item) {
      this.$util.pageTo("/admin/member/detail");
    }
  }
};
</script>

<style lang="scss" scoped>
.app-content {
  padding-top: 22rpx;
  padding-bottom: 30rpx;
}
.tabs-wrap {
  position: fixed;
  .tabs-left {
    width: 80%;
  }
  .tabs-right {
    width: 19%;
    border-left: $borderColor;
    @include disFlex(center, center);
  }
}
// list
.tui-msg-box {
  display: flex;
  align-items: center;

  .tui-msg-pic {
    width: 80upx;
    height: 80upx;
    border-radius: 50%;
    margin-right: 20upx;
  }

  .tui-msg-item {
    max-width: 500upx;
    min-height: 80upx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    & > div {
      @include disFlex(center, flex-start);
      & > div:first-child {
        margin-right: 8px;
      }
    }
    .level-img {
      /deep/.vip-text {
        left: 70px;
        top: 8px;
      }
    }
    .normal-img {
      width: 70px;
      padding: 2px 6px;
      color: #999;
      background-color: #f0f2f6;
      border-radius: 20px;
      .vip-text {
        font-size: 24px;
        transform: scale(0.6);
        position: relative;
        top: -2px;
        left: -8px;
      }
    }
    .member-img {
      width: 70px;
      padding: 2px 6px;
      color: green;
      background-color: #f0f2f6;
      border-radius: 20px;
      .vip-text {
        font-size: 24px;
        transform: scale(0.6);
        position: relative;
        top: -2px;
        left: -8px;
      }
    }
    .iconfont {
      color: #00aaed;
    }
  }

  .tui-msg-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 30upx;
    line-height: 1;
    color: #262b3a;
    .tui-user-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 180rpx;
    }
  }

  .tui-msg-content {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 24upx;
    line-height: 1;
    color: #9397a4;
  }
}

.tui-msg-right {
  max-width: 120upx;
  height: 80upx;
  margin-left: auto;
  margin-right: 24px;
  text-align: right;
  display: flex;
  // flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.user_tag{
  border:1px solid #CCCCCC;
  padding:5px 12px 5px 12px;
  border-radius:25px;
  color:#BBBBBB;
  margin-right:10px;
  margin-bottom:12px;
  display:inline-block;
  font-size:30rpx;
}
</style>