<template>
  <van-popup
    v-model="visible"
    position="bottom"
    round
    transfer
  >
  <div class="main">
    <div class="top">
      <div style="width: 28px;height: 14px;"></div>
      <div class="top-title">请先填写信息</div>
      <div class="top-btn" @click="submit">提交</div>
    </div>
    <div class="form" :class="{error: isError}">
      <van-field v-if="lotteryInfo.premise && lotteryInfo.premise.includes('name')" v-model="form.name" label-width="60" label="联系人" placeholder="请输入联系人" @focus="isError = false"/>
      <template v-if="lotteryInfo.premise && lotteryInfo.premise.includes('phone')">
        <van-field v-model="form.phone" label-width="60" label="手机号" placeholder="请输入联系电话" @focus="isError = false"/>
        <van-field v-model="form.code" label-width="60" label="验证码" placeholder="请输入验证码" @focus="isError = false">
          <span slot="button" class="code" @click="sendCode">
            <span v-if="!isSend">获取验证码</span>
            <span v-else>{{ time }}s后重发</span>
          </span>
        </van-field>
      </template>
      <template v-if="lotteryInfo.premise && lotteryInfo.premise.includes('address')">
        <van-field v-model="form.address" label-width="60" label="收货地址" readonly placeholder="请选择省市区" @focus="isError = false" @click="select" >
          <van-icon slot="button" name="location" />
        </van-field>
        <van-field
          v-model="form.detail"
          type="textarea"
          label="门牌号"
          label-width="60"
          placeholder="详细地址（精确到门牌号）"
          rows="2"
          autosize
          maxlength="50"
          show-word-limit
          @focus="isError = false"
        />
      </template>
    </div>
    <van-popup
      v-model="isShowAdd"
      position="bottom"
      round
    >
      <van-area title="区域选择" :area-list="areaList" @confirm="chooseAdd" @cancel="isShowAdd = false"/>
    </van-popup>
  </div>
  </van-popup>
</template>

<script>
import {
  savePremise,
  setSendSmsCode,
  setValidSmsCode
} from '@/api/modules/lottery'
import { areaList } from '@vant/area-data';
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'ConfigPopup',
  props: {
    value: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      form: {
        name: '',
        phone: '',
        code: '',
        address: '',
        detail: ''
      },
      areaList,
      isShowAdd: false,
      isError: false,
      isSend: false,
      time: 60,
    }
  },
  computed: {
    ...mapGetters({
      uin: 'users/uin',
      lotteryInfo: 'lottery/lotteryInfo'
    }),
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
  },
  methods: {
    ...mapActions({
      getLotteryDetail: 'lottery/getLotteryDetail',
      updateInfo: 'lottery/updateInfo',
      postInfo: 'users/postInfo',
      checkPremise: 'lottery/check_premise'
    }),
    select() {
      this.isShowAdd = true
    },
    chooseAdd(val) {
      const str = val[0].name + '-' + val[1].name + '-' + val[2].name
      this.form.address = str
      this.isShowAdd = false
    },
    sendCode() {
      if (this.isSent) return
      if (!this.form.phone) {
        this.$toast('请先填写手机号')
        return
      }
      if (!this.form.phone.match(/^s*$|(?:(?:\+|00)86)?1\d{10}$/)) {
        this.$toast('手机号格式不正确')
        return
      }
      const { uin } = this.$route.query
      const phone = this.form.phone
      setSendSmsCode({ uin, phone, module: 'draw' }).then((res) => {
        const { code, errorCode, errorMessage, data } = res
        if (code === 200 && errorCode === 0) {
          if (data) {
            this.$toast(data)
          }
          let time = 60
          this.isSend = true
          const timer = setInterval(() => {
            time--
            this.time = time
            if (time <= 0) {
              clearInterval(timer)
              this.isSent = false
            }
          }, 1000)
        } else {
          this.$toast(errorMessage)
        }
      })
    },
    submit() {
      const { uin } = this.$route.query
      const { name, phone, code, address, detail } = this.form
      if (this.lotteryInfo.premise.includes('name')) {
        if (!name) {
          this.isError = true
          return 0
        }
      }
      if (this.lotteryInfo.premise.includes('address')) {
        if (!address || !detail) {
          this.isError = true
          return 0
        }
      }
      if (this.lotteryInfo.premise.includes('phone')) {
        if (!phone || !code) {
          this.isError = true
          return 0
        }
        setValidSmsCode({ uin, phone, code }).then((res) => {
          const { code, errorCode, errorMessage } = res
          if (code === 200 && errorCode === 0) {
            this.$toast('验证成功')
            this.save()
          } else {
            this.$toast(errorMessage)
          }
        })
      }else {
        this.save()
      }

    },
    save() {
      const { id, uin } = this.$route.query
      const params = {
        id,
        uin,
      }
      if (this.lotteryInfo.premise.includes('name')) {
        params.name = this.form.name
      }
      if (this.lotteryInfo.premise.includes('phone')) {
        params.phone = this.form.phone
      }
      if (this.lotteryInfo.premise.includes('address')) {
        params.address = this.form.address + this.form.detail
      }
      savePremise(params).then(res => {
        const { code, errorCode, errorMessage } = res
        if (code === 200 && errorCode === 0) {
          this.$toast('信息保存成功')
          this.visible = false
          this.checkPremise({ id, uin })
        } else {
          this.$toast(errorMessage)
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.main {
  // height: 52vh;
  padding-bottom: 30px;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  font-size: 14px;
  &-title {
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  &-btn {
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #357BF0;
  }
}
.form {
  .code {
    font-size: 13px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #357BF0;
  }
  /deep/ .van-cell {
    padding: 9.5px 13px;
  }
  /deep/ .van-field__label{
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #333333;
    span {
      white-space: nowrap;
    }
  }
  /deep/ .van-field__word-limit{
    color: #999;
  }
  /deep/ .van-cell::after {
    border-bottom: none;
  }
}
.error {
  /deep/ .van-field__control::placeholder {
    color: red;
  }
}
</style>
