<template>
    <el-container :style="backStyle" class="container">
        <el-header height="30PX">
            <div class="logo-container" v-if="showTenant">
                <div class="text" :class="{en: language != 'zh-CN'}">
                    {{ $t('login.title') }}
                </div>
            </div>
        </el-header>
        <el-main>
            <div class="login-card__container fullheight">
                <el-card shadow="never" class="login-card">
                    <div class="login-div">
                        <el-form
                            class="login-form"
                            :model="principal"
                            :rules="rules"
                            ref="principal"
                        >
                            <div class="welcome-title">
                                {{ $t('login.welcome2Login') }}
                            </div>

                            <el-form-item prop="account">
                                <el-input
                                    size="medium"
                                    clearable
                                    prefix-icon="icon-account"
                                    v-model="principal.account"
                                ></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input
                                    show-password
                                    clearable
                                    prefix-icon="icon-password"
                                    @keyup.enter.native="
                                        submitForm('principal')
                                    "
                                    @focus="inputGetFocus"
                                    size="medium"
                                    v-model="principal.password"
                                ></el-input>
                            </el-form-item>

                            <!-- <el-form-item prop="remberPwd">
                                <el-checkbox
                                    title="有效期为7天"
                                    v-model="principal.remberPwd"
                                    :true-label="1"
                                    :false-label="0"
                                    >记住密码</el-checkbox
                                >
                            </el-form-item> -->
                            <el-form-item
                                class="btns"
                                style="text-align: right"
                            >
                                <el-button
                                    size="medium"
                                    type="primary"
                                    @focus="inputGetFocus"
                                    @click="submitForm('principal')"
                                    class="login-btn"
                                    :loading="loading"
                                    >{{ $t('login.login') }}</el-button
                                >
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </div>
        </el-main>
    </el-container>
</template>

<script>
import Cookie from 'js-cookie'
import portal from '@/api/portal.js'
import {mapState} from 'vuex'
export default {
    name: 'login',
    props: ['tenant'],
    computed: {
        language() {
            return localStorage.getItem('lang') || 'zh-CN'
        },
    },
    data() {
        var checkAccount = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请输入账号'))
            }
            if (/^[a-zA-Z0-9_-]{2,20}$/.test(value)) {
                return callback()
            } else {
                return callback(new Error('账号格式不符合规范'))
            }
        }
        return {
            fullscreenLoading: true,
            hasMask: true,
            codeUrl: `${window.location.origin}/mobilevue`,
            frontBase: `${window.location.origin}`,
            logo: '',
            name: 'EDP',
            showTenant: false,
            showLogo: false,
            companyName: '',
            tenantName: '',
            principal: {
                account: '',
                password: '',
                // remberPwd: 0,
            },
            rules: {
                account: [{validator: checkAccount, trigger: 'blur'}],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                ],
            },
            responseError: '',
            loading: false,
            backStyle: {
                width: '100%',
                height: '100%',
                background: `url(${require('@/assets/img/bg.png')}) center / 100% 100% no-repeat`,
            },

            totemStyle: {
                // backgroundColor: '#fff',
                // background: `url(${require('@/assets/img/loginImg.jpg')}) no-repeat center / 100% 100%`
                // background: `#1975FF url(${require("@/assets/img/totem.png")}) center / 100% auto no-repeat`
                // background: `transparent url(${require("@/assets/img/totem1.png")}) no-repeat center 30% / 100% 70% `
            },
            //负责的是登录页授权文件相关数据变量
            isIeExplorer: false,
            dialogVisible: false,
            downLoading: false,
            accept: '.lic',
            files: [],
            uploadingFiles: {},
        }
    },
    mounted() {
        if (!this.$route.query || !this.$route.query.tokenKey) {
            this.hasMask = false
            this.fullscreenLoading = false
        }
        window.webSocket && window.webSocket.close()
        // this.setDefaultValue()
        //获取租户信息
        let tenant = this.tenant ? this.tenant : 'platform'
        if (tenant) {
            let url = '${uc}/uc/tenantManage/v1/getTenantByCode?code=' + tenant
            let _this = this
            this.$http.get(url).then((resp) => {
                if (resp.data) {
                    let tenantManage = resp.data
                    _this.showTenant = true
                    _this.companyName = tenantManage.nameFront
                    if (tenant != 'platform') {
                        _this.principal.tenantId = resp.data.id
                    }
                    if (tenantManage.ico) {
                        let ico = JSON.parse(tenantManage.ico)
                        if (ico && ico.length > 0) {
                            _this.showLogo = true
                            _this.logo =
                                window.context.portal +
                                '/system/file/v1/getLogoFile?logoType=front&tenantId=' +
                                tenantManage.id
                        }
                    }
                }
            })
        } else {
            //不是租户
            this.sysSetting()
        }
    },
    methods: {
        //如果记住密码则默认表单赋值
        setDefaultValue() {
            let account = Cookie.get('account'),
                remberPwd = Number(Cookie.get('remberPwd')),
                password = Cookie.get('accountPwd')
            if (remberPwd) {
                // 如果有记住密码 取密文解密放进输入框
                let Base64 = require('js-base64').Base64
                password = Base64.decode(password)
            }
            this.principal = {
                ...this.principal,
                ...{account, password, remberPwd},
            }
        },
        //获取系统默认配置 系统Logo、名称
        sysSetting() {
            const _this = this
            let url =
                window.context.portal +
                '/sys/sysProperties/v1/getDecryptBySysSetting'
            this.$http.get(url).then((response) => {
                if (response && response.data && response.data.value) {
                    _this.showTenant = true
                    let sysSettingData = JSON.parse(response.data.value)
                    if (sysSettingData.frontName == '') {
                        _this.companyName = _this.name
                    } else {
                        _this.companyName = sysSettingData.frontName
                    }
                    if (sysSettingData.ico.length > 0) {
                        let ico = sysSettingData.ico
                        _this.showLogo = true
                        _this.logo =
                            window.context.portal +
                            '/system/file/v1/downloadFile?fileId=' +
                            ico[0].id
                    }
                }
            })
        },
        querySearch(queryString, cb) {
            if (!queryString) {
                cb([])
                return
            }
            let queryFilter = {}
            queryFilter.pageBean = {
                page: 1,
                pageSize: 20,
                total: 0,
                showTotal: true,
            }
            let query = {
                property: 'name_',
                value: queryString,
                group: 'main',
                operation: 'LIKE',
                relation: 'AND',
            }
            if (!queryFilter.querys) {
                queryFilter.querys = []
            }
            queryFilter.querys.push(query)

            this.$http
                .post(
                    `${window.context.uc}/uc/tenantManage/v1/listJson`,
                    queryFilter
                )
                .then((res) => {
                    // 调用 callback 返回建议列表的数据
                    cb(res.data.rows)
                })
        },
        handleSelect(item) {
            this.tenantName = item.name
            this.principal.tenantId = item.id
        },
        setRouterPath() {
            this.$store.dispatch(
                'login/actionLoginAccount',
                this.principal.account
            )
            localStorage.setItem(
                this.principal.account + 'loginRoutePath',
                this.$route.path
            )
        },
        submitForm(formName) {
			localStorage.removeItem("enterpriseCode");
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.inputGetFocus()
                    this.setRouterPath()
                    this.loading = true
                    console.log(this.principal, 'login')
                    this.$store
                        .dispatch('login/loginByPrincipal', this.principal)
                        .then((loginStatus) => {
                            if (loginStatus && loginStatus == true) {
                                this.$router.push({
                                    path: this.$route.query.redirect
                                        ? this.$route.query.redirect
                                        : '/',
                                })
                                // this.$store.dispatch('menu/actionSysMenus')
                                //获取前台页面
                                this.$store
                                    .dispatch('menu/actionFrontMenus')
                                    .then((res) => {
                                        let dataArr =
                                            res &&
                                            res.filter(
                                                (item) =>
                                                    item.alias === 'bigScreen'
                                            )
                                        if (dataArr && dataArr.length !== 0) {
											console.log(dataArr);
											window.localStorage.setItem("activeIndex", 'comprehensiveTheme');
                                            this.$router.push({
                                                // path: `/business`,
												path: `/comprehensiveTheme`
                                            })
                                        } else {
                                            let dataMenus =
                                                res &&
                                                res.filter(
                                                    (item) =>
                                                        item.alias === 'normal'
                                                )
                                            if (
                                                dataMenus &&
                                                dataMenus.length !== 0
                                            ) {
                                                if (
                                                    dataMenus[0].children
                                                        .length !== 0
                                                ) {
                                                    this.$router.push({
                                                        path: `/platLayout/${dataArr[0].children[0].children[0].alias}`,
                                                    })
                                                } else {
                                                    this.$router.push({
                                                        path: `/platLayout/${dataMenus[0].children[5].alias}`,
                                                    })
                                                }
                                            }
                                        }
                                        this.loading = false
                                    })
                                // 连接websocket
                                this.$bus.$emit('login')
                                this.getAllDict()
                            } else if (loginStatus == false) {
                                this.$router.push({
                                    name: 'resetPwdView',
                                    query: {type: 'login'},
                                })
                            }
                        })
                        .catch((msg) => {
                            this.loading = false
                            console.log(msg, 'msg')
                            if (
                                msg.indexOf &&
                                msg.indexOf('timeout of') !== -1
                            ) {
                                msg = '登录超时'
                            }
                            this.responseError = msg
                        })
                } else {
                    return false
                }
            })
        },
        getAllDict() {
            portal.getSysDict().then((data) => {
                // console.log(data, '字典')
                if (data) {
                    sessionStorage.setItem('dict_data', JSON.stringify(data))
                }
            })
        },
        inputGetFocus() {
            this.responseError = ''
        },
        resetForm(formName) {
            this.responseError = ''
            this.$refs[formName].resetFields()
        },
        onResize() {
            this.isShowTotem = document.body.offsetWidth > 500
        },
    },
    created() {
        let USER_AGENT = navigator.userAgent.toLowerCase()
        let isChrome = /.*(chrome)\/([\w.]+).*/
        if (!isChrome.test(USER_AGENT)) {
            this.isIeExplorer = true
        }
        this.isShowTotem = document.body.offsetWidth > 500
        window.addEventListener('resize', this.onResize)
    },
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
$text-color: #12bae7;
.login-card__container {
  width: 74%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 auto;
}

.logo-container {
  width: 80%;
  margin: 0 auto;
  color: #12bae7;
  background: url('../assets/img/header.png') no-repeat center / 100%;
  height: 66px;
  div {
    text-align: center;
    font-size: 30px;
    letter-spacing: 6px;
    font-weight: bold;
    padding-top: 6px;
  }
  .text.en {
    padding-top: 10px;
  }
}

.login-div {
  width: 420px;
  height: 360px;
  //   background-color: #15ade5;
  border: 2px solid #15ade5;
  box-sizing: border-box;
  // padding-top: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-header {
  position: absolute;
  right: 0;
  padding: 20px;
  a {
    color: #5b9dff;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
  }
}

.logo-container > i.icon-hotent-H-c {
  font-size: 36px;
  // background-image: linear-gradient($--color-secondary, $--color-primary);
  //background-clip: text;
  //-webkit-background-clip: text;

  color: #fff;
  margin-right: -5px;
}
.logo-container > .logos {
  display: inline-block;
  width: 60px;
  height: 50px;
  background: url('~@/assets/img/logo.png') no-repeat center / 100%;
}

.v-line {
  color: #fbfbfb;
  margin: 0 5px;
}

.logo-container > i.icon-hotent-H-ie {
  font-size: 36px;
  //background-clip: text;
  //-webkit-background-clip: text;
  //color: $--color-primary;
  //margin-right: -5PX;
}

.logo-container:hover > i.icon-hotent-H-c {
  background-image: linear-gradient($--color-primary, $--color-secondary);
}

.logo-container > span.pre-word {
  font-size: 26px;
  font-weight: bold;
  color: $--color-primary;
}

.logo-container > span.tail-word {
  font-size: 24px;
  font-weight: bold;
  color: #bdbfc2;
}

.logo-container > .logo-divider {
  margin: 0 25px 11px 25px;
  height: 18px;
}

.logo-container > .system-name {
  color: #fff;
  font-weight: bold;
  font-size: 16px;
}

.site-div {
  float: right;

  margin-top: 25px;
  margin-right: 40px;
}

.site-div > a {
  color: #5b9dff;
  font-size: 12px;
  text-decoration: none;
}

.site-div > a > i {
  font-weight: bold;
  margin-right: 5px;
}

.login-card {
  height: 360px;
  border: 0;
  background: transparent;
  box-shadow: 0 0 30px 0px rgba(#14b0e5, 0.4);
}
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  img:nth-child(2) {
    margin-top: 36px;
  }
}
.totem-div {
  /*-moz-box-shadow: 2PX 2PX 5PX #999;*/
  /*-webkit-box-shadow: 2PX 2PX 5PX #999;*/
  /*box-shadow: 2PX 2PX 5PX #999;*/
  display: flex;
  justify-content: center;
  align-items: center;
  width: 560px;
  height: 420px;
  flex-wrap: wrap;
  float: left;
  background: rgba(77, 196, 252, 0.13);
  > div {
    width: 100%;
    padding: 0 40px;
  }
  h2 {
    font-size: 24px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    letter-spacing: 2px;
    // padding-top: 36px;
    /*padding-left: 60PX;*/
  }

  >>> .el-divider {
    margin: 15px auto;
    background-color: #373b46;
    .el-divider__text {
      color: #6c7079;
      background-color: #282b33;
    }
  }
}

/**自动填充为透明背景色 */
/deep/ .el-input__inner {
  background-color: transparent !important;
  border-color: $text-color;
  color: $text-color;
}
/deep/ .el-input__inner:-internal-autofill-previewed,
/deep/ .el-input__inner:-internal-autofill-selected {
  -webkit-text-fill-color: #14b0e5 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: $text-color;
  border-color: $text-color;
}
/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: $text-color;
}

.welcome-title {
  color: #12bae7;
  min-height: 20px;
  margin-top: 20px;
  font-size: 18px;
  margin-bottom: 50px;
  /*color: #fff;*/
  letter-spacing: 2px;
  // font-weight: 600;
  text-align: center;
  font-family: Roboto, Microsoft YaHei, Sans-serif;
}

.copyright {
  color: #fff;
  font-size: 13px;
  text-align: center;
}

>>> .el-card__body {
  padding: 0;
}

.login-card /deep/ .el-alert__content {
  padding: 5px;
}

.btns >>> .el-form-item__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.main-header {
  /*position: absolute;*/
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /*left: 50%;
    transform: translate(-50%, 0);
    top: 28%;*/
  color: #fff;
}

.main-header .logos {
  display: inline-block;
  width: 80px;
  height: 55px;
  /*background: url("~@/assets/img/logo.png") no-repeat center / 100% ;*/
  background: url('~@/assets/img/logo.png') no-repeat center / 100%;
}

.main-header .system-name {
  font-family: Roboto, Microsoft YaHei, Sans-serif;
  font-size: 20px;
  font-weight: bold;
  /*color:#fff;*/
  letter-spacing: 5px;
}

.main-header .driver {
  margin: auto 10px;
}

.main-header .subTit {
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 2px;
}
.infoTip {
  display: block;
  width: 360px;
  color: rgba(255, 0, 0, 0.7);
  font-size: 16px;
  text-align: center;
  margin-left: 30px;
}
.login-btn {
  // width: 220PX;
  width: 100%;
  border: 1px solid #2182f7;
  background-color: #2182f7;
}
>>> .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #2182f7;
  border-color: #2182f7;
}
.login-form {
  margin: 40px 50px;
}
/deep/ .el-card__body {
  padding: 0 !important;
}
.container {
  position: relative;
  .app {
    position: absolute;
    right: 20px;
    top: 20px;
  }
}
</style>
