<template>
  <div style="display:flex;flex-direction:row;justify-content:flex-start;align-items:center;">
    <a-input v-model:value="inputValue" placeholder="请输入内容" style="width: 220px;"></a-input>
    <a-data-picker class="unlimitdatepicker" v-model="dateValue" inputReadOnly @change="datepickerChange" placeholder="选择日期"></a-data-picker>
  </div>
</template>

<script>
import { dateFormat } from '../../utils/gw_date';
export default {
  name: 'UnLimitDatePicker',
  props: ['type', 'value'],
  watch: {
    inputValue: function () {
      if (this.inputValue != '') {
        this.dateValue = this.inputValue;
      }
      this.$emit('input', this.inputValue);
    },
    value: function () {
      this.inputValue = this.value;
    },
  },
  data() {
    return {
      dateValue: '',
      inputValue: '',
    };
  },
  mounted() {
    this.inputValue = this.value;
  },
  methods: {
    datepickerChange: function (params) {
      console.log('datepickerChange' + params);
      this.inputValue = dateFormat(params, 'yyyy-MM-dd');
    },
  },
};
</script>

<style lang='less' scoped>
.unlimitdatepicker {
  width: 0px !important;

}

.unlimitdatepicker .el-input__inner {
  padding-right: 0px !important;
  border: 0px !important;
}

.unlimitdatepicker .el-input__icon .el-icon-date {}
</style>
