<template>
    <div class="content">
        <div class="header">
            <u-navbar
                :background="{ backgroundColor: '#ffcb57' }"
                :border-bottom="false"
                title="用户登录"
                title-color="#472d21"
            ></u-navbar>
        </div>
        <view class="wrap">
            <u-card :show-head="false" padding="0" margin="30rpx 30rpx 15rpx 30rpx">
                <view slot="body">
                    <u-cell-group>
                        <u-cell-item title="手机号码" :arrow="false">
                            <u-input
                                v-model="phone"
                                type="number"
                                height="48"
                                input-align="right"
                                maxlength="11"
                                placeholder="请输入手机号码"
                                :clearable="false"
                            />
                        </u-cell-item>
                        <u-cell-item title="验证码" :arrow="false">
                            <view class="slMsg">
                                <u-input
                                    v-model="code"
                                    type="number"
                                    height="48"
                                    input-align="right"
                                    maxlength="6"
                                    placeholder="请输入验证码"
                                    :clearable="false"
                                    :custom-style="{marginRight: '12rpx'}"
                                />
                                <u-button size="mini" slot="right" type="success" @click="getCode">{{
                                    codeText
                                }}</u-button>
                                <u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
                            </view>
                        </u-cell-item>
                    </u-cell-group>
                </view>
            </u-card>
            <view class="tips">您尚未注册，请完善以下信息完成注册</view>
            <u-card :show-head="false" padding="0" margin="30rpx 30rpx 15rpx 30rpx">
                <view slot="body">
                    <u-cell-group>
                        <u-cell-item title="用户类型" arrow :value="selectedTypeName" @click="showSel"></u-cell-item>
                        <u-cell-item title="公司名称" :arrow="false" v-if="selectedTypeNumber === '2'">
                            <u-input
                                v-model="companyName"
                                type="text"
                                height="48"
                                input-align="right"
                                maxlength="50"
                                placeholder="请输入公司名称"
                                :clearable="false"
                            />
                        </u-cell-item>
                        <u-cell-item title="真实姓名" :arrow="false">
                            <u-input
                                v-model="nickName"
                                type="text"
                                height="48"
                                input-align="right"
                                placeholder="请输入真实姓名"
                                :clearable="false"
                            />
                        </u-cell-item>
                    </u-cell-group>
                </view>
            </u-card>
            <u-select v-model="showSelect" :list="list" @confirm="handleConfirm" confirm-color="#ffcb57"></u-select>
            <u-modal
                v-model="showJoin"
                content="您输入的企业已注册，请您先进行申请加入企业"
                confirm-text="申请加入企业"
                :show-title="false"
                @confirm="joinNow"
            ></u-modal>
            <u-modal
                v-model="showPayPswTips"
                content="您已完成账号注册，请先设置支付密码"
                confirm-text="立即设置"
                :show-title="false"
                @confirm="setPayPsw"
            ></u-modal>
            <u-toast ref="uToast" />
            <view class="mc-btn">
                <u-button
                    :custom-style="{ margin: '16rpx 30rpx', backgroundColor: '#ffcb57', color: '#472d21' }"
                    hover-class="defaultBtnhover"
                    :loading="loading"
                    @click="handleCommit"
                    >注册</u-button
                >
            </view>
        </view>
        <u-toast ref="uToast" />
    </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import request from '../../common/service';

export default {
    data() {
        return {
            phone: '',
            code: '',
            codeText: '',
            showSelect: false,
            list: [
                {
                    value: '1',
                    label: '个人',
                },
                {
                    value: '2',
                    label: '企业',
                },
            ],
            selectedTypeName: '个人',
            selectedTypeNumber: '1',
            nickName: '',
            companyName: '',
            loading: false,
            showJoin: false,
            showPayPswTips: false,
        };
    },
    onLoad() {},
    computed: {
        ...mapGetters({
            wxDetail: 'user/wxDetail',
        }),
    },
    methods: {
        ...mapActions({
            handleLogin: 'user/login',
            updateOtherInfo: 'user/updateOtherInfo',
            updateRegisterStatus: 'user/updateRegisterStatus',
        }),
        codeChange(text) {
            this.codeText = text;
        },
        getCode() {
            request.get('/api/VerificationCode', { phone: this.phone }).then((res) => {
                const { code, message } = res;
                if (code === 0) {
                    // 通知验证码组件内部开始倒计时
                    this.$refs.uCode.start();
                } else {
                    this.$refs.uToast.show({
                        title: message,
                    });
                }
            });
        },
        handleConfirm(e) {
            this.selectedTypeName = e[0].label;
            this.selectedTypeNumber = e[0].value;
        },
        showSel() {
            this.showSelect = true;
        },
        async handleCommit() {
            const _t = this;
            if (
                !this.phone ||
                !this.code ||
                (this.selectedTypeNumber === '1' && !this.nickName) ||
                (this.selectedTypeNumber === '2' && !this.companyName)
            ) {
                this.$refs.uToast.show({
                    title: '请完善信息后再提交！',
                });
                return;
            }
            const { encryptedData, iv, userInfo } = this.wxDetail;
            let registerData = {
                Phone: this.phone,
                UserType: this.selectedTypeNumber,
                VerificationCode: this.code,
                UserImage: userInfo.avatarUrl,
                encryptedData,
                iv,
                RealName: this.nickName,
            };
            if (this.selectedTypeNumber === '2') {
                registerData.ComPanyName = this.companyName;
            }
            this.loading = true;
            const res = await request.post('/api/Business/save', registerData);
            this.loading = false;
            const { code, result, message } = res;
            if (code === 0) {
                const { Id, Number } = result.Result;
                this.updateOtherInfo({
                    Id,
                    Number,
                });
                this.getUserInfo();
                return;
            }
            if (code === 100) {
                if (message === '你输入的企业已注册，请你先进行申请加入企业') {
                    this.showJoin = true;
                    return;
                }
                this.$refs.uToast.show({
                    title: message,
                });
            }
        },
        joinNow() {
            this.$u.route('/pages/join/index', {
                phone: this.phone,
                name: this.companyName,
                realname: this.nickName,
            });
        },
        getUserInfo() {
            const _t = this;
            uni.login({
                success(ev) {
                    request
                        .post('/api/Validation', {
                            code: ev.code,
                        })
                        .then((res) => {
                            if (res.code === 0) {
                                const { isRegister, result, token } = res.result;
                                if (isRegister) {
                                    _t.handleLogin({
                                        userDetail: JSON.parse(result),
                                        isRegister,
                                    }).then(() => {
                                        uni.setStorageSync('token', token);
                                        _t.$refs.uToast.show({
                                            title: '注册成功！',
                                            isTab: true,
                                            url: '/pages/index/index',
                                        });
                                    });
                                }
                            }
                        });
                },
            });
        },
        setPayPsw() {
            this.$u.route('/pages/password/pay/index');
        },
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            // 来自页面内分享按钮
            console.log(res.target);
        }
        return {
            title: '京台分享更多精彩',
            path: '/pages/index/index',
            imageUrl: '/static/images/share/WechatIMG96.png'
        };
    },
};
</script>

<style lang="scss" scoped>
.content {
    .header {
        background-color: #ffcb57;
    }
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
        .slMsg {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .tips {
            margin-top: 12rpx;
            padding-left: 32rpx;
            font-size: 24rpx;
            color: #ff7a45;
        }
    }
}
</style>
