<template>
  <div class="border-solid border-black border-1">
    <div class="mb-2">
      <div class="float-left text-black ml-4">
        <div class="h-8 text-sm justify-content flex items-center">{{ props.devName }}</div>
      </div>
      <div class="float-right">
        <el-switch 
          v-if="props.type === '2'"
          v-model="openSimulateDevice"
          @change="changeSimulateDevice"
          class="mr-4"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        />
        <el-button type="danger" size="small" class="mr-4" @click="del" :icon="Delete" circle />
      </div>
    </div>
    <el-table :data="tableData" class="w-full">
      <el-table-column v-for="(_, key) in tableData[0]" :label="key" :prop="key" />
    </el-table>
  </div>
</template>


<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import request from '@/plugins/axios/requests';
import axios from 'axios';

type propsType = {
  devName: string
  groupName: string
  protocolName: string
  type: string
}
const props = defineProps<propsType>()

type tableDataType = Record<string, string>[]
// const tableData = ref<tableDataType>([{}]);
const tableData = ref<tableDataType>([{}])
const tableTitles = ref<string[]>([])

let table_websocket: WebSocket | null = null
onMounted(() => {
  table_websocket = new WebSocket(
    'ws://' + window.location.host + '/ws/chat/' + props.groupName! + '/'
  )

  table_websocket.onmessage = (e) => {
    // console.log(e.data);
    let data = JSON.parse(e.data).message
    for (const [key, value] of Object.entries(data[0] as Record<string, string>)) {
      if (tableTitles.value.indexOf(key) !== -1) {
        tableData.value[0][key] = value
      }
    }
  }

  axios.get('/api/device_communication/performance/' + props.type + '/' + props.protocolName + '/')
  .then((res) => {
    console.log("table title", res.data);
    
    tableTitles.value = res.data
    for (let key of res.data) {
      tableData.value[0][key] = ''
    }
  })
  .catch((err) => {
    console.log(err);
  })
})

onBeforeUnmount(() => {
  // 关闭 websocket
  if (table_websocket) {
    table_websocket.close()
  }

  // 关闭模拟设备
  if (openSimulateDevice.value && props.type === '2') {
    let body = {
      protocol_name: props.protocolName,
      status: false,
      device_name: props.devName
    } 
    
    request.post('/api/change_simulate_device/', body)
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    })
  }
})

const emits = defineEmits(['deleteTable'])

const del = () => {
  emits('deleteTable')
  table_websocket!.close()
}

onBeforeUnmount(() => {
  table_websocket?.close()
})

const openSimulateDevice = ref<boolean>(false)
const changeSimulateDevice = () => {
  let body = {
    protocol_name: props.protocolName,
    status: openSimulateDevice.value,
    device_name: props.devName
  } 
  
  request.post('/api/change_simulate_device/', body)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  })
}
</script>
