<script setup lang="ts">
import { nextTick, onMounted, ref, watch } from "vue";
import departmentConfig from "./config/department.config";
import { ElOption } from "element-plus";
import dayjs from "dayjs";

const companies = [
  { value: "GS2203161855277894", label: "平台公司: 万宇" },
  { value: "GS2302231125079621", label: "业务公司: 百辰" },
  { value: "GS2302231323386950", label: "业务公司: 泓源" },
  { value: "GS2302231124114965", label: "业务公司: 普润" },
  { value: "GS2304031312553746", label: "业务公司: 锦兴" },
  { value: "GS2401181650538135", label: "业务公司: 知事" },
  { value: "GS2402020907088731", label: "平台公司: 泰文创" }
];

const companyRef = ref<any>(null);

const monthState = ref({ companyNo: "", daytime: "" });

onMounted(() => {
  const daytime = dayjs(new Date()).format("YYYY-MM-DD");
  monthState.value.daytime = daytime;
  monthState.value.companyNo = companies[0].value;
});

watch(
  () => monthState.value,
  ({ daytime, companyNo }) => {
    if (!daytime && !companyNo) return;
    nextTick(() => companyRef.value.getPageData({ daytime, companyNo }));
  },
  { deep: true, immediate: true }
);
</script>

<template>
  <div w-full>
    <div
      class="flex justify-between px-[15px] pt-[10px] mt-[10px] mb-[-10px] bg-white"
    >
      部门完成情况
      <div class="flex">
        <ElDatePicker
          v-model="monthState.daytime"
          :clearable="false"
          class="mr-[10px]"
          placeholder="选择日期"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
        />

        <ElSelect v-model="monthState.companyNo" placeholder="业务公司">
          <ElOption
            v-for="option in companies"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </ElSelect>
      </div>
    </div>
    <PageContainer
      :get-content-ref="ref => (companyRef = ref)"
      :contentConfig="departmentConfig"
    />
  </div>
</template>
