<template>
    <div class="h100">
      <van-popup
        v-model="moreSearchShow"
        class="more-search"
        position="right"
        :style="{ width: '75%',height: '100%', overflow: 'hidden' }">
        <div class="title font-bold font-16">销售开单时间</div>
        <time-choose :startTime="time.start" :endTime="time.end" @confirm="timeConfirm"></time-choose>
        <div class="action-bottom">
          <van-button type="default" @click="onCleanClick">重置</van-button>
          <van-button type="info" class="submit" @click="onSearchClick">查询</van-button>
        </div>
      </van-popup>
    </div>
</template>

<script>
import TimeChoose from '@/components/TimeChoose'
import {getFormateDate} from '@/utils/common'

export default {
  name: 'HighSearch',
  components: {
    TimeChoose
  },
  data() {
    return {
      moreSearchShow: false,
      time: {
        start: getFormateDate(new Date(), 'yyyy-MM-dd'),
        end: getFormateDate(new Date(), 'yyyy-MM-dd')
      }
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    choosetime: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    value (val) {
      this.moreSearchShow = val
      this.time = JSON.parse(JSON.stringify(this.choosetime))
    },
    moreSearchShow (val) {
      this.$emit('input', val)
    }
  },
  methods: {
    timeConfirm (data) {
      this.time = data
    },
    onSearchClick() {
      this.moreSearchShow = false
      this.$emit('onsearch', this.time)
    },
    onCleanClick() {
      this.time = {
        start: getFormateDate(new Date(), 'yyyy-MM-dd'),
        end: getFormateDate(new Date(), 'yyyy-MM-dd')
      }
      this.moreSearchShow = false
      this.$emit('onsearch', this.time)
    }
  }
}
</script>

<style lang="scss" scoped>
  * {
    box-sizing: border-box;
  }
  .more-search {
    .title {
      margin: 30px 0 0 15px
    }
    .search-value {
      margin-top: 45px;
    }
    .action-bottom {
      position: absolute;
      bottom: 0;
      width: 100%;
      display: flex;

      button {
        flex: 1;
      }
    }
  }
</style>
