<template>
  <!-- 新增设备 -->
  <Dialog
    v-model="dialogFormVisible"
    title="物料区域设置"
    width="600"
    class="equipment-form-dialog"
    @close="dialogClose"
  >
    <el-form :model="form" label-width="110" ref="ruleFormRef" :rules="rules">
      <el-form-item label="物料区域名称" prop="areaName" required>
        <el-input
          v-model="form.areaName"
          placeholder="请输入物料区域名称"
          maxlength="30"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="物料信息" prop="skuInfo" required>
        <el-input
          v-model="form.skuInfo"
          placeholder="请输入物料信息"
          maxlength="30"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="库位数量" prop="areaNumber">
        <el-input v-model="form.areaNumber" :disabled="true" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)"> 确定 </el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import * as MapApi from '@/api/map/map'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'

const message = useMessage() // 消息弹窗
const props = defineProps({
  positionMapId: {
    type: String,
    default: () => ''
  }
})

const ruleFormRef = ref()
const dialogFormVisible = ref(false) //列表的

const rules = reactive({
  areaName: [{ required: true, message: '请输入物料区域名称', trigger: 'blur' }],
  skuInfo: [{ required: true, message: '请输入物料信息', trigger: 'blur' }]
})

//新增
const form = ref({
  positionMapId: '',
  skuInfo: '', //物料信息
  areaName: '', //物料区域名称
  areaNumber: 0,
  mapItemIds: []
})

const open = (list) => {
  dialogFormVisible.value = true
  form.value.mapItemIds = list.map((item) => item.id)
  form.value.areaNumber = form.value.mapItemIds.length
  form.value.areaName = ''
  form.value.skuInfo = ''
}

const emit = defineEmits(['addEventListener'])
const dialogClose = () => {
  emit('addEventListener')
}

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      form.value.positionMapId = props.positionMapId
      await MapApi.createOrEditOrDelHouseArea(form.value)
      dialogFormVisible.value = false
      message.success('设置成功')
    }
  })
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

<style lang="scss">
.equipment-form-dialog {
  padding: 0px;

  .el-dialog__footer {
    padding: 0px 20px 20px 0;
    border-top: none !important;
  }
}
</style>
