<template>
    <div class="ajm-panel-content">
        <div class="ajm-panel-title">{{$t('message.Oauth.oauth')}}</div>
        <div class="auth-content" v-loading="renderLoading">
            <!--<div class="auth-title">
                <i class="auth-left"></i> 授权信息
                <el-button class="auth-button" @click="goEditAuth" type="success" icon="edit">{{buttonTitle}}</el-button>
            </div>-->
            <div class="top">
                <p v-if="authorizationInfoVO.deviceId">
                    <a class="ajm-auth-left">{{$t('message.Oauth.facilityId')}}</a>
                    <span class="ajm-auth-info">{{authorizationInfoVO.deviceId}}</span>
                </p>
                <p v-if="authorizationInfoVO.dateDuration">
                    <a class="ajm-auth-left">{{$t('message.Manager.authCode')}}</a>
                    <span class="ajm-auth-info">{{authorizationInfoVO.authorizationCode}}</span>
                </p>
                <p v-if="authorizationInfoVO.dateDuration">
                    <a class="auth-right">{{$t('message.Manager.dateDuration')}}</a>
                    <span>{{authorizationInfoVO.dateDuration}}</span>
                </p>
                <p v-if="authorizationInfoVO.authorizationStatus">
                    <a class="auth-right">{{$t('message.Manager.authStatus')}}</a>
                    <span>{{authorizationInfoVO.authorizationStatus.name}}</span>
                </p>
            </div>
        </div>
        <div v-show="isError">
            <div class="empty-block">
                <img src="../images/no_data.png" alt=""> {{$t('message.noData')}}
            </div>
        </div>
        <div class="page-footer">
            <el-button type="primary" size="small" class="auth-button" @click="goEditAuth" icon="edit">{{buttonTitle}}</el-button>
        </div>

        <transition name="dialog-fade-top">
            <el-dialog :title="dialogTitle" :visible.sync="editAuthDialogVisible" size="tiny" :modal-append-to-body="false" custom-class="ajm-dialog-smaller" :before-close="closeAuthVisible" :close-on-click-modal="false">
                <el-form :model="authForm" ref="authForm" :rules="authRules" labelWidth="100px">
                    <el-form-item :label="$t('message.Manager.confirmCode')" prop="authorizationCode">
                        <el-input type="textarea" :rows="4" v-model="authForm.authorizationCode" :placeholder="$t('message.Manager.confirmCode')"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="enableAuthorizationInfo" :loading="saveLoading">{{$t('message.save')}}</el-button>
                    <el-button @click="doCancel">{{$t('message.cancel')}}</el-button>
                </div>
            </el-dialog>
        </transition>
    </div>
</template>

<script>
import authService from "../services/authService";

export default {
    data() {
        return {
            isError: false,
            renderLoading: false,
            saveLoading: false,
            isReload: false,
            dialogTitle: "",
            buttonTitle: "",
            //授权信息
            authorizationInfoVO: {
                authorizationCode: "",
                dateDuration: "",
                deviceId: "",
                authorizationStatus: {
                    value: "",
                    name: ""
                }
            },
            editAuthDialogVisible: false,
            authForm: {
                authorizationCode: "",
            },
            /*authRules: {
                authorizationCode: [
                    { required: true, message: "请输入授权码", trigger: "blur" }
                ]
            }*/
        }
    },
    computed:{
        authRules(){
            return{
                authorizationCode: [
                    { required: true, message: this.$t('message.Manager.confirmCode'), trigger: "blur" }
                ]
            }
        }
    },
    methods: {
        closeAuthVisible(done) {
            done();
            this.$refs.authForm.resetFields();
        },
        goEditAuth() {
            if (this.authorizationInfoVO.authorizationStatus.value == '2') {
                this.dialogTitle = this.$t('message.Manager.editCode');
                this.authForm.authorizationCode = this.authorizationInfoVO.authorizationCode;
            } else {
                this.dialogTitle = this.$t('message.Manager.addCode');
                this.authForm.authorizationCode = '';
            }
            this.editAuthDialogVisible = true;
            this.saveLoading = false;

            let _this = this;
            setTimeout(function () {
                _this.ajmDialogShow = true;
            }, 100);
        },
        // 执行保存并激活
        enableAuthorizationInfo() {
            let params = {
                authorizationCode: this.authForm.authorizationCode,
            };
            this.$refs.authForm.validate(valid => {
                if (valid) {
                    this.saveLoading = true;
                    authService.enableAuthorizationInfo(params).then(resp => {
                        this.saveLoading = false;
                        this.editAuthDialogVisible = false;
                        if (resp.status == 500) {
                            this.$message({
                                type: 'error',
                                message: resp.message
                            });
                            return;
                        }
                        this.$message({
                            type: 'success',
                            message: this.$t('message.Oauth.activateSuccess')
                        });

                        this.findAuthorizationVO();
                    });
                }
            });
        },
        doCancel() {
            this.$refs.authForm.resetFields();
            this.editAuthDialogVisible = false;
        },
        findAuthorizationVO() {
            this.renderLoading = true;
            authService.findAuthorizationVO().then(resp => {
                this.renderLoading = false;
                this.authorizationInfoVO = resp;

                if (resp.status == 500) {
                    this.buttonTitle = this.$t('message.append');
                    this.isError = true;
                    return;
                }

                if (resp.authorizationStatus && resp.authorizationStatus.value == '2') {
                    this.buttonTitle = this.$t('message.edit');
                } else {
                    this.buttonTitle = this.$t('message.append');
                }
            });
        }
    },
    mounted() {
        this.findAuthorizationVO();
    }
};
</script>

<style lang="less" scoped>
    .ajm-panel-content{
        width:100%;
        background-color: #fff;
        overflow: hidden;
        .ajm-panel-title{
            border-bottom: 1px solid #EBEDF0;
            height: 60px;
            line-height: 60px;
            padding-left: 30px;
            font-size: 14px;
            color: #45494C;
        }
        .page-footer{
            border-top: 1px solid #EBEDF0;
            height: 90px;
            line-height: 90px;
            padding-left: 210px;
            .el-button{
                width:72px;
            }
        }
    }
.auth-content{
    width:50%;
    height:100%;
}
.top {
    padding: 50px 60px 60px 120px;
    p {
        line-height: 30px;
    }
}
.ajm-auth-left {
    vertical-align: top;
    display: inline-block;
    width: 90px;
}
.auth-right {
    display: inline-block;
    width: 90px;
}
.ajm-auth-info {
    display: inline-block;
    width: calc(100% - 100px);
    word-wrap: break-word;
}

.edit-auth {
    display: inline-block;
    cursor: pointer;
}
</style>
