<template>
    <div>
        <h3 class="fbg-title">基础用法</h3>
        <demo :code="baseCalendarStr">
            <el-calendar style="width: 300px" show-bakc-today-btn @onChoose="handleChoose" @onSelected="handleSelected" @onCancel="handleCancel" v-model="selected" @change="handleChange" />
        </demo>
        <h3 class="fbg-title">多选用法</h3>
        <demo :code="multipleCalendarStr">
            <el-calendar style="width: 300px" multiple v-model="multipleSelected" @change="handleChange" />
        </demo>
        <h3 class="fbg-title">双击选中</h3>
        <demo :code="dblclickCalendarStr">
            <el-calendar style="width: 300px" multiple v-model="dblclickSelected" is-dblclick />
        </demo>
        <h3 class="fbg-title">选中样式设置</h3>
        <demo :code="selectedItemClassCalendarStr">
            <el-calendar style="width: 300px" selected-item-class="selected-background" v-model="selectedItemClassSelected" />
        </demo>
        <h3 class="fbg-title">禁止选中</h3>
        <demo :code="disabledCalendarStr">
            <el-calendar style="width: 300px" disabled />
        </demo>
        <h3 class="fbg-title">按条件禁止选中项</h3>
        <demo :code="optionDisabledCalendarStr">
            <el-calendar style="width: 300px" :picker-options="pickerOptions" multiple v-model="optionDisabledSelected" />
        </demo>
        <h3 class="fbg-title">默认插槽</h3>
        <demo :code="slotCalendarStr">
            <el-calendar style="width: 300px" multiple v-model="slotSelected">
                <div slot-scope="scope">
                    {{scope.data.day}}天
                </div>
            </el-calendar>
        </demo>
        <h3 class="fbg-title">选中插槽</h3>
        <demo :code="selectedSlotCalendarStr">
            <el-calendar style="width: 300px" multiple v-model="selectedSlotSelected">
                <div slot="checked" slot-scope="scope" v-show="scope.checked">
                   已选
                </div>
            </el-calendar>
        </demo>
        <h3 class="fbg-title">属性</h3>
        <table class="fbg-table">
            <thead>
                <tr>
                <th>参数</th>
                <th>说明</th>
                <th>类型</th>
                <th>可选值</th>
                <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>value</td>
                    <td>选中的值</td>
                    <td>string||array</td>
                    <td>--</td>
                    <td>--</td>
                </tr>
                <tr>
                    <td>showBakcTodayBtn</td>
                    <td>是否显示返回今天按钮</td>
                    <td>Boolean</td>
                    <td>true｜false</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>showSwitchYearBtn</td>
                    <td>是否显示切换年份按钮</td>
                    <td>Boolean</td>
                    <td>true｜false</td>
                    <td>true</td>
                </tr>
                <tr>
                    <td>showSwitchMonthBtn</td>
                    <td>是否显示月份切换按钮</td>
                    <td>Boolean</td>
                    <td>true｜false</td>
                    <td>true</td>
                </tr>
                <tr>
                    <td>bakcTodayText</td>
                    <td>返回今天按钮文本内容设置</td>
                    <td>String</td>
                    <td>--</td>
                    <td>返回今天</td>
                </tr>
                <tr>
                    <td>isDblclick</td>
                    <td>是否开启双击选中</td>
                    <td>Boolean</td>
                    <td>true｜false</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>selectedItemClass</td>
                    <td>选中的单元格样式</td>
                    <td>String</td>
                    <td>--</td>
                    <td>--</td>
                </tr>
                <tr>
                    <td>multiple</td>
                    <td>是否多选</td>
                    <td>Boolean</td>
                    <td>true｜false</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>valueFormat</td>
                    <td>绑定值的格式化</td>
                    <td>String</td>
                    <td>--</td>
                    <td>yyyy-MM-dd</td>
                </tr>
                <tr>
                    <td>pickerOptions</td>
                    <td>配置</td>
                    <td>Object</td>
                    <td>--</td>
                    <td>--</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用</td>
                    <td>Boolean</td>
                    <td>true｜false</td>
                    <td>false</td>
                </tr>
            </tbody>
        </table>
        <h3 class="fbg-title">事件</h3>
        <table class="fbg-table">
            <thead>
                <tr>
                <th>参数</th>
                <th>说明</th>
                <th>回调参数</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>changeMonth</td>
                    <td>切换月份事件</td>
                    <td>参数1: date</td>
                </tr>
                <tr>
                    <td>changeYear</td>
                    <td>切换年份事件</td>
                    <td>参数1: date</td>
                </tr>
                <tr>
                    <td>onClick</td>
                    <td>单元格点击事件</td>
                    <td>参数1: data</td>
                </tr>
                <tr>
                    <td>onChoose</td>
                    <td>单元格选择事件</td>
                    <td>参数1: date</td>
                </tr>
                <tr>
                    <td>onSelected</td>
                    <td>选中事件</td>
                    <td>参数1: date</td>
                </tr>
                <tr>
                    <td>onCancel</td>
                    <td>取消事件</td>
                    <td>参数1: date</td>
                </tr>
                <tr>
                    <td>change</td>
                    <td>状态变更事件</td>
                    <td>参数1: value</td>
                </tr>
            </tbody>
        </table>
        <h3 class="fbg-title">slot 插槽</h3>
        <table class="fbg-table">
            <thead>
                <tr>
                <th>名称</th>
                <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                <td>default</td>
                <td>单元格插槽</td>
                </tr>
                <tr>
                <td>checked</td>
                <td>选中状态插槽</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
    data() {
        return {
            pickerOptions: {
                disabledDate(date) {
                    const nowTime = new Date().getTime();
                    return (date.getTime() > nowTime) && (date.getTime() <  nowTime + 3600*24*7*1000);
                }
            },
            selected: '',
            slotSelected: [],
            multipleSelected: [],
            dblclickSelected: [],
            disabledSelected: [],
            optionDisabledSelected: [],
            selectedSlotSelected: [],
            selectedItemClassSelected: '',
            baseCalendarStr: `
            <el-calendar style="width: 300px" show-bakc-today-btn @onChoose="handleChoose"  @onSelected="handleSelected" @onCancel="handleCancel" :show-switch-month-btn="false"  v-model="selected" @change="handleChange" />
            <script>
                export default {
                    data() {
                        return {
                            selected: ''
                        };
                    },
                    methods: {
                        // 选中内容发生改变
                        handleChange(value) {
                            console.log(value)
                        },
                        // 选择事件
                        handleChoose(date) {
                            console.log(date);
                        },
                        // 选中事件
                        handleSelected(date) {
                            console.log(date);
                        },
                        // 取消选中事件
                        handleCancel(date) {
                            console.log(date);
                        }
                    }
                }
            <\/script>
            `,
            multipleCalendarStr: `
            <el-calendar style="width: 300px" v-model="selected" multiple/>
            <script>
                export default {
                    data() {
                        return {
                            selected: []
                        };
                    }
                }
            <\/script>
            `,
            dblclickCalendarStr: `
            <el-calendar style="width: 300px" v-model="selected" is-dblclick multiple/>
            <script>
                export default {
                    data() {
                        return {
                            selected: []
                        };
                    }
                }
            <\/script>
            `,
            selectedItemClassCalendarStr: `
            <el-calendar style="width: 300px" v-model="selected" selected-item-class="selected-background"/>
            <script>
                export default {
                    data() {
                        return {
                            selected: ''
                        };
                    }
                }
            <\/script>
            <style lang="scss">
            .selected-background {
                background-color: red;
            }
            </style>
            `,
            disabledCalendarStr: `
            <el-calendar style="width: 300px" v-model="selected" disabled/>
            <script>
                export default {
                    data() {
                        return {
                            selected: ''
                        };
                    }
                }
            <\/script>
            `,
            optionDisabledCalendarStr: `
            <el-calendar style="width: 300px" multiple :picker-options="pickerOptions" v-model="selected"/>
            <script>
                export default {
                    data() {
                        return {
                            pickerOptions: {
                                disabledDate(date) {
                                    // 禁用后7天
                                    const nowTime = new Date().getTime();
                                    return (date.getTime() > nowTime) && (date.getTime() <  nowTime + 3600*24*7*1000);
                                }
                            }
                            selected: []
                        };
                    }
                }
            <\/script>
            `,
            slotCalendarStr: `
            <el-calendar style="width: 300px" multiple v-model="selected">
                <div slot-scope="scope">
                    {{scope.data.day}}天
                </div>
            </el-calendar>
            <script>
                export default {
                    data() {
                        return {
                            selected: []
                        };
                    }
                }
            <\/script>
            `,
            selectedSlotCalendarStr: `
            <el-calendar style="width: 300px" multiple v-model="selected">
                <div slot="checked" slot-scope="scope" v-show="scope.checked">已选</div>
            </el-calendar>
            <script>
                export default {
                    data() {
                        return {
                            selected: []
                        };
                    }
                }
            <\/script>
            `
        };
    },
    mounted() {
        hljs.highlightCode();
    },
    methods: {
        handleChange(value) {
            console.log(value, 99999)
        },
        handleChoose(date) {
            console.log(date, 8000000);
        },
        handleSelected(date) {
            console.log(date, 8000000, 'selected');
        },
        handleCancel(date) {
            console.log(date, 8000000, 'cancel');
        }
    }
}
</script>
<style lang="scss">
.selected-background {
    background-color: red;
}
</style>