<template>
  <el-radio-group v-model="radio" size="mini" class="auth-card-template" @change="handleRadioChange">
    <el-row :gutter="16">
      <el-col :span="8">
        <img class="cover" :src="authCard1" alt="">
        <div class="footer">
          <el-radio :label="1">模板一</el-radio>
          <el-button type="primary" size="mini" round @click="preview(1)">预览</el-button>
        </div>
      </el-col>
      <el-col :span="8">
        <img class="cover" :src="authCard2" alt="">
        <div class="footer">
          <el-radio :label="2">模板二</el-radio>
          <el-button type="primary" size="mini" round @click="preview(2)">预览</el-button>
        </div>
      </el-col>
      <el-col :span="8">
        <img class="cover" :src="authCard3" alt="">
        <div class="footer">
          <el-radio :label="3">模板三</el-radio>
          <el-button type="primary" size="mini" round @click="preview(3)">预览</el-button>
        </div>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="dialogVisible">
      <div class="preview">
        <img :src="previewUrl" alt="">
        <img v-show="showQrcode" class="qrcode" :class="['type' + previewType]" :src="qrcodeUrl">
      </div>
    </el-dialog>
  </el-radio-group>
</template>

<script>
import QRCode from 'qrcode'
import authCard1 from '@/assets/img/auth-card-placeholder-01.png'
import authCard2 from '@/assets/img/auth-card-placeholder-02.png'
import authCard3 from '@/assets/img/auth-card-placeholder-03.png'
export default {
  model: {
    event: 'change',
    prop: 'radio'
  },
  props: {
    imageList: {
      type: Array,
      default: () => []
    },
    showQrcode: {
      type: Boolean,
      default: true
    },
    radio: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      authCard1,
      authCard2,
      authCard3,
      previewUrl: '',
      dialogVisible: false,
      previewType: -1,
      qrcodeUrl: ''
    }
  },
  computed: {
    drawImage() {
      return this.imageList[0].url
    }
  },
  created() {
    this.drawQrcode()
  },
  methods: {
    handleRadioChange() {
      this.$emit('change', this.radio)
    },

    async drawQrcode() {
      const options = {
        width: 192,
        height: 192,
        margin: 1
      }

      this.qrcodeUrl = await QRCode.toDataURL('undefined', options)

      console.log(this.qrcodeUrl)
    },

    preview(type) {
      this.previewType = type
      this.dialogVisible = true
      this.previewUrl = this.drawImage
    }
  }
}
</script>

<style lang="scss" scoped>
.auth-card-template{
  width: 100%;

  .cover{
    width: 100%;
    display: block;
  }

  .footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding:0 8px;
  }
}

.preview{
  max-width: 920px;
  max-height: 690px;
  position: relative;
  overflow: hidden;
  img{
    width: 100%;
    max-height: 100%;
    display: block;
    position: relative;
    z-index: 5;
  }
  .qrcode{
    width: 100px;
    height: 100px;
    position: absolute;

    z-index: 9;

    background: red;

    &.type1{
      bottom: 70px;
      left: 70px;
    }

    &.type3{
      top: 50%;
      transform: translateY(-50%);
      left: 70px;
    }

    &.type2{
      top: 50%;
      transform: translateY(-50%);
      right: 70px;
    }
  }
}
</style>
