<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="20%"
    append-to-body
    :before-close="handleClose"
  >
    <div class="mobile-form__detail-container">
      <vue-qr
        :correct-level="3"
        :auto-color="false"
        color-dark="#000000"
        background-color="#ffffff"
        :text="codeUrl"
        :size="200"
        :margin="10"
        :logo-margin="10"
        :logo-corner-radius="0"
        :logo-scale="0.12"
        class="qr-code"
      ></vue-qr>
      <span>请扫码查看表单详情</span>
    </div>
  </el-dialog>
</template>

<script>
import VueQr from 'vue-qr'
import {mapState} from 'vuex'
export default {
  name: 'MobilePreviewFormDialog',
  components: {
    VueQr
  },
   props: {
    formId: String
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  computed: {
    ...mapState('login', ['currentUser']),
    codeUrl() {
      return `${window.context.mobile}/formDetail/${this.formId}?token=${this.currentUser.token}`
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
    },
    openMobilePreviewForm(){
      this.dialogVisible = true
    }
  },
}
</script>

<style lang="scss" scoped>
.mobile-form__detail-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
