<template>
  <Dialog v-model="dialogFormVisible" title="节点属性" width="540" class="node-form-dialog">
    <el-form :model="form" label-width="auto" ref="ruleFormRef">
      <el-form-item label="X" prop="locationX" required>
        <el-input type="number" v-model="form.locationX" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="Y" prop="locationY" required>
        <el-input type="number" 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 === 2 || form.type === 3 || form.type === 4">
        <el-form-item
          label="层数"
          prop="layersNumber"
          :rules="{ required: true, message: '请输入层数', trigger: 'change' }"
          required
          v-if="form.type === 2"
        >
          <el-input-number
            v-model="form.layersNumber"
            :min="1"
            :max="3"
            @change="layersNumberChange"
          />
        </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="locationDeep">
          <div style="display: flex">
            <el-input type="number" v-model="form.locationDeep" placeholder="请输入" />
            <span class="ml-2">cm</span>
          </div>
        </el-form-item>
        <el-form-item label="库位宽度" prop="locationWide">
          <div style="display: flex">
            <el-input type="number" v-model="form.locationWide" placeholder="请输入" />
            <span class="ml-2">cm</span>
          </div>
        </el-form-item>
        <div v-if="form.type === 2 || form.type === 4">
          <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>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit(ruleFormRef)"> 确认 </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 ruleFormRef = ref()
const dialogFormVisible = ref(false)
const message = useMessage() // 消息弹窗

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

const form = ref({
  type: 1, //类型 1.路径点位 2.库位点 3.充电桩 4.停车点 5.区域变更点 6.等待点
  layersNumber: 1, //层数
  locationX: undefined, //库位坐标x轴
  locationY: undefined, //库位坐标y轴
  locationDeep: undefined, //长度
  locationWide: undefined, //宽度
  direction: undefined, //库位方向（1：单向、2：双向、3：三向、4：四向）
  inDirection: undefined, //进入方向（0：尾入、1：头入）
  outDirection: undefined, //离开方向（0：尾出、1：头出）
  dataList: [], //存库位的
  dataObj: {}, //存 设备点 停车点 文字
  positionMapId: undefined
})

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

const emit = defineEmits(['submitNodeSuccess'])
const submit = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (!valid) return
    //在这边把数据处理好
    if (form.value.type === 1 || form.value.type === 5 || form.value.type === 6) {
      //不需要dataJson的类型
      form.value.dataJson = ''
    } else if (form.value.type === 2) {
      //库位点 类型为数组

      let list = []
      for (let index = 0; index < form.value.layersNumber; index++) {
        let item = {
          positionMapId: props.positionMapId,
          locationWide: form.value.locationWide || undefined,
          locationDeep: form.value.locationDeep || undefined,
          direction: form.value.direction || undefined, //方向
          inDirection: form.value.inDirection || undefined, //进入方向
          outDirection: form.value.outDirection || undefined, //离开方向
          locationStorey: index + 1 //层数
        }
        if (
          form.value.dataList.length > 0 &&
          form.value.dataList[index] &&
          form.value.dataList[index].id
        ) {
          item.id = String(form.value.dataList[index].id)
          item.locationNo = form.value.dataList[index].locationNo
          item.mapItemId = form.value.dataList[index].mapItemId
          item.laneId = form.value.dataList[index].laneId
        }
        list.push(item)
      }
      form.value.dataList = list
      //dataJson数据
      form.value.dataJson = JSON.stringify(form.value.dataList)
    } else if (form.value.type === 3) {
      //设备
      form.value.dataObj.positionMapId = props.positionMapId
      form.value.dataObj.locationWide = form.value.locationWide
      form.value.dataObj.locationDeep = form.value.locationDeep
      form.value.dataObj.direction = form.value.direction
      form.value.dataObj.inDirection = form.value.inDirection
      form.value.dataObj.outDirection = form.value.outDirection
      form.value.dataObj.deviceType = deviceInfo.value.deviceType //设备类型
    } else {
      //类型为路径点位 区域变更点 等待点 值为对象
      form.value.dataObj.positionMapId = props.positionMapId
      form.value.dataObj.locationWide = form.value.locationWide
      form.value.dataObj.locationDeep = form.value.locationDeep
      form.value.dataObj.direction = form.value.direction
      form.value.dataObj.inDirection = form.value.inDirection
      form.value.dataObj.outDirection = form.value.outDirection
      //dataJson数据
      form.value.dataJson = JSON.stringify(form.value.dataObj)
    }
    emit('submitNodeSuccess', form.value)
    dialogFormVisible.value = false
  })
}

//层数改变
const layersNumberChange = (e) => {}

const open = (item) => {
  console.log(item)
  form.value = item
  form.value.layersNumber = item.dataList.length || ''
  form.value.positionMapId = props.positionMapId
  dialogFormVisible.value = true
}

//类型改变
const typeChange = () => {
  if (form.value.type === 1 || form.value.type === 5 || form.value.type === 6) {
    form.value.layersNumber = undefined
    form.value.dataJson = ''
  }

  if (form.value.type !== 2 && form.value.type !== 4) {
    form.value.direction = undefined
    form.value.inDirection = undefined
    form.value.outDirection = undefined
  }

  if (form.value.type === 1) {
    form.value.locationDeep = 10
    form.value.locationWide = 10
  }

  if (form.value.type === 5 || form.value.type === 6) {
    form.value.locationDeep = 30
    form.value.locationWide = 30
  }
}
//方向改变
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>
