<!--
  Description: 设备管理 - 新建/编辑
  Author: 李亚光
  Date: 2024-11-01
 -->
<script lang="ts" setup name="DeviceManageEdit">
import drawArea from './drawArea.vue'
const emits = defineEmits(['refresh'])
const dataFormRef = ref()
const dialogFormVisible = ref(false) // 对话框是否显示
const dialogStatus = ref('') // 对话框类型：create,update
const dataForm = ref({

}) // 表单
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
} // 表头显示标题
const btnLoading = ref(false) // 保存按钮的加载中状态
const rules: FormRules = {
  id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
} // 前端校验规则

// 重置表单
const resetForm = () => {
  dataForm.value = {
  }
}

// 初始化对话框
const initDialog = (row: any, dialogStatusValue: string) => {
  dialogStatus.value = dialogStatusValue
  dialogFormVisible.value = true
}
defineExpose({
  initDialog,
})

const cancel = () => {
  dialogFormVisible.value = false
  // this.$emit('watchChild')
}
</script>

<template>
  <el-dialog v-model="dialogFormVisible" :title="textMap[dialogStatus]" append-to-body width="1000px">
    <el-form
      v-if="dialogFormVisible" ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right"
      label-width="120px"
    >
      <el-row :gutter="24">
        <el-col :span="10">
          <el-form-item label="摄像头名称" prop="">
            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
          </el-form-item>
          <el-form-item label="摄像头编号" prop="">
            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
          </el-form-item>
          <el-form-item label="一体机编号" prop="">
            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
          </el-form-item>
          <el-form-item label="RTSP地址" prop="">
            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
          </el-form-item>
          <el-form-item label="识别间隔" prop="">
            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
          </el-form-item>
          <el-form-item label="告警间隔" prop="">
            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
          </el-form-item>
          <!-- <el-form-item label="算法关联" prop=""> -->
          <!-- <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" /> -->
          <!-- </el-form-item> -->
        </el-col>
        <el-col :span="14">
          <div id="draw-area" class="draw">
            <draw-area />
          </div>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button :loading="btnLoading" type="primary" @click="saveData">
          保存
        </el-button>
        <el-button @click="cancel">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}

.draw {
  height: 300px;
  width: 533.333px;
  border: 2px solid #000;
  padding: 0;
  margin: 0;
  box-sizing: content-box;
  position: relative;
}
</style>