<template>
  <el-drawer v-model="visible" title="查看其他诊断书">
    <el-row>
      <el-col
        v-for="(item, index) in dateList"
        :key="index"
        :span="6"
        :offset="1"
      >
        <div
          style="
            text-align: center;
            cursor: pointer;
            margin-top: 10px;
            border-radius: 10px;
          "
          :style="{
            background: adviceDate?.includes(item)
              ? 'var(--el-border-color)'
              : 'var(--el-fill-color-light)',
          }"
          @click="fnCheck(item)"
        >
          <div
            style="
              color: var(--el-text-color-regular);
              padding: 10px 0;
              border-radius: 10px;
            "
            :style="{
              background: item === month ? 'var(--el-color-primary)' : '',
            }"
          >
            {{ item }}
          </div>
        </div>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script setup>
import { useVModels } from "@vueuse/core";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  dateList: {
    type: Array,
    required: true,
    default: () => [],
  },
  adviceDate: {
    type: Array,
    required: true,
    default: () => [],
  },
  month: {
    type: String,
    required: true,
    default: "",
  },
});
const emits = defineEmits(["update:visible", "update:month", "check"]);
const { visible, month } = useVModels(props, emits);
const fnCheck = (item) => {
  visible.value = false;
  month.value = item;
  emits("check");
};
</script>

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