<template>
  <div class="personnel-report-page">
    <div class="page-shell">
      <div class="page-header">
        <div class="header-left">
          <el-button icon="el-icon-arrow-left" size="small" class="back-btn" @click="goBack">
            返回工作台
          </el-button>
          <div class="header-text">
            <h2 class="page-title">人事填报</h2>
            <div class="page-subtitle">{{ currentStoreName }} · 仅提交记录，不修改主档</div>
          </div>
        </div>
      </div>

      <div class="entry-cards">
        <div
          class="entry-card"
          :class="{ 'entry-card--active': activeTab === 'transfer' }"
          @click="activeTab = 'transfer'"
        >
          <div class="entry-card-icon entry-card-icon--transfer">
            <i class="el-icon-sort"></i>
          </div>
          <div class="entry-card-body">
            <div class="entry-card-title">调动填报</div>
            <div class="entry-card-desc">员工调店申请</div>
          </div>
        </div>
        <div
          class="entry-card"
          :class="{ 'entry-card--active': activeTab === 'resignation' }"
          @click="activeTab = 'resignation'"
        >
          <div class="entry-card-icon entry-card-icon--resignation">
            <i class="el-icon-document-remove"></i>
          </div>
          <div class="entry-card-body">
            <div class="entry-card-title">离职填报</div>
            <div class="entry-card-desc">员工离职申请</div>
          </div>
        </div>
      </div>

      <el-card class="content-card" shadow="hover" v-loading="optionsLoading">
        <el-tabs v-model="activeTab" class="report-tabs">
          <el-tab-pane label="调动填报" name="transfer">
            <transfer-report-form
              v-if="activeTab === 'transfer'"
              :options="formOptions"
              @success="handleSubmitSuccess"
            />
          </el-tab-pane>
          <el-tab-pane label="离职填报" name="resignation">
            <resignation-report-form
              v-if="activeTab === 'resignation'"
              :options="formOptions"
              @success="handleSubmitSuccess"
            />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getPersonnelReportFormOptions } from '@/api/lqPersonnelReport'
import TransferReportForm from './components/transfer-report-form.vue'
import ResignationReportForm from './components/resignation-report-form.vue'

export default {
  name: 'PersonnelReport',
  components: {
    TransferReportForm,
    ResignationReportForm
  },
  data() {
    return {
      activeTab: 'transfer',
      optionsLoading: false,
      formOptions: {
        sourceOrganizeId: '',
        sourceOrganizeName: '',
        sourceMdid: '',
        sourceMdName: '',
        employees: [],
        targetStores: []
      }
    }
  },
  computed: {
    currentStoreName() {
      const info = (this.$store && this.$store.getters && this.$store.getters.storeInfo) || {}
      return info.storeName || this.formOptions.sourceMdName || localStorage.getItem('store_current_store_name') || '当前门店'
    }
  },
  created() {
    const tab = (this.$route.query && this.$route.query.tab) || ''
    if (tab === 'resignation') {
      this.activeTab = 'resignation'
    }
    this.loadFormOptions()
  },
  methods: {
    goBack() {
      this.$router.push('/dashboard')
    },
    loadFormOptions() {
      this.optionsLoading = true
      getPersonnelReportFormOptions({}).then(res => {
        const data = res.data || {}
        this.formOptions = {
          sourceOrganizeId: data.sourceOrganizeId || '',
          sourceOrganizeName: data.sourceOrganizeName || '',
          sourceMdid: data.sourceMdid || '',
          sourceMdName: data.sourceMdName || '',
          employees: data.employees || data.employeeOptions || [],
          targetStores: data.targetStores || data.targetStoreOptions || []
        }
      }).catch(() => {
        this.formOptions = {
          sourceOrganizeId: '',
          sourceOrganizeName: '',
          sourceMdid: localStorage.getItem('store_current_store_id') || '',
          sourceMdName: localStorage.getItem('store_current_store_name') || '当前门店',
          employees: [],
          targetStores: []
        }
      }).finally(() => {
        this.optionsLoading = false
      })
    },
    handleSubmitSuccess() {
      // 提交成功后保留在当前页，表单组件内已清空
    }
  }
}
</script>

<style lang="scss" scoped>
.personnel-report-page {
  min-height: 100%;
  padding: 20px 24px;
  background: radial-gradient(circle at 10% 20%, #eef2ff 0, #eef2ff 26%, #fdf2ff 60%, #fff7ed 100%);
  box-sizing: border-box;
}

.page-shell {
  max-width: 960px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 18px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.back-btn {
  flex-shrink: 0;
}

.header-text {
  min-width: 0;
}

.page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
}

.page-subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: #64748b;
}

.entry-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.entry-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.28);
  cursor: pointer;
  transition: all 0.2s ease;
}

.entry-card:hover {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.entry-card--active {
  border-color: #3b82f6;
  background: #fff;
  box-shadow: 0 10px 28px rgba(59, 130, 246, 0.12);
}

.entry-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
}

.entry-card-icon--transfer {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

.entry-card-icon--resignation {
  background: linear-gradient(135deg, #f97316, #ef4444);
}

.entry-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.entry-card-desc {
  margin-top: 2px;
  font-size: 12px;
  color: #64748b;
}

.content-card {
  border-radius: 14px;
  border: none;
}

.report-tabs {
  ::v-deep .el-tabs__header {
    margin-bottom: 18px;
  }
}

@media (max-width: 768px) {
  .personnel-report-page {
    padding: 16px;
  }

  .entry-cards {
    grid-template-columns: 1fr;
  }

  .header-left {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
