<template>
  <div class="main-container">
    <AppSidebar></AppSidebar>
    <router-view />
    <el-dialog
      title="系统规则"
      :visible.sync="dialogVisible"
      width="50%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <div v-html="htmlData"></div>
      <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center;align-items: center;">
        <el-checkbox v-model="checked" style="margin-right: 5px;font-size: 18px;"></el-checkbox>
        <div style="margin-right: 10px;">已阅读并同意相关内容</div>
        <el-button style="width:50%;font-size: 24px;" type="danger" :disabled="checked?false:true" @click="getUnlock">确认激活</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import AppSidebar from '@/components/AppSidebar.vue'
import { lockStatus,unlock } from "@/api/allApi";
export default {
  name: 'HomeView',
  components: {
    AppSidebar
  },
  data() {
    return {
      checked:false,
      htmlData:'',
      dialogVisible: false,
    };
  },
  created() {
    this.getHtmldata();
  },
  methods:{
    getHtmldata(){
      lockStatus().then(response=>{
        let lockStatus = response.data.data;
        if(lockStatus==0){
          this.htmlData = response.data.errmsg; 
          this.dialogVisible = true;
        }
      })
    },
    getUnlock(){
      unlock().then(response=>{
          this.dialogVisible = false;
      })
    }
  }
}
</script>
<style>
.main-container{
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  margin-top: 1.66rem;
  display: flex;
}
.myTabs {
    background: #fff;
}

.myTabs .el-tabs__header {
    position: sticky;
    z-index: 2;
    top: 0px;
    background: #fff;
}

.myTabs .el-tabs__item {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    font-weight: 500;
}

.myTabs .el-tabs__item.is-active {
    color: #1e80ff;
}

.myTabs .el-tabs__active-bar {

    background-color: #1e80ff;
}</style>

<style scoped>
::v-deep .el-dialog {
  left: 50%;
  top: 5%;
  transform: translate(-50%, -5%);
  margin: 0px !important;
  border-radius: 8px;
}
::v-deep .el-dialog__title,::v-deep .el-dialog__headerbtn{
  font-size: 24px;
}
::v-deep .el-dialog__header {
    -webkit-box-shadow: 0 1px 4px 0 rgba(31, 45, 61, .12);
    box-shadow: 0 1px 4px 0 rgba(31, 45, 61, .12);
}
::v-deep .el-dialog__body{
    overflow: auto;
    overflow-x: hidden;
    max-height: 70vh!important;
}
::v-deep .el-dialog__footer {
    border-top: 1px solid #d7d9dc;
}
</style>
