<template>
<form @submit='verify'>
<div class='container'>
<div class='text'>认证为律师进入小程序</div>
<input v-model='name' name='name' placeholder='请输入您的姓名' maxlength=10>
<input type='number' v-model='phone' name='phone' placeholder='请输入您的手机号' maxlength=11>
<picker :range='firm' :value='firmIndex' name='firm' range-key='name' @change='pickerConfirm' :class='{unselected: !hasSelect}'>
  {{hasSelect ? firm[firmIndex].name : '请选择您所在的律所'}}
</picker>
<button :disabled='empty || submitting' :class='{fade: empty || submitting}' form-type='submit' class='button'>认证</button>
</div>
</form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      phone: '',
      firm: [],
      firmIndex: 0,
      hasSelect: false,
      submitting: false
    }
  },
  computed:{
    empty(){
      return this.name === '' || this.phone === '' || !this.hasSelect
    }
  },
  methods: {
    reset(){
      this.name = ''
      this.phone = ''
      this.firmIndex = 0
      this.hasSelect = false
      this.submitting = false
    },
    pickerConfirm(e) {
      this.hasSelect = true
      this.firmIndex = e.mp.detail.value
    },
    verify(e) {
      wx.showLoading({ title: '正在认证' })
      this.submitting = true
      const input = e.mp.detail.value
      console.log(input)
      this.service.getUnionId(this.rootAvatar, this.rootUrl).then(() => {
        wx.request({
          url: this.rootUrl + '/law/lawyerVerify',
          header: { 'content-type': 'application/x-www-form-urlencoded' },
          method: 'POST',
          data: {
            name: input.name,
            tel: input.phone,
            lfid: this.firm[input.firm].LFID,
            sessionID: wx.getStorageSync('sessionID')
          },
          success: res => {
            if (res.data.status === '200') {
              wx.setStorageSync('isVerify', true)
              wx.showToast({ title: res.data.msg })
              this.reset()
              wx.switchTab({ url: '../workspace/main' })
            } else {
              this.submitting = false
              wx.showToast({ title: res.data.msg, icon: 'none' })
            }
          },
          fail: err => {
            this.submitting = false
            wx.showToast({ title: '认证失败', icon: 'none' })
          }
        })
      })
    },
    getFirm(){
      return new Promise( resolve => {
        wx.request({
          url: this.rootUrl + '/law/allfirm',
          success: res => {
            if(res.data[0].lfid){
              this.firm = res.data.map(v => { return { name: v.firm_Name, LFID: v.lfid } })
              resolve(res.data)
            } else {
              resolve(false)
            }
          }
        })
      })
    }
  },
  onLoad(){
    this.reset()
    this.getFirm()
  }
}
</script>
<style lang="stylus" scoped>
.container
  position fixed
  Height_Width(100%)
  Flex(flex, ,center,column)
  .text
    font 38rpx/38rpx !specified
    align-self flex-start
    margin 100rpx 10% 80rpx 10%
  input
    Height_Width(20rpx, 80%)
    font 32rpx/32rpx !specified
    border-bottom 1rpx solid #DDD
    margin-bottom 50rpx
  picker
    Height_Width(65rpx, 80%)
    padding-left 5rpx
    font 32rpx/65rpx !specified
    margin-bottom 50rpx
    Border(1rpx,1rpx,1rpx,1rpx,#CCC)
    border-radius 10rpx
    &.unselected
      color #9B9B9B
  button
    Height_Width(80rpx, 80%)
    font 32rpx/80rpx !specified
    background themeColor
    color white
</style>
