<template>
    <view class="page-container">
        <!-- <u-navbar title="招商加盟" :autoBack="true" placeholder bgColor="#fff"></u-navbar> -->

        <view class="banner-box">
            <image src="/static/other/work.png" mode="widthFix"
                class="banner-img"></image>
        </view>

        <view class="form-box">
            <u--form ref="uForm" 
                labelPosition="top"
				:model="form" :rules="rules"
			>
                <u-form-item prop="city">
                    <view class="label required" slot="label">意向代理城市</view>
                    <u-input v-model="form.city" placeholder="请输入您的首选城市" border="none"
                        class="input-gray"></u-input>
                </u-form-item>

                <u-form-item prop="resource">
                    <view class="label" slot="label">城市资源介绍</view>
                    <u-textarea v-model="form.resource" placeholder="请输入城市资源介绍" border="none" height="80"
                        class="input-gray"></u-textarea>
                </u-form-item>

                <u-form-item prop="name">
                    <view class="label required" slot="label">合伙人姓名</view>
                    <u-input v-model="form.name" placeholder="请输入您的名字" border="none" class="input-gray"></u-input>
                </u-form-item>

                <u-form-item prop="phoneNum">
                    <view class="label required" slot="label">手机号</view>
                    <u-input v-model="form.phoneNum" placeholder="请输入您的手机号" type="number" border="none"
                        class="input-gray"></u-input>
                </u-form-item>

                <u-form-item prop="company">
                    <view class="label" slot="label">公司</view>
                    <u-input v-model="form.company" placeholder="请输入公司名称" border="none" class="input-gray"></u-input>
                </u-form-item>

                <u-form-item prop="isMassage">
                    <view class="label" slot="label">是否从事过按摩行业</view>
                    <u-radio-group v-model="form.isMassage" activeColor="#e1b876">
                        <u-radio label="是" :name="1" customStyle="margin-right: 40px"></u-radio>
                        <u-radio label="否" :name="0"></u-radio>
                    </u-radio-group>
                </u-form-item>

                <u-form-item prop="years">
                    <view class="label" slot="label">有几年按摩行业管理经验</view>
                    <u-radio-group v-model="form.years" activeColor="#e1b876">
                        <u-radio label="1-3年" name="1" customStyle="margin-right: 20px"></u-radio>
                        <u-radio label="4-10年" name="2" customStyle="margin-right: 20px"></u-radio>
                        <u-radio label="10年以上" name="3"></u-radio>
                    </u-radio-group>
                </u-form-item>

                <u-form-item prop="isEntity">
                    <view class="label" slot="label">是否正在经营实体门店</view>
                    <u-radio-group v-model="form.isEntity" activeColor="#e1b876">
                        <u-radio label="是" :name="1" customStyle="margin-right: 40px"></u-radio>
                        <u-radio label="否" :name="0"></u-radio>
                    </u-radio-group>
                </u-form-item>

                <view class="btn-box">
                    <u-button text="提交" color="#FFCA64" shape="circle"
                        customStyle="color: #000; font-size: 32rpx;"
                        @click="onSubmit"
                    ></u-button>
                </view>
            </u--form>
        </view>
    </view>
</template>

<script>
import {
    netBusinessAdd,
    netBusinessUpdate,
    getBusinessByOpenId,
} from '@/api/staff';
export default {
    data() {
        return {
            form: {
                city: '',
                name: '',
                years: '',
                company: '',
                isEntity: '',
                resource: '',
                phoneNum: '',
                isMassage: '',
            },
            rules: {
				city: [
					{
						required: true,
						message: '请输入意向代理城市',
						trigger: ['blur', 'change']
					}
				],
				name: [
					{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}
				],
				phoneNum: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
                    {
                        pattern: /^1([3589]\d|4[01456879]|6[0-9]|7[0-8])\d{8}$/, 
                        message: '请输入正确的手机号格式', 
                        trigger: ['blur', 'change']
					}
				]
			}
        };
    },
    onShow() {
        this.getData();
    },
	onReady() {
		// 页面加载完成后为表单设置规则
		this.$refs.uForm.setRules(this.rules);
	},
    methods: {
        getData() {
            let params = {
                openId: uni.getStorageSync('wx_copenid')
            }
            getBusinessByOpenId(params).then(res => {
                if (res.data.code === 200 && res.data.data) {
                    this.form = res.data.data;
                }
            });
        },
        onSubmit() {
			this.$refs.uForm.validate().then(res => {
                let api = netBusinessAdd;
                if (this.form.id) api = netBusinessUpdate;
                api(this.form).then(res => {
                    uni.$u.toast(res.data.msg);
                    if (res.data.code == 200) {
                        setTimeout(() => {
                            uni.navigateBack();
                        }, 1000);
                    } else {
                        
                    }
                });
			}).catch(errors => {
				// uni.$u.toast('校验失败')
			})
		}
    }
};
</script>

<style lang="scss" scoped>
.page-container {
    min-height: 100vh;
    background-color: #1a1a1a;
}

.banner-box {
    width: 100%;
    height: 360rpx;

    .banner-img {
        width: 100%;
        display: block;
    }
}

.form-box {
    min-height: 800rpx;
    margin: 0 24rpx;
    padding: 40rpx 24rpx;
    border-radius: 16rpx;
    background-color: #F4F5F6;
    position: relative;
    z-index: 10;

    .label {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 16rpx;
        font-weight: bold;
    }

    .required::after {
        content: '*';
        color: #ff4d4f;
        margin-left: 4rpx;
    }

    .input-gray {
        background-color: #fff;
        border-radius: 8rpx;
        padding: 10rpx 20rpx !important;
    }
}

.btn-box {
    margin-top: 60rpx;
}
</style>