<template>
  <div>
    <el-row class="socket-title">
      <el-col :span="11">
        采集地址
      </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="250px">
      <el-form-item label="AIS通信">
        <el-col :span="12">
          <el-autocomplete class="inline-input" v-model="form.aisIp "
            :fetch-suggestions="querySearch" @focus="setlist(aislist)">
            <template slot="prepend">http://</template>
          </el-autocomplete>
        </el-col>
       <el-col :span="2" :offset="1">
          <el-switch disabled v-model="status"/>
        </el-col>
      </el-form-item>
      <el-form-item label="水文气象通信">
        <el-col :span="12">
          <el-autocomplete class="inline-input" v-model="form.envIp "
                           :fetch-suggestions="querySearch" @focus="setlist(envlist)">
            <template slot="prepend">http://</template>
          </el-autocomplete>
        </el-col>
       <el-col :span="2" :offset="1">
          <el-switch disabled v-model="status"/>
        </el-col>
      </el-form-item>
      <el-form-item label="方舱指控软件通信">
        <el-col :span="12">
          <el-autocomplete class="inline-input" v-model="form.shelterIp "
                           :fetch-suggestions="querySearch" @focus="setlist(shelterlist)">
            <template slot="prepend">http://</template>
          </el-autocomplete>
        </el-col>
       <el-col :span="2" :offset="1">
          <el-switch disabled v-model="status"/>
        </el-col>
      </el-form-item>
      <el-form-item label="飞翼滑翔机通信">
        <el-col :span="12">
          <el-autocomplete class="inline-input" v-model="form.robotIp "
                           :fetch-suggestions="querySearch" @focus="setlist(robotlist)">
            <template slot="prepend">http://</template>
          </el-autocomplete>
        </el-col>
       <el-col :span="2" :offset="1">
          <el-switch disabled v-model="status"/>
        </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>
      </div>
    </el-form>
  </div>
</template>

<script>
  import axios from 'axios'
  import {getSystemRecentAddress,systemUpdate,historyAddress} from '@/api/system'
export default {
  name: 'Socket',
  components: {},
  data() {
    return {
      list: [],
      status:true,
      aislist: [{value:'10.64.9.0'},{value:'127.0.0.1'}],
      shelterlist: [{value:'11.64.9.0'},{value:'127.0.0.1'}],
      envlist: [{value:'12.64.9.0'},{value:'127.0.0.1'}],
      robotlist: [{value:'13.64.9.0'},{value:'127.0.0.1'}],
      form: {
        aisIp :'',
        envIp :'',
        shelterIp :'',
        robotIp :''
      }
    }
  },
  created() {
    this.init()
  },
  mounted() {
    this.init()
  },
  methods: {
    init(){
      console.log('获取缓存列表，当前值')
      getSystemRecentAddress().then(response => {
        if(response.code === 200){
          this.form.aisIp = response.data.aisIp
          this.form.envIp = response.data.envIp
          this.form.robotIp = response.data.robotIp
          this.form.shelterIp = response.data.shelterIp
        }
      })
      historyAddress('aisIp').then(response => {
        if(response.code === 200){
          this.aislist = response.data.map(item => {
            return { value : item.ip }
          })
        }
      })
      historyAddress('envIp').then(response => {
        if(response.code === 200){
          this.envlist = response.data.map(item => {
            return { value : item.ip }
          })
        }
      })
      historyAddress('robotIp').then(response => {
        if(response.code === 200){
          this.robotlist = response.data.map(item => {
            return { value : item.ip }
          })
        }
      })
      historyAddress('shelterIp').then(response => {
        if(response.code === 200){
          this.shelterlist = response.data.map(item => {
            return { value : item.ip }
          })
        }
      })
    },
    setlist(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!');
      systemUpdate(this.form).then(response => {
        if(response.code === 200){
          this.$message.success('通信地址设置成功')
          this.init()
        }
      })

    },
    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: 250px;
    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>