<template>
  <layout-card>
    <el-tabs v-model="name" @tab-change="fnTabChange">
      <el-tab-pane label="年度考核" name="year" lazy>
        <list-view @assessment-standards="fnAssessmentStandards" type="year">
          <template v-slot="{ searchForm }">
            <el-col :span="4">
              <el-form-item label="时间" prop="YEAR">
                <el-date-picker
                  v-model="searchForm.YEAR"
                  type="year"
                  range-separator="至"
                  value-format="YYYY"
                  format="YYYY"
                  :clearable="false"
                />
              </el-form-item>
            </el-col>
          </template>
        </list-view>
      </el-tab-pane>
      <el-tab-pane label="季度考核" name="season" lazy>
        <list-view @assessment-standards="fnAssessmentStandards" type="season">
          <template v-slot="{ searchForm }">
            <el-col :span="3">
              <el-form-item label="年" prop="YEAR">
                <el-date-picker
                  v-model="searchForm.YEAR"
                  type="year"
                  range-separator="至"
                  value-format="YYYY"
                  format="YYYY"
                  :clearable="false"
                />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="季度" prop="QUARTER">
                <el-select v-model="searchForm.QUARTER">
                  <el-option label="一季度" :value="1" />
                  <el-option label="二季度" :value="2" />
                  <el-option label="三季度" :value="3" />
                  <el-option label="四季度" :value="4" />
                </el-select>
              </el-form-item>
            </el-col>
          </template>
        </list-view>
      </el-tab-pane>
      <el-tab-pane label="月度考核" name="month" lazy>
        <list-view @assessment-standards="fnAssessmentStandards" type="month">
          <template v-slot="{ searchForm }">
            <el-col :span="4">
              <el-form-item label="时间" prop="MONTH">
                <el-date-picker
                  v-model="searchForm.MONTH"
                  type="month"
                  range-separator="至"
                  value-format="YYYY-MM"
                  format="YYYY-MM"
                  :clearable="false"
                />
              </el-form-item>
            </el-col>
          </template>
        </list-view>
      </el-tab-pane>
    </el-tabs>
    <assessment-standards v-model:visible="assessmentStandardsVisible" />
  </layout-card>
</template>

<script setup>
import { ref } from "vue";
import ListView from "./components/list.vue";
import AssessmentStandards from "./components/assessment_standards.vue";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";

const router = useRouter();
const route = useRoute();
const defaultName = "month";
const name = ref(route.query.name || defaultName);
const assessmentStandardsVisible = ref(false);
onBeforeRouteUpdate((to, from, next) => {
  name.value = to.query.name || defaultName;
  next();
});
const fnTabChange = (name) => {
  router.push({
    path: "/performance_appraisal/departmental",
    query: {
      name,
    },
  });
};
const fnAssessmentStandards = () => {
  assessmentStandardsVisible.value = true;
};
</script>

<style scoped lang="scss"></style>
