<template>
  <el-dialog
    :visible.sync="visible"
    title="导出已通过报销明细"
    width="420px"
    @close="handleClose"
  >
    <div class="export-content">
      <el-form label-width="80px" label-position="right">
        <el-form-item label="选择月份">
          <el-date-picker
            v-model="selectedMonth"
            type="month"
            placeholder="请选择月份"
            format="yyyy-MM"
            value-format="yyyy-MM"
            style="width: 260px"
          />
        </el-form-item>
      </el-form>
      <p class="tip-text">
        将导出所选月份内<span class="strong-text">已审核通过</span>的报销申请及其购买明细，
        用于线下整理后导入店内支出表。
      </p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="handleConfirm">
        确 定
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'ExportApprovedDetailsDialog',
  data() {
    return {
      visible: false,
      loading: false,
      selectedMonth: ''
    }
  },
  methods: {
    // 对外初始化方法
    init() {
      this.visible = true
      this.loading = false
      this.selectedMonth = this.getCurrentMonth()
    },

    // 获取当前月份，格式：yyyy-MM
    getCurrentMonth() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      return `${year}-${month}`
    },

    handleClose() {
      this.visible = false
      this.$emit('close')
    },

    async handleConfirm() {
      if (!this.selectedMonth) {
        this.$message.warning('请选择要导出的月份')
        return
      }

      const parts = this.selectedMonth.split('-')
      if (parts.length !== 2) {
        this.$message.error('月份格式不正确')
        return
      }

      const year = parseInt(parts[0], 10)
      const month = parts[1]

      if (!year || !month) {
        this.$message.error('年份或月份不正确')
        return
      }

      this.loading = true
      try {
        const res = await request({
          url: '/api/Extend/LqReimbursementApplication/Actions/ExportApprovedDetails',
          method: 'GET',
          data: {
            year,
            month
          }
        })

        if (res && res.data && res.data.url) {
          // 触发文件下载
          window.location.href = this.define.comUrl + res.data.url
          this.$message.success('导出任务已开始，请稍后查看下载的文件')
          this.handleClose()
        } else {
          this.$message.error((res && res.msg) || '导出失败，请稍后重试')
        }
      } catch (error) {
        console.error('导出失败:', error)
        this.$message.error('导出失败，请稍后重试')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.export-content {
  padding: 10px 10px 0 10px;
}

.tip-text {
  margin-top: 10px;
  font-size: 12px;
  color: #909399;
  line-height: 1.6;
}

.strong-text {
  color: #F56C6C;
  font-weight: 600;
}

.dialog-footer {
  text-align: right;
}
</style>


