<template>
  <AiDetail class="add-label">
    <template #title>
      <ai-title title="添加标签" isShowBack :isShowBottomBorder="true" @onBackClick="cancel">
        <template #rightBtn>
          <el-button @click="preview" size="small" type="danger">预览</el-button>
          <el-button @click="savePdf" size="small" type="primary">下载pdf</el-button>
          <el-button @click="saveTemplate" size="small" type="primary">保存</el-button>
          <el-button @click="print" size="small">打印</el-button>
          <el-button @click="clearPaper" size="small" type="danger">清空纸张</el-button>
        </template>
      </ai-title>
    </template>
    <template #content>
      <ai-card title="标签模板" class="card" :hideTitle="true">
        <template #content>
          <div class="add-label__wrapper">
            <Print ref="printRef" :labels="labels"></Print>
          </div>
        </template>
      </ai-card>
    </template>
  </AiDetail>
</template>

<script>
  import Print from '@/components/print/Print'

  export default {
    components: {
      Print
    },

    data () {
      return {
        labels: []
      }
    },

    methods: {
      cancel() {
        this.$router.go(-1)
      },

      preview () {
        this.$refs.printRef.getHtml()
      },

      savePdf () {
        this.$refs.printRef.savePdf()
      },

      rotatePaper () {
        this.$refs.printRef.rotatePaper()
      },

      saveTemplate () {
        const json = this.$refs.printRef.exportJson()
        console.log(json)
      },

      print () {
        this.$refs.printRef.print()
      },

      clearPaper () {
        this.$refs.printRef.clearPaper()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .add-label {
    ::v-deep(.ai-detail__content--wrapper) {
      max-width: 100%;
      height: 100%;
      margin: 0 20px;
    }

    .card {
      height: 100%;
      overflow: hidden;

      ::v-deep(.ai-card__body) {
        flex: 1;
        height: 100%;
      }

      .add-label__wrapper {
        padding-bottom: 20px;
      }
    }
  }
</style>
