<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="FieldName" label="字段名" style="width: 25%" />
    <el-table-column prop="FieldLength" label="字段长度" style="width: 25%" />
    <el-table-column prop="Value" label="默认值" style="width: 25%" />
    <el-table-column fixed="right"  style="width: 25%">
      <template #default="{row}">
        <div style="display: flex; justify-content: space-between;">
          <el-button  type="primary" @click="open('delete')">删除字段</el-button>
          <el-button  type="primary" @click="editField(row)">修改字段</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>

  <el-button
      style="width: 100%; border: 1px dashed"
      class="mt-4"
      @click="addField"
  >+</el-button>

  <el-dialog v-model="dialogVisible" >
    <template #title>{{flag ? '新增' : '编辑'}}字段</template>
    <el-form  label-position="right" label-width="150px" :model="fields">
      <el-row>
        <el-col :span="12">
          <el-form-item label="命令名">
            <el-input v-model="fields.cmdName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="指令类型">
            <el-input v-model="fields.cmdType"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="序号">
            <el-input v-model="fields.index"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="名称">
            <el-input v-model="fields.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="长度">
            <el-input v-model="fields.length"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="值">
            <el-input v-model="fields.value"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="指令最大值">
            <el-input v-model="fields.cmdMax"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="指令最小值">
            <el-input v-model="fields.cmdMin"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="字段类型">
            <el-select v-model="fields.fieldType">
              <el-option v-for="item in fieldTypes" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="输入数据操作">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="输入数据操作参数">
            <el-input></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="输出数据操作">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="输出数据操作参数">
            <el-input></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="输入数据字节操作">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="输出数据字节操作">
            <el-input></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="Lua对输入数据的操作">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Lua对输出数据的操作">
            <el-input></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="open">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";

const flag = ref(false)
const dialogVisible = ref(false)
const tableData = [
  {
    FieldName: 'Cmds',
    FieldLength: 3,
    Value: '$XY',
  },
  {
    FieldName: 'Comma',
    FieldLength: 1,
    Value: ',',
  },
]
const fields = ref({
  cmdName: '',
  cmdType: '',
  index: '',
  name: '',
  length: '',
  value: '',
  cmdMax: '',
  cmdMin: '',
  fieldType: '',
  inputDataAction: '',
  inputDataActionParam: '',
  outputDataAction: '',
  outputDataActionParam: '',
  inputDataByteAction: '',
  outputDataByteAction: '',
  LuaInput: '',
  LuaOutput: ''
})
const fieldTypes = [
  { value: 0, label: 'DATATYPE_DEFAULT'},
  { value: 1, label: 'DATATYPE_STR '},
  { value: 2, label: 'DATATYPE_UINT_STR '},
  { value: 3, label: 'DATATYPE_INT_STR '},
  { value: 4, label: 'DATATYPE_FLOAT_STR '},
  { value: 5, label: 'DATATYPE_DOUBLE_STR '},
  { value: 6, label: 'DATATYPE_HEX '},
  { value: 7, label: 'DATATYPE_STR_HEX '},
  { value: 8, label: 'DATATYPE_UINT_HEX '},
  { value: 9, label: 'DATATYPE_INT_HEX '},
  { value: 10, label: 'DATATYPE_FLOAT_HEX '},
  { value: 11, label: 'DATATYPE_DOUBLE_HEX '},
  { value: 12, label: 'DATATYPE_DOUBLE '},
  { value: 13, label: 'DATATYPE_PAYLOAD '},
  { value: 14, label: 'DATATYPE_INT8 '},
  { value: 15, label: 'DATATYPE_TIMESTR '},
  { value: 16, label: 'DATATYPE_MAX'},
]
let operation = ''

const addField = () => {
  dialogVisible.value = true;
  flag.value = true;
  for(const key in fields.value){
    fields.value[key] = '';
  }
}

function editField(data){
  dialogVisible.value = true
  flag.value = false
  fields.value['cmdName'] = data.FieldName
  fields.value['length'] = data.FieldLength
  fields.value['value'] = data.Value
}

function open(data){
  console.log(data)

  if (data === 'delete'){
    operation = '删除'
  } else if(flag.value){
    operation = '增加'
  }else if (!flag.value){
    operation = '修改'
  }
  ElMessageBox.confirm(
      '是否确认' + operation + '?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        ElMessage({
          type: 'success',
          message: operation + '成功',
        })
        dialogVisible.value = false
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        })
      })
}
</script>

<style>
.el-row:not(:last-child) {
  margin-bottom: 10px; /* 添加间距 */
}
</style>