<template>
  <div style="width: 95%;margin: auto">
    <div class="flex mt-4 items-center">
      <div>设备名称</div>
      <div class="ml-4">tcp server</div>
      <div class="ml-4">ip</div>
      <div class="ml-4">port</div>
      <el-switch v-model="value" :disabled="isSwitchDisabled" class="ml-4"></el-switch>
      <el-button class="ml-4" @click="dialogFormVisible = true">设置</el-button>
    </div>
    <el-table
        style="width: 100%"
        :data="tableData"
        :show-header="false" border
        class="mt-2"
    >
      <el-table-column
          v-for="(item, index) in tableHeader"
          :key="index"
          :prop="item"
          :fixed="isTitleColumn"
      >
      </el-table-column>
    </el-table>
  </div>


  <el-dialog v-model="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="模式" :label-width="formLabelWidth">
        <el-select v-model="form.mode">
          <el-option label="tcp server" value="tcp server" />
          <el-option label="tcp client" value="tcp client" />
          <el-option label="tcp/ip" value="tcp/ip" />
          <el-option label="udp" value="udp" />
        </el-select>

      </el-form-item>
      <el-form-item label="ip" :label-width="formLabelWidth">
        <el-input v-model="form.ip" autocomplete="off" />
      </el-form-item>
      <el-form-item label="端口" :label-width="formLabelWidth">
        <el-input v-model="form.port" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

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

const value = ref(true)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const tableHeader = ref<string[]>([])

type Table = {
  title: string,
  value0: string,
  value1: string,
  value2: string
}
const tableData = ref<Table[]>([
  {title:'变量', value0: '模式', value1: 'ip', value2: '端口'},
  {title: '值', value0: 'tcp server', value1: 'localhost', value2: '8000'}
]
)

const form = ref(
  {mode:'', ip: '', port: ''}
)

type propsType = {
  tag:String
}
const props = defineProps<propsType>()

const isSwitchDisabled = ref(true)

watch( () => props.tag, (newValue) => {
  if (newValue === 'real'){
    value.value = true
    isSwitchDisabled.value = true
  }else if(newValue === 'virtual'){
    isSwitchDisabled.value = false
  }
})

const isTitleColumn = (column: any): string => {
  return column.property === 'title'? 'left' : ''
} 
</script>

<style scoped>

</style>