<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>
</template>

<script>
import { mgop } from "@aligov/jssdk-mgop";
import { changeBottomStyle } from "@/olderMode/1.js";
import $ from "jquery";
export default {
  components: {},
  data() {
    return {
      url: "",
      apidata: {},
      pic_width: "100%",
      pic_height: "100%",
      isloading: true
    };
  },
  created() {
    if (sessionStorage.getItem("mode") == "older") {
      changeBottomStyle();
    }
    this.onInit();
  },
  mounted() {
    if (sessionStorage.getItem("mode") == "older") {
      $(".container").addClass("old_container");
    }
  },
  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.success) {
            this.apidata = result.data.data;
            this.pic_width = "100%";
            this.pic_height = "100%";
            this.isloading = false;
          } else {
            this.isloading = false;
            let code = [6001, 6501];
            if (code.indexOf(result.data.bizCode) != "-1") {
              this.$message({
                message: "登录超时，请重新登录",
                duration: 3000,
                type: "info",
                center: true
              });
              setTimeout(() => {
                window.location.replace(
                  "https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=fwzs"
                );
              }, 3000);
            } else {
              this.$message({
                message: result.data.message,
                duration: 3000,
                type: "error",
                center: true
              });
            }
          }
        },
        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;
  font-size: 18px;
  color: #ffffff;
}
.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;
}
.old_container {
  .el-button {
    font-size: 18px;
  }
}
</style>
