<template>
  <div>
    <el-dialog v-model="modal.open" v-bind="{ ...modal }" width="30%" @close="onClose">
      <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
        <el-form-item prop="time" label="年检时间" :rules="formRules.time">
          <div class="time">
            <el-date-picker v-model="formData.time" value-format="YYYY-MM-DD" type="date" placeholder="请选择日期" />
          </div>
        </el-form-item>
        <el-form-item prop="inspectionUnit" label="检验单位" :rules="formRules.inspectionUnit">
          <pro-input style="width: 239px" v-model="formData.inspectionUnit"></pro-input>
        </el-form-item>
        <el-form-item prop="images" label="文件">
          <pro-upload :http-request="selectFile" :on-remove="removeFile" accept=".png,jpg,.jpeg" :limit="4"
            v-loading="uploadLoading">
            <div class="upload-text">
              <el-image :src="UploadIcon" style="height: 30px; width: 30px; margin-right: 18px"></el-image>
              <div>
                <div>点击或从文件拖拽到此处上传</div>
                <div style="color: #b3c6b8">支持格式：jpg,png</div>
              </div>
            </div>
          </pro-upload>
        </el-form-item>
        <el-form-item prop="remark" label="备注">
          <pro-input style="width: 440px" v-model="formData.remark" type="textarea" rows="4"></pro-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <pro-button @click="onCancel">取消</pro-button>
          <pro-button type="primary" @click="onOk" :loading="loading">确认</pro-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { deviceInspection } from '@/api'
import { useModal } from '../../utils/hooks'
import UploadIcon from '@/assets/img/upload-icon.svg'
import { useRequest } from 'vue-hooks-plus'
import { uploadImage } from '@/api/upload';
import { compressImage } from '@/utils/imageUtils';
const modal = useModal('新增年检')

const formRef = ref()
const formData = reactive<{
  time: string
  inspectionUnit: string
  remark: string
  images: any[]
}>({
  time: '',
  inspectionUnit: '',
  remark: '',
  images: []
})


const formRules = {
  time: [{ required: true, message: '请选择年检时间', trigger: 'blur' }],
  inspectionUnit: [{ required: true, message: '请选择检验单位', trigger: 'blur' }],
  remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
}
const emits = defineEmits(['onCancel'])
const props = withDefaults(
  defineProps<{
    open: boolean
  }>(),
  {
    open: false
  }
)


const removeFile = (e) => {
  const index = formData.images.findIndex(item => item.fileToken == e.uid)
  if (index >= 0) {
    formData.images.splice(index, 1)
  }
}


const selectFile = async (e) => {
  const file = e.file
  compressImage(file).then((res: any) => {
    const formData = new FormData();
    formData.append('file', res);
    formData.append('fileName', res.name);
    formData.append('fileType', res.type);
    formData.append('fileToken', file.uid);
    uploadRun(formData)
  })
}

const { run: uploadRun, loading: uploadLoading } = useRequest(
  (file) => uploadImage(file),
  {
    manual: true,
    onSuccess: (data: any) => {
      formData.images.push(data)
    }
  }
)

watch(
  () => props.open,
  () => {
    if (props.open) {
      modal.showModal()
    }
  }
)
const { run, loading } = useRequest((data) => deviceInspection(data), {
  manual: true,
  onSuccess: (data) => {
    modal.hiddenModal()
    sucMessage()
  }
})
const onCancel = () => {
  modal.hiddenModal()
  emits('onCancel')
}
const onClose = () => {
  formRef.value.resetFields()
  emits('onCancel')
}
const onOk = async () => {
  const data = await formRef.value.validate()
  console.log(formData, 'formData')

  if (data) {
    run({
      deviceId: getDeviceId(),
      time: formData.time,
      inspectionUnit: formData.inspectionUnit,
      remark: formData.remark,
      images: formData.images
    })
  }
}
</script>

<style scoped lang="less">
:deep(.el-form) {
  .el-form-item__label {
    margin: auto 0;
  }

  .el-upload-dragger {
    border-color: #3f794f;
    padding: 20px;
  }
}

:deep(.time) {
  margin-bottom: 18px;

  .el-input__wrapper {
    height: 45px;
  }

  .el-input__inner {
    width: 195px;
  }
}

.upload-text {
  color: #3f794f;
  width: 400px;
  display: flex;
  line-height: 20px;
  text-align: left;
}
</style>
