<template>
	<el-descriptions :title="deviceInfo.device_name" :column=1>
		<template #extra>
			<el-button type="danger" size="small" @click="del">delete</el-button>
			<el-button type="primary" size="small" @click="dialogFormVisible = true">Edit</el-button>
		</template>
		<el-descriptions-item label="协议名">{{ deviceInfo.protocol_name }}</el-descriptions-item>
		<el-descriptions-item label="通信参数" :column=3>
      <span> {{ deviceInfo.communicate_mode }} </span>
			<span v-if="isTcp">
				<span ml-9> {{ deviceInfo.tcp_ip }} </span>
				<span ml-9> {{ deviceInfo.tcp_port }} </span>
      </span>
      <span v-else>
				<span ml-9> {{ deviceInfo.udp_ip_src}} </span>
				<span ml-9> {{ deviceInfo.udp_port_src }} </span>
				<span ml-9> {{ deviceInfo.udp_ip_dst }} </span>
				<span ml-9> {{ deviceInfo.udp_port_dst }} </span>
      </span>
		</el-descriptions-item>
		<el-descriptions-item label="性能参数">
			<el-tag v-for="tag in checked_performance_fields" :key="tag" class="mx-1 mt-1">
				{{ tag }}
			</el-tag>
		</el-descriptions-item>
	</el-descriptions>
	<el-divider />

	<edit-dialog 
    :is-show="dialogFormVisible" 
    :device-info="deviceInfo"
    :tab-type="props.tabType"
    @close="dialogFormVisible = false" 
    @change-device-info="changeDeviceInfo"
    type="edit" />
</template>


<script setup lang="ts">
import { onMounted, ref, watch} from 'vue';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';

import type { DeviceInfo } from '@/components/device_communication/types';
import EditDialog from './EditDialog.vue';

type propType = {
	deviceInfo: DeviceInfo,
  tabType: string
}
const props = defineProps<propType>();
const deviceInfo = ref<DeviceInfo>(props.deviceInfo)
const checked_performance_fields = ref<string[]>([])
const isTcp = ref<boolean>(true)
// performance_fields tag
const dialogFormVisible = ref(false)

onMounted(() => {
	isTcp.value = deviceInfo.value.communicate_mode.toUpperCase().includes('TCP'.toUpperCase())
	checked_performance_fields.value = JSON.parse(deviceInfo.value.performance_fields!)
  deviceInfo.value.checked_performance_fields = checked_performance_fields.value
})

// 观察 device_info 是否有变化，如果有变化则更新
watch(() => props.deviceInfo, () => {
  deviceInfo.value = props.deviceInfo
})

const emit = defineEmits(['deleteDeviceInfo'])
const del = () => {
  ElMessageBox.confirm("确认删除吗？", "TIP")
  .then(() => {
    let station_id = deviceInfo.value.station_id
    let id = deviceInfo.value.id
    axios.delete('/api/device_communication/' + props.tabType + '/' + id + '/')
    .then(() => {
      emit('deleteDeviceInfo', { station_id, id })
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
    })
    .catch((err) => {
      console.log(err);
    })
  })
  .catch(() => {});
}

const changeDeviceInfo = (device_info: DeviceInfo) => {
  console.log('changeDeviceInfo')
  
  deviceInfo.value = device_info
  checked_performance_fields.value = JSON.parse(device_info.performance_fields!)
}
</script>

<style>
.el-descriptions__label:not(.is-bordered-label) {
	color: var(--el-text-color-regular) !important;
	font-weight: bold;
}
</style>