<template>
  <div>
    <div class="img-box">
      <img @click="imgShow = true" :src="images[0]" alt="">
    </div>
    <van-image-preview v-model="imgShow" :images="images"></van-image-preview>
    <div class="tips">确认资料信息无误后，<span>请长按图片保存下载</span>，将信息页打印后，请在个人签名处签名后上传，注意签名不要连笔。</div>
    <div class="btn-box">
      <div class="b btn-style" @click="backEdit">返回修改</div>
      <div class="b btn-style" @click="goUpload">已签名，去上传</div>
      <!-- <van-button class="b" @click="backEdit" color="linear-gradient(180deg, #FF9B96 0%, #CE3E3A 100%)">返回修改</van-button> -->
      <!-- <van-button @click="goUpload" class="b" color="linear-gradient(180deg, #FF9B96 0%, #CE3E3A 100%)">已签名，去上传</van-button> -->
    </div>
  </div>
</template>
<script>
import { ImagePreview, Dialog } from 'vant'
export default {
  metaInfo: {
    title: '预览'
  },
  components: {
    [ImagePreview.name]: ImagePreview,
    [Dialog.name]: Dialog
  },
  data() {
    return {
      imgShow: false,
      images: []
    }
  },
  mounted() {
    this.images = [window.sessionStorage.dataUrl]
  },
  methods: {
    backEdit() {
      // this.$router.go(-1)
      this.$router.replace({
        path: '/attestation/form',
        query: {
          id: this.$route.query.id,
          edit: 1
        }
      })
      // if (this.$route.query.edit) {
      // } else {
      //   this.$router.replace({
      //     path: '/attestation/form',
      //     query: {
      //       id: this.$route.query.id,
      //       back: 1
      //     }
      //   })
      // }
    },
    goUpload() {
      Dialog.confirm({
        title: '',
        message: '上传前，请长按本页图片将图保存下载至本地相册。',
        confirmButtonText: '已保存',
        cancelButtonText: '未保存'
      })
        .then(() => {
          // on confirm
          this.$router.replace({
            path: '/attestation/upload',
            query: {
              id: this.$route.query.id,
              edit: 1
            }
          })
        })
        .catch(() => {
          // on cancel
        })
      // if (this.$route.query.edit) {
      // } else {
      //   this.$router.replace({
      //     path: '/attestation/upload',
      //     query: {
      //       id: this.$route.query.id
      //     }
      //   })
      // }
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-style{
  width: 1.2rem;
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background: #af1b40;
  border-radius: 20px;
  cursor: pointer;
  border: none;
}
.img-box{
  img{
    width: 100%;
  }
}
.tips{
  padding: .1rem;
  span{
    color: red;
    font-weight: bold;
  }
}
.btn-box{
  margin-top: .8rem;
  display: flex;
  justify-content: space-around;
  .b{
    width: 1.3rem;
  }
}
</style>
