<template>
  <el-dialog :title="linkObj.title"
             :visible.sync="linkObj.show" center
      width="800px">
        <el-form :model="form" ref="form" label-width="100px">
  <el-form-item
    label="输入链接"
    prop="link"
    :rules="[
      { required: true, message: '内容不能为空'}
    ]"
  >
    <el-input  v-model="form.link" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('form')">获取</el-button>
  </el-form-item>
</el-form>
<div class="link_content" v-if="content.show">
      <div class="content">
          <el-input v-model="content.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(content.text)">复制链接</el-button>
</div>
  </el-dialog>
</template>
<script>
  import {getLinkApi} from "../../../service/api";
export default {
  name: "getLink",
  props: ["linkObj"],
  data() {
    return {
      form: {
        link: ""
      },
        content:{
        show:false,
        text:""
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
        let json={}
        json.url=this.form.link;
         getLinkApi(json).then((res)=>{
              this.content.show=true;
              this.content.text=res.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.form.link="";
       this.content.show=false;
      }
    }
  }
};
</script>
<style scoped lang="less">
.content{
  height: 100px;
}
</style>