<template>
    <view class="clientApp-content_box app-content">
        <appResult class="app-result_xx" title="下单成功">
            <template slot="content">
                <view class="apply-content_box">
            <view class="tit">只要一步，免费开网店：</view>
            <form @submit="formSubmit">
                 <view class="module-com">
                     <tui-list-cell class="line-cell" :hover="false">
                        <div class="tui-title">花店名称</div>
                        <input
                            v-model="form.name"
                            placeholder-class="phcolor"
                            placeholder-style="color:#CCCCCC"
                            class="tui-input"
                            name="name"
                            placeholder="请输入花店名称"
                        />
                        </tui-list-cell>
                        <tui-list-cell class="line-cell" :hover="false">
                            <div class="tui-title">营业执照编号</div>
                            <input
                                v-model="form.licenseNo"
                                placeholder-class="phcolor"
                                placeholder-style="color:#CCCCCC"
                                class="tui-input"
                                name="name"
                                placeholder="请输入营业执照编号"
                            />
                        </tui-list-cell>
                        <tui-list-cell class="line-cell" :hover="false">
                            <div class="tui-title">营业执照片</div>
                            <app-uploader @resultData="resultData" ref="appUploader" :num="1" />
                        </tui-list-cell>
                        <appFormRadioBtn :selectOptions="selectOptions" title="主营业务" :currenSelect.sync="form.main" />
                 </view>
                 <div class="btn-wrap">
                    <button class="admin-button-com blue big" formType="submit">确认开店</button>
                </div>
            </form>
        </view>
            </template>
	    </appResult>
        
    </view>
</template>

<script>
    import appResult from '@/components/app-result'
    import TuiListCell from "@/components/plugin/list-cell";
    import AppUploader from "@/components/app-uploader";
    import appFormRadioBtn from "@/components/app-formRadio-btn";
    import { applyRegister } from "@/api/official";
    const form = require("@/utils/formValidation.js");
    export default {
        name:'ClientApply',
        components:{
            appResult,
            TuiListCell,
            AppUploader,
            appFormRadioBtn
        },
        data() {
            return {
                 form: {
                    name: "",
                    main: 1,
                    licenseNo: "",
                    license: "",
                },
                selectOptions:[{name:'零售',id:1},{name:'培训',id:2}]
                
            }
        },
        methods:{
            resultData(val){
                this.form.license = val.smallUrl
            },
             // 表单验证
            formSubmit(e) {
            // 表单规则
                let rules = [
                    {
                    name: "name",
                    rule: ["required"],
                    msg: ["请填写昵称"]
                    }
                ];
                // 进行表单检查
                let formData = this.form;
                let checkRes = form.validation(formData, rules);
                // 验证通过!
                if (!checkRes) {
                    setTimeout(() => {
                    this.confirmFn();
                    });
                } else {
                    this.$msg(checkRes);
                }
                },
                confirmFn() {
                // let id = uni.getStorageSync("introMerchantId");
                applyRegister({
                    ...this.form,
                    style: this.option.style || 0,
                    from: 2
                }).then(res => {
                    this.$util.pageTo({
                    url: "/pagesClient/official/clientApply",
                    type: 2,
                    });
                });
                },
        }
    }
</script>

<style lang="scss" scoped>
    .btn-wrap {
    width: 90%;
    margin: 60px auto;
    .admin-button-com {
        width: 100%;
        margin: 0 auto;
    }
    }
    .clientApp-content_box {
        min-height: 100vh;
        & .app-result_xx  /deep/ .result-title {
            margin-bottom: 0!important;
            font-weight: 600;
        }
        & .app-result_xx  /deep/ .billing_box_bg {
            padding-bottom: 30upx;
        }
        .apply-content_box {
            & > .tit {
                color: #333333;
                font-size: 32upx;
                font-weight: 600;
                padding: 30upx;
                border: 1upx solid #EEEEEE;
                background-color: #FFFFFF;
            }
        }
    }
    .module-com {
  margin-bottom: 20px;
  background-color: #fff;
  .module-tit {
    padding: 20px 18px;
    font-size: 28px;
    font-weight: 600;
    border-bottom: 1px solid $borderColor;
  }
  .module-det {
    padding: 0 30px;
  }
}
// 公共
.line-cell {
  .tui-title {
    width: 210upx;
    color: $fontColor2;
  }
  .tui-input {
    width: calc(100% - 210px);
    font-size: 28px;
  }
  .tui-placeholder {
    color: #ccc;
  }
  .phcolor {
    color: #ccc;
  }
}
.btn-wrap {
  width: 90%;
  margin: 60px auto;
  .admin-button-com {
    width: 100%;
    margin: 0 auto;
  }
}
// 验证码
.code-wrap {
  .tui-input {
    width: calc(100% - 410px);
    font-size: 28px;
  }
  .tui-code {
    width: 200px;
    text-align: center;
    border-left: 1px solid $borderColor;
    color: $mainColor;
  }
}
</style>