<template>
    <div class="indexCell">
      <ul>
        <li v-for="(item, index) in bannerList" :class="index == 4 ? 'clear' : '' " :key="index+1" @click="openDetail(item.applicationPackage, item.applicationUrl)">
          <img :src="item.applicationIcon">
          <span>{{item.applicationTitle}}</span>
        </li>
        <li class="more" @click="golist">
          <img src="../../assets/app_fx/more_03.png">
          <span>更多</span>
        </li>
      </ul>
    </div>
</template>

<script>
    import {
        Toast
    } from 'mand-mobile'
    import {ApplicationCenterApi, opencommonDetail} from '@/api/app_fx';

    export default {
      name: "",
        components: {
            [Toast.name]: Toast
        },
      data() {
          return {
            bannerList: [],
              aid: 0,
            cid: 0,
            isHead: 0
          }
      },
      created() {
      },
      mounted(){
          if(this.$route.query.fromUrl){
              this.$store.dispatch('request_config/setBaseUrl', this.$route.query.fromUrl)
          }else{
              this.$store.dispatch('request_config/setBaseUrl', location.host)
              // this.$store.dispatch('request_config/setBaseUrl', '192.168.3.118:8899')
          }


        this.cid = this.$route.query.cId;
        this.aid = this.$route.query.aId;
        this.isHead = this.$route.query.isOpen;
        console.log(this.$route.query)
        this.getList()
      },
      methods: {
        golist(){
          /*this.$router.push({
            path: 'appCenter',
            query: {cId: this.cid, isOpen: this.isHead}
          })*/

          this.$router.push({
            path: 'moreapp',
            query: this.$route.query
          })
        },
        getList(){
            Toast.loading('加载中...')
            console.log(this.$route.query)
          var that = this
            /*let obj = {
              cId:this.cid,
              // cId:196090,
              limit: 7,
            }
            this.$axios.AxiosMethods("get",'entApplicationCenter/query',obj,function (res) {
              console.log(res)
              that.bannerList = res.data
              console.log(that.bannerList)
            });*/

          ApplicationCenterApi({
              aId: that.aid,
              cId: that.cid,
              type: 'top'
          }).then(res => {
              const {code, data} = res;
              if (code === 1) {
                  // this.deviceDataList = data;
                  console.log(res)
                  that.bannerList = data
              }
          }).catch(err => {
          })
            setTimeout(function () {
                Toast.hide()
            }, 300)

        },
        openDetail(url, url2){
          console.log(url);
          console.log(this.$route.query);
          // this.$axios.opencommonDetail(url, url2, this.$route.query)
            opencommonDetail(url, url2, this.$route.query)
        }
      }
    }
</script>

<style scoped lang="scss" type="text/scss">
.indexCell{
  background: #FFFFFF;
  ul{
    overflow: hidden;
    li{
      display: inline-block;
      width: 25%;
      float: left;
      text-align: center;
      img{
        /*width: 0.72rem;
        height: 0.53rem;
        margin-top: 0.1rem;*/

        width: 1.44rem;
        height: 1.44rem;
        margin-top: 0.2rem;
        object-fit: cover;
        background-size: 100% 100%;
      }
      span{
        display: block;
        /*font-size: 0.14rem;
        margin: 0.1rem 0;*/

        font-size: 0.28rem;
        /*margin: 0.2rem 0;*/
      }
    }
    li.clear{
      clear: left;
    }
    li.more{
      img{
        /*width: 0.46rem;
        height: 0.46rem;
        margin-top: 0.15rem;*/

        width: 0.92rem;
        height: 0.92rem;
        margin-top: 0.4rem;
      }
      span{
        /*margin-top: 0.11rem;*/
        margin-top: 0.3rem;
        color: #7E7E7E;
      }
    }
  }
}
</style>
