<template>
  <div class="picker-wrap">
    <div class="picker-wrap-txt" @click="show = true">
      <input type="text" readonly :value="pickerValShow" :placeholder="placeholder" />
      <svg-icon icon-class="triangle-right" slot="button" />
    </div>
    <cr-popup v-model="show" position="bottom" get-container="body">
      <cr-date-picker
        ref="datepicker"
        :before="before"
        :later="later"
        @confirm="onConfirm"
        @cancel="onCancel"
        :init-value="initVal"
      />
    </cr-popup>
  </div>
</template>

<script>
import popupPickerMixin from "../mixins/popupPicker.mixin.js";
import { parseTime } from "@/service/utils";
export default {
  name: "PopupDatePicker",
  mixins: [popupPickerMixin],
  props: {
    before: {
      type: Number,
      default() {
        return 100;
      }
    },
    needInit: {
      type: Boolean,
      default: true
    },
    later: {
      type: Number,
      default() {
        return 60;
      }
    }
  },
  data() {
    return {
      refName: "datepicker",
      initVal: ""
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        if (val) {
          this.initVal = val;
          this.handleResult(val);
        }
      }
    },
    needInit: {
      immediate: true,
      handler(val) {
        if (!val) {
          this.initVal = "";
        } else {
          this.initVal = parseTime("", "{y}-{m}-{d}");
        }
      }
    }
  },

  methods: {
    handleResult(res) {
      this.pickerValShow = res;
      this.pickerVal = res;
    },
    setDefaultVal() {
      setTimeout(() => {
        const $datepicker = this.$refs.datepicker;
        const $picker = $datepicker.$refs.picker;
        const columns = $datepicker.columns;
        $datepicker.setInitValue();
        $picker.setColumnIndex(0, columns[0].selectedIndex);
        $picker.setColumnIndex(1, columns[1].selectedIndex);
        $picker.setColumnIndex(2, columns[2].selectedIndex);
      });
    }
  }
};
</script>
<style lang="less">
.picker-wrap {
  width: 100%;
  &-txt {
    height: 24px;
    color: #333;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  input {
    color: #333;
    width: 90%;
  }
  .svg-icon {
    height: 16px;
    width: 16px;
  }
}
</style>
