<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
    <view class="wrap">
      <button type="primary" @click="installMP()">安装Hello uni-app小程序</button>
      <button type="primary" @click="openMP()">启动Hello uni-app小程序</button>
      <button type="primary" @click="openMP2Path()">启动Hello uni-app小程序直达页面</button>
      <button type="primary" @click="openMP2Extra()">启动Hello uni-app小程序传递参数</button>
      <button type="primary" @click="sendEvent()">向Hello uni-app小程序发送事件</button>
      <button type="primary" @click="sendEventInterval()">定时向Hello uni-app小程序发送事件</button>
    </view>
	</view>
</template>

<script>
  const mp = uni.requireNativePlugin('uniMP');
	export default {
		data() {
			return {
				title: 'uni小程序演示',
        appid: '__UNI__43CDF4D',
        wgt: '/static/__UNI__43CDF4D.wgt'
			}
		},
		onLoad() {
      if(!mp){
        this.title = '当前环境不支持uni小程序';
      }
		},
		methods: {
      installMP(){
        mp.getUniMPVersion(this.appid, (ret) => {
          if(0!=ret.code){//获取失败时安装应用
            this.doInstallMP();
          }else{
            uni.showModal({
              title:'提示',
              content:'uni小程序已安装，是否覆盖？',
              success: res=>{
                res.confirm&&this.doInstallMP();
              }
            });
          }
          console.log('getUniMPVersion: '+JSON.stringify(ret));
        });
      },
      doInstallMP(){
        mp.installUniMP({
          appid:this.appid,
          wgtFile:this.wgt
        }, (r)=>{
          if(0==r.code){
            uni.showToast({
              title:'安装成功'
            });
          }else{
            uni.showModal({
              title:'安装失败',
              content:JSON.stringify(r),
              showCancel:false
            });
          }
          console.log('installUniMP: '+JSON.stringify(r));
        });
      },
      openMP(){
        mp.openUniMP({
          appid: this.appid
        }, (ret)=>{
          if(0!=ret.code){
            uni.showModal({
              title:'启动失败',
              content:JSON.stringify(ret),
              showCancel:false
            });
          }
          console.log('openUniMP: '+JSON.stringify(ret));
        });
      },
      openMP2Path(){
        mp.openUniMP({
          appid: this.appid,
          path: 'pages/component/view/view',
        }, (ret)=>{
          if(0!=ret.code){
            uni.showModal({
              title:'启动失败',
              content:JSON.stringify(ret),
              showCancel:false
            });
          }
          console.log('openUniMP: '+JSON.stringify(ret));
        });
      },
      openMP2Extra(){
        mp.openUniMP({
          appid: this.appid,
          extraData: {
            name: 'my name',
            id: 'my id'
          },
        }, (ret)=>{
          if(0!=ret.code){
            uni.showModal({
              title:'启动失败',
              content:JSON.stringify(ret),
              showCancel:false
            });
          }
          console.log('openUniMP: '+JSON.stringify(ret));
        });
      },
      sendEvent(){
        mp.sendUniMPEvent(
          this.appid,
          'event',
          {'key':'value','name':'data'},
          (ret)=>{
          console.log('Host sendEvent: '+JSON.stringify(ret));
        });
      },
      sendEventInterval(){
        setInterval(this.sendEvent, 5000);
      }
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #cf0000;
	}
  
  .wrap {
    width:690rpx;
    margin-top:30rpx;
    padding:0 30rpx;
  }
  
  button {
    margin-top: 30rpx;
    margin-bottom: 30rpx;
  }
</style>
