<template>
    <article v-if="allLabels && allLabels.length > 0" class="search-tag search-label">
        <!-- <section :style="{'text-align': direction}" class="search-tag-title">
            {{title}}
        </section> -->
        <header class="history-search-title">
            <span>{{title}}</span>
            <img v-show="showDelete" src="../../images/sousuo/recicle.png" alt="删除">
        </header>

        <div class="search-tag-item" 
            @click="hotLabel(item.resourceType, item.structureId, item.resourceUrl, item.labelName, item)"
            v-for="(item, index) in allLabels" :key="index" >
            <span class="item-name">{{item.doctorName}}</span>
        </div>
    </article>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  name: 'YqyHotLabel',
  props: {
    allLabels: {
        type: Array
    },
    direction: {
        type: String,
        default: 'left'
    },
    title: {
        type: String,
        default: '历史搜索'
    },
    hasBanner: {
        type: Boolean,
        default: false
    },
    hasInfo: {
        type: Boolean,
        default: false
    },
    showDelete: {
        type: Boolean,
        default: true
    }
  },
  data () {
    return {
    }
  },
  mounted(){
      
  },
  methods: {
      ...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
            })
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.search-tag {
    padding: 0 px2rem(15px) 0;
}
.search-label {
    width: 100%;
    background-color: #fff;
    margin-bottom: px2rem(6px);
}
.search-tag-title {
    font-size: px2rem(12px);
    font-weight: bold;
}
.search-tag-item {
    display: inline-flex;
    height: px2rem(30px);
    margin: px2rem(0px) px2rem(15px) 0 0;
    text-align: center;
    align-items: center;
    .item-name {
        padding: px2rem(6px) px2rem(15px) px2rem(8px);
        border-radius: px2rem(15px);
        background-color: #F8F8F8;
        color: #999;
        font-size: px2rem(13px);
    }
}
.history-search-title {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    span {
        // padding: px2rem(4px) px2rem(4px);
        font-size: px2rem(12px);
        color: 6;
    }
    img {
        width: px2rem(20px);
        height: px2rem(20px);
        padding: px2rem(4px);
    }
}

</style>
