<script setup lang="ts">
import { ref } from 'vue'
import { Plus, Close } from '@element-plus/icons-vue'
import { reissueOrderApi, uploadExpressSheet } from '@/api/podUsOrder.ts'
import { PodUsOrderListData } from '@/types/api/podUsOrder.ts'

const dialogShow = ref(false)
const formRef = ref()
const open = () => {
  form.value = {
    reissueType: 1,
    trackingNumber: '',
    expressSheet: '',
    file: null,
  }
  dialogShow.value = true
}
const emit = defineEmits(['success'])
const props = defineProps({
  selection: {
    type: Array,
    default: () => [],
  },
})
const formRules = {
  reissueType: {
    required: true,
    message: '请选择补发方式',
    trigger: 'change',
  },
  trackingNumber: {
    required: true,
    message: '请输入跟踪号',
    trigger: 'blur',
  },
  file: {
    required: true,
    message: '请上传物流面单',
    trigger: 'change',
  },
}

interface Iform {
  reissueType: number
  trackingNumber: string
  expressSheet: string
  file: File | null
}

const form = ref<Iform>({
  reissueType: 1,
  trackingNumber: '',
  expressSheet: '',
  file: null,
})
defineExpose({ open })
const submit = async () => {
  await formRef.value.validate()
  if((props.selection as PodUsOrderListData[])[0].shipmentType===0 && form.value.reissueType!==1){
    if(!form.value.expressSheet){
      return  ElMessage.warning('请上传物流面单')
    }
  }
  await reissueOrderApi({
    ids: (props.selection as PodUsOrderListData[]).map(e => e.id).join(),
    reissueType: form.value.reissueType,
    trackingNumber: form.value.trackingNumber,
    expressSheet: form.value.expressSheet,
  })

  ElMessage.success('操作成功')
  dialogShow.value = false
  emit('success')
}
const radioChange = () => {
  form.value.trackingNumber = ''
  form.value.expressSheet = ''
  form.value.file = null
}

const clearFile = () => {
  form.value.file = null
  form.value.expressSheet = ''
}
const createFormToUpload = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.style.display = 'none'
  input.accept = '.pdf'
  input.name = 'file'
  document.body.appendChild(input)
  input.click()
  input.onchange = async function() {
    console.log(input.files)
    if (input.files?.length !== 1) {
      return ElMessage.warning('请上传一个面单')
    }
    form.value.file = input.files[0]
    const fm = new FormData()
    fm.append('file', input.files[0])
    fm.append('trackingNumber', form.value.trackingNumber)
    const res = await uploadExpressSheet(fm as never)
    form.value.expressSheet = res.message || ''
  }
}
</script>

<template>
  <el-dialog v-model="dialogShow" title="补发" :close-on-click-modal="false">
    <el-form v-if="selection.length" ref="formRef" :rules="formRules" :model="form">
      <el-form-item required label="补发方式" prop="reissueType">
        <el-radio-group
          v-model="form.reissueType"
          style="display: flex;flex-direction: column;align-items: flex-start;"
          @change="radioChange">
          <el-radio :label="1">原单补发</el-radio>
          <el-radio
:disabled="(selection as PodUsOrderListData[])[0].shipmentType===0 && selection.length>1"
                    :label="2">换单补发，取消原单物流
          </el-radio>
          <el-radio
:disabled="(selection as PodUsOrderListData[])[0].shipmentType===0 && selection.length>1"
                    :label="3">换单补发，不取消原单物流
          </el-radio>
        </el-radio-group>

      </el-form-item>
      <span v-if="(selection as PodUsOrderListData[])[0].shipmentType===0 && selection.length>1" class="tip">自有物流选择选项2和选项3请单个操作，不支持批量操作；</span>
      <el-form-item
v-if="(selection as PodUsOrderListData[])[0].shipmentType===0 && form.reissueType!==1" required
                    label="物流信息" prop="trackingNumber">
        <div class="form-content">
          <div class="content-item">
            <div class="label">跟踪号</div>
            <el-input v-model="form.trackingNumber" style="height: 40px" placeholder="请输入跟踪号"></el-input>
          </div>
          <div v-if="form.trackingNumber" class="content-item">
            <div class="label">物流面单</div>
            <div class="upload" @click="createFormToUpload">
              <el-icon>
                <Plus></Plus>
              </el-icon>
            </div>
            <div v-if="form.file" class="file">
              <div class="name">{{ form.file.name }}</div>
              <div class="close" @click="clearFile">
                <el-icon>
                  <Close></Close>
                </el-icon>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item v-if="(selection as PodUsOrderListData[])[0].shipmentType===0 && form.reissueType!==1">
          <div class="tip-2">自有物流请联系客户提供新跟踪号和面单</div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogShow=false">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.tip {
  color: red;
  position: relative;
  top: -14px;
  left: 79px;
}

.form-content, .content-item {
  display: flex;
  margin-right: 25px;

  .upload {
    border: 1px darkgray solid;
    width: 50px;
    cursor: pointer;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
  }

  .file {
    display: flex;
    margin-left: 25px;
    align-items: center;
    gap: 6px;

    .close {
      cursor: pointer;
      color: red;
    }
  }

  .label {
    width: 70px;
  }
}
.tip-2{
  color: red;
  margin-left: 13px;
  position: relative;
  top: -9px;
}
</style>
