<template>
  <el-table :data="tableData"
            :header-cell-style="{backgroundColor:'#eff3f8', 'text-align':'center',color: 'black'}"
            border
            :cell-style="{'text-align':'center', backgroundColor:'#f9f9f9'}"
  >
    <el-table-column fixed prop="fieldname" label="字段名" style="width: 25%" />
    <el-table-column prop="fieldsize" label="字段长度" style="width: 25%" />
    <el-table-column prop="value" label="默认值" style="width: 25%" />
    <el-table-column fixed="right" label="操作" style="width: 25%">
      <template #default="{ row }">
        <div style="display: flex;justify-content: center">
          <el-button icon="delete" @click="open('delete', row)">删除字段</el-button>
          <el-button icon="edit" @click="editField(row)">修改字段</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>

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

  <el-dialog v-model="dialogVisible" @close="handlerClose">
    <template #header>{{ flag ? '新增' : '编辑' }}字段</template>
    <el-form ref="ruleFormRef" label-position="right" label-width="150px" :model="fields" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="命令名">
            <el-input v-model="fields.cmd_name" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="指令类型">
            <el-input v-model="fields.cmd_type" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="序号">
            <el-input v-model="fields.fieldindex" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="名称" prop="fieldname">
            <el-input v-model="fields.fieldname"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="长度" prop="fieldsize">
            <el-input v-model="fields.fieldsize"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="值" prop="value">
            <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.maxvalue"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="指令最小值">
            <el-input v-model="fields.minvalue"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="字段类型" prop="datatype">
            <el-select v-model="fields.datatype">
              <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="Lua对输入数据的操作">
            <el-input v-model="fields.lua_script_in"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Lua对输出数据的操作">
            <el-input v-model="fields.lua_script_out"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="12">
          <el-form-item>
            <el-button class="mr-0" @click="more = !more">更多操作</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="more">
        <el-col :span="12">
          <el-form-item label="输入数据操作">
            <el-input v-model="fields.operation_in"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="输入数据操作参数">
            <el-input v-model="fields.operation_in_num"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="more">
        <el-col :span="12">
          <el-form-item label="输出数据操作">
            <el-input v-model="fields.operation_out"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="输出数据操作参数">
            <el-input v-model="fields.operation_out_num"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="more">
        <el-col :span="12">
          <el-form-item label="输入数据字节操作">
            <el-input v-model="fields.operabo_in"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="输出数据字节操作">
            <el-input v-model="fields.operabo_out"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handlerClose">取消</el-button>
        <el-button type="primary" @click="dialogSubmit(flag, fields)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, FormRules, ElForm } from "element-plus";

import { AddProtocolCmd, DeleteProtocolCmd, EditProtocolCmd } from "@/dao/device";
import type { CmdInfo } from './types';

const flag = ref(false)
const dialogVisible = ref(false)
const more = ref(false)

type propsType = {
  cmdName: string,
  cmdType: string,
  version: string,
  protocolName: string,
  message: CmdInfo[]
}
const props = defineProps<propsType>()
const tableData = ref<CmdInfo[]>([])
if (props.message) {
  tableData.value = props.message
}

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' },
]

const fields = ref<CmdInfo>({
  cmd_name: '',
  cmd_type: '',
  fieldindex: 0,
  fieldname: '',
  fieldsize: 0,
  value: '',
  minvalue: '',
  maxvalue: '',
  datatype: 1,
  operation_in: 0,
  operation_in_num: 0,
  operation_out: 0,
  operation_out_num: 0,
  operabo_in: 0,
  operabo_out: 0,
  lua_script_in: '',
  lua_script_out: ''
})

const rules = reactive<FormRules<typeof fields>>({
  fieldname: [{ required: true, message: "请输入名称", trigger: 'blur' }],
  fieldsize: [{ required: true, message: "请输入长度", trigger: 'blur' }],
  value: [{ required: true, message: "请输入值", trigger: 'blur' }],
  datatype: [{ required: true, message: "请选择字段类型", trigger: 'change' }],
})


const ruleFormRef = ref<typeof ElForm>()

const addField = () => {

  flag.value = true;
  more.value = false

  fields.value.cmd_name = props.cmdName
  fields.value.cmd_type = props.cmdType
  fields.value.fieldindex = tableData.value.length + 1
  fields.value.fieldname = ''
  fields.value.fieldsize = 0
  fields.value.value = ''
  fields.value.minvalue = 'null'
  fields.value.maxvalue = 'null'
  fields.value.datatype = 1
  fields.value.lua_script_in = 'null'
  fields.value.lua_script_out = 'null'
  fields.value.operation_in = 0
  fields.value.operation_in_num = 0
  fields.value.operation_out = 0
  fields.value.operation_out_num = 0
  fields.value.operabo_in = 0
  fields.value.operabo_out = 0

  dialogVisible.value = true;
}

function editField(data: CmdInfo) {
  dialogVisible.value = true
  flag.value = false
  more.value = false
  
  fields.value = data
}

function Edit(id: number, params: any) {
  params['protocol_name'] = props.protocolName
  EditProtocolCmd(id, params)
}

function Delete(id: number) {
  DeleteProtocolCmd(id)
}

function Add(params: any) {
  params['protocol_name'] = props.protocolName
  AddProtocolCmd(params)
  .then((res) => {
    tableData.value.push(res.data!)
  })
}

function confirm(type: string, data: CmdInfo) {
  ElMessageBox.confirm(
    '是否确认?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    dialogVisible.value = false
    more.value = false
    if (type === 'edit') {
      let params = fields.value
      Edit(params.id!, params)
    } else if (type === 'delete') {
      Delete(data.id!)
      tableData.value.splice(data['fieldindex'] - 1, 1)
    } else if (type === 'add') {
      Add(fields.value)
    }
  })
  .catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消',
    })
  })
}


const handlerClose = () => {
  dialogVisible.value = false
  more.value = false
  ruleFormRef.value!.clearValidate()
}

function open(str: string, data: CmdInfo) {
  if (str === 'delete') {
    confirm(str, data)
    return
  }
  if (!ruleFormRef.value) return;

  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      confirm(str, data)
    } else {
      return false
    }
  })
}

const dialogSubmit = (flag: boolean, data: CmdInfo) => {
  if (flag) {
    open('add', data)
  } 
  else {
    open('edit', data)
  }
}

</script>

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

.el-table {
  border-collapse: collapse;
}
/*.el-table th, .el-table td {*/
/*  border: 1px solid #ccc;*/
/*}*/
/*.el-table td.is-hover, .el-table td:hover {*/
/*  border: 1px solid #409EFF;*/
/*}*/



</style>