<template>
  <div class="container">
    <div class="better-scroll wrapper" ref="wrapper">
      <ul>
        <li class="introduce-wrap">
          <div class="main">
            <ul class="member-benefits">
              <li v-for="(item, index) in memberBenefits" :key="index" @click="handleObjBenefits(item)"></li>
            </ul>
            <a class="login" href="javascript:;" v-if="checkMyBenfits === 1 && isRegistered">已领取</a>
            <a class="login" href="javascript:;" @click="showEditInfo = true" v-else>注册领会员</a>
            <p class="checked-wrap">
              <img src="./image/checked@2x.png" alt="">
              <span>注册代表您同意</span>
              <router-link :to="{path: '/loan/privacy'}">《用户隐私协议》</router-link>
              <span>和</span>
              <router-link :to="{path: '/loan/vipAgreement'}">《会员协议》</router-link>
            </p>
          </div>
        </li>
      </ul>
    </div>
    <van-popup position="bottom" round v-model="showEditInfo">
      <img class="title" src="./image/title@2x.png" alt="">
      <ul class="form-wrap">
        <li>
          <label class="required">
            <span v-for="(str, index) in '手机号码：'" :key="index">{{ str }}</span>
          </label>
          <div class="value-wrap">
            <input type="tel" placeholder="请输入手机号码" v-myBlur v-model.trim="postData.orderUserPhone"
                   @input="funLimitLength">
          </div>
        </li>
        <li v-if="false">
          <label class="required">
            <span v-for="(str, index) in '图形验证：'" :key="index">{{ str }}</span>
          </label>
          <div class="value-wrap">
            <input type="text" placeholder="图片验证码" v-myBlur v-model.trim="postData.capture">
          </div>
          <img class="capture-img" :src="strCapture" alt="" @click="funUpdateCapture">
        </li>
        <li>
          <label class="required">
            <span class="label-code" v-for="(str, index) in '验证码：码'" :key="index">{{ str }}</span>
          </label>
          <div class="value-wrap">
            <input type="tel" placeholder="请输入验证码" v-myBlur v-model.trim="postData.code" @input="funLimitLength">
          </div>
          <button class="get-code" @click="funGetCode">{{[0, 60].includes(numCount) ? '获取' : numCount + '秒'}}</button>
        </li>
        <li>
          <label class="required">
            <span class="label-name" v-for="(str, index) in '姓名：姓名'" :key="index">{{ str }}</span>
          </label>
          <div class="value-wrap">
            <div class="value-name">
              <input type="text" placeholder="请输入姓名" v-myBlur v-model.trim="postData.orderUserName">
            </div>
          </div>
        </li>
        <li>
          <label class="required">
            <span class="label-city" v-for="(str, index) in '城市：城市'" :key="index">{{ str }}</span>
          </label>
          <div class="value-wrap" @click="showPicker0 = true">
            <p class="value-city" v-show="postData.orderUserProvince">
              {{ postData.orderUserProvince + postData.orderUserCity + postData.orderUserDistrict }}</p>
            <p class="value-city init" v-show="!postData.orderUserProvince">请选择所在城市</p>
            <img class="icon_next" src="./image/btn_next@2x.png" alt="">
          </div>
        </li>
        <li>
          <label class="required">
            <span class="label-community" v-for="(str, index) in '小区：小区'" :key="index">{{ str }}</span>
          </label>
          <div class="value-wrap" @click="showPicker1 = true">
            <p class="value-city" v-show="postData.orderCommunity">{{ postData.orderCommunity }}</p>
            <p class="value-city init" v-show="!postData.orderCommunity">请选择所在小区</p>
            <img class="icon_next" src="./image/btn_next@2x.png" alt="">
          </div>
        </li>
        <li>
          <label class="required">
            <span class="label-buildingy" v-for="(str, index) in '楼号：楼号'" :key="index">{{ str }}</span>
          </label>
          <div class="value-wrap" @click="showPicker2 = true">
            <p class="value-city" v-show="postData.orderBuilding">{{ postData.orderBuilding }}</p>
            <p class="value-city init" v-show="!postData.orderBuilding">请选择所在楼号</p>
            <img class="icon_next" src="./image/btn_next@2x.png" alt="">
          </div>
        </li>
        <li>
          <label>
            <span class="label-room" v-for="(str, index) in '房号：房号'" :key="index">{{ str }}</span>
          </label>
          <div class="value-wrap">
          <textarea name="" rows="1" placeholder="请输入房号" v-model.trim="postData.orderRoom" v-myBlur
                    ref="myTextarea"></textarea>
          </div>
        </li>
      </ul>
      <button class="submit" @click="funSubmit">提交</button>
    </van-popup>
    <van-popup v-model="showPicker0" round position="bottom">
      <van-picker
        show-toolbar
        title="城市"
        :columns="columnsOfCity"
        @cancel="showPicker0 = false"
        @confirm="onConfirm0"/>
    </van-popup>
    <van-popup v-model="showPicker1" round position="bottom">
      <van-picker
        show-toolbar
        title="小区"
        :columns="columnsOfCommunity"
        @cancel="showPicker1 = false"
        @confirm="onConfirm1"/>
    </van-popup>
    <van-popup v-model="showPicker2" round position="bottom">
      <van-picker
        show-toolbar
        title="楼号"
        :columns="columnsOfBuildingy"
        @cancel="showPicker2 = false"
        @confirm="onConfirm2"/>
    </van-popup>
    <van-popup class="popup-benefits" v-model="objBenefits.show">
      <p class="benefits-title">{{ objBenefits.title }}</p>
      <p class="benefits-msg" v-for="(item, index) in objBenefits.msg" :key="index">{{ item }}</p>
    </van-popup>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { Picker, Popup, Toast } from 'vant'
import { getChinaArea, sendSMS } from '../../../api/common'
import { getCommunity, register } from './api'
import { getUserInfo } from '../mine/api'

const STRCAPTURE = process.env.API_DOMAIN + '/api/captcha'
const memberBenefits = [
  {
    title: '"头等舱"服务',
    msg: ['1、一对一专人全程陪同服务', '2、免费提供饮品、小食', '3、专属优先办理', '4、伴手礼']
  },
  {
    title: '驼驼顾问',
    msg: ['一对一私人金融顾问，量身定制最优家庭金融方案。']
  },
  {
    title: '新人有礼',
    msg: ['20元商城消费券。']
  },
  {
    title: '千元礼包',
    msg: ['1、300元甲醛券。', '2、500元办理红包。', '3、200元妥妥商城红包券。']
  },
  {
    title: '妥妥周边',
    msg: ['即将上线']
  },
  {
    title: '妥妥秒杀',
    msg: ['即将上线']
  },
  {
    title: '妥妥分享',
    msg: ['即将上线']
  },
  {
    title: '家装妥妥帮',
    msg: ['即将上线']
  }
]
export default {
  name: 'register',
  components: {
    'van-popup': Popup,
    'van-picker': Picker
  },
  data () {
    return {
      scroll: null,
      showEditInfo: false,
      postData: {
        orderUserName: '', // 用户名称
        orderUserPhone: '', // 手机号码
        code: '',
        capture: '',
        orderUserProvince: '', // 省份
        orderUserCity: '', // 城市
        orderUserDistrict: '', // 区域
        orderCommunity: '', // 小区
        orderBuilding: '', // 楼号
        orderRoom: '' // 房号
      },
      arrErrorList: [],
      showPicker0: false,
      columnsOfCity: [],
      showPicker1: false,
      columnsOfCommunity: [],
      showPicker2: false,
      columnsOfBuildingy: [
        {
          values: BUILDING(),
          defaultIndex: 0
        },
        {
          values: ROOM(),
          defaultIndex: 0
        }
      ],
      numCount: 60,
      strCapture: STRCAPTURE,
      timer: null,
      numPositionY: 0,
      isRegistered: false, // 是否注册
      objBenefits: {
        show: false,
        title: '',
        msg: ''
      },
      memberBenefits: []
    }
  },
  async mounted () {
    this.funGetChinaArea()
    await this.$nextTick()
    const textarea = this.$refs.myTextarea
    if (textarea) {
      this.handleTextarea(textarea)
      textarea.addEventListener('input', this.handleTextarea(textarea, 1), false)
      this.$once('hook:beforeDestroy', () => {
        textarea.addEventListener('input', this.handleTextarea(textarea, 1), false)
      })
    }
  },
  activated () {
    if (!this.$route.meta.isUseCache) {
      this.showEditInfo = false
      this.postData = {
        orderUserName: '', // 用户名称
        orderUserPhone: '', // 手机号码
        code: '',
        capture: '',
        orderUserProvince: '', // 省份
        orderUserCity: '', // 城市
        orderUserDistrict: '', // 区域
        orderCommunity: '', // 小区
        orderBuilding: '', // 楼号
        orderRoom: '' // 房号
      }
      this.arrErrorList = []
      this.numCount = 60
      this.timer = null
      this.numPositionY = 0
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.wrapper, {
            click: true,
            pullUpLoad: {
              threshold: -20
            },
            scrollbar: true
          })
        }
      })
      this.isRegistered = false
      this.objBenefits = {
        show: false,
        title: '',
        msg: ''
      }
      this.memberBenefits = memberBenefits
      this.funInit()
      this.fetchCommunity()
    } else {
      this.$nextTick(() => {
        if (this.scroll) {
          this.scroll.refresh()
          this.scroll.scrollTo(0, this.numPositionY)
        }
      })
      if (this.timer) {
        clearInterval(this.timer)
      }
    }
    this.$nextTick(() => {
      this.$refreshTitle('注册')
    })
    this.$route.meta.isUseCache = false
  },
  computed: {
    checkMyBenfits () {
      return this.$store.getters['loan/checkMyBenfits']
    }
  },
  methods: {
    handleObjBenefits (item) {
      if (!item.msg.length) {
        return
      }
      this.objBenefits = {
        ...item,
        show: true
      }
    },
    funGetChinaArea () {
      getChinaArea().then(res => {
        if (res.status) {
          this.columnsOfCity = res.data.filter(province => province.text === '浙江').map(province => {
            return {
              ...province,
              children: province.children.filter(city => city.text === '杭州')
            }
          })
        } else {
          Toast(res.msg)
        }
      }).catch(err => {
        Toast(err)
      })
    },
    handleTextarea (el, auto) {
      return () => {
        if (auto) {
          el.style.height = 'auto'
        }
        el.style.height = el.scrollHeight + 'px'
      }
    },
    onConfirm0 (value) {
      this.$set(this.postData, 'orderUserProvince', value[0])
      this.$set(this.postData, 'orderUserCity', value[1])
      this.$set(this.postData, 'orderUserDistrict', value[2])
      this.showPicker0 = false
    },
    onConfirm1 (value) {
      this.$set(this.postData, 'orderCommunity', value[0])
      this.showPicker1 = false
    },
    onConfirm2 (value) {
      this.$set(this.postData, 'orderBuilding', value[0] + value[1])
      this.showPicker2 = false
    },
    funLimitLength () {
      const { orderUserPhone, code } = this.postData
      this.postData.orderUserPhone = orderUserPhone.length > 11 ? orderUserPhone.slice(0, 11) : orderUserPhone
      this.postData.code = code.length > 4 ? code.slice(0, 4) : code
    },
    funCutDown () {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        if (this.numCount === 0) {
          clearInterval(this.timer)
          this.numCount = 0
          return
        }
        this.numCount--
      }, 1000)
    },
    // 获取验证码
    funGetCode () {
      const numCount = this.numCount
      const { orderUserPhone, capture } = this.postData
      if (numCount < 60 && numCount > 0) {
        return
      }
      this.numCount = 60
      if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(orderUserPhone))) {
        Toast('请输入手机号码')
        return
      }

      // if (!capture) {
      //   Toast('请输入图片验证码')
      //   return
      // }
      this.funCutDown()
      sendSMS(orderUserPhone, 3, capture).then(res => {
        if (res.status) {
          Toast('发送成功')
        } else {
          Toast(res.msg)
          this.funUpdateCapture()
          clearInterval(this.timer)
          this.numCount = 60
        }
      }).catch(err => {
        Toast(err.msg)
        this.funUpdateCapture()
        clearInterval(this.timer)
        this.numCount = 60
      })
    },
    verifyData () {
      const { orderUserName, orderUserPhone, code, orderUserProvince, orderUserCity, orderUserDistrict, orderCommunity, orderBuilding } = this.postData
      this.arrErrorList = []
      if (!/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(orderUserPhone)) {
        this.arrErrorList.push('请输入手机号码')
      }
      if (!(/^\d{4}$/.test(code))) {
        this.arrErrorList.push('请输入验证码')
      }
      if (!orderUserName) {
        this.arrErrorList.push('请输入姓名')
      }
      if (!orderUserProvince || !orderUserCity || !orderUserDistrict) {
        this.arrErrorList.push('请选择所在城市')
      }
      if (!orderCommunity) {
        this.arrErrorList.push('请选择所在小区')
      }
      if (!orderBuilding) {
        this.arrErrorList.push('请选择所在楼号')
      }
      return this.arrErrorList.length <= 0
    },
    funUpdateCapture () {
      this.strCapture = STRCAPTURE + '?' + new Date().getTime()
    },
    funInit () {
      getUserInfo().then(res => {
        const { status } = res
        if (status) {
          this.isRegistered = true
          if (this.checkMyBenfits === 1) {
            return
          }
          this.$router.replace({ path: '/loan/mine' })
        }
      }).catch((err) => {
        Toast(err)
      })
    },
    fetchCommunity () {
      getCommunity().then(res => {
        const { status, data } = res
        if (status) {
          this.columnsOfCommunity = [
            {
              values: data.map(item => item.addressName),
              defaultIndex: 0
            }
          ]
        }
      }).catch((err) => {
        Toast(err)
      })
    },
    funSubmit () {
      const { orderUserName, orderUserPhone, code, orderUserProvince, orderUserCity, orderUserDistrict, orderCommunity, orderBuilding, orderRoom } = this.postData
      const postData = {
        orderUserName,
        orderUserPhone,
        code,
        orderUserProvince,
        orderUserCity,
        orderUserDistrict,
        orderUserAddress: orderCommunity + orderBuilding + orderRoom
      }
      if (!this.verifyData()) {
        Toast({
          message: this.arrErrorList[0],
          forbidClick: true
        })
        return
      }
      const myToast = Toast.loading({
        message: '提交中...',
        duration: 1000 * 100,
        forbidClick: true
      })
      register(postData).then(res => {
        myToast.clear()
        if (res.status) {
          Toast({
            type: 'success',
            message: '提交成功',
            forbidClick: true,
            onClose: () => {
              this.$router.replace({ path: '/loan/mine' })
            }
          })
          return
        }
        Toast(res.msg)
      }).catch(err => {
        myToast.clear()
        Toast(err)
      })
    }
  },
  beforeDestroy () {
    if (this.scroll) {
      this.scroll.destroy()
    }
  },
  beforeRouteLeave (to, from, next) {
    if (['loanPrivacy', 'loanVipAgreement'].includes(to.name)) {
      from.meta.isUseCache = true
    }
    if (this.checkMyBenfits === 1 && !['loanPrivacy', 'loanVipAgreement'].includes(to.name)) {
      this.$store.commit('loan/UPDATE_CHECKMYBENFITS_VALUE', 0)
    }
    this.numPositionY = this.scroll ? this.scroll.y : 0
    next()
  }
}

const BUILDING = () => {
  const res = []
  for (let i = 1; i < 101; i++) {
    if (res.indexOf(i) < 0) {
      res.push(i + '幢')
    }
  }
  return res
}
const ROOM = () => {
  const res = []
  for (let i = 1; i < 7; i++) {
    if (res.indexOf(i) < 0) {
      res.push(i + '单元')
    }
  }
  return res
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  background: #fff;
}

.wrapper {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .introduce-wrap {
    width: 100%;
    padding-top: 206px;
    background: url("./image/card@2x.png") center 24px/344px 181px no-repeat;
  }

  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 375px;
    padding: 31px 0 97px;
    border-radius: 18px 18px 0 0;
    box-shadow: 0px -2px 11px 0px rgba(0, 0, 0, 0.2);
  }

  .member-benefits {
    display: flex;
    flex-flow: row wrap;
    width: 344px;
    height: 267px;
    padding: 66px 40px 0 35px;
    background: url("./image/introduce@2x.png") center top/100% 100% no-repeat;

    li {
      width: 40px;
      height: 80px;
      margin-left: 36px;

      &:nth-of-type(4n+1) {
        margin-left: 0;
      }

      &:nth-of-type(1),
      &:nth-of-type(2),
      &:nth-of-type(3),
      &:nth-of-type(4) {
        margin-bottom: 20px;
      }
    }
  }

  .checked-wrap {
    display: flex;
    align-items: center;
    margin-top: 14px;

    img {
      width: 20px;
      height: 20px;
    }

    span,
    a {
      line-height: 17px;
      font-size: 12px;
      color: #333;
    }

    a {
      text-decoration: underline;
    }
  }
}

.login {
  width: 327px;
  height: 45px;
  border-radius: 4px;
  margin-top: 40px;
  line-height: 45px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
  box-shadow: 0 14px 9px -10px #DBD0C2;
}

img.title {
  display: block;
  width: 93px;
  height: 22px;
  margin: 23px auto 0;
}

.form-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;

  li {
    position: relative;
    left: 0;
    top: 0;
    display: flex;
    align-items: flex-start;
    width: 327px;
    padding: 8px 14px;
    margin-top: 8px;
    border: 1px solid #E8E8E8;
    border-radius: 4px;

    &:nth-of-type(1) {
      margin-top: 12px;
    }
  }

  label {
    display: flex;

    &.required {
      position: relative;
      left: 0;
      top: 0;

      &:before {
        position: absolute;
        left: -12px;
        top: -4px;
        z-index: 1;
        content: '*';
        line-height: 33px;
        font-size: 24px;
        font-weight: 500;
        color: #FF3B30;
      }
    }

    span {
      line-height: 22px;
      font-size: 16px;
      font-weight: 500;
      color: #333;

      &.label-code:nth-of-type(5),
      &.label-name:nth-of-type(4),
      &.label-name:nth-of-type(5),
      &.label-city:nth-of-type(4),
      &.label-city:nth-of-type(5),
      &.label-community:nth-of-type(4),
      &.label-community:nth-of-type(5),
      &.label-buildingy:nth-of-type(4),
      &.label-buildingy:nth-of-type(5),
      &.label-room:nth-of-type(4),
      &.label-room:nth-of-type(5) {
        visibility: hidden;
      }
    }
  }

  .value-wrap {
    flex: 1;
    display: flex;
    margin-left: 9px;
  }

  input,
  textarea {
    width: 100%;
    min-height: 20px;
    padding-top: 2px;
    line-height: 20px;
    font-size: 15px;
    color: #333;
    word-break: break-all;
    resize: none;
    outline: 0 none;
    overflow: hidden;
    background: transparent;
    -webkit-text-fill-color: #333;
    opacity: 1;

    &::-webkit-input-placeholder {
      color: #999;
      -webkit-text-fill-color: #999;
      opacity: 1;
    }
  }

  .value-name {
    display: flex;
    width: 100%;
  }

  .value-city {
    flex: 1;
    line-height: 22px;
    font-size: 15px;
    color: #333;

    &.init {
      color: #999;
    }
  }

  .icon_next {
    width: 22px;
    height: 22px;
  }

  .capture-img {
    @include vertical-center;
    right: 14px;
    z-index: 1;
    display: block;
    width: 125px;
    height: 31px;
    border-radius: 4px;
    overflow: hidden;
  }

  .get-code {
    @include vertical-center;
    right: 0;
    z-index: 1;
    display: block;
    min-width: 87px;
    padding: 6px;
    line-height: 22px;
    font-size: 16px;
    font-weight: 500;
    color: #C9A585;
  }
}

.submit {
  display: block;
  width: 327px;
  height: 45px;
  margin: 20px auto 12px;
  border-radius: 4px;
  line-height: 20px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%);
  box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
}

.popup-benefits {
  width: 274px;
  min-height: 150px;
  padding: 30px 0 40px;
  background: #fff;
  border-radius: 16px;

  .benefits-title {
    width: 210px;
    margin: 0 auto 20px;
    line-height: 22px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: #333333;
  }

  .benefits-msg {
    width: 210px;
    margin: 0 auto;
    line-height: 20px;
    font-size: 14px;
    color: #666;
  }
}
</style>
