<template>
    <div class="container" v-if="!loginInfo">
        <van-tabs v-model="merchantType" @change="handleSwitch">
            <van-tab title="商家入驻" :name="0"/>
            <van-tab title="个人入驻" :name="1"/>
        </van-tabs>
        <van-form ref="form" @submit="onSubmit" :show-error="false" :scroll-to-error="true">
            <!-- 1. 基本信息 -->
            <van-cell-group :title="isMerchant ? '店铺信息' : '个人信息'"/>
            <template v-if="isMerchant">
                <Field label="店铺名称" v-model="form.merchantName" required/>
                <Amap label="店铺地址" v-model="form.position" required/>
                <Field label="门牌号" v-model="form.houseNumber" :maxlength="100"/>
            </template>
            <Field :label="isMerchant ? '联系人': '姓名'" v-model="form.user.nickName" required/>
            <Field label="联系电话" v-model="form.user.phonenumber" type="phone" required/>

            <!-- 2. 资质信息 -->
            <template v-if="isMerchant">
                <van-cell-group v-if="isMerchant" title="资质信息"/>
                <Field label="营业执照号" v-model="form.info.businessNum" required/>
                <Upload label="营业执照" v-model="form.info.businessImg" required/>
                <Upload label="许可证" v-model="form.info.businessLicenceImg" required/>
            </template>
            <Field :label="`${isMerchant?'法人':''}身份证号`" v-model="form.info.legalPersonNo" type="idCard" required/>
            <Upload :label="`${isMerchant?'法定代表':''}手持身份证（正面）`" v-model="form.info.legalPersonFrontImg" required/>
            <Upload :label="`${isMerchant?'法定代表':''}手持身份证（反面）`" v-model="form.info.legalPersonBackImg" required/>
            
            <!-- 3. 收款信息 -->
            <van-cell-group title="收款信息"/>
            <Field label="户名" v-model="form.bank.userName" required/>
            <Field label="账号" v-model="form.bank.bankAccount" required/>
            <Field label="开户银行" v-model="form.bank.bankBranchName" required/>
            <Field label="业务经理" v-model="form.promoter" type="phone"/>

            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
    <div v-else style="text-align:center;">
        <van-icon name="success" color="yellowgreen" size="50" style="margin:30pt"/>
        <p style="font-size: 18pt;margin: 0 0 20pt;">提交成功，请等待审核结果</p>
        <p style="font-size: 12pt">
            登录手机号：<span class="highlight">{{loginInfo.userName}}</span><br/>
            密码：<span class="highlight">{{loginInfo.password}}</span>
        </p>
        <p class="tip">工作人员会在24小时内进行审核，</p>
        <p class="tip">审核结果会短信通知（{{loginInfo.userName}}）手机号码。</p>
    </div>
</template>

<script>
import Field from './components/vant/form/items/Field.vue'
import {settled} from '@/api/merchant/merchant'

const defaultForm = () => ({
    user: {},
    info: {},
    bank: {}
})

export default  {
  components: { Field },
  name:  'Merchant',
    data() {
        return {
            merchantType: 0,
            form: {
                user: {},
                info: {},
                bank: {}
            },
            loginInfo: null
        }
    }, 

    computed: {
        isMerchant() {
            return this.merchantType === 0
        }
    },
    methods: {
        async onSubmit() {
            const {merchantType} = this
            const {code, data} = await settled({...this.form, merchantType})
            if (code === 200) {
                this.loginInfo = data
            }
        },
        handleSwitch() {
            this.form = defaultForm()
            this.$refs.form.resetValidation()
        }
    }
}
</script>

<style scoped>
.container{
    padding: 10pt;
}
.highlight{
    color: red;
    font-size: 16pt;
}
.tip{
    font-size: 10pt;
    color: #666666;
    line-height: 28px;
}
</style>