<template>
    <div class="date-option-content">
        <li class="condition-item">
            <span class="condition-item-text spe-item-text">{{$t('asisTab.date')}}</span>
            <div class="condition-item-option">
                <div class="time-wrapper">
                    <el-select v-model="ReportVal" :placeholder="$t('pholder.select')">
                        <el-option
                        v-for="item in analyasisTime"
                        :key="item.value"
                        :label="i18nFormatter(item.label)"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </li>
        <li class="condition-item analysis-date-condition">
            <div class="condition-item-option">
                <el-date-picker class="date-input analysis-date-input" v-show="ReportVal == 'day'" v-model="dayTime" value-format="yyyy-MM-dd" align="right" type="date" size="mini" :placeholder="$t('pholder.date')" :picker-options="pickerOptions1">
                </el-date-picker>
                <el-date-picker class="date-input analysis-date-input date-week-box" v-show="ReportVal == 'week'" v-model="weekTime" align="right" type="week" :format="datePickerFormatter('week')" size="mini" :placeholder="$t('pholder.week')" :picker-options="weekPickerOpt"> 
                </el-date-picker>
                <el-date-picker class="date-input analysis-date-input date-month-box" v-show="ReportVal == 'month'" v-model="monthTime" align="right" type="month" :format="datePickerFormatter('month')" size="mini" :placeholder="$t('pholder.month')" :picker-options="pickerOptions1">
                </el-date-picker>
                <el-date-picker class="date-input analysis-date-input" v-show="ReportVal == 'year'" v-model="yearTime" align="right" type="year" :format="datePickerFormatter('year')" size="mini" :placeholder="$t('pholder.year')" :picker-options="pickerOptions1">
                </el-date-picker>
                <el-date-picker
                    class="date-input analysis-date-input times-box"
                    v-model="customTime"
                    value-format="yyyy-MM-dd"
                    align="right"
                    type="daterange"
                    size="mini"
                    :picker-options="pickerOptions1"
                    range-separator="-"
                    v-show="ReportVal == 'custom'"
                    :start-placeholder="$t('table.startTime')"
                    :end-placeholder="$t('table.endTime')">
                </el-date-picker>
            </div>
        </li>
        <li class="condition-item" v-if="false">
            <span class="condition-item-text">{{$t('asisTab.index')}}</span>
            <div class="condition-item-option">
                <el-select v-model="kpiVal" :placeholder="$t('pholder.kpi')" class="indicator-sel-box">
                    <el-option v-for="kpiItem in kpiOpt" :key="kpiItem.value" :label="kpiItem.label" :value="kpiItem.value"></el-option> 
                </el-select>
            </div>
        </li>
    </div>
</template>
<script>
export default {
    name: 'date option content',
    data() {
        return {
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            ReportVal: 'day',
            dayTime: '',
            weekTime: '',
            monthTime: '',
            yearTime: '',
            customTime: '',
        }
    },
    created() {

    },
    mounted() {
        this.dayTime = this.dayTime ? this.dayTime : dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');
        this.customTime = [this.dayReduce(new Date(), 15), dateUnit.dateFormat(new Date(), 'yyyy-MM-dd')];
        this.weekTime = this.weekTime ? this.weekTime : new Date();
        this.monthTime = this.monthTime ? this.monthTime : new Date();
        this.yearTime = this.yearTime ? this.yearTime : new Date();
    },
    methods: {
        
    }
}
</script>