<script setup lang="ts">
import type { FormInstance, UploadProps } from 'element-plus'

import { SYS_INFO } from '@vben/preferences'
import { useAccessStore } from '@vben/stores'

import { UploadFilled } from '@element-plus/icons-vue'

import { addVersion } from '#/api'

const props = defineProps({
  showDia: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '查看',
  },
  diaData: {
    type: Object,
    default: () => ({}),
  },
})

const emit = defineEmits(['update:showDia', 'onRefresh'])

const show = computed({
  get() {
    return props.showDia
  },
  set(val) {
    emit('update:showDia', val)
  },
})
const showTool = computed(() => props.title !== '查看')
const { accessToken } = storeToRefs(useAccessStore())

const rules = {
  versionNum: {
    required: true,
    message: '请填写版本号',
    trigger: 'blur',
  },
  downloadLink: {
    required: true,
    message: '请上传安装包',
    trigger: 'blur',
  },
}

const _from = {
  versionNum: '',
  model: 'XM10',
  updateType: 2,
  downloadLink: '',
}
const form = reactive({
  ..._from,
})
const ruleFormRef = ref<FormInstance>()

const files = ref([])
const handleSuccess: UploadProps['onSuccess'] = (response) => {
  if (response.code === 200) {
    form.downloadLink = response.data.filePath
  }
}
const handleRemove: UploadProps['onRemove'] = () => {
  form.downloadLink = ''
}

function onOpen() {
  Object.assign(form, _from)
  files.value = []
}

async function handleSave(formEl: FormInstance | undefined) {
  if (!formEl) return
  await formEl.validate()
  await addVersion({
    ...form,
    model: form.updateType === 1 ? undefined : form.model,
  })
  show.value = false
  emit('onRefresh')
}
</script>

<template>
  <el-dialog
    v-model="show"
    :title="title"
    width="600"
    class="box"
    destroy-on-close
    @open="onOpen"
  >
    <el-form
      ref="ruleFormRef"
      :model="form"
      label-width="80px"
      :rules="rules"
      :disabled="!showTool"
    >
      <el-form-item label="版本号" prop="versionNum">
        <el-input v-model="form.versionNum" :disabled="title === '编辑'" />
      </el-form-item>
      <el-form-item label="更新类型" prop="updateType">
        <el-select v-model="form.updateType">
          <el-option label="WEB" :value="1" />
          <el-option label="APK" :value="2" />
        </el-select>
      </el-form-item>
      <template v-if="form.updateType === 2">
        <el-form-item label="型号" prop="model">
          <el-select v-model="form.model">
            <el-option value="M10" />
            <el-option value="XM10" />
            <el-option value="universal" />
          </el-select>
        </el-form-item>
        <el-form-item label="安装包" prop="downloadLink">
          <el-upload
            v-model:file-list="files"
            class="upload-btn"
            action="/api/main/sysFileInfo/tenUploadAll"
            drag
            :headers="{
              Authorization: `Bearer ${accessToken}`,
              'X-Tenant-Id': SYS_INFO.tenantId,
            }"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
          >
            <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处或 <em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
      </template>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show = false">关闭</el-button>
        <el-button type="primary" @click="handleSave(ruleFormRef)">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
