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

      </div>
    </div>
  </div>
</template>

<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
  name: 'YqyHomeBanner',
   data(){
    return {
      list:[],
    }
  },
  mounted(){
    this.getData();
  },
  methods: {
    goToPage(itemData){
      let paramList = this.setEventByModuleCode(itemData);
     // alert(JSON.stringify({
     //        modeCode: itemData.appModuleInfo.code,
     //        jsonString: paramList
     //  }))
      rocNative.dispatchEventByModuleCode({
          modeCode: itemData.appModuleInfo.code,
          jsonString: paramList
      })
    
    },
    // 根据Mode Code分发到具体Webview
    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.getUrlParm(paramList)
            paramList[0].value += urlPara
        }
        if(typeof paramList === 'string' && !paramList){
            paramList = []
        }
        // alert(JSON.stringify({
        //     modeCode: itemData.appModuleInfo.code,
        //     jsonString: paramList
        // }))
        rocNative.dispatchEventByModuleCode({
            modeCode: itemData.appModuleInfo.code,
            jsonString: paramList
        })
    },
    // 根据列表拼接参数字符串
    getUrlParm(paramList) {
        if ( paramList.length <= 1) {
            return ''
        }
        let dataStr = ''
        let list = [];
        for( let i = 1; i < paramList.length; i ++) {
            list.push(paramList[i].key + '=' + paramList[i].value)
        }
        dataStr = list.join('&')
        if (dataStr !== '') {
            return '?' + dataStr
        }
        return ''
    },
    getData(){
      let _this = this, 
      para = {
          category: 1, 
          position:1
      }
      this.GET('contents/HomeColumn/Information', para).then(res => {
          if(res.code == '000000'){
            //alert("000");
            _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';
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(42, 94, 161, 0.15);
  border-radius: px2rem(3px);
}
.banner-item{
  width: px2rem(50px);
  display: inline-block;
  margin-right: px2rem(18px);
  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>
