<template>
  <div id="app">
    <div class="container">
      <header>
        <h1 class="header-title">{{ info.title }}</h1>
        <p class="origin-ip-container"><span class="origin-text">IP: </span><span class="origin-ip">{{ info.ip }}</span></p>
      </header>
      <main>
        <br>
        <el-button :icon="refreshIcon" circle @click="refreshNode"></el-button>
        <div class="group-container" v-for="(item, index) in info.groups" v-bind:key="index">
          <div class="group-header">
            <span class="header-title">{{ item.name }}</span>
            <span class="header-des">{{ item.description }}</span>
          </div>
          <div class="group-select-container">
            <div class="sub-switch" v-for="(subItem, index2) in item.sets" v-bind:key="'sub'+index2">
              <el-switch
                         v-model="subItem.here"
                         @change="handleChange(index, index2)"
                         :active-text="subItem.name+' ('+ subItem.description +')'">
              </el-switch>
            </div>

          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
  /* eslint-disable */
  const isTest = false;
  let APP_DOMAIN = '';
  if(isTest){
    APP_DOMAIN = "https://railgun.momobako.com"
  }else{
    APP_DOMAIN = window.location.protocol + '//' + window.location.host;
  }
  //console.log(APP_DOMAIN);
  export default {
    name: 'app',
    created(){
      this.refreshNode();
    },
    data(){
      return {
        info: {title: 'Loading...', ip: '0.0.0.0'},
        nowSelect: '',
        refreshIcon: 'el-icon-refresh-right'
      }
    },
    methods: {
      refreshNode(){
        this.refreshIcon = 'el-icon-loading';
        const that = this;
        this.axios.get(APP_DOMAIN + '/api/get').then((res)=>{
          console.log(res);
          that.info = res.data;
          that.refreshIcon = 'el-icon-refresh-right';
          that.$message({
            message: '刷新成功',
            type: 'success'
          })
        }).catch((err)=>{
          that.$message({
            message: '出现意想不到的错误',
            type: 'error'
          });
        })
      },
      handleChange(index, index2){

        const that = this;
        for(let j=0;j<this.info.groups[index].sets.length;j++){
          if (j !== index2){
            this.info.groups[index].sets[j].here = false;
          }
        }

        if (this.info.groups[index].sets[index2].here){
          this.axios.post(APP_DOMAIN + '/api/add', {
            setname: this.info.groups[index].sets[index2].setname
          }).then((res)=>{
            if (res.data.success === false){
              that.$message({
                message: res.data.message,
                type: 'error'
              });
              that.refreshNode();
            }else{
              that.$message({
                message: '更改成功',
                type: 'success'
              })
            }
          }).catch((err)=>{
            that.$message({
              message: err.message,
              type: 'error'
            });
            that.refreshNode();
          })
        }else{
          this.axios.post(APP_DOMAIN + '/api/del', {
            setname: this.info.groups[index].sets[index2].setname
          }).then((res)=>{
            if (res.data.success === false){
              that.$message({
                message: res.data.message,
                type: 'error'
              });
              that.refreshNode();
            } else {
              that.$message({
                message: '更改成功',
                type: 'success'
              })
            }
          }).catch((err)=>{
            that.$message({
              message: err.message,
              type: 'error'
            });
            that.refreshNode();
          })
        }

      },
    }
  }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  min-height: 100vh;
  position: relative;
  padding-top: 15px;
  background: url('./assets/bg.jpg') no-repeat fixed;
  background-size:100% auto;


}
body {
  margin:0;
  padding:0;
}

.container {
  max-width: 380px;
  min-width: 380px;
  min-height: 95vh;
  border: 1px solid #E4E7ED;
  border-radius: 10px;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
  background: rgba(255,255,255,0.85);
  margin:0 auto;
}

header {
  margin-top:14px;
  text-align: center;
  border-bottom: 2px solid #EBEEF5;
}
header > .header-title {
  color: #303133;
  font-weight: 300;
  margin-bottom: 0;
}

header > .origin-ip-container {
  color: #909399;
  margin-top: 0;
}

header > .origin-ip-container > .origin-ip:hover {
  color: #67C23A;
  cursor: pointer;
}

.group-container {
  text-align: left;
  margin-top: 20px;
  padding: 20px;
}

.group-container > .group-header > .header-title {
  font-size: 22px;
  color: #303133;
}
.group-container > .group-header > .header-des {
  padding-left: 5px;
  font-size: 14px;
  color: #909399;
}

.group-container > .group-select-container {
  text-align: left;
  margin:0 auto;
}

</style>
