<template>

  <div class="execution">

    <basic-container v-loading="loading">

      <div class="zm_info_header">
        <span>基础资料</span>
      </div>

      <div class="zm_info_body">
        <div class="zm_info_row">
          <div class="zm_label">注册时间</div>
          <div>{{info.createTime | checkEmpty}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">ID</div>
          <div>{{info.showId | checkEmpty}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">昵称</div>
          <div>{{info.nickname | checkEmpty}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">所在地</div>
          <div>{{info.location | checkEmpty}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">个性签名</div>
          <div>{{info.sign | checkEmpty}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">上级用户</div>
          <div>{{info.superUser | checkEmpty}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">邀请人数</div>
          <div>{{info.invite}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">A币</div>
          <div>{{info.a}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">B币</div>
          <div>{{info.b}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">VIP等级</div>
          <div>{{info.vipName | checkEmpty}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">财富值</div>
          <div>{{info.value}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">任务员等级</div>
          <div>{{info.taskLevel | checkEmpty}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">成长值</div>
          <div>{{info.growth}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">是否为推广员</div>
          <div>{{info.isPromote ? '是' : '否'}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">状态</div>
          <div>{{info.isBlock ? '禁用' : '有效'}}</div>
        </div>
      </div>

      <div class="zm_info_header">
        <span>认证信息</span>
      </div>

      <div class="zm_info_body">
        <div class="zm_info_row">
          <div class="zm_label">姓名</div>
          <div>{{info.realName | checkEmpty}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">身份证号码</div>
          <div>{{info.idNumber | checkEmpty}}</div>
        </div>
        <div class="zm_info_row">
          <div class="zm_label">身份证号码</div>
          <div class="layout_h">
            <el-image
                v-if="info.idPositive"
                style="width: 100px; height: 80px"
                :preview-src-list="[info.idPositive]"
                :src="info.idPositive"
                fit="cover"></el-image>
            <el-image
                v-if="info.idNegative"
                style="width: 100px; height: 80px;marginLeft: 16px;"
                :preview-src-list="[info.idNegative]"
                :src="info.idNegative"
                fit="cover"></el-image>
          </div>
        </div>
        <div class="zm_info_row" v-for="(plat, index) in info.accounts || []">
          <div class="zm_label">{{plat.name}}</div>
          <div>{{plat.accountName}}</div>
        </div>
      </div>

      <div class="layout_h_c">
        <el-button @click="onBack">返 回</el-button>
      </div>

      <!-- <uploader ref="loader" :max="3"/> -->

    </basic-container>

  </div>

</template>

<script>

  import { getUserInfo } from '@/api/userMgt/userMgt.js'
  import { ZmMixin } from '@/mixins/ZmMixin.js'

  export default {
    mixins: [ZmMixin],
    components: {
      // 'uploader': () => import('@/components/uploader.vue')
    },
    data() {
      return {
        loading: false,
        info: {}
      }
    },
    mounted() {
      this.loading = true
      getUserInfo({id: this.userId})
      .then(r => {
        // this.$refs['loader'].pushList([{name: '1', url: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg'}, {name: '1', url: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg'}])
        this.loading = false
        let z = this.zmRes(r)
        if(z) {
          this.info = z
        }
      })
      .catch(e => {
        this.loading = false
        this.error(e)
      })
    },
    methods: {
      onBack() {
        console.log(this.$refs['loader'].getList())
        //this.$router.go(-1)
      }
    },
    computed: {
      userId() {
        return this.$route.query.id
      }
    }
  }

</script>

<style scoped>

  .zm_info_header {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606266;
    font-weight: 700;
    background: #dedede;
  }

  .zm_info_body {
    display: flex;
    flex-direction: column;
    padding: 16px;
  }

  .zm_info_row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .zm_label {
    width: 120px;
  }

  .zm_info_body .zm_info_row:not(:first-child) {
    margin-top: 10px;
  }

</style>
