<!--
  Description: 场景数据-新建
  Author: 李亚光
  Date: 2024-11-08
 -->
<script lang="ts" setup name="DeviceManageEdit">
import { ElLoading, ElMessage, type FormRules } from 'element-plus'
import { addScene, updateScene } from '@/api/page/scene'
const emits = defineEmits(['refresh'])
const dataFormRef = ref()
const dialogFormVisible = ref(false) // 对话框是否显示
const dialogStatus = ref('') // 对话框类型：create,update
const dataForm = ref<{ [key: string]: string }>({
  name: '', // 名称
  version: '', //
  remark: '',
  id: '',
  handle_task: '',
}) // 表单
const formData = ref()
const fileName = ref('')
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
} // 表头显示标题
const btnLoading = ref(false) // 保存按钮的加载中状态
const rules: FormRules = {
  name: [{ required: true, message: '名称不能为空', trigger: ['blur', 'change'] }],
  version: [{ required: true, message: '版本号不能为空', trigger: ['blur', 'change'] }],
  handle_task: [{ required: true, message: '文件不能为空', trigger: ['blur', 'change'] }],
} // 前端校验规则

// 初始化对话框
const initDialog = (row: any, dialogStatusValue: string) => {
  dialogStatus.value = dialogStatusValue
  dialogFormVisible.value = true
  // console.log(dialogStatusValue, 'dialogStatusValue')
  if (dialogStatusValue === 'create') {
    resetForm()
  }
  else {
    dataForm.value = row
    fileName.value = row.handle_task
  }
}
defineExpose({
  initDialog,
})
// 上传
const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
  if (event.target.files?.length !== 0) {
    ElMessage.success('上传成功')
    formData.value = event.target.files[0]
    dataForm.value.handle_task = event.target.files[0].name
    fileRef.value.value = ''
  }
}
// 上传
const upload = () => {
  fileRef.value.click()
}
const cancel = () => {
  dialogFormVisible.value = false
  resetForm()
}
// 重置表单
function resetForm() {
  fileName.value = ''
  formData.value = ''
  dataForm.value = {
    name: '',
    version: '',
    remark: '',
    id: '',
    handle_task: '',
  }
  nextTick(() => {
    dataFormRef.value.resetFields()
  })
}

// 新建
const saveData = () => {
  // 验证
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      if (dialogStatus.value === 'create') {
        const fd = new FormData()
        fd.append('file', formData.value)
        fd.append('json_data', JSON.stringify(dataForm.value))
        addScene(fd).then((res) => {
          ElMessage.success('新建成功')
          resetForm()
          emits('refresh')
          cancel()
        })
      }
      else {
        const fd = new FormData()
        fd.append('json_data', JSON.stringify(dataForm.value))
        console.log(fileName.value, dataForm.value.handle_task)
        if (fileName.value !== dataForm.value.handle_task) {
          fd.append('file', formData.value)
        }
        updateScene(fd).then((res) => {
          ElMessage.success('编辑成功')
          resetForm()
          emits('refresh')
          cancel()
        })
      }
    }
  })
}
</script>

<template>
  <el-dialog
    v-model="dialogFormVisible" :title="textMap[dialogStatus]" append-to-body width="500px"
    :disabled="dialogStatus === 'detail'"
  >
    <el-form
      ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px"
      :disabled="dialogStatus === 'detail'"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="场景名称" prop="name">
            <el-input v-model.trim="dataForm.name" type="text" placeholder="必填" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="场景ID">
            <el-input v-model.trim="dataForm.id" type="text" placeholder="系统自动生成" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="场景选择" prop="handle_task">
            <el-input v-model.trim="dataForm.handle_task" type="text" placeholder="请上传zip" disabled>
              <template v-if="dialogStatus !== 'detail'" #append>
                <el-button type="primary" @click="upload">
                  选择
                </el-button>
                <input ref="fileRef" style="display: none;" type="file" accept=".zip" @change="onFileChange">
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="版本号" prop="version">
            <el-input v-model.trim="dataForm.version" type="text" placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="场景简述" prop="remark">
            <el-input v-model.trim="dataForm.remark" type="text" placeholder="" />
          </el-form-item>
        </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>