<template>
    <div class="morelist">
      <!--<van-nav-bar v-if="isHead == 1"
        title="应用中心"
        left-arrow
        @click-left="onClickLeft"
      />-->
      <div class="listbox">
        <div class="tips"><i></i>
          <span>上下拖动可调整应用位置，前七个将在首页显示</span>
        </div>
        <md-scroll-view
                ref="scrollView"
                :bouncing="false"
                :scrolling-x="false"
                :auto-reflow="true"
                class="my-scroll-view"
        >
        <draggable :list="bannerList" :move="getdata" @update="datadragEnd" :options = "{animation:500}">
          <transition-group name="list-complete" >
            <div class="list-item" v-for="(item, index) in bannerList" :key="index+1" :class="index<=6 ? 'active' : ''">
              <!--<img class="iconimg" :src="item.imgUrl">-->
              <img class="iconimg" :src="item.applicationIcon">
              <div class="cell-right">
                <div  v-if="index<=6">
                  <h4>{{item.applicationTitle}}</h4>
                  <div class="info-bt">
                    <img class="home" src="../../assets/app_fx/home_03.png" alt="">
                    <span>首页展示</span>
                  </div>
                </div>
                <div v-else>
                  <h4 class="centerTit">{{item.applicationTitle}}</h4>
                </div>
                <!--<img class="btn" src="../../assets/img/btn_03.png">-->
                <div class="btn2" @click="openDetail(item.applicationPackage, item.applicationUrl)">打开</div>
              </div>
            </div>
          </transition-group>

        </draggable>
        </md-scroll-view>
      </div>
    </div>
</template>

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

    import draggable from 'vuedraggable'
    export default {
      name: "",
      data() {
          return {
            bannerList: [],
            isHead: 0
          }
      },
      components: {
        draggable,
        [ScrollView.name]: ScrollView,
        [Toast.name]: Toast,
      },
      created() {
        this.isHead = this.$route.query.isOpen;
      },
      mounted(){
        this.getList()
      },
      methods: {
        onClickLeft(){
          this.$router.go(-1)
        },
        getdata: function(evt){
          // console.log(evt.draggedContext.element.id);
        },
        datadragEnd:function(evt){
          console.log('拖动前的索引：'+evt.oldIndex);
          console.log('拖动后的索引：'+evt.newIndex);
          console.log(this.bannerList)
        },
        getList(){
            Toast.loading('加载中...')
            var that = this

            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;
                    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">
  *{
    box-sizing: border-box;
  }
  .morelist{
    background: #EFF0F3;
    .listbox{
      .tips{
        text-align: center;
        /*margin-top: 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.3rem;
          height: 0.3rem;
          background-size: 100% 100%;
          vertical-align: middle;
        }
        span{
          display: inline-block;
          font-size: 0.28rem;
          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: 0.72rem;
          float: left;
          margin-top: 0.1rem;
        }
        .cell-right{
          float: right;
          width: 82%;
          position: relative;
          h4{
            font-size: 0.28rem;
          }
          h4.centerTit{
            margin-top: 0.3rem;
          }
          .info-bt{
            font-size: 0.26rem;
            color: #89898A;
            margin-top: 0.12rem;
            .home{
              width: 0.32rem;
              height: 0.3rem;
              margin-right: 0.02rem;
              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>
