<template>
  <el-dialog :title="linkObj.title" :visible.sync="linkObj.show" center width="800px">

    <el-tabs v-model="activeName" type="card" style="line-height:1">
      <el-tab-pane label="生成短链接" name="first">
        <el-form :model="linkForm" ref="linkForm" label-width="100px">
          <el-form-item label="输入链接" prop="link" :rules="[ { required: true, message: '内容不能为空'}]">
            <el-input v-model="linkForm.link" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('linkForm')">获取</el-button>
          </el-form-item>
        </el-form>
        <div class="link_content" v-if="linkContent.show">
          <div class="content">
            <el-input v-model="linkContent.text" readonly="readonly" id="text"></el-input>
            <textarea id="input" style="opacity:0;z-index=-10;position:absolute;top:0;left:0;"></textarea>
          </div>
          <el-button type="primary" @click="copyUrl(linkContent.text)">复制链接</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="生成二维码" name="second">
        <el-form :model="qrForm" ref="qrForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="输入链接" prop="link" :rules="[{ required: true, message: '内容不能为空'} ]">
            <el-input v-model="qrForm.link" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitqrForm('qrForm')">获取</el-button>
          </el-form-item>
        </el-form>
        <div class="link_content" v-if="qrContent.show">
          <div class="qr_content">
            <img :src="qrContent.url" id="cavasimg">
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

  </el-dialog>
</template>
<script>
import { getLinkApi } from "../../../service/api";
export default {
  name: "getLink",
  props: ["linkObj"],
  data() {
    return {
      activeName: "first",
      linkForm: {
        link: ""
      },
      qrForm: {
        link: ""
      },
      linkContent: {
        show: false,
        text: ""
      },
      qrContent: {
        show: false,
        url: ""
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let json = {};
          json.url = this.linkForm.link;
          getLinkApi(json).then(res => {
            this.linkContent.show = true;
            this.linkContent.text = res.url;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
     submitqrForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let json1 = {};
          json1.url = this.qrForm.link;
          json1.url=encodeURI(json1.url)
          this.qrContent.show = true;
          this.qrContent.url = `/api/public/qrcode?str=${
            json1.url
          }`;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    copyUrl(data) {
      let url = data;
      let oInput = document.createElement("input");
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
        message: "已成功复制到剪切板",
        type: "success"
      });
      oInput.remove();
    }
  },
  watch: {
    "linkObj.show": function(a) {
      if (!a) {
        this.linkForm.link = "";
        this.qrForm.link = "";
        this.linkContent.show = false;
        this.qrContent.show = false;
      }
    }
  }
};
</script>
<style scoped lang="less">
.content {
  height: 100px;
}
.qr_content {
  width: 300px;
  height: 300px;
  margin: 0 auto 20px;
  img {
    width: 300px;
    height: 300px;
  }
}
</style>