<template>
  <div class="date-temp">
    <span class="arrow-left" @click="pickerChangeLeft"></span>
    <span class="arrow-line arrow-line1" @click="pickerChangeLeft"></span>
    <el-date-picker v-model="pickerVal" type="date" format="yyyy.MM.dd" value-format="yyyy.MM.dd"></el-date-picker>
    <span class="arrow-line" @click="pickerChangeRight"></span>
    <span class="arrow-right" @click="pickerChangeRight"></span>
  </div>
</template>
<script>
var moment = require("moment");
import "moment/locale/zh-cn";
export default {
  data() {
    return {
      pickerVal: new Date()
    };
  },
  props: ["date"],
  methods: {
    formatter(date) {
      return moment.unix(date / 1000).format("YYYYMMDD");
    },
    formatterStr2(str) {
      if (str) {
        return str.substring(0, 2) + "" + str.substring(3, 5);
      }
    },
    pickerChangeLeft() {
      if (this.pickerVal) {
        let dateTime = new Date(this.pickerVal);
        let newData = this.formatter(
          new Date(dateTime.setDate(dateTime.getDate() - 1))
        );
        this.pickerVal =
          newData.slice(0, 4) +
          "." +
          newData.slice(4, 6) +
          "." +
          newData.slice(6, 8);
      }
      this.$emit("pickerVal", this.pickerVal);
    },
    pickerChangeRight() {
      if (this.pickerVal) {
        let dateTime = new Date(this.pickerVal);
        let newData = this.formatter(
          new Date(dateTime.setDate(dateTime.getDate() + 1))
        );
        this.pickerVal =
          newData.slice(0, 4) +
          "." +
          newData.slice(4, 6) +
          "." +
          newData.slice(6, 8);
      }
      this.$emit("pickerVal", this.pickerVal);
    },
    formatterStr(str) {
      if (str) {
        return (
          str.substring(0, 4) +
          "." +
          str.substring(4, 6) +
          "." +
          str.substring(6, 8)
        );
      }
    }
  },
  mounted() {
    if (this.date) {
      this.pickerVal = this.formatterStr(
        new Date().getFullYear() + this.formatterStr2(this.date)
      );
      this.$emit("pickerVal", this.pickerVal);
    }
  }
};
</script>
<style lang="scss">
.date-temp {
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  border: 1px solid rgba(195, 198, 203, 1);
  display: flex;
  align-items: center;
  .arrow-left {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #9ca2a9;
    margin-right: 5px;
    margin-left: 7px;
    cursor: pointer;
  }
  .arrow-right {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #9ca2a9;
    margin-right: 7px;
    margin-left: 5px;
    cursor: pointer;
  }
  .arrow-line {
    display: inline-block;
    width: 2px;
    height: 16px;
    background: rgba(228, 229, 231, 1);
  }
  .arrow-line1 {
    margin-right: 3.5px;
  }
}
</style>
<style lang="scss">
.date-temp {
  text-align: center;
  .el-input__inner {
    width: 93px !important;
    margin: 7px 6px;
    height: 22px;
    line-height: 22px;
    border: none;
  }
  .el-input__icon {
    display: none;
  }
  .el-input--prefix .el-input__inner {
    padding-left: 5px;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 5px;
  }
}
</style>