<template>

  <div class="main" style="text-shadow: 0 0 20px var(--font-border);"
       v-loading="loading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="var(--theme-bg-color)"
  >
    <div class="HeadLine" style="margin-top:20px;margin-left:-5px;">
      <div class="HeadSquare"></div>
      <div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-open"></i>基础样式</div>
    </div>
    <div class="base-style" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600">
      <div class="base-style-content" >
        <div class="min-content">
          <span class="min-title">Logo(浅色模式)</span>
          <UploadComponent  :config-name="light_logo" style="margin-top: 10px;"></UploadComponent>
        </div>
        <div class="min-content" style="margin-left: 50px">
          <span class="min-title">Logo(深色模式)</span>
          <UploadComponent  :config-name="dark_logo" style="margin-top: 10px;"></UploadComponent>
        </div>
        <div class="min-content" style="margin-left: 50px">
          <span class="min-title">Favicon</span>
          <UploadComponent style="margin-top: 10px;" :config-name="favicon"></UploadComponent>
        </div>
      </div>
<!--      <div class="color-select">-->
<!--        <span class="theme-color-select">主题色：</span>-->
<!--        <el-color-picker v-model="color" style="margin-top:10px"></el-color-picker>-->
<!--      </div>-->
    </div>
    <div class="background-img" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600;display: flex;flex-direction: column">
      <div class="HeadLine" style="margin-top:15px;margin-left:-5px;">
        <div class="HeadSquare"></div>
        <div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-promotion"></i>背景样式</div>
      </div>
      <span class="title" >背景图</span>
      <div style="display: flex;flex-direction: column;margin-top:20px">
        <span class="min-title">浅色模式</span>
        <div class="img-card">
          <UploadComponent style="margin-left: 20px;" :config-name="light_bg_file"></UploadComponent>
          <div class="img-url">
            <span class="min-title"><i class="el-icon-link"></i>图片链接</span>
            <el-input
                placeholder="请输入链接"
                v-model="dark_bg"
                clearable
                style="margin-top:10px;width: 420px"
                @change="setConfig('dark_bg',dark_bg,'String')"
            >
            </el-input>
            <span class="min-title" style="margin-top:20px">支持随机图链接</span>
          </div>
        </div>
      </div>

      <div style="display: flex;flex-direction: column;margin-top:20px">
        <span class="min-title">深色模式</span>
        <div class="img-card">
          <UploadComponent style="margin-left: 20px" :config-name="dark_bg_file"></UploadComponent>
          <div class="img-url">
            <span class="min-title"><i class="el-icon-link"></i>图片链接</span>
            <el-input
                placeholder="请输入链接"
                v-model="light_bg"
                clearable style="margin-top:10px;width: 420px"
                @change="setConfig('dark_bg',light_bg,'String')"
                >
            </el-input>
            <span class="min-title" style="margin-top:20px">支持随机图链接</span>
          </div>
        </div>
      </div>
    </div>
    <div class="ui-model" style="margin-top:20px">
      <div class="HeadLine" style="margin-top:20px;margin-left:-5px;">
        <div class="HeadSquare"></div>
        <div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-promotion"></i>主题偏好设置</div>
      </div>
      <div class="min-ui-model" style="font-family: SimHei;font-size:18px;font-weight:600;">
        <div style="margin-top:50px">
          <span class="min-title" >浅色模式切换：</span>
          <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
              @change="setConfig('open_dark_light',value,'String')">
          </el-switch>
        </div>
        <div style="width:100%;height:50px"></div>
      </div>
    </div>
  </div>
</template>
<script>


import UploadComponent from "@/components/setting/system/Upload.vue";
import axios from "axios";
import Vue from "vue";

export default {
  name:"AppearanceSettings",
  components: {UploadComponent},
  data() {
    return {
      // color:'#409EFF',
      dark_bg:null,
      light_bg:null,
      value:null,
      favicon:"favicon",
      dark_logo:'dark_logo',
      light_logo:'light_logo',
      dark_bg_file:'dark_bg_file',
      light_bg_file:'light_bg_file',
      loading:true,
    }},
  mounted() {

  },
  created() {
    this.getConfig('open_dark_light');
    this.getConfig('dark_bg');
    this.getConfig('light_bg');
  },
  computed: {

  },
  methods: {


      setConfig(name,value,type){
        let _this = this;
        if (localStorage.getItem('userId')&&localStorage.getItem('Authorization')) {
          if(value!==''){
            axios({
              method: 'post',
              url: '/api//updateConfig',
              params: {
                name:name,
                value:value,
                type:type,
              },
            }).then(function (res) {
              if(res.data!== "更新成功!"){
                Vue.prototype.$notify.error({
                  title: '错误',
                  message: "更新失败！",
                  offset: 0
                });
              }else {
                Vue.prototype.$notify({
                  title: '成功',
                  message: ('i', {style: 'color: teal'}, "更新成功！"),
                  type: 'success',
                  offset: 0
                });
              }

            }).catch((error) => {
              // Vue.prototype.$notify.error({
              //   title: '错误',
              //   message: error,
              //   offset: 0
              // });
            })
          }else {
            Vue.prototype.$notify.error({
              title: '错误',
              message: "不能为空",
              offset: 0
            });
          }


        } else {
          Vue.prototype.$notify.error({
            title: '错误',
            message: '登录状态失效，请重新登录！',
            offset: 0
          });
        }
      },
      getConfig(name){
      let _this=this;
      if(localStorage.getItem('userRole') === '0' && localStorage.getItem('Authorization')){
        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.dark_bg){
                _this.dark_bg=res.data.dark_bg.value;
              }
              if(res.data.light_bg){
                _this.light_bg=res.data.light_bg.value;
              }
              _this.loading=false;
            }

          }).catch((error) => {
            // Vue.prototype.$notify.error({
            //   title: '错误',
            //   message: error,
            //   offset: 0
            // });
          })
        }else{
          return false
        }

      }else{
        Vue.prototype.$notify.error({
          title: '错误',
          message: "权限不够！",
          offset: 0
        });
      }

    },
  }
}
</script>
<style scoped>
.main{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  //align-items: center;
  margin-left: 50px;
  overflow: scroll;
}
.title {
  font-weight: bolder;
  font-size: 20px;
  color: var(--theme-color);
  margin-top: 10px;
  //background-color: var(--theme-bg-color);
}
.base-style-content{

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.min-title {
  color: var(--theme-color);
//background-color: var(--theme-bg-color);
}
.min-content{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.theme-color-select{
  color: var(--theme-color);
}
.color-select{
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.img-card{
  border: solid 5px var(--border-color);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  border-radius: 20px;
  margin-top:20px;
  width: 800px;
  height: 200px;
  background-color: var(--theme-bg-color);
  color: var(--theme-color);
}
.img-url{
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
}
.min-ui-model{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

}

::v-deep .el-input__inner{
  background-color: var(--border-color);
}
::v-deep .el-textarea__inner{
  background-color: var(--border-color);
}
</style>