<template>
  <view class="settledApply">
    <form report-submit='true'>
      <view class="settled-wrapper">
        <view class="set-item">
          <view class="title">商户名称</view>
          <input class="input-box" type="text" maxlength="30" placeholder="请输入商户名称" v-model="formData.mer_name"
            placeholder-class='placeholder' />
        </view>
        <view class="set-item">
          <view class="title">真实姓名</view>
          <input class="input-box" type="text" maxlength="30" placeholder="请输入真实姓名" v-model="formData.name"
            placeholder-class='placeholder' />
        </view>
        <view class="set-item">
          <view class="title">联系电话</view>
          <input class="input-box" type="text" maxlength="30" placeholder="请输入联系电话" v-model="formData.phone"
            placeholder-class='placeholder' />
        </view>
        <view class="set-item">
          <view class="title">验证码</view>
          <view class="input-box">
            <input type="text" maxlength="30" placeholder="请输入验证码" v-model="formData.code"
              placeholder-class='placeholder' />
            <button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="handleVerify">
              {{ text }}
            </button>
          </view>
        </view>
        <view class="set-item">
          <view class="title">店铺分类</view>
          <view class="input-box flex_a_c_j_sb" @click="pickerIsShow('class')">
            <input type="text" maxlength="30" placeholder="请选择店铺分类" disabled v-model="mer_classification"
              placeholder-class='placeholder' />
            <view class="iconfont icon-xialazhankai"></view>
          </view>
        </view>
        <view class="set-item">
          <view class="title">店铺类型</view>
          <view class="input-box flex_a_c_j_sb" @click="pickerIsShow('type')">
            <input type="text" maxlength="30" placeholder="请选择店铺类型" disabled v-model="mer_storeType"
              placeholder-class='placeholder' />
            <view class="iconfont icon-xialazhankai"></view>
          </view>
        </view>
        <view class="set-item">
          <view class="title">店铺所在地</view>
          <view class="input-box flex_a_c_j_sb" @click="pickerIsShow('site')">
            <input type="text" maxlength="30" placeholder="请选择商圈" disabled v-model="site_name"
              placeholder-class='placeholder' />
            <view class="iconfont icon-xialazhankai"></view>
          </view>
        </view>
        <view class="set-item">
          <view class="title">是否农贸市场</view>
          <view class="input-box no-border">
            <u-switch v-model="isOpenFair" @change="switchcChange"></u-switch>
          </view>
        </view>
        <view class="set-item">
          <text class="item-title">请上传营业执照及行业相关资质证明图片</text>
          <text class="item-desc">(图片最多可上传10张,图片格式支持JPG、PNG、JPEG)</text>
          <view class="upload">
            <view class='pictrue' v-for="(item,index) in pics" :key="index" :data-index="index"
              @click="getPhotoClickIdx">
              <image :src='item'></image>
              <text class='iconfont icon-guanbi1' @click.stop='DelPic(index)'></text>
            </view>
            <view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic' v-if="pics.length < 10">
              <text class='iconfont icon-icon25201'></text>
              <view>上传图片</view>
            </view>
          </view>
        </view>
        <view class="set-item no-border flex">
          <checkbox-group @change='ChangeIsAgree'>
            <checkbox class="checkbox" :checked="isAgree ? true : false" />已阅读并同意
          </checkbox-group>
          <button class="settleAgree" @click="getConfig">《入驻协议》</button>
        </view>
        <button class='submitBtn on-submit' @click="formSubmit">提交申请</button>
      </view>
    </form>
    <Verify @success="success" :captchaType="'blockPuzzle'" :imgSize="{ width: '330px', height: '155px' }" ref="verify">
    </Verify>
    <u-picker :defaultIndex="[0,0]" :show="pickerShow" @change="changeHandler" @confirm="confirm" :columns="columns"
      :keyName="keyName" ref="uPicker" @cancel="pickerShow = false"></u-picker>
  </view>
</template>

<script>
  import {
    create,
    verify,
    merClassifly,
    getGoodsDetails,
    updateGoodsRecord,
    getStoreTypeApi
  } from '@/api/store.js';
  import { getArea, getStreet } from '@/api/article.js';
  import Verify from '@/components/verify/verify.vue';
  import { Toast } from '@/libs/uniApi';
  export default {
    components: {
      Verify
    },
    data() {
      return {
        formData: {
          mer_name: '',
          name: '',
          phone: '',
          code: '',
          merchant_category_id: '',
          mer_type_id: '',
          site: '',
          images: []
        },
        disabled: false,
        timer: "",
        text: "获取验证码",
        pickerShow: false,
        keyName: '',
        columns: [],
        mer_classification: '', // 商户分类
        mer_storeType: '', // 店铺类型
        site_name: '', // 店铺所在地
        isOpenFair: false, // 是否农贸市场
        pics: [],
        isAgree: false,
        validate: false,
      }
    },
    beforeDestroy() {
      clearTimeout(this.timer)
    },
    onLoad() {},
    onShow() {},
    methods: {
      async formSubmit() {
        this.formData.images = this.pics
        if (this.validateForm()) {
          const res = await create(this.formData).catch(err => Toast(err))
        }
      },
      ChangeIsAgree: function(e) {
        this.isAgree = !this.isAgree;
      },
      switchcChange(e) {
        // console.log(e);
      },
      // 获取商户分类
      async getClassfication() {
        const res = await merClassifly().catch(err => Toast(err));
        this.keyName = 'category_name'
        this.$refs.uPicker.setColumnValues(0, res.data);
        this.pickerShow = true
      },
      // 获取店铺类型
      async getStoreType() {
        const res = await getStoreTypeApi().catch(err => Toast(err));
        this.keyName = 'type_name'
        this.$refs.uPicker.setColumnValues(0, res.data);
        this.pickerShow = true
      },
      // 获取商圈
      Area() {
        getArea({ city_code: 510500 }).then(res => {
          this.$refs.uPicker.setColumnValues(0, res.data);
          this.Street(res.data[0]['code']);
        });
      },
      Street(code) {
        getStreet({ area_code: code }).then(res => {
          this.keyName = 'name'
          this.$refs.uPicker.setColumnValues(1, res.data);
          this.pickerShow = true
        });
      },
      pickerIsShow(type) {
        switch (type) {
          case 'class':
            this.getClassfication()
            break;
          case 'type':
            this.getStoreType()
            break;
          case 'site':
            this.Area()
            break;
        }
      },
      confirm(e) {
        // console.log('e', e);
        switch (this.keyName) {
          case 'category_name':
            this.mer_classification = e.value[0].category_name
            this.formData.merchant_category_id = e.value[0].merchant_category_id
            break;
          case 'type_name':
            this.formData.mer_type_id = e.value[0].mer_type_id
            this.mer_storeType = e.value[0].type_name
            break;
          case 'name':
            this.formData.site = e.value[1].code
            this.site_name = e.value[1].name
            break;
        }
        this.pickerShow = false
      },
      changeHandler(e) {
        const { columnIndex, value, values, index, picker = this.$refs.uPicker } = e;
        if (this.keyName === 'site') {
          if (columnIndex === 0) {
            getStreet({ area_code: value[0]['code'] }).then(res => {
              this.$refs.uPicker.setColumnValues(1, res);
            });
          }
        }
      },
      async code(data) {
        let that = this;
        if (!that.formData.phone) return that.$util.Tips({
          title: '请填写手机号码'
        });
        if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.formData.phone)) return that.$util.Tips({
          title: '请输入正确的手机号码'
        });
        await verify({
            phone: that.formData.phone,
            // key: that.codeKey,
            // code: that.codeVal,
            type: 'intention',
            captchaType: 'blockPuzzle',
            captchaVerification: data.captchaVerification
          })
          .then(res => {
            that.$util.Tips({
              title: res.msg
            });
            that.sendCode();
          })
          .catch(res => {
            that.$util.Tips({
              title: res
            });
            if (res.status == 402) {
              // that.getcaptcha();
            }
          });
      },
      sendCode() {
        if (this.disabled) return;
        this.disabled = true;
        let n = 60;
        this.text = "剩余 " + n + "s";
        const run = setInterval(() => {
          n = n - 1;
          if (n < 0) {
            clearInterval(run);
          }
          this.text = "剩余 " + n + "s";
          if (this.text < "剩余 " + 0 + "s") {
            this.disabled = false;
            this.text = "重新获取";
          }
        }, 1000);
      },
      success(data) {
        this.$refs.verify.hide();
        this.code(data);
      },
      handleVerify() {
        if (!this.formData.phone) return this.$util.Tips({
          title: '请输入手机号'
        });
        if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.formData.phone)) return this.$util.Tips({
          title: '请输入正确的手机号码'
        });
        if (!this.isAgree) return this.$util.Tips({
          title: '请勾选并同意入驻协议'
        });
        this.$refs.verify.show();
      },
      // 图片预览
      // 获得相册 idx
      getPhotoClickIdx(e) {
        let _this = this;
        let idx = e.currentTarget.dataset.index;
        _this.imgPreview(_this.pics, idx);
      },
      // 图片预览
      imgPreview: function(list, idx) {
        // list：图片 url 数组
        if (list && list.length > 0) {
          uni.previewImage({
            current: list[idx], //  传 Number H5端出现不兼容
            urls: list
          });
        }
      },
      /**
       * 上传文件
       *
       */
      uploadpic: function() {
        let that = this;
        that.$util.uploadImageOne('upload/image', function(res) {
          that.pics.push(res.data.path);
          that.$set(that, 'pics', that.pics);
        });
      },
      /**
       * 删除图片
       *
       */
      DelPic: function(index) {
        let that = this,
          pic = this.pics[index];
        that.pics.splice(index, 1);
        that.$set(that, 'pics', that.pics);
      },
      validateForm: function() {
        let that = this,
          value = that.formData;
        if (!value.mer_name) return that.$util.Tips({
          title: '请输入企业名称'
        });
        if (!value.name) return that.$util.Tips({
          title: '请输入姓名'
        });
        if (!value.phone) return that.$util.Tips({
          title: '请输入手机号'
        });
        if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.phone)) return that.$util.Tips({
          title: '请输入正确的手机号码'
        });
        if (!value.code) return that.$util.Tips({
          title: '请填写验证码'
        });
        if (!value.merchant_category_id) return that.$util.Tips({
          title: '请选择商户分类'
        });
        if (!that.isAgree) return that.$util.Tips({
          title: '请勾选并同意入驻协议'
        });
        // if (that.isShowCode && !that.codeVal) return that.$util.Tips({
        // 	title: '请填写图片验证码'
        // });
        // that.validate = true;
        return true;
      },
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .settled-wrapper {
    width: 694.74rpx;
    margin: 0 auto;
    padding: 35.09rpx 28.07rpx;
    background: #fff;
    border-radius: 8px;

    .set-item {
      width: 100%;
      margin-bottom: 31.58rpx;

      .title {
        font-size: 31.58rpx;
      }

      .input-box {
        position: relative;
        display: flex;
        width: 100%;
        height: 48px;
        margin-top: 17.54rpx;
        padding: 21.05rpx;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #CCCCCC;
        box-sizing: border-box;

        .code {
          position: absolute;
          right: 10px;
          width: 93px;
          line-height: 27px;
          border: 1px solid $uni-theme-color;
          border-radius: 15px;
          color: $uni-theme-color;
          text-align: center;
          bottom: 8px;
          font-size: 12px;
        }

        .on {
          background-color: #bbb;
          color: #fff;
          border-color: #bbb;
        }
      }

      .placeholder {
        color: #ccc;
      }

      .no-border {
        padding: 0;
        border: none;
      }

      // 图片上传
      .item-title {
        color: #666666;
        font-size: 28rpx;
        display: block;
      }

      .item-desc {
        color: #B2B2B2;
        font-size: 22rpx;
        display: block;
        margin-top: 9rpx;
        line-height: 36rpx;
      }

      .upload {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -o-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: 20rpx;
      }

      .pictrue {
        width: 130rpx;
        height: 130rpx;
        margin: 24rpx 22rpx 0 0;
        position: relative;
        font-size: 11px;
        color: #bbb;

        &:nth-child(4n) {
          margin-right: 0;
        }

        &:nth-last-child(1) {
          border: 0.5px solid #ddd;
          box-sizing: border-box;
        }

        uni-image,
        image {
          width: 100%;
          height: 100%;
          border-radius: 1px;

          img {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
          }
        }

        .icon-guanbi1 {
          font-size: 33rpx;
          position: absolute;
          top: -10px;
          right: -10px;
        }
      }

      // 是否勾选
      .settleAgree {
        display: inline-block;
        font-size: 24rpx;
        color: $uni-theme-color;
        position: relative;
        top: 2px;
        left: 8px;
      }
    }

    .submitBtn {
      width: 588rpx;
      margin: 0 auto;
      height: 86rpx;
      border-radius: 25px;
      text-align: center;
      line-height: 86rpx;
      font-size: 15px;
      color: #fff;
      background: #E3E3E3;
      margin-top: 25px;
      pointer-events: none;
    }

    .on-submit {
      background: $uni-theme-bg-color;
      pointer-events: all;
    }
  }
</style>