<template>
  <div>
    <el-space wrap>
      <el-tag
        closable
        type="primary"
        size="large"
        v-for="(item, index) in dateList"
        :key="index"
        @close="handleDeleteDate(item)"
        >{{ item }}</el-tag
      >
      <el-date-picker
        value-format="YYYY-MM-DD"
        v-model="date"
        type="date"
        :shortcuts="shortcuts"
        v-bind="$attrs"
        @change="handleChangeDate"
      />
    </el-space>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import moment from "moment";
const emits = defineEmits(["update:list"]);
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
});
const dateList = computed({
  get() {
    return props.list;
  },
  set(n) {
    emits("update:list", n);
  }
});
const date = ref();
const shortcuts = [
  {
    text: "今天",
    value: new Date()
  },
  {
    text: "1个月后",
    value: () => {
      return moment().add(1, "months").format("YYYY-MM-DD");
    }
  },
  {
    text: "3个月后",
    value: () => {
      return moment().add(3, "months").format("YYYY-MM-DD");
    }
  },
  {
    text: "6个月后",
    value: () => {
      return moment().add(6, "months").format("YYYY-MM-DD");
    }
  },
  {
    text: "9个月后",
    value: () => {
      return moment().add(9, "months").format("YYYY-MM-DD");
    }
  },
  {
    text: "1年后",
    value: () => {
      return moment().add(12, "months").format("YYYY-MM-DD");
    }
  }
];

const handleChangeDate = value => {
  if (!value) return;
  if (dateList.value.includes(value)) return;
  dateList.value.push(value);
  date.value = "";
};
const handleDeleteDate = value => {
  console.log("value", value);

  dateList.value = dateList.value.filter(item => item !== value);
};
</script>
