<template>
    <div class="container" v-if="!loginInfo">
        <!-- <tabs v-model="merchantType" @change="handleSwitch">
            <tab title="商家入驻" :name="0"/>
            <tab title="个人入驻" :name="1"/>
        </tabs> -->
        <div class="page-tab">
            <div :class="isActive==0?'active-tab':'tab-item'" @click="handleSwitch(0)">商家入驻</div>
            <div :class="isActive==1?'active-tab':'tab-item'" @click="handleSwitch(1)">个人入驻</div>
        </div>
        <Form ref="form" @submit="onSubmit" :show-error="false" :scroll-to-error="true" label-width="30%">
            <!-- 1. 基本信息 -->
            <cell-group :title="isMerchant ? '店铺信息' : '个人信息'" style="color:'#333'" />
            <Field v-if="isMerchant" label="店铺名称" v-model="form.merchantName" required :border="false" size="lagre" />
            <Amap v-if="isMerchant" label="店铺地址" v-model="form.address" required arrow-direction="down" />
            <Field v-if="isMerchant" label="门牌号" v-model="form.houseNumber" :maxlength="100" />
            <Field v-if="isMerchant" label="服务半径范围（公里）" v-model="form.serviceDistance" type="number" required />
            <Field :label="isMerchant ? '联系人': '姓名'" v-model="form.user.nickName" required />
            <Field label="联系电话" v-model="form.user.phonenumber" type="tel" validate="phone" required />

            <!-- 2. 资质信息 -->
            <template v-if="isMerchant">
                <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.businessLicenseImg" required /> -->
            </template>
            <Field :label="`${isMerchant?'法人':''}身份证号`" v-model="form.info.legalPersonNo" validate="idCard" required />
            <div>
                <Upload :label="`${isMerchant?'法定代表':''}手持身份证（正面）`" v-model="form.info.legalPersonFrontImg" required imageFit="scale-down" :selfImage="true" selfImageWidth="200pt" selfImageHeight="120pt" />
            </div>
            <div>
                <Upload :label="`${isMerchant?'法定代表':''}手持身份证（反面）`" v-model="form.info.legalPersonBackImg" required />
            </div>

            <!-- 3. 收款信息 -->
            <cell-group title="收款信息" />
            <Field label="户名" v-model="form.bank.userName" required />
            <Field label="银行账号" v-model="form.bank.bankAccount" type="digit" required />
            <BankPicker label="开户银行" v-model="form.bank.bankBranchName" @codeChange="code => form.bank.bankBranchCode = code" :card="form.bank.bankAccount" required />
            <span style="font-size:10pt;color:#FC6035;padding:10pt 16pt">例：中国建设银行（苏州分行）</span>
            <Field label="业务经理" v-model="form.promoter" type="tel" validate="phone" placeholder="请输入业务经理手机号" />

            <div style="margin: 0px auto;width:60%;just-content:center">

                <Button block color="#FC6035" native-type="submit" :loading="loading" size="normal" style="margin:20pt 0">提交</Button>
            </div>
        </Form>
    </div>
    <div style="" v-else>
        <div style="backgroud-color:#fff;padding:10pt 10pt 10pt 30pt;font-size:12pt">
            <div></div>
            <div>优鲜信家政平台</div>
        </div>
        <div class="info-body">
            <div style="width:100%;height:20pt"></div>
            <div class="info-container">
                <div class="info-container-title">
                    <div class="info-container-title-item">
                        <div class="info-container-cic-active">
                            <div class="info-container-cic-child-active"></div>
                        </div>
                        <div style="margin-top:5pt">填写信息</div>
                    </div>
                    <div style="border-bottom:1px dashed #E1E1E1;width:10%"></div>
                    <div class="info-container-title-item">
                        <div class="info-container-cic-active">
                            <div class="info-container-cic-child-active"></div>
                        </div>
                        <div style="margin-top:5pt;color:#FC6035">提交成功</div>
                    </div>
                    <div style="border-bottom:1px dashed #E1E1E1;width:10%"></div>
                    <div class="info-container-title-item">
                        <div class="info-container-cic">
                            <div class="info-container-cic-child"></div>
                        </div>
                        <div style="margin-top:5pt;">审核通过</div>
                    </div>
                </div>
                <img src="../assets/images/infoSuccess.png" alt="">
                <!-- <icon name="success" color="yellowgreen" size="50" style="margin:30pt" /> -->
                <p style="font-size: 14pt;color:#333;font-weight:bold;">提交成功，请等待审核结果</p>
                <div style="display:flex; justify-content: space-around;font-size:10pt">
                    <div><span style="color:#666">登录手机号：</span>{{loginInfo.userName}}<span>11111111111</span></div>
                    <div><span style="color:#666"> 密码：</span>{{loginInfo.password}}<span>111111111</span></div>
                </div>
                <div class="info-footer">
                    <div>工作人员会在 <span style="font-weight:bold">24小时内进行审核</span> </div>
                    <div style="margin-top:20pt">审核结果会短信通知（<span style="font-weight:bold">{{loginInfo.userName}}</span>）手机号码</div>

                </div>
            </div>

        </div>

    </div>
</template>

<script>
import { settled } from "@/api/merchant/merchant";
import Field from "@/components/vant/form/items/Field.vue";
import Amap from "@/components/vant/form/items/Amap.vue";
import Upload from "@/components/vant/form/items/Upload.vue";
import BankPicker from "@/components/vant/form/items/BankPicker.vue";
import { Cell, Form, CellGroup, Button, Tab, Tabs, Icon } from "vant";

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

export default {
    name: "Settled",
    components: {
        Icon,
        Field,
        Amap,
        Upload,
        BankPicker,
        Cell,
        Form,
        CellGroup,
        Tab,
        Tabs,
        Button,
    },
    data() {
        return {
            titleStyle: {
                "font-weight": "bold",
                color: "#333",
            },
            isActive: 0,
            merchantType: 0,
            loading: false,
            form: {
                user: {},
                info: {},
                bank: {},
            },
            loginInfo: null,
        };
    },
    computed: {
        isMerchant() {
            return this.merchantType === 0;
        },
    },
    methods: {
        async onSubmit() {
            this.loading = true;
            try {
                await this.$refs.form.validate();
                const { merchantType } = this;
                const { data } = await settled({ ...this.form, merchantType });
                this.loginInfo = data;
            } finally {
                this.loading = false;
            }
        },
        handleSwitch(index) {
            this.isActive = index;
            this.merchantType = index;
            this.form = defaultForm();
            this.$refs.form.resetValidation();
        },
    },
};
</script>

<style scoped>
.info-footer{
    background-color: #FAFAFA;
    margin: 10pt 20pt;
    padding: 19pt 0 ;
    font-size: 10pt;
    position: relative;
}
.info-container-title-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.info-container-cic-child {
    position: absolute;
    width: 5pt;
    height: 5pt;
    left: calc(50% - 2.5pt);
    top: calc(50% - 2.5pt);
    background: #ccc;
    border-radius: 50%;
    z-index: 99;
}
.info-container-cic {
    position: relative;
    width: 10pt;
    height: 10pt;
    background: #fafafa;
    border: 1px solid #eeeeee;
    border-radius: 50%;
}
.info-container-cic-child-active {
    position: absolute;
    width: 5pt;
    height: 5pt;
    left: calc(50% - 2.5pt);
    top: calc(50% - 2.5pt);
    background: #fc6035;
    border-radius: 50%;
    z-index: 99;
}
.info-container-cic-active {
    position: relative;
    width: 10pt;
    height: 10pt;
    background: #ffeee9;
    border: 1px solid #ffcbbd;
    border-radius: 50%;
}
.info-container-title {
    display: flex;
    justify-content: space-around;
    font-size: 10pt;
    align-items: center;
    margin-top: 20pt;
}
.info-container {
    padding: 5pt;
    margin: 0 auto;
    width: 80%;
    margin-top: 30pt;
    background-color: #fff;
}
.info-body {
    text-align: center;
    height: 100vh;
    background-color: #f8f8f8;
}
.van-cell-group__title {
    color: #333;
    font-size: 12pt;
    font-weight: bold;
}
/deep/.van-cell__title {
    color: #333;
    font-size: 12pt;
}
/deep/.van-field__body {
    border: 1pt solid #eee;
    padding: 4pt 2pt 4pt 10pt;
}

.van-cell {
    margin-top: 10pt;
    display: flex;
    flex-direction: column;
}
/deep/.van-cell__value {
    margin: 4pt 0;
}
/deep/.van-cell--required {
    /* margin-top: 10pt; */
    display: flex;
    flex-direction: column;
}
.van-cell::after {
    border-bottom: 0 transparent;
}
.van-hairline--top-bottom::after {
    border-bottom: 0 transparent;
}

.page-tab {
    display: flex;
    justify-content: space-around;
}
.tab-item {
    border: 1px solid #fc6035;
    padding: 9.5pt 21pt;
    border-radius: 5pt;
    color: #fc6035;
}
.active-tab {
    padding: 9.5pt 21pt;
    border-radius: 5pt;
    background-color: #fc6035;
    color: #fff;
}
@media screen and (min-width: 600px) {
    .container {
        width: 600px;
        margin: auto;
    }
}
.container {
    padding: 10pt;
}
.highlight {
    color: red;
    font-size: 16pt;
}
.tip {
    font-size: 10pt;
    color: #666666;
    line-height: 28px;
}
</style>