<template>
  <div :class="[{'IndexContainer':true}]" :style="{height:clientHeight}">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <el-dialog
        title="请输入设备信息"
        :visible.sync="viewMode"
        width="30%">
      <el-input v-model="viewEqSn" placeholder="请输入设备编码"/>
      <el-input v-model="viewVersion" placeholder="请输入设备版本号"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewMode = false">取 消</el-button>
        <el-button type="primary" @click="changeEqSn()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  QueryVueFramework
} from '@/api/getApiRes'

import "../../public/mui.js"
import '../Global'

let qs = require('qs');

export default {
  name: 'Home',
  data() {
    return {
      handleTabsList: [{
        title: '系统首页',
        name: '1',
        clmurl: '/',
      }],
      autoUpdate: false,
      curVersion: '1.0.1',
      viewEqSn: localStorage.eqSn,
      viewVersion: localStorage.version,
      isPad: true,//pad 展示版本
      viewMode: false,//pad 展示版本
      clientHeight: document.documentElement.clientHeight + 'px'
    }
  },
  mounted() {
    // alert('clientWidth:' + document.documentElement.clientWidth);
    // alert('devicePixelRatio:' + window.devicePixelRatio);

    //浏览器运行时打开注释
    // localStorage.eqSn = '30:9C:23:0C:8B:1E';
    // localStorage.version = '1.1.0';

    this.viewMode = isViewMode;
    this.isMui();
  },
  methods: {
    changeEqSn() {
      let that = this;
      localStorage.eqSn = that.viewEqSn;
      localStorage.version = that.viewVersion;
      this.plusReady();
      that.viewMode = false;
    },
    isMui() {
      let that = this;
      //mui is ready
      if (window.plus) {
        //先检查升级
        if (runVersion != versionOffLine) {
          that.checkReleaseUpdate();//正式版
        } else {
          that.checkTestUpdate();//线下版
        }

        if (typeof plus == 'undefined') return false;

        if (!that.viewMode) {
          //获取本地应用资源版本号
          plus.runtime.getProperty(plus.runtime.appid, function (inf) {
            localStorage.version = inf.version;
            that.curVersion = inf.version;
            console.log("inf:", inf);
          });

          //获取手机UUID
          plus.device.getInfo({
            success: function (e) {
              let uuid = JSON.stringify(e.uuid).toString().substr(1);
              uuid = uuid.substring(0, uuid.length - 1);
              localStorage.eqSn = uuid;

              console.log('===== uuid =====:' + uuid + '\ngetDeviceInfo success: ' + JSON.stringify(e.uuid));
            },
            fail: function (e) {
              console.log('getDeviceInfo failed: ' + JSON.stringify(e));
            }
          });
          this.plusReady();
        }
      } else {
        console.log('mui is not ready');
        this.getServeIpAddress(localStorage.eqSn);
        document.addEventListener('plusready', plusReady, false);
      }
    },
    //获取当前版本号
    plusReady() {
      let that = this;
      // 获取转发端口地址
      that.getServeIpAddress(localStorage.eqSn);
    },
    //获取转发端地址
    getServeIpAddress(eqSn) {
      const that = this;

      //正式版请求转发段地址的url
      let url = 'http://cal.beswell.com:85/v1/Sensors/GetShopConfigParam'

      //测试版请求转发段地址的url
      if (runVersion == versionOffLine) {
        url = "http://192.168.0.3:19096/v1/Sensors/GetShopConfigParam";
      }
      console.log("url:" + url + "\neqSn:" + eqSn);

      let param = {eqSn: eqSn};
      let postData = qs.stringify(param);
      axios.post(url, postData).then(function (data) {
        let json = data.data;
        if (json.Code == 0) {
          headapi = json.Rs.DataServiceIP;
        } else {
          headapi = 'http://221.214.111.254:9000/';
          console.log(json.memo);
          that.$message.error(json.memo);
        }
      }, function (response) {
        console.info(response);
      })
    }
    ,
    //检查测试版本升级
    checkTestUpdate() {
      let that = this;
      let url = 'http://192.168.0.3:19096/v1/Sensors/QueryVueFramework';
      let param = {};
      let postData = qs.stringify(param);
      axios.post(url, postData).then(function (data) {
        let json = data.data;
        console.log("checkTestUpdate", json);
        if (json.Code == 0) {
          if (localStorage.version != json.VueFramework.Version) {
            // 测试版本下载
            let testVersion = "http://192.168.0.3:19096/v1/Sensors/DownloadVueFramework";
            that.downWgt(testVersion);
          }
        } else {
          console.log(json.Memo);
        }
      }, function (response) {
        console.info(response);
      })
    }
    ,
    //检查正式版本升级
    checkReleaseUpdate() {
      let param = {};
      let postData = qs.stringify(param);
      QueryVueFramework(postData).then(res => {
        let json = res;
        console.log("checkReleaseUpdate", json);
        if (json.Code == 0) {
          console.log('localStorage.version' + localStorage.version);
          //正式
          if (localStorage.version != json.VueFramework.Version) {
            let releaseVersion = "http://cal.beswell.com:85/v1/Sensors/DownloadVueFramework";
            this.downWgt(releaseVersion);
          }
        }
      })
    },
    downWgt(url) {
      let that = this;
      plus.downloader.createDownload(url, {filename: "_doc/update/"}, function (d, status) {
        if (status == 200) {
          console.log(d);
          console.log("下载wgt成功：" + d.filename);
          that.installWgt(d.filename);
        } else {
          console.log("下载wgt失败！");
        }
        plus.nativeUI.closeWaiting();
      }).start();
    },
    //安装wgt包
    installWgt(path) {
      plus.runtime.install(path, {}, function () {
        plus.nativeUI.closeWaiting();
        console.log("安装wgt文件成功！");
        plus.runtime.restart();
      }, function (e) {
        plus.nativeUI.closeWaiting();
        console.log("安装wgt文件失败[" + e.code + "]：" + e.message);
      });
    }
  },
  components: {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.el-header {
  padding: 0 !important;
  height: 72px !important;
}

.shortElaside {
  width: 140px !important;
  overflow: hidden;
  height: 100%;
  float: left;
}

.lognElaside {
  width: 256px !important;
  overflow: hidden;
  height: 100%;
  float: left;
}

/deep/ .nav {
  width: 60px;
}

.IndexContainer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #F0F2F5;
  height: 100%;
  overflow-y: scroll;
}

/*演示版专供*/
.isPad {
  height: 11.2rem;
}

.IndexContainer > .el-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 10px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  text-align: center;
  text-indent: -30%;
  font-size: 12px;
  color: #BDBDBD;
  background: #F0F2F5;
  z-index: 222;
}

.el-main {
  width: 100%;
  height: 100%;
  /*min-height: 800px;*/
  overflow: hidden;
  display: block;
  margin: 0 auto;
  overflow-y: hidden;
  padding: 10px 20px;
}

/*ipad only*/
@media only screen and (max-width: 1366px) {
  .lognElaside {
    width: 70px !important;
  }

  .logoContainer img {
    display: none !important;
  }

  .el-main {
    padding: 3px !important;
    overflow-y: scroll;
  }

  .el-main > .context {
    /*height: 640px;*/
    /*overflow-y: scroll;*/
    padding: 6px !important;
  }

  .table {
    /*width: 950px;*/
    /*overflow-x: scroll;*/
  }

  .el-dialog {
    max-width: 960px;
  }

  .el-dialog__body {
    padding: 3px;
  }

  .el-transfer__buttons {
    width: 60px;
    padding: 3px;
  }

  .el-transfer .el-button + .el-button {
    float: right;
  }

  .el-container.is-vertical {
    position: absolute;
    left: 140px;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
  }

  .context {
    border-radius: 12px;
    height: 823px !important;
    overflow-y: scroll;
  }

  .el-dialog {
    padding: 5px;
    padding-bottom: 15px;
  }
}

#__vconsole {
  display: none;
}

#__vconsole.show {
  display: block;
}
</style>
