/***********************************************************************
 * 目的: 用户登录过渡页/选择公司
 * 作者: heyf@steerinfo.com
 * 创建日期: 2019-02-12
 *
 * 更新历史:
 * 日期                    人员                变更目的
 * 2019-02-12        修改人员名     修改的原因和目的*
**********************************************************************/
<template>
    <div selectPage>
        <div class="_box"></div>
        <div class="selectArea">
            <div>
                <!-- <div style="text-align: left; padding: 5px 10px; background-color: rgb(40, 126, 251);  font:italic bold 16px arial,sans-serif; border: #C0C0C0 1px solid;"><i class="el-icon-d-arrow-right"></i>以集团用户进入</div>
                <div style="padding: 20px 10px;"><span class="groupActive" @click="oncheck1(groupId)">{{groupName}}</span></div>
                <div style="text-align: left; padding: 5px 10px; background-color: rgb(40, 126, 251);  font:italic bold 16px arial,sans-serif; border: #C0C0C0 1px solid;;"><i class="el-icon-d-arrow-right"></i>以公司用户进入</div>
                <div style="border: #C0C0C0 1px solid; padding: 20px 10px;">
                    <div v-for="item in companys" :key="item.companyId">
                        <span class="active" @click="oncheck2(item.companyId)">{{item.companyName}}</span>
                        <span v-if="item === companys[companys.length - 1]" :class="companyId === item.companyId ? '_active' : '_Classification'" @click="oncheck(item.companyId)">{{item.companyName}}</span>
                    </div>
                </div> -->
                <ul>
                    <li style="font:normal bold 22px STKaiti,sans-serif;" class="divLeftIn">
                        <i class="el-icon-d-arrow-right"></i>以集团用户进入
                    </li>
                    <li class="divLeftIn delay200"><span class="groupActive" @click="oncheck1(groupId)">{{groupName}}</span></li>
                    <li style="font:normal bold 22px STKaiti,sans-serif;" class="divLeftIn delay400">
                        <i class="el-icon-d-arrow-right"></i>以公司用户进入
                    </li>
                    <li class="divLeftIn delay600">
                        <div v-for="item in companys" :key="item.id">
                            <span class="active" @click="oncheck2(item.id)">{{item.companyName}}</span>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- <div style="margin: 80px 10px;">
                <el-button
                    type="primary"
                    @click="submit"
                    size="small"
                >确定</el-button>
                <el-button
                    @click="goBack"
                    size="small"
                >返回</el-button>
            </div> -->
        </div>
    </div>
</template>

<script>
    import store from '@/store/index.js';
    import { proPath } from '@/config/config.js';
    import { setCookie } from '@/utils/util.js';
    export default {
        data () {
            return {
                store,
                groupId: '',
                groupName: '',
                active: '',
                companys: []
            }
        },
        mounted () {
            this.companys = JSON.parse(window.top.localStorage.getItem('companys'));
            let group = JSON.parse(window.top.localStorage.getItem('sysGroup'));
            this.groupId = group.id;
            this.groupName = group.groupName;
            // 监控浏览器返回
            if (window.history && window.history.pushState) {
                history.pushState(null, null, document.URL);
                window.addEventListener('popstate', this.goBack, false);
            }
        },
        // 页面销毁时，取消浏览器返回监听
        destroyed () {
            window.removeEventListener('popstate', this.goBack, false);
        },
        methods: {
            // 选择以集团用户进入
            oncheck1 (groupId) {
                // 跳转 不更新localStorage
                this.$router.push({ name: 'default' });
            },
            // 选择以公司用户进入
            oncheck2 (companyId) {
                let company = this.companys.filter((item) => { return item.id === companyId });
                window.top.localStorage.setItem('companys', JSON.stringify(company));
                window.top.localStorage.setItem('companyId', companyId);
                // this.axios.post(proPath + 'saveCompany?companyId=' + companyId).then((res) => {
                //     if (res.data.code === '0') {
                //         // do
                //     } else {
                //         this.$message.error(res.data.message)
                //     }
                // }).catch((error) => {
                //     console.log(error);
                // });
                this.$router.push({ name: 'default' });
            },
            // 返回登录页
            goBack () {
                this.store.dispatch('loginOut').then(function (res) {
                    window.location.href = './index.html';
                }).catch(function (error) {
                    console.log(error);
                });
            }
        }
    }
</script>

<style lang="less" scoped>
    .selectPage {
        background: url(../../../assets/img/default-bg.png) no-repeat;
    }
    ._box {
        background: url(../../../assets/img/default-bg.png) no-repeat;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        background-size: cover;
        animation: myfirst 20s linear infinite;
        -webkit-animation: myfirst 15s linear infinite;
    }
    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
        0% {-webkit-transform:scale(1,1)};
        25% {-webkit-transform:scale(1.3, 1.3)};
        50% {-webkit-transform:scale(1, 1)};
        75% {-webkit-transform:scale(1.3, 1.3)};
        100% {-webkit-transform:scale(1, 1)};
    }
    .divLeftIn {
        animation-name: leftIn;
        animation-duration: 1s;
    }
    @keyframes leftIn {
        from {
            transform: translateX(-50px);
            opacity: 0;
        }
        to {
            transform: translateX(0px);
            opacity: 1;
        }
    }
    .delay200 {
        animation-delay: 200ms;
        animation-fill-mode: backwards!important;
    }
    .delay400 {
        animation-delay: 400ms;
        animation-fill-mode: backwards!important;
    }
    .delay600 {
        animation-delay: 600ms;
        animation-fill-mode: backwards!important;
    }

    .selectArea {
        padding: 12% 30%;
        text-align: left;
        position: absolute;
        z-index: 9999999999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .groupActive:hover {
        color: red;
        margin-left: 10px;
        padding: 5px 20px;
        background: #2681d6;
        margin-bottom: 10px;
        border-radius: 6px;
        font-size: 20px;
        cursor:pointer;
    }
    .groupActive {
        margin-left: 10px;
        padding: 5px 20px;
        background: #31d5ef;
        margin-bottom: 10px;
        border-radius: 6px;
        font-size: 20px;
        cursor:pointer;
    }
    .active {
        float: left;
        margin-left: 10px;
        padding: 5px 20px;
        background: #31d5ef;
        margin-bottom: 10px;
        border-radius: 6px;
        font-size: 14px;
        cursor:pointer;
    }
    .active:hover {
        color: red;
        float: left;
        margin-left: 10px;
        padding: 5px 20px;
        background: #2681d6;
        margin-bottom: 10px;
        border-radius: 6px;
        font-size: 14px;
        cursor:pointer;
    }
    li {
        margin: 10px 0px;
    }
</style>
