<template>
  <div style="height: 100%;">
    <div class="work_body_com">
      <scroller ref="work_box_scroller" :onScrolling="get_scroller_top">
        <div style="margin-top:0.32rem;"></div>
        <div v-for="(item, index) in app_list" :key="index" class="app_list_box">
          <div class="menu_title">{{ item.remark }}</div>
          <van-grid :border="false">
            <van-grid-item v-for="(app, app_index) in item.child" :key="app_index" @click="url_jump(app)" :icon="app.icon" :text="app.code">
              <template slot="icon">
                <img :src="app.icon" />
                 <span class="num9" :class="{ num10: total > 9 }" color="#F56C6C"  v-if="total > 0&&app.code_id=='att_review'">{{ total }}</span>
              </template>
            </van-grid-item>
          </van-grid>
        </div>
        <div style="height:1rem"></div>
      </scroller>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import Vue from 'vue'
import {getMenu} from '@/api/login'

export default {
  name: 'work',
  data () {
    return {
      app_list: window.plus ? JSON.parse(plus.storage.getItem('menu')) : JSON.parse(localStorage.getItem('menu')),
      total: 0
    }
  },
  methods: {
    open_app (url) {
      if (window.plus) {
        let webview = plus.webview.create(url, url)
        let StatusBarStyle = plus.navigator.getStatusBarStyle()
        plus.nativeUI.showWaiting('加载中....')
        webview.show(
          'pop-in',
          300,
          function () {
            // 窗口显示动画完成
          },
          { acceleration: 'capture' }
        )
        webview.onloaded = function () {
          plus.nativeUI.closeWaiting()
        }
        webview.onclose = function () {
          plus.navigator.setStatusBarStyle(StatusBarStyle)
        }
      }
    },
    download_app (app_url, url) {
      let self = this
      if (window.plus) {
        plus.nativeUI.showWaiting('加载中....')
        plus.downloader.createDownload(app_url, { filename: '_doc/update/' }, function (d, status) { // 新建的下载任务对象
          if (status == 200) {
            plus.zip.decompress(d.filename, '_doc/dir/', function () { // 解压缩Zip文件
              plus.nativeUI.closeWaiting()// 关闭系统等待对话框
              plus.storage.setItem(url.split('#')[0], app_url)
              self.open_app(url)
            },
            function (error) {
              console.log(error)
            }
            )
          } else {
            plus.nativeUI.alert('下载失败！')
          }
          plus.nativeUI.closeWaiting()
        })
          .start()
      }
    },
    // 打开安装包
    get_app_and_open (app_url, _url) {
      let self = this
      let app_path = '_doc/dir/'
      let url = app_path + _url
      if (window.plus) {
        plus.io.getFileInfo({// 获取文件信息
          success: function (ret) {
            if (plus.storage.getItem(url.split('#')[0]) == app_url) {
              self.open_app(url)
            } else {
              self.download_app(app_url, url)
            }
          },
          filePath: url.split('#')[0],
          fail: function (ret) {
            // 打开失败，如果是文件不存在，则需要从服务器上下载压缩包
            self.download_app(app_url, url)
          }
        })
      }
    },
    // 下载安装包
    url_jump (app) {
      let url = app.url
      let self = this
      // 当是安装包时打开安装里的内容
      if (app.download_url.indexOf('.zip') >= 0) {
        if (window.plus) {
          self.get_app_and_open(app.download_url, url)
        } else {
          self.$emit('url_jump', app)
          localStorage.setItem('work_scroller_top', self.$refs['work_box_scroller'].getPosition().top)
          window.location.href = url
        }
        return false
      }
      // 当不是安装包时使用
      if (url.indexOf('http://') == 0 || url.indexOf('https://') == 0) {
        if (window.plus) {
          var webview = plus.webview.create(url, url)// 创建新的Webview窗口
          webview.setStyle({// 设置Webview窗口
            titleNView: {
              titleColor: '#000',
              autoBackButton: true,
              buttons: [
                {
                  type: 'close',
                  float: 'left',
                  onclick: function () {
                    webview.close()
                  }
                }
              ]
            }
          })
          plus.key.addEventListener('backbutton', function () { // 添加监听设置返回事件
            webview.canBack(function (e) { // 看能不能返回
              if (e.canBack) {
                webview.back()
              } else { // 不行就关闭，调用路由的返回
                webview.close()
                self.$route_back()
              }
            })
          })
          webview.show()
        } else {
          window.location.href = url
        }
      } else {
        this.$router.push({ path: url })
      }
    },
    get_scroller_top (top) {
      this.scrollertop = top
    },
  },
  mounted() {
    if(!this.app_list) {
      this.$store.dispatch('getMenu').then(res => {
        if(res){
          this.app_list = window.plus ? JSON.parse(plus.storage.getItem('menu')) : JSON.parse(localStorage.getItem('menu'))
        }
      })
    }
  },
  created () {
    let self = this
    // this.getKqList()
    // APP打开是不会保持页面滚动高度的，需要记录下来，返回后再赋值
    this.$nextTick(() => {
      let top = localStorage.getItem('work_scroller_top')
      if (top) {
        localStorage.removeItem('work_scroller_top')
        self.$refs['work_box_scroller'].last_top = top
      }
    })
  },
}
</script>

<style scoped>
  .num9 {
    position: absolute;
    text-align: center;
    line-height: 0.4rem;
    font-size: 0.28rem;
    width: 0.4rem;
    height: 0.4rem;
    padding: 0px;
    border-radius: 0.4rem;
    z-index: 1;
    background-color: #f56c6c;
    font-weight: normal;
    color: #fff;
    top: -5px;
    right: -10px;
  }
  .num10 {
    padding: 0 0.08rem !important;
    width: auto !important;
    max-width: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.menu_title {
  margin: 0rem 0.32rem 0.3rem;
}

.work_body_com {
  height: calc(100% - 0rem);
  position: relative;
  background-color: #fff;
}
.app_list_box {
  padding: 0 0.28rem;
  margin-bottom: 0.32rem;
}
.app_list_box .menu_title {
  font-size: 0.32rem;
  color: #1c1c1c;
  font-weight: bold;
}
.app_list_box /deep/ .van-grid {
}
.app_list_box /deep/ .van-grid-item {
  margin-bottom: 0.4rem;
}
.app_list_box /deep/ .van-grid-item .van-grid-item__content {
  padding: 0 !important;
}
.app_list_box /deep/ .van-grid-item .van-grid-item__content .van-grid-item__text {
  font-size: 0.28rem;
  color: #606266;
  line-height: 0.44rem;
  width: 1.4rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app_list_box /deep/ .van-grid-item .van-grid-item__content .van-grid-item__icon-wrapper img {
  width: 1rem;
  height: 1rem;
  border-radius: 0.42rem;
}

.work_body_com .notice-left /deep/ .van-icon {
  width: 0.5rem;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  background: #ff9600;
  color: #fff;
  border-radius: 0.4rem;
}
</style>
