<template>
  <Dialog v-model="dialogVisible" :title="title" width="545" style="padding: 0;">
    <el-form :model="formData" label-width="auto" ref="formRef" :rules="formRules">
      <el-form-item label="设备类型" prop="robotModelId" >
        <el-select v-model="formData.deviceType" clearable placeholder="请选择设备类型">
          <el-option
            v-for="dict in getDictOptions(DICT_TYPE.DEVICE_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="Number(dict.value)"
          />
        </el-select>
      </el-form-item>
      <el-form-item  label="设备编号" prop="robotNo">
        <el-input v-model="formData.deviceNo" :disabled="false" placeholder="请输入设备编号" />
      </el-form-item>

      <el-form-item  label="Mac地址" prop="macAddress">
        <el-input v-model="formData.macAddress" :disabled="false" placeholder="请输入Mac地址" />
      </el-form-item>
      <el-form-item  label="设备图标" prop="macAddress">
        <UploadImg v-model="formData.mapImageUrl" :limit="1" />
      </el-form-item>
      <el-form-item  label="设备图配置" prop="pictureConfig">
        <el-radio-group v-model="formData.pictureConfig">
          <el-radio :label="1">默认图片</el-radio>
          <el-radio :label="2">上传图片</el-radio>
          <el-radio :label="3">不显示图片</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item  label="设备图片" prop="mapImageUrl" v-if="formData.pictureConfig === 2">
        <UploadImg  v-model="formData.url" :limit="1" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div style="padding: 0 10px 10px 0;">
        <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
import * as MapTaskAPi from '@/api/map/mapTask'
import * as DeviceApi from '@/api/device/index'
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const title = ref('新建') // form表单
const formData = ref({
  deviceType: undefined, //车辆类型id
  deviceNo: undefined, //AGV编号
  macAddress: undefined, //mac地址
  mapImageUrl: undefined, //设备在地图上图标
  pictureConfig: undefined, //	图片设置（1：默认图片、2：上传图片、 3：不显示图片）
  url: undefined //上传图片附件
})




const formRules = reactive({
  deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'blur' }],
  deviceNo: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
  macAddress: [{ required: true, message: 'Mac地址不能为空', trigger: 'blur' }],
  mapImageUrl: [{ required: true, message: '设备图标不能为空', trigger: 'blur' }],
  pictureConfig: [{ required: true, message: '设备图配置不能为空', trigger: 'blur' }],
  url: [{ required: true, message: '设备图片不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type, id) => {
  dialogVisible.value = true
  resetForm()
  if (id) {
    title.value = '编辑'
    const data = await DeviceApi.deviceInformationGet({ id })
    formData.value = data
    
    console.log(data)
  } else {
    title.value = '新建'
  }
  // getCanUseRobotList()
  // getTaskNo()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
 
  // 提交请求
  formLoading.value = true
  try {
    if (formData.value.id) {
      await DeviceApi.deviceInformationUpdate(formData.value)
      message.success(t('common.updateSuccess'))
      dialogVisible.value = false
      emit('success')
    } else {
      await DeviceApi.deviceInformationCreate(formData.value)
      message.success(t('common.createSuccess'))
      dialogVisible.value = false
      emit('success')
    }
  } finally {
    formLoading.value = false
  }
}

//前往任务管理页面
const { push } = useRouter()
const taskManagement = () => {
  push({ name: 'taskManagementCreateTask' })
}

//查询能用的车辆
const robotList = ref([])
const getCanUseRobotList = async () => {
  robotList.value = await MapTaskAPi.getCanUseRobot()
}

//获取任务号
const getTaskNo = async () => {
  formData.value.taskNo = await MapTaskAPi.getTaskNo()
}

//获取取货位置可选的列表
const getLocationList = async (type, locationNo) => {
  return await MapTaskAPi.getLocationByName({
    type, //	放货类型（1：库位、2：线库、 3：区域）
    locationNo
  })
}
//放货的选择列表
const loading = ref(false)
const releaseRemoteMethod = async (query, item) => {
  if (query) {
    loading.value = true
    item.releaseList = await getLocationList(item.releaseType, query)
    loading.value = false
  } else {
    item.releaseList = []
  }
}
//取货的选择列表
const takeRemoteMethod = async (query, item) => {
  if (query) {
    item.takeList = await getLocationList(item.takeType, query)
  } else {
    item.takeList = []
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    deviceType: undefined, //车辆类型id
  deviceNo: undefined, //AGV编号
  macAddress: undefined, //mac地址
  mapImageUrl: undefined, //设备在地图上图标
  pictureConfig: undefined, //	图片设置（1：默认图片、2：上传图片、 3：不显示图片）
  url: undefined //上传图片附件
  }
 
  formRef.value?.resetFields()
}
</script>

<style scoped>
::v-deep .el-dialog {
  padding: 0 !important;
}
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8 !important;
}

.task-tips {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.el-select-dropdown__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 20px;
}

.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}
.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-color-primary);
  stroke-linecap: round;
}

@keyframes loading-rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}
@keyframes custom-spin-move {
  to {
    opacity: 1;
  }
}
</style>
