<template>
  <div>
    <el-radio-group v-model="form.socketType" style="padding: 15px 50px">
      <el-radio label="天通卫星通信">天通卫星通信</el-radio>
      <el-radio label="北斗卫星通信">北斗卫星通信</el-radio>
      <el-radio label="铱星卫星通信">铱星卫星通信</el-radio>
      <el-radio label="无线通信">无线通信</el-radio>
      <el-radio label="4G通信">4G通信</el-radio>
    </el-radio-group>
    <el-row class="socket-title">
      <el-col :span="8">
        采集地址
      </el-col>
      <el-col :span="8" :offset="1">
        创建时间
      </el-col>
     <el-col :span="4" :offset="1">
        通信状态
      </el-col>
    </el-row>
    <el-form ref="form" :model="form" label-width="150px">
      <el-form-item label="AIS通信">
        <el-col :span="9">
          <el-autocomplete class="inline-input" v-model="form.aisAddress"
            :fetch-suggestions="querySearch" @focus="setlist(aislist)">
            <template slot="prepend">http://</template>
          </el-autocomplete>
        </el-col>
        <el-col :span="8" :offset="1">
          <el-date-picker type="datetime" placeholder="选择时间" v-model="form.aisTime" style="width: 100%;"/>
        </el-col>
       <el-col :span="2" :offset="1">
          <el-switch v-model="form.aisStatus"/>
        </el-col>
      </el-form-item>
      <el-form-item label="水文气象通信">
        <el-col :span="9">
          <el-autocomplete class="inline-input" v-model="form.hydAddress"
                           :fetch-suggestions="querySearch" @focus="setlist(hydlist)">
            <template slot="prepend">http://</template>
          </el-autocomplete>
        </el-col>
        <el-col :span="8" :offset="1">
          <el-date-picker type="datetime" placeholder="选择时间" v-model="form.hydTime" style="width: 100%;"/>
        </el-col>
       <el-col :span="2" :offset="1">
          <el-switch v-model="form.hydStatus"/>
        </el-col>
      </el-form-item>
      <el-form-item label="方舱指控软件通信">
        <el-col :span="9">
          <el-autocomplete class="inline-input" v-model="form.swAddress"
                           :fetch-suggestions="querySearch" @focus="setlist(swlist)">
            <template slot="prepend">http://</template>
          </el-autocomplete>
        </el-col>
        <el-col :span="8" :offset="1">
          <el-date-picker type="datetime" placeholder="选择时间" v-model="form.swTime" style="width: 100%;"/>
        </el-col>
       <el-col :span="2" :offset="1">
          <el-switch v-model="form.swStatus"/>
        </el-col>
      </el-form-item>
      <el-form-item label="飞翼滑翔机通信">
        <el-col :span="9">
          <el-autocomplete class="inline-input" v-model="form.flyAddress"
                           :fetch-suggestions="querySearch" @focus="setlist(flylist)">
            <template slot="prepend">http://</template>
          </el-autocomplete>
        </el-col>
        <el-col :span="8" :offset="1">
          <el-date-picker type="datetime" placeholder="选择时间" v-model="form.flyTime" style="width: 100%;"/>
        </el-col>
       <el-col :span="2" :offset="1">
          <el-switch v-model="form.flyStatus"/>
        </el-col>
      </el-form-item>
      <div style="text-align: center;margin-top: 40px">
        <el-button class="setting-btn" type="primary" @click="onSubmit">应 用</el-button>
        <el-button class="setting-btn" @click="read" style="margin-left: 20px">读取配置</el-button>
        <!--<el-button @click="save">保存配置</el-button>-->
      </div>
    </el-form>
  </div>
</template>

<script>
  import axios from 'axios'
export default {
  name: 'Socket',
  components: {},
  data() {
    return {
      list: [],
      aislist: [{value:'10.64.9.0'},{value:'127.0.0.1'}],
      swlist: [{value:'11.64.9.0'},{value:'127.0.0.1'}],
      hydlist: [{value:'12.64.9.0'},{value:'127.0.0.1'}],
      flylist: [{value:'13.64.9.0'},{value:'127.0.0.1'}],
      form: {
        socketType: '天通卫星通信',
        aisAddress:'',
        aisTime:'',
        aisStatus:'',
        hydAddress:'',
        hydTime:'',
        hydStatus:'',
        swAddress:'',
        swTime:'',
        swStatus:'',
        flyAddress:'',
        flyTime:'',
        flyStatus:''
      }
    }
  },
  created() {
    this.init()
  },
  mounted() {
    this.init()
  },
  methods: {
    init(){
      console.log('获取缓存列表，当前值')
    },
    setlist(list){
      console.log(list)
      this.list = list
    },
    querySearch(queryString, cb) {
      let list = this.list
      var results = queryString ? list.filter(this.createFilter(queryString)) : list;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (item) => {
        return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    onSubmit() {
      console.log('submit!');
    },
    save(){
      var str = JSON.stringify(this.form);
      const fs = require('fs');
      console.log(fs)
      fs.writeFile('./config/socket.json', str, (err) => {
        if (err) {console.log(err);return;}

        console.log(`写入成功`);
      })
    },
    read(){
      var that = this
      axios.get('./config/socket.json').then((result) => {
        that.form = result.data
      }).catch((error) => {
        console.error('get baseConfig error...' + error)
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .socket-title{
    margin-left: 150px;
    padding: 20px 0px;
    font-weight: bold;
    text-align: center;
  }
  .setting-btn{
    width: 100px;
  }
  .el-input-group__append, .el-input-group__prepend {
    padding: 5px !important;
    min-width: 40px;
    font-size: 12px;
    background-color: white !important;
    /*border: 1px solid #DCDFE6;*/
  }
</style>