<template>
  <v-container>
    <v-card>
      <v-card-title>
        协议测试
      </v-card-title>
      <v-card-text>
        <v-row justify="start">
          <v-col cols="6">
            <v-text-field v-model="ws_url"
                          label="服务端连接地址"
                          variant="outlined"
                          clearable
                          :error="error"
                          :error-messages="error_message"
                          :disabled="isconnect || connecting"
                          clear-icon="mdi-cancel"></v-text-field>
          </v-col>
          <v-col cols="3">
            <v-btn flat
                   :loading="connecting"
                   @click="isconnect ? disconnect():connect()"
                   color="secondary">
              {{isconnect ? '断开':'连接'}}
            </v-btn>
          </v-col>
        </v-row>
        <v-divider inset></v-divider>
        <v-row class="mt-5">
          <v-col cols="4">
            <v-select :items="proto_models"
                      label="选择测试模块"></v-select>
          </v-col>
          <v-col cols="4">
            <v-select :items="proto_models"
                      label="选择子协议"></v-select>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
    <v-snackbar v-model="error">
      {{ error_message }}
      <template v-slot:actions>
        <v-btn color="pink"
               variant="text"
               @click="error = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </v-container>
</template>

<script>
import { reactive } from 'vue'
import proto from '@/pb/proto'
import { socket } from '@/utils/socket'
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Protocol',
  components: {},
  data() {
    return {
      ws_url: 'ws://localhost:7891/gateway',
      isconnect: false,
      connecting: false,
      error: false,
      error_message: '',
      protodata: {},
      proto_models: [],
    }
  },
  setup() {
    const protodata = reactive([])
    const proto_models = reactive([])
    for (const v of Object.keys(proto)) {
      let arr = v.split('_')
      if (arr.length == 3) {
        console.log(v)
        var value = proto[v]
        protodata[arr[0]] = value
        console.log(value)
        proto_models.push(arr[0])
      }
    }
    return { protodata, proto_models }
  },
  onBeforeUnmount() {
    // 关闭连接
    socket.close()
  },
  methods: {
    connect() {
      // 发起连接
      this.connecting = true
      socket
        .init(this.ws_url)
        .then((value) => {
          this.error = false
          this.error_message = ''
          this.isconnect = true
          this.connecting = false
        })
        .catch((error) => {
          this.error = true
          this.error_message = error
          this.isconnect = false
          this.connecting = false
        })
    },
    disconnect() {
      socket.close()
      this.isconnect = false
    },
    loginreq() {},
  },
})
</script>
