<template>
  <div class="page">
    <!-- <div class="title">已签到（2）</div>
    <div class="user-list">
      <div class="item">
        <div class="item-border">
          <div class="left">
            <span class="user-name-bg">李毅</span>李毅
          </div>
          <div class="right">
            <span>157****8456</span>
            <img src="../../static/img/phone-icon.png" alt="">
            <img src="../../static/img/del-icon.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="title">未签到（3）</div> -->
    <div class="user-list" v-for="(item, index) in list" :key="index">
      <div class="item">
        <div class="item-border">
          <div class="left">
            <span class="user-name-bg">{{$formatName(item.name)}}</span>{{item.name}}
          </div>
          <div class="right">
            <span>{{formatPhone(item.phone)}}</span>
            <img src="components/phone-icon.png" alt="" v-if="isAdmin" @click="callPhone(item.phone)">
            <img src="components/del-icon.png" alt="" v-if="isAdmin && status < 2" @click="del(item.id)">
          </div>
        </div>
      </div>
    </div>
    <AiEmpty description="暂无活动报名人员" v-if="!list.length" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAdmin: 0,
      id: '',
      list: [],
      status: 0
    }
  },
  onLoad(option) {
    this.id = option.id
    this.isAdmin = option.isAdmin
    this.status = Number(option.status)
    console.log(option)
    this.getUserList()
  },
  methods: {
    getUserList() {
      this.$http.post(`/app/appactivityuser/list?activityId=${this.id}&status=1`).then(res => {
        if (res.code == 0) {
          this.list = res.data.records
        }
      })
    },
    formatPhone(value) {
      const start = value.slice(0, 3)
      const end = value.slice(-4)
      return `${start}****${end}`
    },
    callPhone(phone) {
      uni.makePhoneCall({phoneNumber: phone})
    },
    del(id) {
      uni.showModal({
        title: '提示',
        content: `是否删除该报名人？`,
        confirmText: "确定",
        success: (res) => {
          if (res.confirm) {
            this.confirmDel(id)
          }
        }
      });
    },
    confirmDel(id) {
      this.$http.post(`/app/appactivityuser/removeReport`, {
        id: id
      }).then(res => {
        if (res.code == 0) {
          this.$toast('删除成功')
          this.getUserList()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.title{
  width: 100%;
  height: 108px;
  line-height: 108px;
  background: #FFF;
  padding-left: 32px;
  font-size: 32px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333;
  margin-top: 20px;
}
.item{
  padding: 0 32px;
  background-color: #fff;
  .item-border{
    border-bottom: 2px solid #ddd;
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    .left{
      line-height: 80px;
      font-size: 32px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333;
      .user-name-bg{
        display: inline-block;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        line-height: 80px;
        text-align: center;
        background: #4E8EEE;
        font-size: 28px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFF;
        margin-right: 16px;
      }
    }
    .right{
      span{
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999;
        line-height: 80px;
      }
      img{
        width: 56px;
        height: 56px;
        border-radius: 50%;
        margin-left: 32px;
        vertical-align: middle;
      }
      .iconfont{
        display: inline-block;
        font-size: 26px;
        color: #3671EE;
      }
      .bg-blue{
        // width: 56px;
        // height: 56px;
        // background: #EAF0FD;
      }
    }
  }
}
</style>
