<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>转正申请</span>
        <el-tag :type="statusType">{{ statusText }}</el-tag>
      </div>

      <el-form ref="form" class="apply-form">
        <el-form-item label="申请材料" prop="file">
          <el-upload
            action=""
            :auto-upload="false"
            :on-change="handleFileChange"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">支持PDF/DOC格式，大小不超过50MB</div>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button 
            type="primary" 
            :loading="loading"
            @click="handleSubmit"
          >提交申请</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { submitProbation } from '@/api/oa/hr'
import { uploadFile, addFile } from '@/api/oa/document'
import { getOnboarding } from "@/api/oa/onboarding"


export default {
  name: 'ProbationApply',
  data() {
    return {
      loading: false,
      fileList: [],
      currentFile: null,
      statusMap: {
        pending: { label: '待审批', type: 'warning' },
        success: { label: '已提交', type: 'success' }
      },
      userInfo: null,
    }
  },
  mounted() {
    console.log(this.$store.state.user)
    // 获取用户入职信息
    // this.getUserInfo()
  },
  computed: {
    statusType() {
      return this.statusMap[this.fileList.length ? 'success' : 'pending'].type
    },
    statusText() {
      return this.statusMap[this.fileList.length ? 'success' : 'pending'].label
    }
  },
  methods: {
    async getUserInfo() {
      const { data } = await getOnboarding(this.$store.state.user.id)
      this.userInfo = data
    },

    handleFileChange(file) {
      this.currentFile = file.raw
      this.fileList = [file]
    },

    async handleSubmit() {
      if (!this.currentFile) {
        return this.$message.warning('请先选择申请文件')
      }

      try {
        this.loading = true
        
        // 1. 上传文件
        const formData = new FormData()
        formData.append('file', this.currentFile)
        const data = await uploadFile(formData)
        // 2. 将文件关联用户
        await addFile({
          userId: this.$store.state.user.id,
          fileList: [{
            fileName: data.originalFilename,
            filePath: data.url,
            fileType: 0,
          }]
        })
        // 3. 提交申请
        await submitProbation({
          userId: this.$store.state.user.id,
          // onboardingId: this.userInfo.onboardingId,
          status: 1,
        })

        this.$message.success('申请提交成功')
        this.fileList = []
      } catch (error) {
        this.$message.error('提交失败: ' + (error.message || error))
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.apply-form {
  max-width: 600px;
  margin: 20px auto;
}
.el-upload__tip {
  color: #999;
  font-size: 12px;
  margin-top: 5px;
}
</style>