<template>
  <div class="rebind">
    <div class="container">
      <BindInfo :info="info" :params="params" type="unbound"/>
    </div>
    <div class="bind-btn">
      <van-button type="" class="cancel" round @click="cancel">取消</van-button>
      <van-button type="primary" class="bind" round @click="submit">确定解绑</van-button>
    </div>
    <IdentifyResult :dialog-visible="dialogVisible" :result="result" type="unbound" @closeDialog="dialogVisible = false"/>
  </div>
</template>

<script>
import BindInfo from './components/bind-info.vue'
import IdentifyResult from './components/identify-result'
import { rnrInfo, unbound } from '@/api/bind'
export default {
  name: 'Rebind',
  components: {
    BindInfo,
    IdentifyResult
  },
  data() {
    return {
      dialogVisible: false,
      params: {},
      info: {},
      result: '' // 解绑结果
    }
  },
  activated() {
    this.params = this.$route.params
    // 获取信息
    this.getRnrInfo()
  },
  methods: {
    // 获取信息
    getRnrInfo() {
      rnrInfo(this.params).then(res => {
        this.info = res
      })
    },
    submit() {
      const contactInfo = { smsCaptcha: '' }
      if (!contactInfo) return
      const { rnrId, iccid } = this.params
      const params = { ...contactInfo, ...{ rnrId, iccid }}
      unbound(params).then(res => {
        this.result = 'success'
        this.dialogVisible = true
      }).catch(() => {
        this.result = 'failed'
        this.dialogVisible = true
      })
    },
    cancel() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.rebind {
  background: #f9f9f9;
  height: 100vh;
  .container {
    background: #f9f9f9;
    padding: 0 24px 230px;
  }
  .bind-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 186px;
    padding-top: 30px;
    text-align: center;
    .cancel {
      width: 254px;
      height: 96px;
      background-image: linear-gradient(120deg, #EDF3FF 0%, #E9F0FF 97%);
      font-size: 30px;
      color: #242424;
      border: none;
      margin-right: 40px;
    }
    .bind {
      width: 392px;
      height: 96px;
      font-size: 30px;
      background-image: linear-gradient(120deg, #4F4CFB 0%, #376FF4 97%);
      border: none;
    }
  }
}
</style>
