<template>
  <Dialog v-model="dialogFormVisible" title="节点属性" width="540" class="node-form-dialog">
    <el-form :model="form" label-width="auto">
      <el-form-item label="X" prop="locationX" required>
        <el-input v-model="form.locationX" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="Y" prop="locationY" required>
        <el-input v-model="form.locationY" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="类型" prop="type" required>
        <el-select v-model="form.type" placeholder="请选择类型" @change="typeChange">
          <el-option label="路径点位" :value="1" />
          <el-option label="库位点" :value="2" />
          <el-option label="设备点" :value="3" />
          <el-option label="停车点" :value="4" />
          <el-option label="区域变更点" :value="5" />
          <el-option label="等待点" :value="6" />
        </el-select>
      </el-form-item>
      <div v-if="form.type !== 1 && form.type !== 6">
        <el-form-item label="层数" prop="layersNumber" required v-if="form.type === 2">
          <el-input-number v-model="form.layersNumber" :min="1" :max="3" />
        </el-form-item>
        <el-form-item
          label="编号"
          prop="id"
          required
          v-if="form.type === 3"
          :rules="{ required: true, message: '请选择设备编号', trigger: 'change' }"
        >
          <div>
            <el-select
              v-model="deviceInfo.deviceType"
              class="!w-160px"
              clearable
              placeholder="请选择设备类型"
              @change="deviceTypeChange()"
            >
              <el-option
                v-for="dict in getIntDictOptions(DICT_TYPE.DEVICE_TYPE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>

            <el-select
              v-model="form.id"
              class="!w-160px ml-4"
              clearable
              placeholder="请选择设备编号"
            >
              <el-option
                v-for="item in deviceList"
                :key="item.id"
                :label="item.deviceNo"
                :value="item.id"
              />
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="库位长度" prop="length">
          <div style="display: flex">
            <el-input v-model="form.length" placeholder="请输入" />
            <span class="ml-2">cm</span>
          </div>
        </el-form-item>
        <el-form-item label="库位宽度" prop="width">
          <div style="display: flex">
            <el-input v-model="form.width" placeholder="请输入" />
            <span class="ml-2">cm</span>
          </div>
        </el-form-item>
        <el-form-item label="库位方向" prop="direction">
          <el-select
            v-model="form.direction"
            placeholder="请选择库位方向"
            @change="directionChange"
          >
            <el-option label="单向" :value="1" />
            <el-option label="双向" :value="2" />
            <el-option label="三向" :value="3" />
            <el-option label="四向" :value="4" />
          </el-select>
        </el-form-item>
        <div v-if="form.direction !== 1">
          <el-form-item label="进入方向" prop="inDirection">
            <el-select v-model="form.inDirection" placeholder="请选择进入方向">
              <el-option label="尾入" :value="0" />
              <el-option label="头入" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="离开方向" prop="outDirection">
            <el-select v-model="form.outDirection" placeholder="请选择离开方向">
              <el-option label="尾出" :value="0" />
              <el-option label="头出" :value="1" />
            </el-select>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit"> 确认 </el-button>
      </div>
    </template>
  </Dialog>
</template>

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

const dialogFormVisible = ref(false)
const message = useMessage() // 消息弹窗

const props = defineProps({
  positionMapId: {
    type: String,
    default: () => ''
  }
})

const form = ref({
  locationX: undefined,
  locationY: undefined,
  type: 1,
  layersNumber: 1, //层数
  length: undefined, //长度
  width: undefined, //宽度
  direction: 1, //方向
  inDirection: undefined,
  outDirection: undefined,
  list: []
})

const rules = reactive({
  locationX: [{ required: true, message: '请输入X', trigger: 'blur' }],
  locationY: [{ required: true, message: '请输入Y', trigger: 'blur' }],
  type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
  direction: [{ required: true, message: '请输入层数', trigger: 'blur' }],
  id: [{ required: true, message: '请选择设备编号', trigger: 'blur' }]
})

const emit = defineEmits(['submitNodeSuccess'])
const submit = () => {
  if (form.value.type === 1 || form.value.type === 6) {
    form.value.dataJson = ''
  } else if (form.value.type === 2) {
    //在这边把数据处理好
    let list = []
    for (let index = 0; index < form.value.layersNumber; index++) {
      list.push({
        locationWide: form.value.width || undefined,
        locationDeep: form.value.length || undefined,
        direction: form.value.direction || undefined, //方向
        inDirection: form.value.inDirection || undefined, //进入方向
        outDirection: form.value.outDirection || undefined, //离开方向
        locationStorey: index + 1 //层数
      })
    }
    form.value.dataJson = JSON.stringify(list)
  } else {
    let obj = {
      id: form.value.id || undefined,
      mapId: props.positionMapId,
      locationWide: form.value.width || undefined,
      locationDeep: form.value.length || undefined,
      direction: form.value.direction || undefined, //方向
      inDirection: form.value.inDirection || undefined, //进入方向
      outDirection: form.value.outDirection || undefined //离开方向
    }
    form.value.dataJson = JSON.stringify(obj)
  }
  console.log(form.value, '保存')
  emit('submitNodeSuccess', form.value)
  dialogFormVisible.value = false
}

const open = (item) => {
  form.value = item
  form.value.locationX = item.x
  form.value.locationY = item.y
  form.value.type = item.type || 1
  dialogFormVisible.value = true
}

//类型改变
const typeChange = () => {
  if (form.value.type === 1 || form.value.type === 6) {
    form.value.layersNumber = undefined
    form.value.dataJson = ''
  } else {
  }
}
//方向改变
const directionChange = (e) => {
  if (e === 1) {
    form.value.inDirection = undefined
    form.value.outDirection = undefined
  }
}

//获取设备信息
const deviceInfo = ref({
  positionMapId: '',
  deviceType: ''
})
const deviceList = ref([])
const getDeviceList = async () => {
  deviceInfo.value.positionMapId = props.positionMapId
  deviceList.value = await MapApi.getDeviceInformationList(deviceInfo.value)
}
const deviceTypeChange = () => {
  getDeviceList()
}

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

<style lang="scss">
.node-form-dialog {
  .el-dialog__header {
    border-bottom: none;
  }

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