<template>
  <div class="mainPage">
    <div class="mask">
      <!-- <img :src="logo" class="logo" alt=""> -->
      <div class="box">
        <div class="title">绑定</div>

        <div class="mobile">
          <i class="iconfont icon-dianhua"></i>
          <input type="tel" maxlength="11" placeholder="手机号" v-model="postData.phone">
        </div>

        <!-- <div class="recommend">
          <span>推荐人</span>
          <div @click="selectCase">
            <span>{{caseName}}</span>
            <i class="iconfont icon-triangle-bottom"></i>
          </div>
          <div @click="selectSales">
            <span>{{salesName}}</span>
            <i class="iconfont icon-triangle-bottom"></i>
          </div>
        </div>-->
        <div class="mobile">
          <i class="iconfont icon-zhanghu"></i>
          <input placeholder="真实姓名" v-model="postData.name">
        </div>

        <div class="mobile">
          <i class="iconfont icon-mima"></i>
          <input type="tel" placeholder="推荐码 (非必填)" v-model="postData.recommendCode">
        </div>

        <div class="sms">
          <i class="iconfont icon-mima"></i>
          <input type="tel" maxlength="6" placeholder="验证码" v-model="postData.captcha">
          <div class="sand color" v-if="seconds === 61" @click="sandMsg">发送验证码</div>
          <div class="sand" v-else>{{seconds}}后可重发</div>
        </div>

        <div class="submit" @click="submit">
          <div>提交</div>
        </div>
      </div>
      <!-- <transition name="slide">
        <div class="select" v-if="showCase">
          <van-picker
            show-toolbar
            title="请选择"
            value-key='CaseName'
            :columns="columns"
            @cancel="onCancelC"
            @confirm="onConfirmC"
          />
        </div>
      </transition>
      <transition name="slide">
        <div class="select" v-if="showSales">
          <van-picker
            show-toolbar
            title="请选择"
            value-key='UserName'
            :columns="columnsS"
            @cancel="onCancelS"
            @confirm="onConfirmS"
          />
        </div>
      </transition>-->
    </div>
  </div>
</template>

<script>
import logo from '../../../common/icon/logo.png'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: actions } = createNamespacedHelpers('userCenter')
export default {
  data () {
    return {
      logo,
      showCase: false,
      showSales: false,
      columns: [],
      columnsS: [],
      caseName: '选择案场',
      salesName: '选择销售',
      seconds: 61,
      postData: {
        phone: '',
        name: '',
        // case: '',
        // sales: '',
        recommendCode: '',
        captcha: ''
      },
      canSubmit: true
    }
  },
  computed: {
    ...mapState({
      caseInfo: x => x.userCenter.caseInfo
    })
  },
  created () {
    this.getCaseInfo(1).then(() => {
      this.columns = this.caseInfo.cases
    })
    console.log(1123)
  },
  methods: {
    ...actions(['getCaseInfo']),
    ...actions(['getCaptcha']),
    ...actions(['submitData']),
    ...actions(['recommendCode']),
    // onConfirmC (value, index) {
    //   this.caseName = value.CaseName
    //   this.postData.case = value.CaseId
    //   this.columnsS = []
    //   this.salesName = '选择销售'
    //   if (this.caseInfo.sales) {
    //     for (let i = 0; i < this.caseInfo.sales.length; i++) {
    //       if (this.caseInfo.sales[i].CaseId === this.postData.case) {
    //         this.columnsS.push(this.caseInfo.sales[i])
    //       }
    //     }
    //   }
    //   if (this.caseInfo.manager) {
    //     for (let i = 0; i < this.caseInfo.manager.length; i++) {
    //       if (this.caseInfo.manager[i].CaseId === this.postData.case) {
    //         this.columnsS.push(this.caseInfo.manager[i])
    //       }
    //     }
    //   }
    //   this.showCase = false
    // },
    // onCancelC () {
    //   this.showCase = false
    // },
    // onConfirmS (value, index) {
    //   this.salesName = value.UserName
    //   this.postData.sales = value.UserId
    //   this.showSales = false
    // },
    // onCancelS () {
    //   this.showSales = false
    // },
    // selectCase () {
    //   this.showCase = true
    // },
    // selectSales () {
    //   if (!this.postData.case) {
    //     this.$toast('请先选择案场')
    //     return
    //   } else if (this.columnsS.length <= 0) {
    //     this.$toast('此案场无销售')
    //     return
    //   }
    //   this.showSales = true
    // },
    sandMsg () {
      if (!this.postData.phone) {
        this.$toast('请先填写手机号')
        return
      }
      if (this.postData.recommendCode) {
        this.recommendCode({ recommendCode: this.postData.recommendCode }).then((res) => {
          if (res) {
            this.getCaptcha(this.postData.phone)
            this.seconds = 60
            this.runTime()
          } else {
            this.$toast('推荐码不正确,请与案场人员核对')
            return
          }
        }).catch((err) => {
          return
        })
      } else {
        this.getCaptcha(this.postData.phone)
        this.seconds = 60
        this.runTime()
      }
    },
    runTime () {
      setTimeout(() => {
        this.seconds--
        if (this.seconds < 60 && this.seconds >= 1) {
          this.runTime()
        } else if (this.seconds < 1) {
          this.seconds = 61
        }
      }, 1000)
    },
    submit () {
      if (!this.canSubmit) {
        return
      }
      this.canSubmit = false
      if (!this.postData.captcha) {
        this.$toast('请填写验证码')
        this.canSubmit = true
        return
      }
      if (!this.postData.name) {
        this.$toast('请填真实姓名')
        this.canSubmit = true
        return
      }
      if (this.postData.recommendCode) {
        this.recommendCode({ recommendCode: this.postData.recommendCode }).then((res) => {
          if (res) {
            this.submitData(this.postData).then((res) => {
              if (this.$route.query.isLottery) {
                setTimeout(() => {
                  const from = this.$route.query.luckshare ? `#/from/${this.$route.query.luckshare}?lotteryId=${this.$route.query.lotteryId}&isnew=1` : `#/?lotteryId=${this.$route.query.lotteryId}&isnew=1`
                  window.location.href = `${window.location.origin}/game/luckdraw/${from}`
                }, 2000)
              } else {
                setTimeout(() => {
                  // this.$router.push({name: 'userCenter'})
                  window.history.go(-1)
                }, 2000)
              }
            }).catch(() => {
              console.log(111)
              this.canSubmit = true
            })
          } else {
            this.$toast('推荐码不正确,请与案场人员核对')
            this.canSubmit = true
            return
          }
        })
      } else {
        this.submitData(this.postData).then((res) => {
          if (this.$route.query.isLottery) {
            setTimeout(() => {
              const from = this.$route.query.luckshare ? `#/from/${this.$route.query.luckshare}?lotteryId=${this.$route.query.lotteryId}&isnew=1` : `#/?lotteryId=${this.$route.query.lotteryId}&isnew=1`
              window.location.href = `${window.location.origin}/game/luckdraw/${from}`
            }, 2000)
          } else {
            setTimeout(() => {
              // this.$router.push({name: 'userCenter'})
              window.history.go(-1)
            }, 2000)
          }
        }).catch(() => {
          console.log(111)
          this.canSubmit = true
        })
      }
    }
  }
}
</script>

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