<template>
  <main class="tab-content configs">
    <fieldset class="card">
      <legend>系统设置</legend>

      <section class="field">
        <span class="label">开机启动Clash</span>
        <wc-switch disabled></wc-switch>
      </section>

      <section class="field">
        <span class="label">设置为系统代理</span>
        <wc-switch disabled></wc-switch>
      </section>

      <section class="field">
        <span class="label">允许局域网的连接</span>
        <wc-switch v-model="configs.allowLan"></wc-switch>
      </section>
    </fieldset>

    <fieldset class="card">
      <legend>Clash设置</legend>

      <section class="field">
        <span class="label">代理模式</span>
        <wc-radio-group v-model="configs.proxy">
          <wc-radio value="global">全局</wc-radio>
          <wc-radio value="rule">规则</wc-radio>
          <wc-radio value="direct">直连</wc-radio>
        </wc-radio-group>
      </section>

      <section class="field">
        <span class="label">Socks5 代理端口</span>
        <wc-input size="small" v-model="configs.socks5"></wc-input>
      </section>

      <section class="field">
        <span class="label">HTTP 代理端口</span>
        <wc-input size="small" v-model="configs.http"></wc-input>
      </section>

      <section class="field">
        <span class="label">混合代理端口</span>
        <wc-input size="small" v-model="configs.mixed"></wc-input>
      </section>
    </fieldset>
  </main>
</template>

<script>
import fetch from '@/lib/fetch'

export default {
  data() {
    return {
      contrl: {
        host: '//127.0.0.1:',
        port: 6767,
        key: ''
      },
      configs: {
        proxy: 'rule',
        http: 0,
        socks5: 0,
        mixed: 7890,
        allowLan: false
      }
    }
  },

  mounted() {
    this.getConfig()
  },

  methods: {
    getVersion() {
      fetch('/version').then(r => {
        console.log(r)
        this.$store.version = r.version
      })
    },

    getConfig() {
      fetch('/configs').then(r => {
        console.log(r)
        Object.assign(this.configs, {
          proxy: r.mode,
          http: r.port,
          socks5: r['socks-port'],
          mixed: r['mixed-port'],
          allowLan: r['allow-lan']
        })
        // this.version = r.version
      })
    }
  }
}
</script>
