<template>
  <div class="morelist">
    <!--<van-nav-bar v-if="isHead == 1"
      title="应用中心"
    />-->
    <div style="background:#ffffff;" v-if="isHead == 1">
      <head-bar backIconColor="#222222" bgColor="#ffffff" :backMenu=true title="应用中心"></head-bar>
    </div>
    <md-scroll-view
            ref="scrollView"
            :bouncing="false"
            :scrolling-x="false"
            :auto-reflow="true"
            :class="isHead == 1 ? 'my-scroll-view-hashead' : 'my-scroll-view'"
    >
      <div class="listbox">
        <div class="list-item" v-for="(item, index) in bannerList" :key="index+1"  @click="openDetail(item.applicationPackage, item.applicationUrl)">
          <img class="iconimg" :src="item.applicationIcon">
          <div class="cell-right">
            <div>
              <h4 class="centerTit">{{item.applicationTitle}}</h4>
            </div>
            <!--<img class="btn" src="../../assets/img/btn_03.png">-->
            <div class="btn2">打开</div>
          </div>
        </div>
      </div>
    </md-scroll-view>

  </div>
</template>

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

    export default {
    name: "",
    components: {
        [ScrollView.name]: ScrollView,
        [Toast.name]: Toast,
        [HeadBar.name]: HeadBar,
        [EmptyDataPage.name]: EmptyDataPage,
    },
    data() {
      return {
        bannerList: [],
        isHead: 0
      }
    },
    created() {
      this.isHead = this.$route.query.isOpen;
    },
    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.getList()
    },
    methods: {
      onClickLeft(){
        this.$router.go(-1)
      },
      getList(){
          Toast.loading('加载中...')
          var that = this
        /*let obj = {
          cId:this.$route.query.cId
        }
        this.$axios.AxiosMethods("get",'entApplicationCenter/query',obj,function (res) {
          console.log(res)
          that.bannerList = res.data
          console.log(that.bannerList)
        });*/


            ApplicationCenterApi({
                aId: that.$route.query.aId,
                cId: that.$route.query.cId,
                type:'all'
            }).then(res => {
                const {code, data} = res;
                if (code === 1) {
                    // this.deviceDataList = data;
                    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">
  *{
    box-sizing: border-box;
  }
  .morelist{
    background: #EFF0F3;
    .my-scroll-view-hashead{
      height: calc(100vh - 1rem);
    }
    .my-scroll-view{
      height: 100vh;
    }
    .listbox{
      padding: 0.05rem 0 0.4rem 0;
      .tips{
        text-align: center;
        margin: 0.1rem;
        i{
          /*color: #FFA03E;
          margin-right: 0.1rem;*/
          display: inline-block;
          background: url("../../assets/app_fx/tip.png") 0 0 no-repeat;
          width: 0.15rem;
          height: 0.15rem;
          background-size: 100% 100%;
          vertical-align: middle;
        }
        span{
          display: inline-block;
          font-size: 0.14rem;
          color: #89898A;
          vertical-align: middle;
        }
      }
      .list-item{
        margin-top: 0.2rem;
        background: #FFFFFF;
        padding: 0.2rem;
        overflow: hidden;
        height: 1.2rem;
        box-sizing: border-box;
        .iconimg{
          width: 1rem;
          height: 1rem;
          float: left;
          /*margin-top: 0.1rem;*/
          object-fit: cover;
          background-size: 100% 100%;
        }
        .cell-right{
          float: right;
          width: 82%;
          position: relative;
          h4{
            font-size: 0.28rem;
          }
          h4.centerTit{
            margin-top: 0.3rem;
          }
          .info-bt{
            font-size: 0.14rem;
            color: #89898A;
            margin-top: 0.06rem;
            .home{
              width: 0.17rem;
              height: 0.16rem;
              /*margin-right: 0.01rem;*/
              display: inline-block;
              vertical-align: middle;
            }
            span{
              vertical-align: middle;
              display: inline-block;
            }
          }
          .btn{
            width: 1rem;
            height: 0.52rem;
            position: absolute;
            top: 0.18rem;
            right: 0.1rem;
          }
          .btn2{

            position: absolute;
            top: 0.2rem;
            right: 0.2rem;
            display: inline-block;
            padding: 0.06rem 0.24rem;
            border-radius: 0.08rem;
            font-size: 0.28rem;
            color: #FFFFFF;
            background-color: red;
            background-image: -webkit-gradient(linear, left top, right top, from(#6FABFF), to(#7687FF));
            background-image: linear-gradient(to right, #6FABFF, #7687FF);


          }
        }
      }
      .list-item.active{
        background: #E1E5FF;
      }
    }
  }
</style>
