<template>
  <div class="app-container">
    <div style="display: flex; margin-bottom: 50px;align-items:center">
      <span
        style="width: 100px; font-size: 20px; height: 35px; line-height: 35px"
      >跟踪号:</span>
      <el-input v-model="trackingNumber" style="width: 50%" />
      <el-button
        type="primary"
        :loading="loadingData"
        @click="loadData"
      >加载数据</el-button>
      <el-button type="success" @click="genderate">生成图片</el-button>

      <span style="margin-left:20px">选择模板：</span>
      <el-select v-model="currentComponent" placeholder="选择模板">
        <el-option
          v-for="item in templates"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </div>
    <div ref="wrap" class="render-body">
      <!-- <email-1 :email="email" @modify="showModify"></email-1> -->
      <component :is="currentComponent" :email="email" @modify="showModify" />
    </div>

    <el-dialog
      title="修改"
      :visible.sync="popModify"
      width="50%"
      center
      :close-on-click-modal="false"
    >
      <el-input
        v-model="modifyValue"
        type="textarea"
        :autosize="{ minRows: 5, maxRows: 10 }"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="popModify = false">取 消</el-button>
        <el-button type="primary" @click="submitModify">确 定</el-button>
      </span>
    </el-dialog>

    <div>
      <div
        style="
          font-size: 16px;
          font-weight: bold;
          color: #666;
          background-color: #ccc;
          padding: 10px;
        "
      >
        截图生成区域:
      </div>
      <div id="imgContainer" />
    </div>
  </div>
</template>

<script>
import { _getClaimOrderInfo } from '@/api/claimOrderImage.js'
import domtoimage from 'dom-to-image'
import email1 from './components/email1.vue'
import email2 from './components/email2.vue'
import email3 from './components/email3.vue'
import email4 from './components/email4.vue'
export default {
  name: 'ImageGenerate',
  components: {
    email1,
    email2,
    email3,
    email4
  },
  data: function() {
    return {
      loadingData: false,
      currentComponent: 'email1',
      templates: ['email1', 'email2', 'email3', 'email4'],
      email: {
        title: null,
        from: null,
        to: null,
        sent: null,
        message: null
      },
      trackingNumber: '',
      currentModifyProp: null,
      popModify: false,
      modifyValue: null
    }
  },
  methods: {
    switchTemplate() {
      if (this.currentComponent == 'email1') {
        this.currentComponent = 'email2'
      } else this.currentComponent = 'email1'
    },
    submitModify() {
      const prop = this.currentModifyProp
      this.email[prop] = this.modifyValue
      this.popModify = false
    },
    showModify(prop) {
      this.currentModifyProp = prop
      this.modifyValue = this.email[prop]
      this.popModify = true
    },
    genderate() {
      const wrap = this.$refs.wrap
      domtoimage
        .toPng(wrap)
        .then(function(dataUrl) {
          var img = new Image()
          img.src = dataUrl

          var container = document.getElementById('imgContainer')
          container.innerHTML = ''
          container.appendChild(img)
          alert('截图生成成功')
        })
        .catch(function(error) {
          console.error('oops, something went wrong!', error)
        })
    },
    loadData() {
      this.loadingData = true
      const trackingNumber = this.trackingNumber
      _getClaimOrderInfo(trackingNumber)
        .then((resp) => {
          this.email = resp
        })
        .finally(() => {
          this.loadingData = false
        })
    }
  }
}
</script>

<style lang="scss">
.render-body {
  margin: 10px;
  padding: 10px;
}
</style>
