<template>
  <ContentWrap>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="员工产值汇总" name="employeeSummary">
        <el-form :inline="true" :model="employeeSummaryForm" label-width="88px">
          <el-form-item label="年度">
            <el-date-picker
              v-model="employeeSummaryYearValue"
              class="!w-180px"
              clearable
              placeholder="请选择年度"
              type="year"
              value-format="YYYY"
            />
          </el-form-item>
          <!-- <el-form-item>
            <el-button @click="getEmployeeBudgetList">
              <Icon class="mr-5px" icon="ep:refresh" />
              刷新预览
            </el-button>
          </el-form-item> -->
          <el-form-item>
            <el-button
              v-hasPermi="['tjt:report-summary:export']"
              :loading="employeeSummaryExportLoading"
              plain
              type="primary"
              @click="openEmployeeSummaryExportDialog"
            >
              <Icon class="mr-5px" icon="ep:download" />
              导出员工汇总
            </el-button>
          </el-form-item>
        </el-form>

        <el-table
          v-loading="employeeBudgetLoading"
          :data="employeeBudgetList"
          class="mt-12px"
          :empty-text="employeeSummaryForm.year ? '暂无年度成本预算数据' : '请先选择年度'"
        >
          <el-table-column align="center" label="序号" type="index" width="70" />
          <el-table-column align="center" label="员工姓名" min-width="160" prop="employeeName" />
          <el-table-column align="center" label="预计年度" prop="budgetYear" width="120" />
          <el-table-column align="center" label="预计发生成本" min-width="160">
            <template #default="scope">
              {{ formatAmount(scope.row.expectedCostAmount) }}
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          v-model:limit="employeeBudgetQuery.pageSize"
          v-model:page="employeeBudgetQuery.pageNo"
          :total="employeeBudgetTotal"
          @pagination="getEmployeeBudgetList"
        />
      </el-tab-pane>

      <el-tab-pane label="项目产值总览" name="projectOverview">
        <el-form :inline="true" :model="projectOverviewForm" label-width="88px">
          <el-form-item label="专业所">
            <el-select
              v-model="projectOverviewForm.officeId"
              class="!w-220px"
              clearable
              placeholder="请选择专业所"
            >
              <el-option
                v-for="item in officeOptions"
                :key="item.id"
                :label="item.officeName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
            <el-button @click="getProjectEmployeeList">
              <Icon class="mr-5px" icon="ep:refresh" />
              刷新预览
            </el-button>
          </el-form-item> -->
          <el-form-item>
            <el-button
              v-hasPermi="['tjt:report-summary:export']"
              :loading="projectOverviewExportLoading"
              plain
              type="primary"
              @click="openProjectOverviewExportDialog"
            >
              <Icon class="mr-5px" icon="ep:download" />
              导出项目总览
            </el-button>
          </el-form-item>
        </el-form>

        <el-table
          v-loading="projectEmployeeLoading"
          :data="projectEmployeeList"
          class="mt-12px"
          :empty-text="projectOverviewForm.officeId ? '该专业所下暂无员工' : '请先选择专业所'"
        >
          <el-table-column align="center" label="序号" type="index" width="70" />
          <el-table-column align="center" label="员工姓名" min-width="160" prop="employeeName" />
          <el-table-column align="center" label="性别" prop="gender" width="100" />
          <el-table-column align="center" label="所属所" min-width="180" prop="officeName" />
        </el-table>
        <Pagination
          v-model:limit="projectEmployeeQuery.pageSize"
          v-model:page="projectEmployeeQuery.pageNo"
          :total="projectEmployeeTotal"
          @pagination="getProjectEmployeeList"
        />
      </el-tab-pane>
    </el-tabs>
  </ContentWrap>

  <Dialog v-model="exportDialogVisible" :title="exportDialogTitle" width="480">
    <el-form label-width="88px">
      <template v-if="exportDialogType === 'employeeSummary'">
        <el-form-item label="年度">
          <span>{{ employeeSummaryForm.year || '-' }}</span>
        </el-form-item>
        <el-form-item label="导出排序">
          <el-select
            v-model="employeeSummaryForm.sortType"
            class="!w-220px"
            placeholder="请选择导出排序"
          >
            <el-option
              v-for="item in EMPLOYEE_SUMMARY_SORT_OPTIONS"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </template>

      <template v-else>
        <el-form-item label="专业所">
          <span>{{ currentOfficeName || '-' }}</span>
        </el-form-item>
        <el-form-item label="年度">
          <el-date-picker
            v-model="projectOverviewYearValue"
            class="!w-220px"
            clearable
            disabled
            placeholder="请选择年度"
            type="year"
            value-format="YYYY"
          />
        </el-form-item>
        <el-form-item label="导出排序">
          <el-select
            v-model="projectOverviewForm.sortType"
            class="!w-220px"
            placeholder="请选择导出排序"
          >
            <el-option
              v-for="item in PROJECT_OVERVIEW_SORT_OPTIONS"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </template>
    </el-form>

    <template #footer>
      <el-button @click="exportDialogVisible = false">取消</el-button>
      <el-button :loading="currentExportLoading" type="primary" @click="submitExport">
        确定导出
      </el-button>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import * as EmployeeApi from '@/api/tjt/employee'
import * as EmployeeYearCostBudgetApi from '@/api/tjt/employeeYearCostBudget'
import * as OfficeApi from '@/api/tjt/office'
import * as ReportApi from '@/api/tjt/report'
import download from '@/utils/download'

defineOptions({ name: 'TjtReportSummary' })

type SelectOption = {
  label: string
  value: string
}

type ExportDialogType = 'employeeSummary' | 'projectOverview'

const PROJECT_OVERVIEW_SORT_OPTIONS: SelectOption[] = [
  { label: '产值从高到低', value: 'output_desc' },
  { label: '产值从低到高', value: 'output_asc' },
  { label: '项目名称升序', value: 'name_asc' }
]

const EMPLOYEE_SUMMARY_SORT_OPTIONS: SelectOption[] = [
  { label: '年度合计从高到低', value: 'annual_total_desc' },
  { label: '年度合计从低到高', value: 'annual_total_asc' },
  { label: '员工姓名升序', value: 'name_asc' }
]

const message = useMessage()

const activeTab = ref('employeeSummary')
const exportDialogVisible = ref(false)
const exportDialogType = ref<ExportDialogType>('employeeSummary')
const projectOverviewExportLoading = ref(false)
const employeeSummaryExportLoading = ref(false)
const employeeBudgetLoading = ref(false)
const projectEmployeeLoading = ref(false)
const officeOptions = ref<OfficeApi.OfficeSimpleVO[]>([])
const employeeBudgetList = ref<EmployeeYearCostBudgetApi.EmployeeYearCostBudgetVO[]>([])
const projectEmployeeList = ref<EmployeeApi.EmployeeVO[]>([])
const employeeBudgetTotal = ref(0)
const projectEmployeeTotal = ref(0)
const currentYear = new Date().getFullYear()

const projectOverviewForm = reactive<ReportApi.ProjectOverviewExportReqVO>({
  year: currentYear,
  officeId: undefined,
  sortType: 'output_desc'
})

const employeeSummaryForm = reactive<ReportApi.EmployeeOutputSummaryExportReqVO>({
  year: currentYear,
  officeId: undefined,
  employeeId: undefined,
  employeeStatus: undefined,
  sortType: 'annual_total_desc'
})

const employeeBudgetQuery = reactive<EmployeeYearCostBudgetApi.EmployeeYearCostBudgetPageReqVO>({
  pageNo: 1,
  pageSize: 10,
  employeeId: undefined,
  employeeName: undefined,
  budgetYear: currentYear,
  enabledFlag: true
})

const projectEmployeeQuery = reactive<EmployeeApi.EmployeePageReqVO>({
  pageNo: 1,
  pageSize: 10,
  employeeName: undefined,
  officeId: undefined,
  employeeStatus: undefined,
  enabledFlag: true
})

const exportDialogTitle = computed(() =>
  exportDialogType.value === 'employeeSummary' ? '导出员工产值汇总' : '导出项目产值总览'
)

const currentExportLoading = computed(() =>
  exportDialogType.value === 'employeeSummary'
    ? employeeSummaryExportLoading.value
    : projectOverviewExportLoading.value
)

const currentOfficeName = computed(() => {
  return officeOptions.value.find((item) => item.id === projectOverviewForm.officeId)?.officeName || ''
})

const projectOverviewYearValue = computed({
  get: () => String(currentYear),
  set: (_value?: string) => undefined
})

const employeeSummaryYearValue = computed({
  get: () => (employeeSummaryForm.year ? String(employeeSummaryForm.year) : undefined),
  set: (value?: string) => {
    employeeSummaryForm.year = value ? Number(value) : undefined
  }
})

const formatAmount = (value?: number) => {
  if (value === undefined || value === null) {
    return ''
  }
  return Number(value).toFixed(2)
}

const getOfficeList = async () => {
  officeOptions.value = await OfficeApi.getOfficeSimpleList()
}

const getEmployeeBudgetList = async () => {
  if (!employeeBudgetQuery.budgetYear) {
    employeeBudgetList.value = []
    employeeBudgetTotal.value = 0
    return
  }
  employeeBudgetLoading.value = true
  try {
    const data = await EmployeeYearCostBudgetApi.getEmployeeYearCostBudgetPage(employeeBudgetQuery)
    employeeBudgetList.value = data.list
    employeeBudgetTotal.value = data.total
  } finally {
    employeeBudgetLoading.value = false
  }
}

const getProjectEmployeeList = async () => {
  if (!projectEmployeeQuery.officeId) {
    projectEmployeeList.value = []
    projectEmployeeTotal.value = 0
    return
  }
  projectEmployeeLoading.value = true
  try {
    const data = await EmployeeApi.getEmployeePage(projectEmployeeQuery)
    projectEmployeeList.value = data.list
    projectEmployeeTotal.value = data.total
  } finally {
    projectEmployeeLoading.value = false
  }
}

const openEmployeeSummaryExportDialog = () => {
  if (!employeeSummaryForm.year) {
    message.warning('请选择年度')
    return
  }
  exportDialogType.value = 'employeeSummary'
  exportDialogVisible.value = true
}

const openProjectOverviewExportDialog = () => {
  if (!projectOverviewForm.officeId) {
    message.warning('请选择专业所')
    return
  }
  exportDialogType.value = 'projectOverview'
  exportDialogVisible.value = true
}

const submitExport = async () => {
  if (exportDialogType.value === 'employeeSummary') {
    await handleExportEmployeeSummary()
    return
  }
  await handleExportProjectOverview()
}

const handleExportProjectOverview = async () => {
  if (!projectOverviewForm.officeId) {
    message.warning('请选择专业所')
    return
  }
  if (!projectOverviewYearValue.value) {
    message.warning('请选择年度')
    return
  }
  try {
    projectOverviewExportLoading.value = true
    projectOverviewForm.year = currentYear
    const data = await ReportApi.exportProjectOverview(projectOverviewForm)
    download.excel(data, '项目总览表.xlsx')
    exportDialogVisible.value = false
  } finally {
    projectOverviewExportLoading.value = false
  }
}

const handleExportEmployeeSummary = async () => {
  if (!employeeSummaryForm.year) {
    message.warning('请选择年度')
    return
  }
  try {
    employeeSummaryExportLoading.value = true
    const data = await ReportApi.exportEmployeeOutputSummary(employeeSummaryForm)
    download.excel(data, '员工个人考核产值汇总表.xlsx')
    exportDialogVisible.value = false
  } finally {
    employeeSummaryExportLoading.value = false
  }
}

watch(
  () => employeeSummaryForm.year,
  (year) => {
    employeeBudgetQuery.pageNo = 1
    employeeBudgetQuery.budgetYear = year
    getEmployeeBudgetList()
  },
  { immediate: true }
)

watch(
  () => projectOverviewForm.officeId,
  (officeId) => {
    projectEmployeeQuery.pageNo = 1
    projectEmployeeQuery.officeId = officeId
    getProjectEmployeeList()
  },
  { immediate: true }
)

onMounted(async () => {
  await getOfficeList()
})
</script>
