<template>
  <div class="AppletPublishing">
    <div class="CommonHeader" style="display: flex;flex-direction: row;justify-content: space-between;align-items: center">
      小程序发布
      <el-button type="primary" size="small" @click="getApplet">获取小程序二维码</el-button>
    </div>
    <div class="mimitBody">
      <el-steps :active="active" finish-status="success" style="border-bottom: 1px solid rgb(235, 238, 245); padding-bottom: 20px;" align-center>
        <el-step title="插件配置" ></el-step>
        <el-step title="扫描二维码登录" ></el-step>
        <el-step title="预览小程序" ></el-step>
        <el-step title="上传成功" ></el-step>
      </el-steps>
      <div style="padding: 20px 10px;" v-if="active==0">
        <div style="color: rgb(255, 69, 68); margin-bottom: 10px;">
          必须先去
          <span style="color: rgb(51, 204, 51);">【微信公众平台--设置--第三方服务--插件管理】</span>
          中添加相应的插件
        </div>
        <div style="max-width: 620px; margin-bottom: 10px;">
          目前小程序直播组件是在公测期间，是针对电商类目小程序活跃、经营方面表现较好邀请做公测，如果符合要求的在小程序后台会看到【直播】入口，可以点进去申请，可以勾选直播插件发布，没有资格的小程序的请不要勾选直播插件发布，会出现小程序无法使用的情况
        </div>
        <div class="plugin-list" style="display: flex;flex-direction: row;margin-top: 20px">
            <div>
              <div>小程序直播组件</div>
              <div style="color: rgb(112, 115, 121);">live-player-plugin</div>
            </div>
          <el-switch
            style="margin-left: 50px"
            :active-value="1"
            :inactive-value="0"
            v-model="msg.assembly">
          </el-switch>
        </div>
        <el-button type="primary" size="small" @click="JumpDeploy" style="margin-top: 20px">可跳转小程序设置</el-button>
        <div style="text-align: center;">
          <el-button type="primary" @click="active=1" >下一步</el-button>
        </div>

      </div>
      <div style="padding: 20px 10px;" v-if="active==1">
        <div style="text-align: center;" v-if="scanshow==true">
          <img :src='getLoginQRcode' style="width: 150px; height: 150px; border: 1px solid rgb(226, 226, 226); margin-bottom: 12px;">
          <div style="margin-bottom: 12px;">请使用微信扫码登录</div>
          <div style="color: rgb(144, 147, 153);">
            <div>扫码登录后大约会有10秒左右延时，请您耐心等待。</div>
            <div>您的微信号必须是该小程序的管理员或者开发者才可扫码登录。</div>
          </div>
        </div>
        <div style="padding: 20px; text-align: center;" v-if="scanshow==false">
          <el-button type="primary" @click="getSignQRcode" :loading="getQRcode_load">获取登录二维码</el-button>
        </div>
      </div>
      <div style="padding: 20px 10px;" v-if="active==2">
        <div style="text-align: center;" >
          <img :src='previewQRcode' style="width: 150px; height: 150px; border: 1px solid rgb(226, 226, 226); margin-bottom: 12px;">
          <div style="margin-bottom: 12px;">扫描二维码可以预览小程序</div>
        </div>
        <div style="padding: 20px; text-align: center;" >
          <el-button type="primary" @click="uploadApplet" :loading="upload_load">上传小程序</el-button>
        </div>
      </div>

      <div style="padding: 20px 10px;" v-if="active==3">
        <div style="text-align: center;">
          <img src="" alt="" style="width: 150px; height: 150px; border: 1px solid rgb(226, 226, 226); margin-bottom: 12px;">
          <div style="margin-bottom: 12px;">扫描二维码可以预览小程序</div>
          <div>
            <div style="margin-bottom: 12px;"><span>上传成功！</span> <span>请登录微信小程序平台（</span> <a href="https://mp.weixin.qq.com/" target="_blank">https://mp.weixin.qq.com/</a> <span>）发布小程序</span></div>
            <div style="margin-bottom: 12px;"><div>版本号：4.2.73</div> <div>描述：</div></div>
            <div>
              <img src="http://wx.weibaoge.cn/plugins/wxapp/assets/upload-tip.png" style="max-width: 100%; height: auto; border: 1px dashed rgb(53, 182, 53);">
            </div>
          </div>
        </div>
      </div>

    </div>
    <!--可跳转小程序设置-->
    <el-dialog title="可跳转小程序设置" :visible.sync="dialogVisible" width="1024px">
      <div class="el-dialog__body" :v-loading="AppIDLoading">
        <div style="margin-bottom: 20px;">最多可配置10个，超出无效</div>
        <div flex="box:last" style="margin-bottom: 20px; width: 95%;" v-for="(item,index) of datas.JumpAppIdList"  :key="index">
          <div class="el-input" style="margin-right: 10px;">
            <input type="text" autocomplete="off" placeholder="请填写小程序APPID" class="el-input__inner" v-model="datas.JumpAppIdList[index]">
          </div>
          <div class="outline" @click="datas.JumpAppIdList.splice(index,1)">
            <i class="el-tooltip el-icon-remove-outline item" aria-describedby="el-tooltip-4301" tabindex="0"></i>
          </div>
        </div>
        <el-button style="margin-bottom: 20px;" type="text" @click="addAppID" v-if="datas.JumpAppIdList.length<10"><i class="el-icon-plus" style="font-weight: bolder; margin-left: 5px;"></i><span style="color: rgb(53, 53, 53); font-size: 14px;">新增</span></el-button>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Update" :loading="UpdateLoading">保存</el-button>
      </div>
    </el-dialog>
    <!--可跳转小程序设置-->
    <el-dialog title="小程序码" :visible.sync="rightshow" width="418px">
      <div style="text-align: center;">
        <img src="" alt="" style="width: 200px;">
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="rightshow=false" >保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "AppletPublishing",
      data(){
          return{
            msg:{
              assembly:0
            },
            active: 0,
            dialogVisible:false,
            AppIDLoading:false,
            UpdateLoading:false,
            rightshow:false,
            datas:{
              JumpAppIdList:[{}],
            },
            scanshow:false,
            getQRcode_load:false,
            upload_load:false,
            getLoginQRcode:'',
            previewQRcode:'',
          }
      },
      methods:{

        JumpDeploy(){
          this.dialogVisible = true;
          this.getMiniJumpAppId()
        },
        getMiniJumpAppId(){
          this.AppIDLoading = true
          this.apipost("/api/Tenant/GetMiniJumpAppId", {}, res => {
            this.AppIDLoading = false

            if (res.data.resultCode == 1) {
                this.datas = res.data.data
            } else {
              this.Info(res.data.message);
            }
          })
        },
        addAppID(){
          this.datas.JumpAppIdList.push(JSON.stringify())
        },
        Update(){
          this.UpdateLoading = true
          for(let i =0;i<this.datas.JumpAppIdList.length;i++){
            if(this.datas.JumpAppIdList[i]=='' || this.datas.JumpAppIdList[i] ==undefined){
              this.datas.JumpAppIdList.splice(i,1)
            }
          }
          this.apipost("/api/Tenant/UpdateJumpAppId", this.datas, res => {
            this.UpdateLoading = false

            if (res.data.resultCode == 1) {
              this.dialogVisible = false;
              this.Success(res.data.message);
            } else {
              this.Info(res.data.message);
            }
          })
        },
        getSignQRcode(){
          this.getQRcode_load = true
          this.apipost("/api/Publish/GetLoginAppletWeChat", {}, res => {
            this.getQRcode_load = false
            if (res.data.resultCode == 1) {
              this.scanshow = true
              this.getLoginQRcode = res.data.data;
              setTimeout(()=>{
                this.getPuploadAppletWeChat()
              },10000)
            } else {
              this.Info(res.data.message);
            }
          })
        },
        getPuploadAppletWeChat(){
          this.apipost("/api/Publish/GetPuploadAppletWeChat", {}, res => {
            if (res.data.resultCode == 1) {
                this.getPreviewAppletWeChat()
            } else {
              setTimeout(()=>{
                this.getPuploadAppletWeChat()
              },10000)
            }
          })
        },
        getPreviewAppletWeChat(){ //获取预览的二维码接口
          this.apipost("/api/Publish/GetPreviewAppletWeChat", {}, res => {
            if (res.data.resultCode == 1) {
              this.active=2;
              this.previewQRcode =res.data.data
            } else {
              this.Info(res.data.message);
            }
          })
        },
        uploadApplet(){
          this.apipost("/api/Publish/GetPreviewAppletWeChat", {}, res => {
            if (res.data.resultCode == 1) {
              this.previewQRcode =res.data.data
              this.active=3;
            } else {
              this.Info(res.data.message);
            }
          })
        },
        getApplet(){ //获取小程序的二维码
          this.rightshow=true
        }

      }
    }
</script>

<style>
  .AppletPublishing .CommonHeader{
    padding: 10px 20px;
  }
  .AppletPublishing .mimitBody {
    padding: 20px;
    background-color: #fff;
    margin: 10px 0 20px 0;
    display: table;
    width: 100%;
  }
  .AppletPublishing .outline {
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
    height: 32px;
    color: #F56E6E;
    cursor: pointer;
    font-size: 24px;
    margin: 0 5px;
  }

</style>
