<template>
  <el-dialog title="用户信息" :close-on-click-modal="false" :visible.sync="open" width="1200px" append-to-body>
    <el-collapse v-model="activeName" >
      <el-collapse-item title="基本信息" name="base">
        <el-descriptions :contentStyle="CS" :label-style="LS " class="margin-top" :column="3" size="medium" border>
          <el-descriptions-item label="id">
            {{info.user.id}}
          </el-descriptions-item>
          <el-descriptions-item :label="systemName+'号'">
            {{info.user.usercode}}
          </el-descriptions-item>
          <el-descriptions-item label="手机号">
            {{info.user.mobile}}
          </el-descriptions-item>
          <el-descriptions-item label="头像">
            <image-avatar :src="info.user.avatar" />
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            <cai-dict-tag :options="genderList" :value="info.user.gender" />
          </el-descriptions-item>
          <el-descriptions-item label="年龄">
            {{info.user.age}}
          </el-descriptions-item>
          <el-descriptions-item label="生日">
            {{info.user.birthday}}
          </el-descriptions-item>
          <el-descriptions-item label="城市">
            {{info.user.city}}
          </el-descriptions-item>
          <el-descriptions-item label="昵称">
            {{info.user.nickname}}
          </el-descriptions-item>
          <el-descriptions-item label="相册" :span="3" v-if="info.userAlbums">
            <span v-for='val in info.userAlbums'>
              <image-preview :src="val.url" height="45px" width="45px"  /> &nbsp;&nbsp;
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="资料完成">
            <cai-dict-tag :options="authList" :value="info.user.finishStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="自定义头像">
            <cai-dict-tag :options="authList" :value="info.user.avatarState" />
          </el-descriptions-item>
          <el-descriptions-item label="自拍认证">
            <cai-dict-tag :options="authList" :value="info.user.cameraStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="是否同意协议">
            <cai-dict-tag :options="authList" :value="info.user.agreeProtocol" />
          </el-descriptions-item>
          <el-descriptions-item label="视频状态">
            <cai-dict-tag :options="videoStatusList" :value="info.user.videoStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <cai-dict-tag :options="userStatusList" :value="info.user.status" />
          </el-descriptions-item>
          <el-descriptions-item label="工会">
            <cai-dict-tag :options="isAnchorList" :value="info.user.isUnion" />
          </el-descriptions-item>
          <el-descriptions-item label="好友视频提成">
            {{info.userInfo.videoIncomeRate}}
          </el-descriptions-item>
          <el-descriptions-item label="好友守护提成">
            {{info.userInfo.guardIncomeRate}}
          </el-descriptions-item>
          <el-descriptions-item label="好友礼物提成">
            {{info.userInfo.giftIncomeRate}}
          </el-descriptions-item>
          <el-descriptions-item label="好友充值提成">
            {{info.userInfo.payIncomeRate}}
          </el-descriptions-item>
          <el-descriptions-item label="最后登录IP">
            {{info.userInfo.lastLoginIp}}
          </el-descriptions-item>
          <el-descriptions-item label="最后登录时间">
            {{info.userInfo.lastLoginTime}}
          </el-descriptions-item>
          <el-descriptions-item label="最后登录位置">
            {{info.userInfo.lastLocation}}
          </el-descriptions-item>
          <el-descriptions-item label="注册IP">
            {{info.userInfo.regIp}}
          </el-descriptions-item>
          <el-descriptions-item label="注册时间">
            {{info.userInfo.regTime}}
          </el-descriptions-item>
          <el-descriptions-item label="主播">
            <cai-dict-tag :options="isAnchorList" :value="info.user.isAnchor" />
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="钱包" name="account">
        <el-descriptions :contentStyle="CS" :label-style="LS" class="margin-top" :column="2" size="medium" border>
          <el-descriptions-item label="余额">
            {{info.account.coin}}
          </el-descriptions-item>
          <el-descriptions-item label="收益">
            {{info.account.incomeCoin}}
          </el-descriptions-item>
          <el-descriptions-item label="充值总额">
            {{info.account.totalBuyMoney}}
          </el-descriptions-item>
          <el-descriptions-item label="充值总币">
            {{info.account.totalBuyCoin}}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="会员" name="userMember" v-if="info.userMember">
        <el-descriptions :contentStyle="CS" :label-style="LS" class="margin-top" :column="3" size="medium" border>
          <el-descriptions-item label="类型">
            <cai-dict-tag :options="memberTypeList" :value="info.userMember.memberType" />
          </el-descriptions-item>
          <el-descriptions-item label="过期时间">
            {{info.userMember.expireDate}}
          </el-descriptions-item>
          <el-descriptions-item label="会员状态">
            <cai-dict-tag :options="memberStatusList" :value="info.userMember.status" />
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="主播" name="anchor" v-if="info.anchor">
        <el-descriptions :contentStyle="CS" :label-style="LS" class="margin-top" :column="3" size="medium" border>
          <el-descriptions-item label="价格">
            {{info.anchor.price}}
          </el-descriptions-item>
          <el-descriptions-item label="开启视频接听">
            <cai-dict-tag :options="openVideoStatusList" :value="info.anchor.openVideoStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="视频状态">
            <cai-dict-tag :options="videoStatusList" :value="info.anchor.videoStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="隐藏接单">
            <cai-dict-tag :options="orderSwitchList" :value="info.anchor.orderSwitch" />
          </el-descriptions-item>
          <el-descriptions-item label="首页展示">
            <cai-dict-tag :options="indexDisplayList" :value="info.anchor.indexDisplay" />
          </el-descriptions-item>
          <el-descriptions-item label="用户评分">
            {{info.anchor.giveScore}}
          </el-descriptions-item>
          <el-descriptions-item label="服务总次数">
            {{info.anchor.serviceCount}}
          </el-descriptions-item>
          <el-descriptions-item label="服务总时长">
            {{info.anchor.serviceTime}}
          </el-descriptions-item>
          <el-descriptions-item label="视频分成比例">
            {{info.anchor.videoRate}}
          </el-descriptions-item>
          <el-descriptions-item label="守护分成比例">
            {{info.anchor.guardRate}}
          </el-descriptions-item>
          <el-descriptions-item label="礼物分成比列">
            {{info.anchor.giftRate}}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="在线状态" name="userOnline" v-if="info.userOnline">
        <el-descriptions :contentStyle="CS" :label-style="LS" class="margin-top" :column="2" size="medium" border>
          <el-descriptions-item label="在线状态">
            <cai-dict-tag :options="onlineStatusList" :value="info.userOnline.status" />
          </el-descriptions-item>
          <el-descriptions-item label="最后在线时间">
            {{info.userOnline.lastLiveTime}}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="会长" name="union" v-if="info.union">
        <el-descriptions :contentStyle="CS" :label-style="LS" class="margin-top" :column="3" size="medium" border>
          <el-descriptions-item label="工会名称">
            {{info.union.name}}
          </el-descriptions-item>
          <el-descriptions-item label="是否开启提成">
            <cai-dict-tag :options="booleanList" :value="info.union.enableRate" />
          </el-descriptions-item>
          <el-descriptions-item label="默认提成">
            {{info.union.defaultIncomeRate}}
          </el-descriptions-item>
          <el-descriptions-item label="全部人数">
            {{info.union.allNum}}
          </el-descriptions-item>
          <el-descriptions-item label="分成的人数">
            {{info.union.inDivideNum}}
          </el-descriptions-item>
          <el-descriptions-item label="不分成人数">
            {{info.union.notDivideNum}}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item title="统计" name="userCount" v-if="info.userCount">
        <el-descriptions :contentStyle="CS" :label-style="LS" class="margin-top" :column="3" size="medium" border>
          <el-descriptions-item label="粉丝总数">
            {{info.userCount.fansCount}}
          </el-descriptions-item>
          <el-descriptions-item label="关注数">
            {{info.userCount.followCount}}
          </el-descriptions-item>
          <el-descriptions-item label="足迹数">
            {{info.userCount.footCount}}
          </el-descriptions-item>
          <el-descriptions-item label="访客数">
            {{info.userCount.visitorCount}}
          </el-descriptions-item>
          <el-descriptions-item label="相册数量">
            {{info.userCount.photoCount}}
          </el-descriptions-item>
          <el-descriptions-item label="发帖数量">
            {{info.userCount.dynamicCount}}
          </el-descriptions-item>
          <el-descriptions-item label="收到的礼物数量">
            {{info.userCount.receiveGiftCount}}
          </el-descriptions-item>
          <el-descriptions-item label="送礼总数量">
            {{info.userCount.giveGiftCount}}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
    </el-collapse>
  </el-dialog>
</template>

<script>
import {getFullUser, getUser} from "@/api/cai/user";
import {
  authList,
  genderList,
  userStatusList,
  isAnchorList,
  videoStatusList,
  onlineStatusList,
  memberTypeList,
  memberStatusList,
  openVideoStatusList,
  orderSwitchList,
  indexDisplayList,
  booleanList
} from '@/constant/statusMap'

export default {
  name: "UserInfo",
  data() {
    return {
      genderList,userStatusList,isAnchorList,authList,videoStatusList,onlineStatusList,memberTypeList,
      memberStatusList,openVideoStatusList,orderSwitchList,indexDisplayList,booleanList,
      systemName: process.env.VUE_APP_SYSTEM_HOME,
      activeName:['base','account','userAlbums'],
      CS: {
        'text-align': 'center',  //文本居中
        'min-width': '250px',   //最小宽度
        'word-break': 'break-all'  //过长时自动换行
      },
      LS: {
        // 'color': '#000',
        'text-align': 'center',
        // 'font-weight': '600',
        'height': '40px',
        // 'background-color': 'rgba(255, 97, 2, 0.1)',
        'min-width': '110px',
        'word-break': 'keep-all'
      },
      open:false,
      info:{},
      userId: this.$route.query.id,
    };
  },
  created() {

  },
  methods: {
    init(userId){
      this.open = true;
      this.userId = userId;
      getFullUser(this.userId).then(response => {
        this.info = response.data;
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.el-row {
  margin-bottom: -15px;
  display: flex;
  flex-wrap: wrap
}
</style>
