<template>
  <!--  <div class="home">-->
  <!--    <HomePage></HomePage>-->
  <!--  </div>-->
  <body  translate="no">
  <div   class="video-bg">
    <video width="320" height="240" autoplay="" loop="" muted="" __idm_id__="1581057">
      <source src="../assets/video/background.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
  <div v-if="value==='1'" class="dark-light">
    <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"
         stroke-linejoin="round" @click="changeStyle">
      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
    </svg>
  </div>
  <div class="app">
    <SettingHeader></SettingHeader>
    <!--    <router-view></router-view>-->
    <div class="wrapper">
      <SettingLeftSide></SettingLeftSide>
      <router-view></router-view>
    </div>
    <div class="overlay-app"></div>
  </div>
  <div v-if="icp_info!==''" style="z-index: 9999;display: flex;flex-direction: row">
    <el-link style="color: var(--theme-color);" :underline="false" href="https://beian.miit.gov.cn/" target="_blank">备案号： </el-link>
    <el-link style="color: var(--theme-color);" :underline="false" href="https://beian.miit.gov.cn/" target="_blank"> {{icp_info}}</el-link>
  </div>
  </body>
</template>

<script>
// @ is an alias to /src
import SettingHeader from "@/components/setting/layout/SettingHeader.vue";
import SettingLeftSide from "@/components/setting/layout/SettingLeftSide.vue";
import axios from "axios";
import {mapMutations} from "vuex";

export default {
  name: 'SettingsView',
  components: {
    SettingLeftSide,
    SettingHeader,
  },
  data() {
    return {
      value:null,
      isLight:false,
      icp_info:null,
    }
  },
  mounted() {

  },
  created() {
    this.getConfig('open_dark_light');
    this.getConfig('icp_info');
    // let nowDate = new Date()
    // let hour = nowDate.getHours()
    // //黑夜时
    // if (hour > 18 && hour <= 24 || hour < 6) {
    //   this.goDark()
    // }
    //根据本地存储状态哦按段
    if (localStorage.getItem('theme') === 'dark') {
      this.goDark()
    }else{
      this.goLight();
    }
  },
  computed: {},
  methods:{
    ...mapMutations(['setTheme']),
    getConfig(name) {
      let _this = this;
      if (name) {
        axios({
          method: 'get',
          url: '/api/getConfig',
          params: {
            name: name
          }
        }).then(function (res) {
          if (res) {
            if (res.data.open_dark_light) {
              _this.value = res.data.open_dark_light.value;
            }
            if(res.data.icp_info){
              _this.icp_info=res.data.icp_info.value;
            }
            //   if(res.data.light_bg){
            //     _this.light_bg=res.data.light_bg.value;
            //   }
            //   _this.loading=false;
          }

        }).catch((error) => {
        })
      } else {
        return false
      }
    },
    getImageByConfig(name){
      let _this=this;
      if(name){
        axios({
          method: 'get',
          url: '/api/getAttachment',
          responseType: 'arraybuffer',
          params: {
            name:name
          },
        }).then(function (res) {

          if(res.data){
            _this.imageUrl=btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')), 'base64';
          }else{
            return false;
          }
        }).catch((error) => {

        })
      }else{
        return false;
        // Vue.prototype.$notify.error({
        //   title: '错误',
        //   message: "不存在！",
        //   offset: 0
        // });
      }

    },
    goDark() {
      this.getImageByConfig('dark_bg_file');
      //黑夜的
      document.body.classList.remove('light-mode');
      this.setTheme({theme:'dark'});
    },
    goLight() {
      this.getImageByConfig('light_bg_file');
      //白天的
      document.body.classList.add('light-mode')
      this.setTheme({theme:'light'});
    },
    changeStyle() {
      this.isLight = !this.isLight
      if (this.isLight !== true) {
        this.goDark();
      } else {
        this.goLight();
      }

    },
    // toggleDarkLight() {
    //   const toggleButton = document.querySelector('.dark-light');
    //
    //   toggleButton.addEventListener('click', () => {
    //     document.body.classList.toggle('light-mode');
    //   });
    // }
  }
}
</script>
