<template>
  <div style="margin: 0 auto" class="container">
    <el-button
      type="primary"
      @click="testdownload4()"
      style="display: block; margin: 0 auto"
      :loading="isloading"
      >下载到手机</el-button
    >
    <div v-for="(item, index) in apidata.pics" :key="index" class="divbaseImg">
      <van-image
        :width="pic_width"
        :height="pic_height"
        :src="item"
        class="baseImg"
      />
    </div>
    <div class="bottomContent">
      <p>本服务由浙江政务服务网、宁波市住房保障和房屋征收管理中心提供</p>
      <p>服务咨询热线：<b>0574-88086606</b></p>
    </div>
  </div>
</template>

<script>
import { mgop } from "@aligov/jssdk-mgop";
export default {
  components: {},
  data() {
    return {
      url: "",
      apidata: {},
      pic_width: "100%",
      pic_height: "100%",
      isloading: true
    };
  },
  created() {
    this.onInit();
  },
  mounted() {},
  methods: {
    onInit() {
      if (this.$route.params.id) {
        window.sessionStorage.setItem("bcxyId", this.$route.params.id);
      }
      mgop({
        api: "mgop.kykj.houseexpropriat.getagreementinfop",
        host: "https://mapi.zjzwfw.gov.cn/",
        dataType: "JSON",
        type: "POST",
        data: {
          ticket:
            this.$route.query.ticket || window.sessionStorage.getItem("ticket"),
          id: window.sessionStorage.getItem("bcxyId")
        },
        appKey: "es4b8zmz+2001833218+dehllx",
        onSuccess: result => {
          if (result.data && result.data.success == true) {
            console.log("result.data.data:", result.data.data);
            this.apidata = result.data.data;
            this.pic_width = "100%";
            this.pic_height = "100%";
            this.isloading = false;
          }
        },
        onFail: err => {
          console.log("用户无数据，不展示");
        }
      });
    },
    saveImages() {
      ZWJSBridge.onReady(() => {
        console.log("初始化完成后，执行bridge方法-saveImages");
        ZWJSBridge.saveImage({
          url: this.apidata.pdf
        })
          .then(result => {
            console.log("saveImage()成功:" + JSON.stringify(result));
          })
          .catch(error => {
            console.log("saveImage()失败:" + JSON.stringify(result));
            console.log(error);
          });
      });
    },
    testdownload4() {
      ZWJSBridge.onReady(() => {
        console.log("初始化完成后，执行bridge方法-testdownload4");
        ZWJSBridge.openLink({
          url: this.apidata.pdf
        })
          .then(result => {
            console.log("测试新开窗口():" + result);
          })
          .catch(error => {
            console.log(error);
          });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.el-button {
  height: 48px;
  border-radius: 4px;
}
.content {
  text-align: center;
  line-height: 200px;
  font-size: 30px;
  margin-bottom: 20px;
  height: 200px;
}
.bottom {
  text-align: center;
  margin-bottom: 20px;
}
.divbaseImg {
  display: block;
  margin: 0 auto;
}
.baseImg {
  display: block;
  margin: 0 auto;
  padding: 0;
}
.absolute {
  position: absolute;
  bottom: 0px;
}
.bottomContent {
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
  width: 100%;
  font-size: 10px;
  p {
    margin: 0;
  }
  b {
    color: #5d8cbc;
  }
}
</style>
