<template>
  <!-- 新增设备 -->
  <Dialog
    v-model="dialogFormVisible"
    title="编辑路线"
    width="780"
    class="map-edit-route-dialog"
    @close="dialogClose"
  >
    <el-form :model="form" label-width="120" ref="ruleFormRef">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="开始点位x轴" prop="startPointX" required>
            <el-input-number
              style="width: 100%"
              v-model="form.startPointX"
              :min="0"
              :max="imgBgObj.width"
              placeholder="请输入开始点位x轴"
              controls-position="right"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开始点位y轴" prop="startPointY" required>
            <el-input-number
              style="width: 100%"
              v-model="form.startPointY"
              :min="0"
              :max="imgBgObj.height"
              placeholder="请输入开始点位y轴"
              controls-position="right"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="结束点位x轴" prop="endPointX" required>
            <el-input-number
              style="width: 100%"
              v-model="form.endPointX"
              :min="0"
              :max="imgBgObj.width"
              placeholder="请输入结束点位x轴"
              controls-position="right"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束点位y轴" prop="endPointY" required>
            <el-input-number
              style="width: 100%"
              v-model="form.endPointY"
              :min="0"
              :max="imgBgObj.height"
              placeholder="请输入结束点位y轴"
              controls-position="right"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="开始控制点x轴" prop="beginControlX" required>
            <el-input v-model="form.beginControlX" type="number" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开始控制点y轴" prop="beginControlY" required>
            <el-input v-model="form.beginControlY" type="number" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="结束控制点x轴" prop="endControlX" required>
            <el-input v-model="form.endControlX" type="number" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="	结束控制点y轴" prop="endControlY" required>
            <el-input v-model="form.endControlY" type="number" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="行走方法" prop="method" required>
            <el-select v-model="form.method" placeholder="请选择行走方法" @change="methodChange">
              <el-option label="直线" :value="0" />
              <el-option label="曲线" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="方向" prop="direction" required>
            <el-select v-model="form.direction" placeholder="请选择方向">
              <el-option label="单向" :value="1" />
              <el-option label="双向" :value="2" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="膨胀区域前" prop="expansionZoneFront" required>
            <el-input v-model="form.expansionZoneFront" type="number">
              <template #append>米</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="膨胀区域后" prop="expansionZoneAfter" required>
            <el-input v-model="form.expansionZoneAfter" type="number">
              <template #append>米</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="膨胀区域左" prop="expansionZoneLeft" required>
            <el-input v-model="form.expansionZoneLeft" type="number">
              <template #append>米</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="膨胀区域右" prop="expansionZoneRight" required>
            <el-input v-model="form.expansionZoneRight" type="number">
              <template #append>米</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="正向限速" prop="forwardSpeedLimit" required>
            <div class="flex-center">
              <el-slider v-model="form.forwardSpeedLimit" :min="0.1" :max="10" :step="0.1" />
              <el-input
                v-model="form.forwardSpeedLimit"
                style="width: 200px; margin-left: 6px"
                type="number"
                :min="0.1"
                :max="10"
                :disabled="true"
              >
                <template #append>m/s</template>
              </el-input>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="反向限速" prop="reverseSpeedLimit" required>
            <div class="flex-center">
              <el-slider v-model="form.reverseSpeedLimit" :min="0.1" :max="10" :step="0.1" />
              <el-input
                v-model="form.reverseSpeedLimit"
                style="width: 200px; margin-left: 6px"
                type="number"
                :min="0.1"
                :max="10"
                :disabled="true"
              >
                <template #append>m/s</template>
              </el-input>
            </div>
          </el-form-item></el-col
        >
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车头朝向" prop="toward" required>
            <el-select v-model="form.toward" placeholder="请选择车头朝向">
              <el-option label="正正" :value="0" />
              <el-option label="正反" :value="1" />
              <el-option label="反正" :value="2" />
              <el-option label="反反" :value="3" />
            </el-select> </el-form-item
        ></el-col>
      </el-row>
    </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({
  imgBgObj: {
    type: Object,
    default: () => {}
  }
})

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

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

//新增
const form = ref({
  positionMapId: '',
  startPointX: '', // 开始点位x轴
  startPointY: '', // 开始点位y轴
  endPointX: '', // 结束点位x轴
  endPointY: '', // 结束点位y轴
  expansionZoneFront: 0, //膨胀区域前
  expansionZoneAfter: 0, //膨胀区域后
  expansionZoneLeft: 0, //	膨胀区域左
  expansionZoneRight: 0, //膨胀区域右
  method: 0, // 行走方法 0.直线 1.上左曲线2.上右曲线3.下左曲线 4.下右曲线
  direction: 2, //方向 1.单向 2.双向
  forwardSpeedLimit: 1.5, //正向限速
  reverseSpeedLimit: 0.4, //	反向限速
  toward: 0 //车头朝向  0:正正 1:正反 2:反正 3:反反
})

const open = (item) => {
  dialogFormVisible.value = true
  form.value = item
}

const dialogClose = () => {
  emit('addEventListener')
}

const emit = defineEmits(['editMapRouteDialogSubmit', 'addEventListener'])
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let actualStartPoint = disposeEventPoint(form.value.startPointX, form.value.startPointY)
      let actualEndPoint = disposeEventPoint(form.value.endPointX, form.value.endPointY)
      form.value.actualStartPointX = actualStartPoint.actualLocationX //实际开始点位x轴
      form.value.actualStartPointY = actualStartPoint.actualLocationY //实际开始点位y轴
      form.value.actualEndPointX = actualEndPoint.actualLocationX //实际结束点位x轴
      form.value.actualEndPointY = actualEndPoint.actualLocationY //实际结束点位y轴

      if (form.value.method === 1) {
        let actualBeginControl = disposeEventPoint(
          form.value.beginControlX,
          form.value.beginControlY
        )
        let actualEndControl = disposeEventPoint(form.value.endControlX, form.value.endControlY)
        form.value.actualBeginControlX = actualBeginControl.actualLocationX //实际开始控制点x轴
        form.value.actualBeginControlY = actualBeginControl.actualLocationX //实际开始控制点y轴
        form.value.actualEndControlX = actualEndControl.actualLocationX //实际结束控制点x轴
        form.value.actualEndControlY = actualEndControl.actualLocationX //实际结束控制点y轴
      } else {
        form.value.beginControlX = 0
        form.value.beginControlY = 0
        form.value.endControlX = 0
        form.value.endControlY = 0
        form.value.actualBeginControlX = 0
        form.value.actualBeginControlY = 0
        form.value.actualEndControlX = 0
        form.value.actualEndControlY = 0
      }

      emit('editMapRouteDialogSubmit', form.value)
      dialogFormVisible.value = false
    }
  })
}

const methodChange = (e) => {
  if (e === 0) {
    form.value.beginControlX = 0
    form.value.beginControlY = 0
    form.value.endControlX = 0
    form.value.endControlY = 0
  } else {
    form.value.beginControlX = Number(form.value.startPointX) + 50 //开始控制点x轴
    form.value.beginControlY = Number(form.value.startPointY) + 50 //开始控制点y轴
    form.value.endControlX = Number(form.value.endPointX) - 50 //结束控制点x轴
    form.value.endControlY = Number(form.value.endPointY) - 50 //结束控制点y轴
  }
}

//传入x y轴坐标
const disposeEventPoint = (x, y) => {
  const actualLocationX =
    Number(props.imgBgObj.origin[0]) + Number(x) * Number(props.imgBgObj.resolution)
  const actualLocationY =
    Number(props.imgBgObj.origin[1]) +
    (Number(props.imgBgObj.height) - Number(y)) * Number(props.imgBgObj.resolution)

  return {
    actualLocationX,
    actualLocationY
  }
}

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

<style lang="scss">
.map-edit-route-dialog {
  padding: 0px;

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

.el-input-group__append,
.el-input-group__prepend {
  padding: 0 8px;
}

.flex-center {
  width: 100%;
  display: flex;
  align-items: center;
}
</style>
