<template>
  <Dialog v-model="visibleModel" title="上传日历" top="70px" width="700px">
    <el-calendar v-model="mon" class="cal">
      <template
        slot="dateCell"
        slot-scope="{date, data}">
        <p>
          {{ data.day.split('-').slice(1).join('-') }}<br /><div style="font-size:25px;margin-top:10px;margin-left:20px;">{{ selDays.indexOf(data.day)!==-1 ? '✅' : ''}}</div>
        </p>
      </template>
    </el-calendar>
  </Dialog>
</template>

<script>
import Dialog from "@screen/components/Dialog/index.vue";
import request from "@/utils/request";
export default {
  name: "DialogCamera",
  components: {
    Dialog,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    }
  },
  emit: ["close"],
  data() {
    return {
      mon: new Date(),
      selDays:[]
    };
  },
  watch: {
    mon: {
      handler (val, oldVal) {
      if (
        val &&
        moment(val).toDate() < moment(oldVal).startOf("month").toDate()
      ) {
        this.getData();
      } else if (
        val &&
        moment(val).toDate() > moment(oldVal).endOf("month").toDate()
      ) {
        this.getData();
      }
    },
      deep: true,
    }
  },
  computed: {
    visibleModel: {
      get() {
        if (this.visible) this.getData();
        return this.visible;
      },
      set(bool) {
        this.$emit("close", bool);
      },
    },
  },
  methods: {
    getData() {
      const month = moment(this.mon).format('YYYY-MM')
      request({
        url: `/business/sdhsEvent/getDataCalendar/${month}`,
        method: "get",
      }).then((result) => {
        if (result.code != 200) return Message.error(result?.msg);
        this.selDays = result.data;
      }).catch((err) => {
        Message.error("查询失败", err);
      })
    },
  },
};
</script>

<style lang="scss" scoped>
 .cal {
      background: #00000000;
  }
::v-deep {
    .el-calendar__title,.el-calendar-day,.el-calendar-table thead th{
    color: white !important;
  }
  .el-calendar__button-group > .el-button-group > .el-button{
      background: #00000000 !important;    
      color: white !important;
  }
  .is-selected,.el-calendar-table .el-calendar-day:hover {
    background: #00000000 !important;    
  }}
</style>
