<template>
  <view class="content">
    <view class="info">
      <div class="cro">
        <div class="cro_left_bottom"></div>
        <div class="cro_right_bottom"></div>
        <view class="img">
          <u-image width="100%" height="580rpx" :src="info.pic"></u-image>
          <view class="" style="font-size: 36rpx;color: #333333;margin-top: 40rpx;">{{ info.name }}</view>
        </view>
      </div>
      <div class="cro cro2">
        <div class="cro_left_top"></div>
        <div class="cro_right_top"></div>
        <view class="u-content ql-editor img"><u-parse :html="info.note"></u-parse></view>
      </div>
      <div class="cro3">
        <!-- :error-type="['border-bottom']" -->
        <u-form :model="form" ref="uForm" label-width="200" :label-style="{ color: '#333333', fontSize: '34rpx', fontWeight: 'bold' }">
          <view style="text-align: center;color: #333;font-size: 36rpx;font-weight: bold;">添加收货地址</view>
          <u-form-item label="收货人" prop="name"><u-input v-model="form.name" placeholder="请填写收货人姓名" /></u-form-item>
          <u-form-item label="手机号码" prop="phone"><u-input placeholder="请填写收货人手机号" v-model="form.phone" type="number" maxlength="11"></u-input></u-form-item>
          <u-form-item label="验证码" prop="code">
            <u-input placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
            <view slot="right" @click="getCode" style="color: #F09B38;">{{ codeTips }}</view>
          </u-form-item>
          <u-form-item label="选择地区" prop="city"><u-input v-model="form.city" type="select" placeholder="请选择省市区" @click="show = true" /></u-form-item>
          <u-form-item label="详细地址" prop="details"><u-input v-model="form.details" type="text" placeholder="街道楼栋门牌号" /></u-form-item>
        </u-form>
        <u-button class="custom-style" shape="circle" hover-class="none" @click="submit">我要提货</u-button>
        <u-picker mode="region" v-model="show" :area-code="arrCode" @confirm="change"></u-picker>
        <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
      </div>
    </view>
    <u-popup v-model="show2" mode="center" border-radius="14" :mask-close-able="false" closeable width="60%" height="100px">
      <view style="height: 100%;line-height: 100px;text-align: center;">{{ message }}</view>
    </u-popup>
  </view>
</template>

<script>
import { getInfo, getCode, addOrder } from '@/common/api.js'
export default {
  data() {
    return {
      info: {},
      options: {},
      form: {
        name: '',
        phone: '',
        city: '',
        details: '',
        address: ''
      },
      show: false,
      show2: false,
      message: '',
      arrCode: [],
      radio: '',
      switchVal: false,
      codeTips: '',
      rules: {
        name: [
          {
            required: true,
            message: '请输入姓名',
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change', 'blur']
          }
        ],
        phone: [
          {
            required: true,
            min: 11,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ],
        city: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ],
        details: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  onLoad(options) {
    if (!options.id) return this.$u.toast('请扫描二维码访问')
    // uni.$showMsg('请扫描二维码访问')
    this.options = options
    getInfo(options).then(({ data }) => {
      this.info = data
    })
  },
  methods: {
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          console.log('验证通过')
          this.form.address = this.form.city + this.form.details
          this.form.activityId = this.options.id
          addOrder(this.form)
            .then(({ code, message }) => {
              if (code != 200) {
                this.show2 = true
                this.message = message
                return
              }
              uni.navigateTo({
                url:'/pages/index/fillForm'
              })
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          console.log('验证失败')
        }
      })
    },
    codeChange(text) {
      this.codeTips = text
    },
    // 获取验证码
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        if (this.form.phone.length !== 11) return
        uni.showLoading({
          title: '正在获取验证码',
          mask: true
        })
        getCode({ phone: this.form.phone, activityId: this.options.id }).then(({ code, data, message }) => {
          if (code != 200) {
            this.show2 = true
            this.message = message
            return
          }
          this.form.unit = data.unit
          this.form.id = data.id
          uni.hideLoading()
          this.$u.toast('验证码已发送')
          this.$refs.uCode.start()
        })
      } else {
        this.$u.toast('倒计时结束后再发送')
      }
    },
    change(e) {
      this.form.city = e.province.label + e.city.label + e.area.label
      this.arrCode = [e.province.value, e.city.value, e.area.value]
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  }
}
</script>

<style lang="scss" scoped>
@import '/static/css/quill.core.css';
@import '/static/css/quill.snow.css';
.content {
  // height: calc(100vh - 100rpx);
  height: 100vh;
  background: url(../../static/bgi.png) no-repeat;
  background-size: 100% 100%;
  overflow: auto;
  .info {
    padding: 52rpx 25rpx 34rpx;
    .cro {
      width: 100%;
      background-color: #ffffff;
      position: relative;
      border-radius: 15px 15px 0 0;
      .img {
        padding: 40rpx;
        font-size: 30rpx;
        color: #666666;
        .u-image {
          border-radius: 15px !important;
          overflow: hidden !important;
        }
      }
    }
    .cro2 {
      width: 100%;
      border-top: 1px dashed #dedede;
      background-color: #ffffff;
      position: relative;
      border-radius: 0 0 15px 15px;
    }
    .cro3 {
      margin-top: 15px;
      background-color: #ffffff;
      padding: 40rpx;
      border-radius: 15px;
      /deep/.uni-input-input {
        color: #666 !important;
        font-size: 30rpx;
      }
    }
    .cro_left_top,
    .cro_right_top,
    .cro_left_bottom,
    .cro_right_bottom {
      position: absolute;
      width: 10px;
      height: 10px;
      z-index: 1;
      background-color: #fc843f;
    }
    .cro_left_top {
      top: -1px;
      left: -1px;
      border-radius: 0 0 10px 0;
    }
    .cro_right_top {
      top: -1px;
      right: -1px;
      background-color: #f99954;
      border-radius: 0 0 0 10px;
    }
    .cro_left_bottom {
      left: -1px;
      bottom: -1px;
      border-radius: 0 10px 0 0;
    }
    .cro_right_bottom {
      right: -1px;
      bottom: -1px;
      background-color: #f99954;
      border-radius: 10px 0 0 0;
    }
  }
  .custom-style {
    height: 88rpx;
    color: #fffefd;
    background: #f09b38;
    border-radius: 44px;
    font-size: 36rpx;
  }
  .m_btn {
    position: absolute;
    bottom: 0;
    width: 100%;
    .u-btn {
      background: #ff4900;
      border-radius: 0;
      height: 100rpx;
      font-size: 36rpx;
      color: #fffefd;
    }
  }
}
</style>
