<template>
  <el-dialog
    title="批量删除考勤数据"
    :visible.sync="visible"
    width="400px"
    :close-on-click-modal="false"
    @close="close"
  >
    <div>
      <el-form :model="form" label-width="80px" label-position="right" :rules="rules" ref="form">
        <el-form-item label="年份" prop="year">
          <el-select v-model="form.year" placeholder="请选择年份" style="width: 100%">
            <el-option v-for="year in yearOptions" :key="year" :label="year + '年'" :value="year" />
          </el-select>
        </el-form-item>
        <el-form-item label="月份" prop="month">
          <el-select v-model="form.month" placeholder="请选择月份" style="width: 100%">
            <el-option v-for="month in monthOptions" :key="month" :label="month + '月'" :value="month" />
          </el-select>
        </el-form-item>
      </el-form>
      
      <el-alert
        title="警告"
        type="warning"
        description="此操作将删除指定年月下的所有考勤数据，删除后无法恢复，请谨慎操作！"
        show-icon
        :closable="false"
        style="margin-top: 20px;"
      />
    </div>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取消</el-button>
      <el-button type="danger" @click="confirmDelete" :loading="deleting">
        确定删除
      </el-button>
    </div>
  </el-dialog>
</template>

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

export default {
  name: 'BatchDeleteDialog',
  data() {
    return {
      visible: false,
      deleting: false,
      form: {
        year: null,
        month: null
      },
      rules: {
        year: [
          { required: true, message: '请选择年份', trigger: 'change' }
        ],
        month: [
          { required: true, message: '请选择月份', trigger: 'change' }
        ]
      },
      yearOptions: [],
      monthOptions: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
    }
  },
  methods: {
    init() {
      this.visible = true
      this.initYearOptions()
      this.resetForm()
    },
    initYearOptions() {
      const currentYear = new Date().getFullYear()
      this.yearOptions = []
      for (let i = currentYear - 5; i <= currentYear + 1; i++) {
        this.yearOptions.push(i)
      }
    },
    resetForm() {
      this.form = {
        year: null,
        month: null
      }
      this.deleting = false
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.clearValidate()
        }
      })
    },
    confirmDelete() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$confirm(
            `确定要删除 ${this.form.year}年${this.form.month}月 的所有考勤数据吗？此操作不可恢复！`,
            '确认删除',
            {
              confirmButtonText: '确定删除',
              cancelButtonText: '取消',
              type: 'warning'
            }
          ).then(() => {
            this.performDelete()
          }).catch(() => {
            // 用户取消删除
          })
        }
      })
    },
    performDelete() {
      this.deleting = true
      
      request({
        url: `/api/Extend/lqattendancesummary/DeleteByMonth/${this.form.year}/${this.form.month}`,
        method: 'DELETE'
      }).then(res => {
        this.deleting = false
        if (res.code === 200) {
          this.$message.success(res.msg || '删除成功')
          this.close()
          this.$emit('refresh', true)
        } else {
          this.$message.error(res.msg || '删除失败')
        }
      }).catch(err => {
        this.deleting = false
        this.$message.error('删除失败，请重试')
        console.error('删除失败:', err)
      })
    },
    close() {
      this.visible = false
      this.resetForm()
    }
  }
}
</script>

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