<template>
  <div class="selectDay">
    <div
      v-show="type != 3"
      style="
        display: flex;
        flex-wrap: wrap;
        border-style: solid;
        border-color: #f5f7fa;
      "
    >
      <div
        v-for="(item, index) in timeSelect[type]"
        :key="index"
        style="margin: 3px"
      >
        <div
          class="hover-style"
          style="
            border-radius: 5px;
            font-weight: bold;
            font-size: 12px;
            cursor: pointer;
          "
          @click="clickCalendar(index)"
        >
          <div>{{ item }}</div>
          <div
            v-if="collectClickCalendar.indexOf(index) > -1"
            style="
              width: 4px;
              height: 4px;
              border-radius: 50%;
              background-color: red;
              position: relative;
              left: calc(50% - 2px);
            "
          ></div>
          <div v-else style="width: 4px; height: 4px"></div>
        </div>
      </div>
    </div>
    <div v-show="type == 3">
      <el-date-picker
        clearable
        size="small"
        style="margin-top: 10px; width: 200px"
        v-model="collectClickDay"
        type="dates"
        value-format="yyyy-MM-dd"
        placeholder="选择提醒时间设置"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script>
import { scrollTo } from "@/utils/scroll-to";

export default {
  name: "SelectDay",
  data() {
    return {
      updateForm: {},
      timeSelect: [
        ,
        ["周天", "周一", "周二", "周三", "周四", "周五", "周六"],
        [
          "01",
          "02",
          "03",
          "04",
          "05",
          "06",
          "07",
          "08",
          "09",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "20",
          "21",
          "22",
          "23",
          "24",
          "25",
          "26",
          "27",
          "28",
          "29",
          "30",
          "31",
        ],
      ],
    };
  },
  props: {
    // total: {
    //   required: true,
    //   type: Number
    // },
    // page: {
    //   type: Number,
    //   default: 1
    // },
    // limit: {
    //   type: Number,
    //   default: 10
    // },
    type: {
      required: true,
      type: String,
      default() {
        return "0"
      }
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50];
      },
    },
    day: {
      type: Array,
      required: true,
      default() {
        return [];
      },
    },
    cycle:{
      type: Array,
      required: true,
      default() {
        return [];
      },
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page;
      },
      set(val) {
        this.$emit("update:page", val);
      },
    },
    pageSize: {
      get() {
        return this.limit;
      },
      set(val) {
        this.$emit("update:limit", val);
      },
    },
    collectClickDay:{
      get() {
        return this.day;
      },
      set(val) {
        if(val == null ){
          val = []
        }
        val = [...val]
        this.$emit("update:day", val);
      },
    },

    collectClickCalendar: {
      get() {
        return this.cycle.map(calendar=>+calendar);
      },
      set(val) {
        if( val == null ){
          val = []
        }
        val = [...val]
        this.$emit("update:cycle", val);
      },
    },
  },
  methods: {
    clickCalendar(index) {
      if (this.collectClickCalendar.indexOf(index) === -1) {
        this.collectClickCalendar.push(index);
      } else if (this.collectClickCalendar.indexOf(index) > -1) {
        const temp = this.collectClickCalendar.findIndex((ele) => {
          return ele == index;
        });
        this.collectClickCalendar.splice(temp, 1);        
      }
      this.collectClickCalendar = [...this.collectClickCalendar]
    },
    handleSizeChange(val) {
      this.$emit("pagination", { page: this.currentPage, limit: val });
      if (this.autoScroll) {
        scrollTo(0, 800);
      }
    },
    handleCurrentChange(val) {
      this.$emit("pagination", { page: val, limit: this.pageSize });
      if (this.autoScroll) {
        scrollTo(0, 800);
      }
    },
  },
};
</script>

<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}
</style>
