<template>
  <div id="app">
    <div id="loading"></div>

    <h3 style="text-align: left;margin-left: 30px;">鏀寔鐨勬墦鍗版柟寮�:</h3>
    <el-divider><i class="el-icon-printer"></i></el-divider>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-button type="primary"
                   icon="el-icon-printer"
                   v-print>鍏ㄥ眬鎵撳嵃</el-button>
        <el-card class="box-card">
          瀵瑰綋鍓嶉〉闈㈠叏閮ㄨ繘琛屾墦鍗�
        </el-card>
      </el-col>
    </el-row>
    <el-divider><i class="el-icon-printer"></i></el-divider>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-button type="primary"
                   icon="el-icon-magic-stick"
                   v-print="'#printMe'">灞€閮ㄦ墦鍗�(蹇€�)</el-button>
                   <el-card class="box-card">
          鍙互鎵撳嵃椤甸潰鏌愰儴鍒嗗唴瀹癸紝鐩存帴浼犲叆瀵瑰簲鐨勫敮涓€鏍囪瘑ID
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-button type="primary"
                   icon="el-icon-umbrella"
                   v-print="printObj">灞€閮ㄦ墦鍗�(瀵硅薄閰嶇疆)</el-button>
                   <el-card class="box-card">
          涔熻浣犱細闇€瑕佷竴浜涢厤缃紝鍙帴鏀朵竴涓璞★紝鏍规嵁鏂囨。API杩涜璁剧疆
        </el-card>
      </el-col>
    </el-row>
    <el-divider><i class="el-icon-printer"></i></el-divider>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-button type="primary"
                   icon="el-icon-bank-card"
                   v-print="printUrl">棰勮缃戝潃</el-button>
                   <el-card class="box-card">
          鎴戦渶瑕佹墦鍗版寚瀹氱殑缃戝潃(瑕佺鍚堝悓婧愮瓥鐣�) 闇€瑕佷紶鍏ヤ竴涓璞★紝璇︾粏鐪嬫枃妗PI杩涜璁剧疆
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-button type="primary"
                   icon="el-icon-wallet"
                   v-print="printAsyncUrl">棰勮缃戝潃(寮傛)</el-button>
                   <el-card class="box-card">
          浣犳墦鍗扮殑缃戝潃(URL)涔熸槸鍙互閫氳繃寮傛寰楀埌鐨�
        </el-card>
        寮傛鑾峰彇URL:<el-progress :text-inside="true" :stroke-width="20" :percentage="times"></el-progress>
      </el-col>
    </el-row>
    <div>
<el-divider><i class="el-icon-printer"></i></el-divider>
      <div class="asyncTips">

      </div>
      <div class="box"
           v-show="printLoading">
        <div class="loader-04"></div>
        姝ｅ湪澶勭悊...璇风◢绛�
      </div>
      <h3  style="text-align: left;margin-left: 30px;">涓嬮潰鏄鎵撳嵃鐨勪緥瀛�:</h3>

      <div id="printMe"
           style="background: #dac9c9">
        <div ref="qrcode"></div>
        <div ref="echartMain"
             :style="{width: '300px', height: '300px'}"></div>
        <input type="number" />
        <input type="time" />
        <input type="checkbox" />
        <input type="radio" />
        <select>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>

        <select>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
        <textarea name=""
                  id=""
                  cols="30"
                  rows="10"></textarea>
        <p>钁姦濞冿紝钁姦濞�</p>
        <p style="background: yellow">涓€鏍硅棨涓婁竷鏈佃姳</p>
        <p>灏忓皬鏍戣棨鏄垜瀹� 鍟﹀暒鍟﹀暒</p>
        <p>鍙綋褰撳挌鍜氬綋褰� 娴囦笉澶�</p>
        <p>鍙綋褰撳挌鍜氬綋褰� 鏄垜瀹�</p>
        <p>鍟﹀暒鍟﹀暒</p>
        <p>...</p>
      </div>
      <p>鍙綋褰撳挌鍜氬綋褰� 娴囦笉澶�</p>
    </div>
  </div>
</template>
<style type="text/css">
p {
  color: blue;
}
</style>
<script>
import QRCode from "qrcodejs2";
import * as echarts from "echarts";
export default {
  name: "app",
  data () {
    return {
      printLoading: false,
      times: 0,
      printAsyncUrl: {
        preview: true,
        previewTitle: 'Test Title',
        previewPrintBtnLabel: 'Print',
        asyncUrl (reslove, vue) {
          const _set = setInterval(() => {
            vue.times += 20
          }, 1000)
          setTimeout(() => {
            reslove(process.env.NODE_ENV === 'production' ? 'https://power-kxlee.github.io/' : 'http://localhost:8080/')
            clearInterval(_set)
          }, 5000)
        },
        previewBeforeOpenCallback: this.previewBeforeOpenCallback ,
        previewOpenCallback:this.previewOpenCallback,
        beforeOpenCallback: this.beforeOpenCallback,
        openCallback: this.openCallback,
        closeCallback: this.closeCallback,
        clickMounted: this.clickMounted
      },
      printUrl: {
        url: process.env.NODE_ENV === 'production' ? 'https://power-kxlee.github.io/' : 'http://localhost:8080/',
        preview: true,
        previewTitle: 'Test Title',
        previewPrintBtnLabel: 'Print',
        previewBeforeOpenCallback: this.previewBeforeOpenCallback ,
        previewOpenCallback:this.previewOpenCallback,
        beforeOpenCallback: this.beforeOpenCallback,
        openCallback: this.openCallback,
        closeCallback: this.closeCallback,
        clickMounted: this.clickMounted
      },
      printObj: {
        id: "printMe",
        popTitle: "good print",
        extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        beforeOpenCallback: this.beforeOpenCallback,
        openCallback: this.openCallback,
        closeCallback: this.closeCallback,
        clickMounted: this.clickMounted

      },
    };
  },
  mounted () {
    this.$nextTick(() => {
      this.echart();
      new QRCode(this.$refs.qrcode, {
        width: 100,
        height: 100,
        text: "https://www.baidu.com/",
      });
    });
  },
  methods: {
    clickMounted(vue) {
      vue.$notify({
        title: '娑堟伅',
        message: '鐐瑰嚮鎸夐挳鐨勫洖璋冧簨浠�',
      });
    },
    previewBeforeOpenCallback(vue) {
      vue.$notify({
        title: '娑堟伅',
        message: '姝ｅ湪鍔犺浇棰勮绐楀彛',
      });
    },
    previewOpenCallback(vue) {
      vue.times = 0
      vue.$notify({
            title: '娑堟伅',
            message: '宸茬粡鍔犺浇瀹岄瑙堢獥鍙�',
            type: 'success'
          });
    },
    beforeOpenCallback(vue) {
      vue.printLoading = true
      vue.$notify({
        title: '娑堟伅',
        message: '姝ｅ湪鍑嗗鎵撳嵃鎺т欢',
      });
    },
    openCallback(vue) {
      vue.printLoading = false
      vue.$notify({
        title: '娑堟伅',
        message: '宸茬粡鎵撳紑浜� 鎵撳嵃鎺т欢',
      });
    },
    closeCallback(vue) {
      vue.$notify({
        title: '娑堟伅',
        message: '鍏抽棴浜嗘墦鍗板伐鍏�',
      });
    },
    beforeOpen () {
      this.printLoading = true
      console.log('鍑嗗鎵撳紑')
    },
    echart () {
      let myChart = echarts.init(this.$refs.echartMain);
      myChart.setOption({
        title: {
          text: "ECharts 鍏ラ棬绀轰緥",
        },
        tooltip: {},
        xAxis: {
          data: ["琛～", "缇婃瘺琛�", "闆汉琛�", "瑁ゅ瓙", "楂樿窡闉�", "琚滃瓙"],
        },
        yAxis: {},
        series: [
          {
            name: "閿€閲�",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
#app::v-deep {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
      width: 800px;
    margin: 0 auto;
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .box-card {
      margin-top: 10px;
    }
  }
}
[class*="loader-"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  color: inherit;
  vertical-align: middle;
  pointer-events: none;
}
.loader-04 {
  border: 1px solid currentcolor;
  border-radius: 50%;
  -webkit-animation: 1s loader-04 linear infinite;
  animation: 1s loader-04 linear infinite;
  position: relative;
}
.loader-04:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: -0.2em;
  left: 50%;
  border: 0.2em solid currentcolor;
  border-radius: 50%;
}
@-webkit-keyframes loader-04 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loader-04 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>