<template>
    <div class="ht-base-icon-api-demo">
        <div  class="icon_list_header" >
            <Input v-model="searchText" placeholder="输入英文关键词搜索，比如share" />
            <div class="tip-message">点击下面的图标按钮可以直接复制组件代码</div>
        </div>
        <ul class="icon_lists" v-if="flag">

            <li class="dib" v-for="item in iconData" @click="copy"
                :data-clipboard-text="text(item)">
                <ht-base-icon class="icon" :type="item.type" :size="item.size"></ht-base-icon>
                <div class="name">
                    {{item.type}}
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    import Clipboard from 'clipboard';
    export default {
        name: 'HtBaseIconApiDemo',
        data() {
            return {
                flag: true,
                searchText: '',
                fullData: [],
                iconData: [
                    {
                        type:"LiRa_search",
                        size:"30"
                    },
                    {
                        type:"LiRa_shopping",
                        size:"30"
                    },
                    {
                        type:"LiRa_plus",
                        size:"30"
                    },
                    {
                        type:"LiRa_reduce",
                        size:"30"
                    },
                    {
                        type:"LiRa_share",
                        size:"30"
                    },
                    {
                        type:"LiRa_edit1",
                        size:"30"
                    },
                    {
                        type:"LiRa_file",
                        size:"30"
                    },
                    {
                        type:"LiRa_setup",
                        size:"30"
                    },
                    {
                        type:"LiRa_home",
                        size:"30"
                    },
                    {
                        type:"LiRa_user",
                        size:"30"
                    },
                    {
                        type:"LiRa_download",
                        size:"30"
                    },
                    {
                        type:"LiRa_picture",
                        size:"30"
                    },
                    {
                        type:"LiRa_data",
                        size:"30"
                    },
                    {
                        type:"LiRa_no-preview",
                        size:"30"
                    },
                    {
                        type:"LiRa_preview",
                        size:"30"
                    },
                    {
                        type:"LiRa_cancellation",
                        size:"30"
                    },
                    {
                        type:"LiRa_information",
                        size:"30"
                    },
                    {
                        type:"LiRa_service",
                        size:"30"
                    },
                    {
                        type:"LiRa_region",
                        size:"30"
                    },
                    {
                        type:"LiRa_telephone",
                        size:"30"
                    },
                    {
                        type:"LiRa_notice",
                        size:"30"
                    },
                    {
                        type:"LiRa_column",
                        size:"30"
                    },
                    {
                        type:"LiRa_dau",
                        size:"30"
                    },
                    {
                        type:"LiRa_dad",
                        size:"30"
                    },
                    {
                        type:"LiRa_dal",
                        size:"30"
                    },
                    {
                        type:"LiRa_dar",
                        size:"30"
                    },
                    {
                        type:"LiRa_like",
                        size:"30"
                    },
                    {
                        type:"LiRa_notes",
                        size:"30"
                    },
                    {
                        type:"LiRa_clip",
                        size:"30"
                    },
                    {
                        type:"LiRa_security",
                        size:"30"
                    },
                    {
                        type:"LiRa_cloud-upload",
                        size:"30"
                    },
                    {
                        type:"LiRa_cloud-download",
                        size:"30"
                    },
                    {
                        type:"LiRa_location",
                        size:"30"
                    },
                    {
                        type:"LiRa_delete",
                        size:"30"
                    },
                    {
                        type:"LiRa_dialogue",
                        size:"30"
                    },
                    {
                        type:"LiRa_cross",
                        size:"30"
                    },
                    {
                        type:"LiRa_cross1",
                        size:"30"
                    },
                    {
                        type:"LiRa_fabulous",
                        size:"30"
                    },
                    {
                        type:"LiRa_fabulous1",
                        size:"30"
                    },
                    {
                        type:"LiRa_select-files",
                        size:"30"
                    },
                    {
                        type:"LiRa_remind",
                        size:"30"
                    },
                    {
                        type:"LiRa_help",
                        size:"30"
                    },
                    {
                        type:"LiRa_also",
                        size:"30"
                    },
                    {
                        type:"LiRa_left",
                        size:"30"
                    },
                    {
                        type:"LiRa_right",
                        size:"30"
                    },
                    {
                        type:"LiRa_up",
                        size:"30"
                    },
                    {
                        type:"LiRa_down",
                        size:"30"
                    },
                    {
                        type:"LiRa_star",
                        size:"30"
                    },
                    {
                        type:"LiRa_edit",
                        size:"30"
                    },
                    {
                        type:"LiRa_check",
                        size:"30"
                    },
                    {
                        type:"LiRa_comment",
                        size:"30"
                    },
                    {
                        type:"LiRa_calendar",
                        size:"30"
                    },
                    {
                        type:"LiRa_screen",
                        size:"30"
                    },
                    {
                        type:"LiRa_personal",
                        size:"30"
                    },
                    {
                        type:"LiRa_apply",
                        size:"30"
                    },
                    {
                        type:"LiRa_browser",
                        size:"30"
                    },
                    {
                        type:"LiRa_fill",
                        size:"30"
                    },
                    {
                        type:"LiRa_words",
                        size:"30"
                    },
                    {
                        type:"LiRa_order",
                        size:"30"
                    },
                    {
                        type:"LiRa_refresh",
                        size:"30"
                    },
                    {
                        type:"LiRa_enter",
                        size:"30"
                    },
                    {
                        type:"LiRa_list",
                        size:"30"
                    },
                    {
                        type:"LiRa_shop",
                        size:"30"
                    },
                    {
                        type:"LiRa_scan",
                        size:"30"
                    },
                    {
                        type:"LiRa_feedback",
                        size:"30"
                    },
                    {
                        type:"LiRa_camera",
                        size:"30"
                    },
                    {
                        type:"LiRa_approval",
                        size:"30"
                    },
                    {
                        type:"LiRa_time",
                        size:"30"
                    },
                    {
                        type:"LiRa_forward",
                        size:"30"
                    },
                    {
                        type:"LiRa_bad",
                        size:"30"
                    },
                    {
                        type:"LiRa_bad1",
                        size:"30"
                    },
                    {
                        type:"LiRa_form",
                        size:"30"
                    },
                    {
                        type:"LiRa_more1",
                        size:"30"
                    },
                    {
                        type:"LiRa_more",
                        size:"30"
                    },
                    {
                        type:"LiRa_enlarge",
                        size:"30"
                    },
                    {
                        type:"LiRa_narrow",
                        size:"30"
                    },
                    {
                        type:"LiRa_lock",
                        size:"30"
                    },
                    {
                        type:"LiRa_phone",
                        size:"30"
                    },
                    {
                        type:"LiRa_loop",
                        size:"30"
                    },
                    {
                        type:"LiRa_top",
                        size:"30"
                    },
                    {
                        type:"LiRa_bottom",
                        size:"30"
                    },
                    {
                        type:"LiRa_last-page",
                        size:"30"
                    },
                    {
                        type:"LiRa_next-page",
                        size:"30"
                    },
                    {
                        type:"LiRa_work",
                        size:"30"
                    },
                    {
                        type:"LiRa_copy",
                        size:"30"
                    },
                    {
                        type:"LiRa_release",
                        size:"30"
                    },
                    {
                        type:"LiRa_help1",
                        size:"30"
                    },
                    {
                        type:"LiRa_also1",
                        size:"30"
                    },
                    {
                        type:"LiRa_cross2",
                        size:"30"
                    },
                    {
                        type:"LiRa_notes1",
                        size:"30"
                    },
                    {
                        type:"LiRa_check1",
                        size:"30"
                    },
                    {
                        type:"LiRa_right02",
                        size:"30"
                    },
                    {
                        type:"LiRa_down02",
                        size:"30"
                    },
                    {
                        type:"LiRa_check2",
                        size:"30"
                    },
                    {
                        type:"LiRa_add",
                        size:"30"
                    },
                    {
                        type:"LiRa_Load",
                        size:"30"
                    },
                    {
                        type:"LiRa_Load1",
                        size:"30"
                    },
                    {
                        type:"LiRa_like1",
                        size:"30"
                    },
                    {
                        type:"LiRa_user1",
                        size:"30"
                    },
                    {
                        type:"LiRa_copyright",
                        size:"30"
                    },
                    {
                        type:"LiRa_video",
                        size:"30"
                    },
                    {
                        type:"LiRa_key",
                        size:"30"
                    },
                    {
                        type:"LiRa_twitter",
                        size:"30"
                    },
                    {
                        type:"LiRa_weibo",
                        size:"30"
                    },
                    {
                        type:"LiRa_qq",
                        size:"30"
                    },
                    {
                        type:"LiRa_wechat",
                        size:"30"
                    },
                    {
                        type:"LiRa_home1",
                        size:"30"
                    },
                    {
                        type:"LiRa_shopping1",
                        size:"30"
                    },
                    {
                        type:"LiRa_list1",
                        size:"30"
                    },
                    {
                        type:"LiRa_screen1",
                        size:"30"
                    },
                    {
                        type:"LiRa_apple",
                        size:"30"
                    },
                    {
                        type:"LiRa_android",
                        size:"30"
                    },
                    {
                        type:"LiRa_windows",
                        size:"30"
                    },
                    {
                        type:"LiRa_expand1",
                        size:"30"
                    },
                    {
                        type:"LiRa_collapse2",
                        size:"30"
                    },
                    {
                        type:"LiRa_upload",
                        size:"30"
                    },
                    {
                        type:"LiRa_pdf",
                        size:"30"
                    },
                    {
                        type:"LiRa_xlsx",
                        size:"30"
                    },
                    {
                        type:"LiRa_word",
                        size:"30"
                    },
                    {
                        type:"LiRa_expand",
                        size:"30"
                    },
                    {
                        type:"LiRa_collapse",
                        size:"30"
                    },
                    {
                        type:"LiRa_refresh2",
                        size:"30"
                    },
                    {
                        type:"LiRa_reduce1",
                        size:"30"
                    },
                    {
                        type:"LiRa_smile",
                        size:"30"
                    },
                    {
                        type:"LiRa_misery",
                        size:"30"
                    },
                    {
                        type:"LiRa_milepost",
                        size:"30"
                    },
                    {
                        type:"LiRa_p0",
                        size:"30"
                    },
                    {
                        type:"LiRa_loading",
                        size:"30"
                    },
                    {
                        type:"LiRa_circular",
                        size:"30"
                    }
                ]
            }
        },
        computed: {
          text () {
              return (item) => {
                  return `<ht-base-icon type='${item.type}' />`
              }
          }
        },
        watch: {
          searchText () {
              let iconData = this.search();
              this.iconData = [];
              this.flag = false;
              this.$nextTick(() => {
                  this.iconData = iconData;
                  this.flag = true;
              });
          }
        },
        mounted () {
            this.fullData = this.iconData;
        },
        methods: {
            copy() {
                let that = this;
                let clipboard = new Clipboard('.dib');
                clipboard.on('success', e => {
                    that.$HtBaseMessage.success('组件代码已复制到剪贴板');
                    that.$HtBaseMessage.config({top: 100});
                    // 释放内存
                    clipboard.destroy();
                })
            },
            search() {
                let searchText = this.searchText;
                let searchData = [];
                this.fullData.map((item) => {
                    let name = item.type;
                    if(name.indexOf(searchText) >= 0) {
                        searchData.push(item);
                    }
                })
                return searchData;
            }
        }
    }
</script>
<style lang="less">
    .ht-base-icon-api-demo {
        .icon_list_header {
            width: 300px;
            margin: 10px auto;
            text-align: center;
            .tip-message {
                margin-top: 20px;
            }
        }
        .icon_lists {
            width: 100% !important;
            overflow: hidden;
            *zoom: 1;
            li {
                width: 20%;
                text-align: center;
                list-style: none !important;
                cursor: pointer;
                float: left;
                .name {
                    color: #666;
                }
            }
            .icon {
                display: block;
                height: 60px;
                line-height: 60px;
                margin: 10px auto;
                color: #333;
            }
        }
    }
</style>

