<template>
  <el-dialog
    v-model="dialogVisible"
    title="上传素材"
    width="500px"
    @close="handleClose"
  >
    <el-form :model="form" label-width="100px">
      <el-form-item label="素材类型">
        <el-select v-model="form.assetType" placeholder="选择素材类型">
          <el-option label="花色图案" value="suit_symbol" />
          <el-option label="JQK人像" value="face_card" />
          <el-option label="大小王" value="joker" />
          <el-option label="背面图案" value="back" />
        </el-select>
      </el-form-item>

      <el-form-item label="素材标识">
        <el-input
          v-model="form.assetKey"
          placeholder="如：spade, heart-J, big_joker"
        />
      </el-form-item>

      <el-form-item label="选择文件">
        <el-upload
          ref="upload"
          drag
          :auto-upload="false"
          :on-change="handleFileChange"
          :limit="1"
          :on-exceed="handleExceed"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            拖拽文件到此处或<em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              支持 PNG, JPG, SVG 格式
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button
        type="primary"
        :loading="uploading"
        :disabled="!canSubmit"
        @click="handleSubmit"
      >
        上传
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import { uploadAsset } from '@/api/asset'

const props = defineProps({
  modelValue: Boolean,
  projectId: String
})

const emit = defineEmits(['update:modelValue', 'upload-success'])
const dialogVisible = ref(props.modelValue)
const upload = ref(null)
const uploading = ref(false)
const selectedFile = ref(null)

const form = ref({
  assetType: 'suit_symbol',
  assetKey: '',
  file: null
})

const canSubmit = computed(() => {
  return form.value.assetKey && selectedFile.value
})

watch(() => props.modelValue, (val) => {
  dialogVisible.value = val
})

watch(dialogVisible, (val) => {
  emit('update:modelValue', val)
})

function handleFileChange(file) {
  selectedFile.value = file.raw
}

function handleExceed() {
  ElMessage.warning('只能上传一个文件')
}

async function handleSubmit() {
  if (!canSubmit.value) {
    ElMessage.warning('请填写完整信息')
    return
  }

  try {
    uploading.value = true
    await uploadAsset(
      props.projectId,
      selectedFile.value,
      form.value.assetType,
      form.value.assetKey
    )

    ElMessage.success('上传成功')
    emit('upload-success')
    handleClose()
  } catch (error) {
    ElMessage.error('上传失败')
    console.error(error)
  } finally {
    uploading.value = false
  }
}

function handleClose() {
  dialogVisible.value = false
  emit('update:modelValue', false)
  // Reset form
  form.value = {
    assetType: 'suit_symbol',
    assetKey: '',
    file: null
  }
  selectedFile.value = null
}
</script>

<style scoped>
.el-upload__text {
  color: #606266;
  font-size: 14px;
}

.el-upload__tip {
  color: #909399;
  font-size: 12px;
  margin-top: 8px;
}
</style>
