<template>
  <el-dialog v-dialogDrag :title="this.$t('global.scan')" :visible.sync="centerDialogVisible" width="30%" center>
    <el-input v-model="input" :placeholder="$t('global.inputRoomNumber')" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="centerDialogVisible = false">{{ $t('global.cancel') }}</el-button>
      <el-button type="primary" @click="comit">{{ $t('global.confirm') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getPermission } from '@/api/management/distribute';

export default {
    name: 'Dashboard',
    data() {
        return {
            centerDialogVisible: false,
            input: ''
        };
    },
    methods: {
        doShow() {
            this.centerDialogVisible = true;
        },
        doClose() {
            this.centerDialogVisible = false;
        },
        async comit() {
            if (this.input) {
                try {
                    await getPermission(`${this.input}`);
                    this.$message.success(this.$t('tip.obtainedPermissionSuccessfully'));
                    this.centerDialogVisible = false;
                } catch (error) {
                    this.$messageBox(`${this.$t('error.scanningError')}:${error.message}`);
                }
            } else {
                this.$messageBox(this.$t('global.inputRoomNumber'));
            }
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }

  /deep/ .el-carousel {
    overflow: hidden;
  }

  .home-box {
    float: left;
    width: 100%;
    font-family: 'Microsoft YaHei';

    .title {
      font-size: 45px;
      text-align: center;
      font-weight: 400;
      border-bottom: 2px dashed #333;
      padding-bottom: 15px;
      margin: 50px 200px 120px 200px;
      position: relative;

      .logo-img {
        position: absolute;
        right: 0;
        top: 0;
        width: 55px;
      }
    }

    .card-box {
      width: 100%;
      padding: 0 300px;
    }
  }
</style>
