web/apps/jy-pc/src/components/selector/TimeSelector.vue

<template>
  <selector-card
    class="time-selector"
    :cardType="selectorType"
    @onConfirm="onConfirm"
    @onCancel="onCancel"
  >
    <div slot="header" :class="{ 's-header': selectorType === 'line' }">
      <slot name="header">选择时间</slot>
    </div>
    <TimeSelectorContent
      ref="content"
      :selectorKeys="selectorKeys"
      :selectorType="selectorType"
      :showExact="showExact"
      :defaultSelectedKey="defaultSelectedKey"
      @onChange="onChange"
    />
  </selector-card>
</template>

<script>
import SelectorCard from '@/components/selector/SelectorCard.vue'
import TimeSelectorContent from '@/components/selector/TimeSelectorContent.vue'
export default {
  name: 'time-selector',
  components: {
    SelectorCard,
    TimeSelectorContent
  },
  props: {
    selectorType: {
      type: String,
      default: 'line'
    },
    selectorKeys: {
      type: Array,
      default() {
        return ['all', 'today', 'lately7', 'lately30', 'lately90']
      }
    },
    defaultSelectedKey: String,
    showExact: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    setState(data) {
      return this.$refs.content.setState(data)
    },
    getState() {
      return this.$refs.content.getState()
    },
    getContentRef() {
      return this.$refs.content
    },
    onCancel() {
      this.$emit('onCancel')
    },
    onConfirm() {
      const state = this.getState()
      this.$emit('onConfirm', state)
    },
    onChange(state) {
      this.$emit('onChange', state)
    }
  }
}
</script>

<style lang="scss" scoped></style>