<!--
 * @Author: your name
 * @Date: 2021-04-16 14:43:59
 * @LastEditTime: 2021-05-08 18:40:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exclusive-cloud-admin\common\src\components\time-search\time-search.vue
-->


<template>
    <div class="time-search-container">
        <div class="time-search-content flex-center">
            <div class="box flex-align-center mar-b-mini">
                <div class="time-selector-label">
                    查询时间：
                </div>
                <div class="time-selector-content box flex-align-center">
                    <div class="box flex-center">
                        <efly-button-group>
                            <efly-button size="mini" class="button-xs" :class="{'btn-primary': status.timeType === 'today'}" @click="changeTime('today')">今天</efly-button>
                            <efly-button size="mini" class="button-xs" :class="{'btn-primary': status.timeType === 'nearlyWeek'}" @click="changeTime('nearlyWeek')">最近一周</efly-button>
                            <efly-button size="mini" class="button-xs" :class="{'btn-primary': status.timeType === 'thisMonth'}" @click="changeTime('thisMonth')">本月</efly-button>
                            <efly-button size="mini" class="button-xs" :class="{'btn-primary': status.timeType === 'lastMonth'}" @click="changeTime('lastMonth')">上月</efly-button>
                            <efly-button size="mini" class="button-xs" :class="{'btn-primary': status.timeType === 'nearlyTwoMonth'}" @click="changeTime('nearlyTwoMonth')">近两月</efly-button>
                            <efly-button size="mini" class="button-xs" :class="{'btn-primary': status.timeType === 'thisYear'}" @click="changeTime('thisYear')">今年</efly-button>
                            <efly-button size="mini" class="button-xs" :class="{'btn-primary': status.timeType === 'custom'}" @click="changeTime('custom')">自定义</efly-button>
                        </efly-button-group>
        
                        <div class="box mar-l-xs efly-input efly-input-mini" v-if="status.timeType === 'custom'">
                            <input readonly id="time-search-statistics-start-js" style="border:1px solid #cccccc;width:156px;" class="efly-input mar-r-xs" placeholder="请选择开始时间" />
                            <span  class="line-height-30">-</span>
                            <input readonly id="time-search-statistics-end-js" style="border:1px solid #cccccc;width:156px;" class="efly-input mar-l-xs" placeholder="请选择结束时间" />

                            <efly-button size="mini" class="button-xs btn-primary"  @click="getData()">查询</efly-button>
                        </div>              
                </div>
            </div>
               
            </div>
        </div>
       
       <div class="time-search-content">
           <div class="box flex-align-center mar-b-mini">
               <div class="time-selector-label">
                图表显示：
                </div>
                <div class="time-selector-content box flex-align-center">
                    <div class="box flex-center">
                        <efly-button-group>
                            <efly-button size="mini" class="button-xs"  :class="{'btn-primary':status.groupByDate === 'day'}" @click="selectType('day')">按日期</efly-button>
                            <efly-button size="mini" class="button-xs" :class="{'btn-primary':status.groupByDate === 'month'}" @click="selectType('month')">按月份</efly-button>
                        </efly-button-group>
                    </div>
                </div>
           </div>
       </div>
    </div>
</template>



<script>
    import TimeSearch from './time-search';
    export default TimeSearch;
</script>

<style lang="scss" scoped>
.button-xs {
    min-width: 65px !important;
}
</style>
