<template>
  <view class="card">
    <view class="title">绑定申请</view>
    <view class="row">
      <view class="row-label">绑定人：</view>
      <view class="row-content">{{ data.user.nickName }}</view>
    </view>
    <view class="row">
      <view class="row-label">申请人ID：</view>
      <view class="row-content">{{ data.user.id }}</view>
    </view>
    <view class="row">
      <view class="row-label">申请时间：</view>
      <view class="row-content">{{ data.createTime }}</view>
    </view>
    <view class="flex btns">
      <button class="btn" @click="onReject">拒绝</button>
      <button class="btn" @click="onConfirm">同意</button>
    </view>
  </view>
</template>

<script>

  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      },
      value: {
        type: String,
        default: null,
      },
      showRadio: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
      }
    },
    methods: {
      async fetchUpdate(status) {
        try {
          await this.$fetch('updateBind', { id: this.data.id, status }) // 绑定状态(status)：0-确认中 1-已绑定 2-已拒绝
          return true
        } catch (err) {
          return false
        }
      },
      async onReject() {
        const succ = await this.fetchUpdate(2)
        succ && this.$emit('submitted')
      },
      async onConfirm() {
        const succ = await this.fetchUpdate(1)
        succ && this.$emit('submitted')
      },
    },
  }
</script>

<style scoped lang="scss">
  @import './card.scss';

  .btns {
    margin-top: 16rpx;
    justify-content: flex-end;
  }

  .btn {
    display: inline-block;
    width: auto;
    padding: 10rpx 50rpx;
    font-family: PingFang SC;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 1.4;
    color: #252545;
    border: 2rpx solid #252545;
    border-radius: 32rpx;

    & + & {
      margin-left: 24rpx;
    }
  }
</style>