<template>
  <div>
    <div v-if="!isDisabled" class="base_form date_form">
      <div class="label">
        <img class="pre-tag" src="../../../assets/images/template/pre-tag.png" />
        <div class="label-text" :title="label">{{label}}</div>
      </div>
      <el-date-picker
        class="date-picker"
        @change="change"
        v-model="inputValue"
        type="date"
        placeholder="请选择日期"
      ></el-date-picker>
    </div>
    <base-form v-else :label="label" isDisabled>
      <i class="iconfont iconxingzhuang icon_date"></i>
    </base-form>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import BaseForm from "./BaseForm.vue";
@Component({
  components: {
    BaseForm
  }
})
export default class DateForm extends Vue {
  @Prop() label!: string;
  @Prop() isDisabled!: boolean;
  @Prop() value!: string;
  public inputValue: Date | string = ``;
  mounted() {
    // if ((new Date(Number(this.value + "000")))==='Invalid Date') {

    // }
    if (this.value) {
      if (this.isValidDate(new Date(Number(this.value + "000")))) {
        this.inputValue = new Date(Number(this.value + "000"));
      } else {
        this.inputValue = "";
      }
    } else {
      this.inputValue = "";
    }
  }
  public isValidDate(date: any) {
    return date instanceof Date && !isNaN(date.getTime());
  }
  public change() {
    this.$nextTick(() => {
      let date = new Date(this.inputValue);

      let t: string = String(date.valueOf());

      this.$emit(`changeValue`, t.substring(0, t.length - 3), `value`);
    });
  }
}
</script>

<style scoped lang="less">
.base_form {
  position: relative;
  padding-left: 18px;
  line-height: 65px;
  height: 65px;
  font-size: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.label {
  display: inline-block;
  width: 150px; /* 104 - 18 */
  flex-shrink: 0;

  height: 44px;
  line-height: 44px;
  color: #797d84; /* todo ui图颜色不一致 */
  font-size: 14px;
  font-weight: 300;

  position: relative;
}
.label-text {
  text-overflow: ellipsis;
  white-space: nowrap; /*规定段落中的文本不进行换行 */
  overflow: hidden;
}
.date-picker {
  width: 800px;
  flex-shrink: 0;
  /deep/.el-input__inner {
    padding-left: 22px;
    height: 44px;
    // color: #e8e8e8;
    &:focus {
      border-color: #dcdfe6 !important;
    }
  }
  /deep/.el-input__prefix {
    position: absolute;
    top: 0;
    left: 750px;
    text-align: center;
    height: 100%;
    color: #c0c4cc;
  }
}
.icon_date {
  color: #8a8a8a;
  position: absolute;
  right: 24px;
}

.pre-tag {
  position: absolute;
  left: -30px;
  top: 14px;
  display: none;
}
</style>
