<template>
<article v-if="allLabels && allLabels.length > 0" class="history-labels">
    <section class="history-labels-title">
        <span>{{title}}</span>
    </section>

    <!-- <section class="history-labels-item" @click="hotLabel(item.resourceType, item.structureId, item.resourceUrl, item.labelName, item)" v-for="(item, index) in allLabels" :key="index"> -->
    <section class="history-labels-item"
        v-if="index < 15"
        @click="gotoPage(item)"
        v-for="(item, index) in allLabels" :key="index">
        <span class="history-labels-item-name">{{item.keyword}}</span>
    </section>
</article>
</template>

<script>
import {
    mapMutations
} from 'vuex'
export default {
    name: 'HotLabels',
    props: {
        title: {
            type: String,
            default: '热门搜索'
        }
    },
    data() {
        return {
            allLabels: []
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        gotoPage(itemData){
            console.log('itemData', itemData)
            // 如果没有跳转信息，则直接到搜索结果页面
            if(!itemData.appModuleInfo 
                || !(itemData.appModuleInfo.code === 'M001' 
                || itemData.appModuleInfo.code === 'M002' 
                || itemData.appModuleInfo.code === 'M003'
                || itemData.appModuleInfo.code === 'M100'
                || itemData.appModuleInfo.code === 'M200'
                || itemData.appModuleInfo.code === 'M300'
                || itemData.appModuleInfo.code === 'M400'
                || itemData.appModuleInfo.code === 'M500'
                )){
                console.log('不支持的中转。。。')
                this.searchAction(itemData.keyword)
                return
            }
            // if(!itemData.appModuleInfo || (itemData.appModuleInfo.code === 'M100' )){
            //     this.searchAction(itemData.keyword)
            //     return
            // }
            let paramList = this.setEventByModuleCode(itemData);
            if(paramList !== 'NO') {
                rocNative.dispatchEventByModuleCode({
                    modeCode: itemData.appModuleInfo.code,
                    jsonString: paramList
                })
            }
            this.pageBurialPoin({
                menuLevel: 1,
                menuCode: 'm_home',
                functionCode: 'f_module',
                actionCode: 'c_module',
                labelId: itemData.id,
                labelValue: itemData.keyword,
            })
        },
        searchAction(searchText) {
            if(this.showDelete) return
            this.$router.push({
                path: '/result',
                query: {
                    searchText: searchText
                }
            })
        },

        //   ...mapMutations([
        //     'SET_CLEAR_VUEX'
        //   ]),
        hotLabel(val, id, url, name, item) {
            this.$emit('hotLabel', id, name)
            //讲师集
            switch (val) {
                case 1:
                    this.SET_CLEAR_VUEX()
                    this.jumpToCourse(item.resourceId);
                    break;
                case 2:
                    this.SET_CLEAR_VUEX()
                    //window.location.href=url;
                    this.jumpToCartoon(url, name)
                    break;
                case 3:
                    this.SET_CLEAR_VUEX()
                    this.$router.push({
                        path: '/lecturer',
                        query: {
                            id: id
                        }
                    })
                    break;
                default:
                    break;
            }
        },
        dispatchEventByModuleCode(itemData) {
            let modeCode = itemData.appModuleInfo.code
            let paramList = itemData.appModuleInfo.paramList ? itemData.appModuleInfo.paramList : ''
            if (modeCode === 'M001' || modeCode === 'M002' || modeCode === 'M003') {
                paramList = ''
            } else if (modeCode === 'M100' || modeCode === 'M300') {
                let urlPara = this.getUrlPara(paramList)
                paramList[0].value += urlPara
            }
            if (typeof paramList === 'string' && !paramList) {
                paramList = []
            }
            rocNative.dispatchEventByModuleCode({
                modeCode: itemData.appModuleInfo.code,
                jsonString: paramList
            })
        },

        //跳到相应的课程
        jumpToCourse(id) {
            let itemData = {
                "title": "测试课介绍页",
                "imageUrl": "https://test-file.yunqueyi.com/image/jpeg/2018/09/18/20180918103322254-f8bba621.jpg",
                "appModuleInfo": {
                    "code": "M200",
                    "type": 4,
                    "name": "课程介绍页",
                    "paramFlag": 1,
                    "paramList": [{
                            "key": "className",
                            "value": "com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
                            "type": 4,
                            "seqNo": 1
                        },
                        {
                            "key": "courseId",
                            "value": `${id}`,
                            "type": 1,
                            "seqNo": 2
                        }
                    ]
                }
            };
            this.dispatchEventByModuleCode(itemData);
        },
        // 跳到漫画详情页
        jumpToCartoon(url, name) {
            let itemData = {
                "title": "测试课介绍页",
                "imageUrl": "https://test-file.yunqueyi.com/image/jpeg/2018/09/18/20180918103322254-f8bba621.jpg",
                "appModuleInfo": {
                    "code": "M300",
                    "type": 4,
                    "name": "课程介绍页",
                    "paramFlag": 1,
                    "paramList": [{
                        "key": "pageUrl",
                        "value": url,
                        "type": 4,
                        "seqNo": 1
                    }, {
                        "key": "showTitle",
                        "value": true,
                        "type": 1,
                        "seqNo": 2
                    }, {
                        "key": "title",
                        "value": name,
                        "type": 1,
                        "seqNo": 2
                    }]
                }
            };
            rocNative.dispatchEventByModuleCode({
                modeCode: itemData.appModuleInfo.code,
                jsonString: itemData.appModuleInfo.paramList
            })
        },
        // 获取历史搜索
        getData() {
            let _this = this,
                para = {
                    type: 2,
                    token: _this.token,
                    setEntry: 'headers'
                }
            let url = '/contents/searchKeyword/listKeywords'
            this.GET(url, para).then(res => {
                if (res.code == '000000') {
                    this.allLabels = res.data
                    console.log(res)
                }
            })
        }

    }
}
</script>

<style lang="scss" scoped>
@import '../../style/mixin.scss';

.history-labels {
    width: 100%;
    padding: 0 px2rem(15px) 0;
    margin-bottom: px2rem(6px);
    background-color: #fff;

    &-title {
        display: inline-flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;

        span {
            font-size: px2rem(12px);
            color: #666;
        }

        img {
            width: px2rem(20px);
            height: px2rem(20px);
            padding: px2rem(4px);
        }
    }

    &-item {
        display: inline-flex;
        height: px2rem(30px);
        margin: px2rem(0px) px2rem(15px) 0 0;
        text-align: center;
        align-items: center;

        &-name {
            padding: px2rem(6px) px2rem(15px) px2rem(8px);
            border-radius: px2rem(15px);
            background-color: #F8F8F8;
            color: #999;
            font-size: px2rem(13px);
        }
    }
}
</style>
