<template>
    <div class="app-container">
        
        <div style="padding-top: 100px;"></div>
        
        <!-- 样式1 -->

        <!-- <van-radio-group v-model="userType">
            <van-cell-group title="请选择用户类型" inset :border="false">

                <template #title>
                    <span class="cell-group-title">请选择用户类型</span>
                </template>

                <van-cell title="个人用户" clickable @click="userType = 'personal'">
                <template #right-icon>
                    <van-radio shape="square" name="personal" />
                </template>
                </van-cell>
                <van-cell title="机构用户" clickable @click="userType = 'group'">
                <template #right-icon>
                    <van-radio shape="square" name="group" />
                </template>
                </van-cell>
            </van-cell-group>
        </van-radio-group>

        <van-radio-group v-model="deviceType">
            <van-cell-group title="请选择设备类型" inset>

                <template #title>
                    <span class="cell-group-title">请选择设备类型</span>
                </template>

                <van-cell title="电子卡牌" clickable @click="deviceType = 'card'">
                <template #right-icon>
                    <van-radio shape="square" name="card" />
                </template>
                </van-cell>
                <van-cell title="电子徽章" clickable @click="deviceType = 'badge'">
                <template #right-icon>
                    <van-radio shape="square" name="badge" />
                </template>
                </van-cell>
            </van-cell-group>
        </van-radio-group> 
            
        <div style="margin: 48px;">
            <van-button type="info" round block @click="onConfirm">确定</van-button>
        </div> -->

        <!-- 样式2 -->

        <!-- <van-divider content-position="center" dashed>用户类型</van-divider> -->
        <!-- <div style="margin: 10px;">
            <van-button plain hairline type="info" block @click="onChooseUserType('personal')">个人用户</van-button>
        </div>
        <div style="margin: 10px;">
            <van-button plain hairline type="info" block @click="onChooseUserType('group')">团体用户</van-button>
        </div>

        <template v-if="userType == 'group'">
            <van-divider content-position="center" dashed>请选择设备类型</van-divider>
            <div style="margin: 10px;">
                <van-button plain hairline type="info" block @click="onChooseDeviceType('card')">电子卡牌</van-button>
            </div>
            <div style="margin: 10px;">
                <van-button plain hairline type="info" block @click="onChooseDeviceType('badge')">电子徽章</van-button>
            </div>
        </template> -->

        
        <!-- 样式3 -->
        
        <div class="checkdiv" @click="onChooseUserType('personal')">
            <span>个人用户</span>
        </div>

        <div class="checkdiv" @click="onChooseUserType('group')">
            <span>团体用户</span>
        </div>

        <van-action-sheet
            v-model="showDeviceSheet"
            :actions="actions"
            @select="onChooseDeviceType"
            cancel-text="取消"
            description="请选择拥有的设备类型"
            close-on-click-action
        />

    </div>
</template>
<script>

import Vue from 'vue';
import { ActionSheet } from 'vant';

Vue.use(ActionSheet);

export default {
    data: function() {
        return {
            userType: '',
            deviceType: '',
            showDeviceSheet: false,
            actions: [
                {name: '电子卡牌', type: 'card'},
                {name: '电子徽章', type: 'badge'},
            ],
        }
    },
    methods: {
        /**
         * 确认
         */
        /* onConfirm() {
            console.log('user', this.userType);
            console.log('device', this.deviceType);
        }, */
        /**
         * 选择用户类型
         */
        onChooseUserType(type) {
            this.userType = type;
            this.showDeviceSheet = (this.userType == 'group');
            // 缓存本地
            window.localStorage.setItem('userType', type || '');
            if (type == 'personal') {
                this.redirectTo('login');
            }
        },
        /**
         * 选择设备类型
         */
        onChooseDeviceType(action) {
            this.deviceType = action.type;
            // 缓存本地
            window.localStorage.setItem('deviceType', action.type || '');
            this.redirectTo('login');
        },
        /**
         * 跳转页面
         */
        redirectTo(path) {
            this.$router.push({
                name: path,
            });
        },

    }
}
</script>

<style lang="scss" scoped>


.checkdiv {
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 20px;
    height: 150px;
    background-color: #00bcd4;
    color: #fff;
    // font-weight: 700;
    font-size: 45px;
    border-radius: 10px;
}


</style>