<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <kit-menu @handleMenuItemSelect="MenuItem"></kit-menu>
      </el-aside>
      <el-main>
        <el-button @click="addDevice = true">新增模拟设备</el-button>
        <component :is="currentComponent"></component>
      </el-main>
    </el-container>
  </div>

  <el-dialog v-model="addDevice" title="新增指令">
    <el-form >
      <el-form-item label="设备名称" :label-width="formLabelWidth">
        <el-input  autocomplete="off" />
      </el-form-item>
      <el-form-item label="设备英文名称" :label-width="formLabelWidth">
        <el-input  autocomplete="off" />
      </el-form-item>
      <el-form-item label="协议" :label-width="formLabelWidth">
        <el-select>
          <el-option label="TX"></el-option>
          <el-option label="RX"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="通信方式" :label-width="formLabelWidth">
        <el-select>
          <el-option label="ASCII"></el-option>
          <el-option label="HEX"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDevice = false">取消</el-button>
        <el-button type="primary" @click="open">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup>
import {ref, shallowRef} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import KitMenu from "../../components/kit-menu.vue";
import KitDevice from "../../components/kit-device.vue";

const currentComponent = shallowRef(KitDevice)
const addDevice = ref(false)
const formLabelWidth = '140px'

function MenuItem(index){
  console.log(index)
  currentComponent.value = KitDevice
}

function open(){
  ElMessageBox.confirm(
      '是否确认增加?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '增加成功',
        })
        addDevice.value = false
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        })
      })
}
</script>

<style>
body,html{
  height: 100%;
}
html,body,.common-layout,.el-container{
  margin: 0px;
  padding: 0px;
  height: 100%;
}
.el-aside {

  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  border: 1px solid;
  /*background-color: #f3f4f6;*/
  color: #333;
  /*text-align: center;*/

}
</style>
