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

<template>
    <div class="highLight" @click="isActiveColor = false; showReasonList = false">
        <h2>你确认要高亮选择的主题么？</h2>
        <div class="form">
            <table>
                <tr>
                    <td><span>高亮：</span> </td>
                    <td  class="font-opt">
                        <div class="font-opt">
                            <span class="color icon-down" @click.stop="showColorPicker()">
                                <em class="checked" :style="`background-color:${colorList[font.color]}`"></em> 
                                <div class="color-picker" :class="{'show':isActiveColor}">
                                    <p v-for="(item, index) in colorList"
                                        :key="index"
                                        @click.stop="selectColor(index)">
                                        <em :style="`background-color:${item}`"></em>
                                    </p>
                                            
                                </div>
                            </span>
                            <span>
                                <input type="checkbox" id="bold" v-model="font.bold">
                                <!-- <input type="radio" name="style" value="1" id="bold" v-model="font.style"> -->
                                
                                <label class="bold" for="bold">B</label>
                            </span>
                            <span>
                                <input type="checkbox" id="ita" v-model="font.ita">
                                <!-- <input type="radio" name="style" value="2" id="ita" v-model="font.style"> -->
                                
                                <label class="ita" for="ita">I</label>
                            </span>
                            <span>
                                <input type="checkbox" id="ul" v-model="font.ul">
                                <!-- <input type="radio" name="style" value="3" id="ul" v-model="font.style"> -->
                                
                                <label class="ul" for="ul">U</label>
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td><span>有效期：</span> </td>
                    <td>
                        <div class="select icon-down" @click.stop="showTimeList = !showTimeList;isActiveColor = 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>
                        
                    </td>
                </tr>
                <tr>
                    <td><span>操作原因：</span> </td>
                    <td>
                        <div class="select icon-down" @click.stop="showReasonList = !showReasonList;isActiveColor = 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>
                    </td>
                </tr>
            </table>
            <textarea v-model="text"></textarea>
            <button class="submit" @click="submit()">确定</button>
            <mt-datetime-picker
                v-model="form.timestamp" 
                type="date" 
                ref="picker"
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日" 
                @confirm="confirmDate(form.timestamp)">
            </mt-datetime-picker> 
      </div>
  </div>
</template>

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

