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

<template>
    <div class="report">
        <h2>
            您确认要警告这位用户？
        </h2>

        <div class="form">
            <div class="row">
                <span class="radio">
                    <input type="radio" name="report" value="1" id="yes" v-model="radio">
                    <label for="yes">
                        <em></em> 警告
                    </label>
                </span>
                <span class="radio">
                    <input type="radio" name="report" value="0" id="no" v-model="radio">
                    <label for="no">
                        <em></em> 解除
                    </label>                    
                </span>                
            </div>
            <div class="text">
                <p class="hl">用户 {{userInfo.author}} 已被警告{{userInfo.warn_count}}次</p>
                <p>3天内累计被警告3次，将被自动禁止发帖3天</p>
            </div>
            <div class="row">
                <span class="key">操作原因：</span>
                <div class="select icon-down" @click.stop="showReasonList = !showReasonList;">
                    <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>
    </div>
</template>

<script>
import report from "./js/report.js";
export default report;
</script>