<template>
	<el-select class="mb-5" v-model="value" placeholder="Select">
		<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
	</el-select>
	
	<br>

	<el-tag v-for="tag in tags" :key="tag" class="mx-1" closable @close="handleClose(tag)">
		{{ tag }}
	</el-tag>
</template>

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

const tags = ref<string[]>(['111', '222'])
const handleClose = (tag: string) => {
  tags.value.splice(tags.value.indexOf(tag), 1)
	console.log(tags.value);
}


const value = ref('')
type OptionItem = {
	value: string,
	label: string
}
const options = ref<OptionItem[]>([])

onMounted(() => {
	axios.get(
		'api/device_communication/'
		).then((res) => {
		options.value = res.data
	}).catch((err) => {
		console.log(err);
	})
})

watch(value, () => {
	axios.post(
		'api/device_communication/protocol_performance/', 
		{
			'protocol_name': value.value,
	}).then((res) => {
		console.log(res)
		tags.value = res.data
	}).catch((err) => {
		console.log(err);
	})
})

</script>
