<template>
  <el-dialog v-model="visible" title="排班表">
    <el-calendar ref="calendarRef">
      <template #header="{ date }">
        <span>{{ date }}</span>
        <el-button-group>
          <el-button size="small" @click="fnGetWorkDate('prev-month')">
            上个月
          </el-button>
          <el-button size="small" @click="fnGetWorkDate('today')">
            今天
          </el-button>
          <el-button size="small" @click="fnGetWorkDate('next-month')">
            下个月
          </el-button>
        </el-button-group>
      </template>
      <template #date-cell="{ data }">
        <div>
          <div>
            <span>{{ data.day.split("-").slice(2).join() }}</span>
            <br />
            <span v-for="(item, index) in workDateList" :key="index">
              <template v-if="item.DATE === data.day">
                <span v-if="item.STATE === '1'" class="text-green">上班</span>
                <span v-else-if="item.STATE === '2'" class="text-red">
                  休班
                </span>
              </template>
            </span>
          </div>
        </div>
      </template>
    </el-calendar>
    <template #footer>
      <el-button @click="visible = false"> 取消 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useVModel } from "@vueuse/core";
import { ref, watch } from "vue";
import { getUserScheduleView } from "@/request/enterprise_management.js";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  info: {
    type: Object,
    required: true,
    default: () => {},
  },
  id: {
    type: String,
    required: true,
    default: "",
  },
});
const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);
const calendarRef = ref(null);
const MONTHS = ref(0);
const workDateList = ref([]);
const fnGetWorkDate = async (type = "today") => {
  if (type === "today") MONTHS.value = 0;
  if (type === "prev-month") --MONTHS.value;
  if (type === "next-month") ++MONTHS.value;
  const resData = await getUserScheduleView({
    MONTHS: MONTHS.value,
    SHIFTWORKRULES_ID: props.id,
    WORKSTATUS: props.info.WORKSTATUS,
    DURATION: props.info.DURATION,
    WORKPERIOD: props.info.WORKPERIOD,
  });
  workDateList.value = resData.varList;
  calendarRef.value.selectDate(type);
};
watch(
  () => props.visible,
  (val) => {
    if (val) fnGetWorkDate();
  }
);
</script>

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