<style lang="sass">
    @import './sass/top.scss'
</style>

<template>
    <div class="top" @click="showTimeList = false; showReasonList = false; showLevelList=false">
        <h2 v-if="type=='top'">您确认要置顶选择的主题么？</h2>
        <h2 v-if="type=='open'">您确认要打开选择的主题么？</h2>
        <h2 v-if="type=='close'">您确认要关闭选择的主题么？</h2>
        
        <div class="form">
            <div class="row">
                <span class="key">有效期：</span>
                <div class="select icon-down" @click.stop="showTimeList = !showTimeList;showReasonList = false; showLevelList=false">
                    {{isOpt ? `${formatDate.year}-${formatDate.month}-${formatDate.date}` : timeMap[form.time] }}
                    <div class="reason-list" v-show="showTimeList">
                        <p v-for="(item,key) in timeMap"
                            :key="key"
                            @click.stop="selectTime(key)">
                            {{item}} 
                        </p>
                    </div>
                </div>
            </div>
            <div class="row" v-if="type=='top'">
                <span class="key">置顶等级：</span>
                <div class="select icon-down" @click.stop="showLevelList = !showLevelList;showTimeList=false;showReasonList=false">
                    <p class="lable">{{topLevelList[topLevel]||'无'}}</p>
                    <!-- <select v-model="topLevel">
                        <option v-for="(item,index) in topLevelList" 
                            :key="index" 
                            :value="index">
                            {{item}}
                        </option>
                    </select> -->
                    <div class="reason-list" v-show="showLevelList">
                        <div class="list-wrap">
                            <p v-for="(item,index) in topLevelList"
                                :key="index"
                                @click.stop="selectLevel(index)">
                                {{item}}
                            </p>
                        </div>
                        
                    </div>
                    
                </div>
            </div>
            <div class="row">
                <span class="key">操作原因：</span>
                <div class="select icon-down"  @click.stop="showReasonList = !showReasonList;showTimeList=false;showLevelList=false">
                    <p class="label">{{reason||'自定义'}}</p>
                    <!-- <select v-model="reason">
                        <option v-for="(item,index) in reasonMap" 
                            :key="index" 
                            :value="item">
                            {{item}}
                        </option>
                        <option value="">自定义</option>
                    </select> -->
                    <div class="reason-list" v-show="showReasonList">
                        <div class="list-wrap">
                            <p v-for="(item,index) in reasonMap"
                            :key="index"
                            @click.stop="selectReason(item)">
                            {{item}}
                        </p>
                        </div>
                        
                    </div>
                </div>
            </div>

            <textarea v-model="text"></textarea>
            <button class="submit" @click="submit()">确定</button>
        </div>
        <mt-datetime-picker
            v-model="form.timestamp"
            @confirm="confirmDate(form.timestamp)"
            type="date" 
            ref="picker"
            year-format="{value} 年"
            month-format="{value} 月"
            date-format="{value} 日" >
        </mt-datetime-picker> 
    </div>
    
</template>

<script>
    import top from './js/top.js'
    export default top
</script>

