<template>
<div class="ivy-fe-inner-container">
  <div class="ivy-fe-modal">
    <div class="fe-modal-mask" @touchmove.prevent @click.stop="close"></div>
    <div class="modal-box-mobile">
      <h3>绑定手机号</h3>
      <div class="box-from" style="padding-bottom: 1.4rem;">
        <div class="from-item">
          <div class="area-code cell-hd" @click="openAreaCode(true)">
            <span :style="{color}">{{ area.area_code }} <i :style="{borderColor: `${color} transparent transparent transparent`}"></i></span>
          </div>
          <mt-field class="input cell-bd" type="tel" show-clear :placeholder="placeholder.mobile" v-model="bind.mobile"></mt-field>
        </div>
        <div class="from-item">
          <mt-field class="input cell-bd" type="tel" show-clear :placeholder="placeholder.vercode" v-model="bind.vercode"></mt-field>
          <div class="cell-ft verifity" :style="{color}" @click="toGetCode">
            {{ getCode.text }}
          </div>
        </div>
      </div>
      <div class="card-btn-group">
        <button type="button" class="ivy-btn large line" :style="{borderColor: color, color}" @click.stop="close">取消</button>
        <button type="button" class="ivy-btn large btn-enter noborder" :style="{backgroundImage: `linear-gradient(90deg, ${color} 0%, ${color} 99%)`}" @click.once.stop="bindMobile">确定</button>
      </div>
      <div v-if="tip" class="bind-mobile-tips">{{ tip }}</div>
    </div>
    <areacodePanel :color="color" :show="showPanel" @on-close="setAreaCode"></areacodePanel>
  </div>
</div>
</template>
<script lang="ts">
import * as utils from '../utils'
import areacodePanel from "./areacodePanel.vue"
import ivyStore from '../ivyStore'
import axios from 'axios'
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'

@Component({
  components: {areacodePanel}
})
export default class BindMobile extends Vue {
  @Prop() close: (result: any) => void
  @Prop() url: object
  @Prop() color: string
  @Prop() tip: string
  @Prop() project: string
  placeholder = {
    mobile: "手机号",
    vercode: "4位短信验证码"
  }
  bind = {
    mobile: '',
    vercode: '',
  }
  area = {
    area_code: "+86",
    area_code_id: "1"
  }
  getCode = {
    text: "获取验证码",
    geting: false
  }
  showPanel = false

  setAreaCode(area, show: boolean) {
    this.area = area
    this.showPanel = show
  }
  async openAreaCode(show: boolean) {
    this.showPanel = show
  }
  getPhone() {
    return this.bind.mobile.split(' ').join('').split('-').join('')
  }
  async bindMobile() {
    if (!this.bind.mobile) {
      return this.$Toast('请输入手机号')
    }
    if (!this.bind.vercode) {
      return this.$Toast("请输入短信验证码")
    }
    await ivyStore.bindPhone({
      area_code_id: this.area.area_code_id,
      smscode: this.bind.vercode,
      phone: this.getPhone(),
    })
    utils.trackEvent(`${this.project}绑定手机号`, `绑定手机号`)
    if (!ivyStore.logined.token) { // 绑定手机号失败
      return
    }
    this.$Toast("手机号绑定成功")
    this.showPanel = false
    await utils.sleep(800)
    this.close(ivyStore.logined)
  }
  async countDown() {
    this.getCode.geting = true

    for (let count = 60; count > 0; count--) {
      this.getCode.text = `${count}秒后重新发送`
      await utils.sleep(1000)
    }
    this.getCode = {
      text: "获取验证码",
      geting: false
    }
  }
  async toGetCode() {
    // 获取验证码
    if (this.getCode.geting) return
    if (!this.bind.mobile) {
      return this.$Toast("请输入手机号")
    }
    let res = await axios.post(`/api/mobile/member/sendSmsCode`, {
      mobile_prefix_id: this.area.area_code_id,
      telephone: this.getPhone(),
      verify_code_type: 5
    })
    this.$Toast("验证码发送成功")
    this.countDown()
  }
}

</script>
<style lang="less">
@import (reference) url("../styles/common.less");
.ivy-fe-modal {
  .fe-modal-mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    min-height: 2000px;
    background-color: rgba(0, 0, 0, .5);
    z-index: 99;
  }
}
.modal-box-mobile {
  z-index: 99999;
  background-color: #ffffff;
  border-radius: 0.6rem;
  width: 18rem;
  height: 16rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -9rem;
  margin-top: -8rem;
  padding: .88rem;
  box-sizing: border-box;
  h3 {
    font-weight: normal;
    font-size: 1rem;
    display: block;
    color: @text2;
  }
  .tips {
    display: block;
    padding-top: 0.8rem;
    color: @text3;
    font-size: .7647rem;
  }
  .card-btn-group{
    .cells;
    .ivy-btn{
      flex: 1;
      .inline-block;
      width: 50%;
      display: block;
      &:last-child{
        margin-left: .8824rem;
      }
      &.btn-enter{
        color: #fff !important;
      }
    }
  }
}
.bind-mobile-tips{
  padding-top: 1.06rem;
  font: .71rem/.97rem @fontStack;
  color: #7c7c7c;
}

.mint-field.input{
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  .mint-cell-wrapper{
    background-image: none !important;
  }
}

.box-from {
  padding: 0 0 2rem 0;
  .from-item {
    .vux-1px-b;
    padding-top: 0.6rem;
    &:after {
      border-bottom-color: #cccccc;
    }
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    .cell-bd {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
    }
    .cell-ft {
      text-align: right;
    }
    .input {
      font-size: 0.7rem;
      padding-top: 0.68rem;
      padding-bottom: 0.44rem;
      padding-left: 0;
      padding-right: 0;
      &:before {
        border-top: none;
      }
    }
    .verifity {
      font-size: .8824rem;
      user-select: none;
    }
    .verifity.disabled {
      color: #666666;
    }
    .mint-cell {
      background: none !important;
    }
  }
}


.box-from {
  .area-code {
    span {
      user-select: none;
      display: inline-block;
      position: relative;
      padding-right: 0.88rem;
      height: 0.56rem;
      line-height: 0.56rem;
      font: .8235rem/0.56rem Arial, Helvetica, sans-serif;
      i {
        position: absolute;
        border-style: solid;
        border-width: 0.24rem 0.2rem;
        top: 50%;
        margin-top: -0.1rem;
        right: 0.3rem;
      }
    }
  }
}


.box-from{
  .from-item{
    .vux-x-input{
      input{
        font-size: .8235rem;
      }
    }
  }
}
</style>
