<template>
  <el-date-picker  :id="id" :class="{'highlight': highlight}" placeholder="选择日期" type="date" :picker-options="pickerOptions" v-model="model" v-bind="$attrs"
    v-on="$listeners" v-bind:disabled="isDisable" value-format="yyyyMMdd" format="yyyy-MM-dd"></el-date-picker>
</template>

<script>
  export default {
    props: {
      value: {
        type: [String, Date],
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      id: {
        type: String,
        default: undefined
      }
    },
    computed: {
      model: {
        get() {
          return this.value
        },
        set(newVal) {
          this.$emit('input', newVal)
        }
      },
      mode() {
        return this.$store.state.Status.mode
      },
      isDisable: {
        get() {
          return this.mode === 'display' || this.disabled
        }
      },
      highlight () {
        return this.$store.state.Status.highlights.indexOf(this.id) !== -1
      }
    },
    data() {
      var holiday = {
        '20200801': '建军节',
        '20200825': '七夕节',
        '20200826': '节日3',
        '20200808': '节日4',
        '20200814': '节日5'
      }
      return {
        value: '',

        pickerOptions: {
          cellClassName(data) {

            var year = data.getFullYear()
            var month = data.getMonth() + 1
            var day = data.getDate()
            if (month >= 1 && month <= 9) {
              month = "0" + month
            }
            if (day >= 1 && day <= 9) {
              day = "0" + day
            }
            var currentdate = year + month + day
            if (holiday[currentdate] !== undefined) {
              (currentdate)
              return 'holiday'
            }

          }
        }
      }
    },
    methods: {

    }

  }
</script>

<style>
  .holiday span::after {
    display: block;
    content: "h";
    color: white;
    width: 14px;
    height: 14px;
    line-height: 14px;
    margin: auto;
    position: relative;
    left: 15px;
    bottom: 30px;
    border-radius: 50%;
    background-color: #f08080;
  }
  .el-input.highlight .el-input__inner{
    border-color: red;
  }
</style>