<template>
  <div class="banner-box">
    <div class="banner space-between">
      <div :class="index+1==list.length ? 'banner-item item-end' : 'banner-item'" 
        v-for="(item, index) in list" 
        @click="goToPage(item)"
        :key="index" >
        <img class="banner-img" :src="item.imageUrl"/>
        <span class="banner-text fs24">
          {{item.name}}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
 import { jumpWebPageUrl } from '@/utils/index'
export default {
  name: 'YqyHomeBanner',
   data(){
    return {
      list:[{
        "imageUrl": require('../../images/change.png'),
        "name": "微专业"
      },{
        "imageUrl": require('../../images/change.png'),
        "name": "名师讲堂"
      },{
        "imageUrl": require('../../images/change.png'),
        "name": "患者教育"
      },{
        "imageUrl": require('../../images/change.png'),
        "name": "专项合作"
      },{
        "imageUrl": require('../../images/change.png'),
        "name": "活动掠影"
      }],
    }
  },
  mounted(){
    this.getData()
  },
  props:{
      userToken:{
        default:'',
        type:String
      }
  },
  methods: {
    goToPage(itemData){
      let paramList = this.setEventByModuleCode(itemData);
      let code = '',categoryId = '',item = {};
    
      if(itemData.appModuleInfo && itemData.appModuleInfo.code == 'M500'){
        //let url = jumpWebPageUrl+'activity?categoryId=1';
        code = 'M300';
        let url = '';
        if(itemData.appModuleInfo.paramList.length>0){
          if(itemData.appModuleInfo.paramList[0].value.indexOf('activity') > -1){
            url = itemData.appModuleInfo.paramList[0].value + '?categoryId='+itemData.appModuleInfo.paramList[1].value+'&userToken='+this.userToken;
          }
          if(itemData.appModuleInfo.paramList[0].value.indexOf('teachers') > -1){
            url = itemData.appModuleInfo.paramList[0].value+'?userToken='+this.userToken;
          }
        }
        item = {
          "name":itemData.name,
          "id":itemData.id,
          "title":"",
          "imageUrl":"",
          "appModuleInfo":{
            "code":code == '' ? itemData.appModuleInfo.code : code,
            "type":4,
            "name":"wwww",
            "paramFlag":1,
            "paramList":[
                {
                    "key":"pageUrl",
                    "value": url,
                    "type":4,
                    "seqNo":1
                },{
                    "key":"showTitle",
                    "value": false,
                    "type":1,
                    "seqNo":2
                },{
                    "key":"title",
                    "value": '',
                    "type":1,
                    "seqNo":3
                }
            ]
          }
        };
      }else{
        item = itemData;
      }

      rocNative.dispatchEventByModuleCode({
          modeCode: item.appModuleInfo.code,
          jsonString: item.appModuleInfo.paramList
      })
     
      this.pageBurialPoin({
        menuLevel:1,
        menuCode:'m_home',
        functionCode:'f_icon',
        actionCode:'c_icon_files',
        labelId:itemData.id,
        labelValue :itemData.name,
      })
    },

    getData(){
      let _this = this, 
      para = {
        category: 1, 
        position:1,
        setEntry: 'headers',
      }
      this.GET('contents/HomeColumn/Information', para).then(res => {
        if(res.code == '000000'){
            
            _this.list = res.data && res.data.iconColumnInformationModels || []
        }
      })
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
// img {
//     @include bis('../../images/evaluatBg.png');
// }
html,body{
  width: px2rem(375px);
  height: px2rem(100%);
  background-color: #F8F8F8;
}
.banner-box{
  position: relative;
  height: px2rem(47px);
  padding:0 px2rem(15px);
}
.banner{
  width: px2rem(345px);
  height: px2rem(74px);
  background-color: #fff;
  position: absolute;
  top:-(px2rem(27px));

  padding: px2rem(15px) px2rem(10px);
  box-shadow: 0 px2rem(1px) px2rem(5px) RGBA(49, 127, 119, 0.1);
  border-radius: px2rem(3px);
  z-index: 2;
}
.banner-item{
  width: px2rem(60px);
  display: inline-block;
  margin-right: px2rem(15px);
  text-align: center;

}
.item-end{
  margin-right: 0
}
.banner-img{
  width: px2rem(22px);
  height: px2rem(22px);
  margin: 0  auto;
  display:block;
  
}
.banner-text{
  margin-top:px2rem(5px);
  display: block;
  position: relative;
  font-size: px2rem(12px);
  text-align: center;
  width: 100%;
}
.banner-text i{
  width: px2rem(4px);
  height: px2rem(4px);
  display: inline-block;
  background: #FB5B52;
  border-radius: 100%;
  position: absolute;
  top:0;
  right: -4px

}
</style>
