<template>
  <transition name="n-drop-down">
    <div class="n-options-container" :class="wrap" v-show="visible">
<!--      <n-builder v-if="builders.header" :name="builders.header"></n-builder>-->
      <slot></slot>
      <div class="n-date-picker-footer" v-if="_options.length">
        <template v-for="item in _options">
          <div :key="item.label" class="n-date-picker-option" :class="{active: footer.option && item.label === footer.option.label}"
               @click="onOptionClick(item)">{{item.label}}</div>
        </template>
        <n-button v-if="footer.hasConfirm" :disabled="!footer.value" size="small" type="primary" @click="$emit('on-confirm')">确定</n-button>
      </div>
    </div>
  </transition>
</template>
<script>
import {prop} from '@uif/next/lib/utils/tools'
import {getDateRangeOptions} from '_common/dateUtils'

export default {
  name: 'n-options-date-container',
  props: {
    visible: prop.boolean(),
    // 容器名称
    wrap: prop.string(),
    // 类型
    type: prop.inArray(['date', 'minute', 'time', 'dates', 'month', 'months'], 'date'),
    // 底部选项
    options: prop.array(null),
    // 底部
    footer: prop.object()
  },
  computed: {
    _options ({footer, type}) {
      return getDateRangeOptions(footer.options, type)
    }
  },
  methods: {
    onOptionClick (option) {
      if (this.option?.label !== option.label) {
        this.$emit('click', option)
      }
    }
  }
}
</script>
