<template>
  <div id="commission">
    <el-dialog
      style="word-wrap: break-word;"
      width="700"
      :visible.sync="invitation"
      :close-on-click-modal="false"
      :show-close="false"
      append-to-body
      title="待办"
      class="details"
    >
      <div slot="title" class="dialog_title">
        <span>邀请</span>
        <i class="el-icon-close" @click="close_model()"></i>
      </div>
      <div class="Table">
        <el-form
          ref="form"
          :model="invitation_code"
          label-width="150px"
          size="mini"
          :inline="true"
          class="forms"
        >
          <el-form-item label="供应商链接" class="from_item" prop="location_code" style="width: 100%;">
            <el-input disabled v-model="invitation_code.provider_sign"></el-input>
            <el-button type="warning" @click="p_copyToClipBoard">复制</el-button>
          </el-form-item>
          <el-form-item label="客户链接" class="from_item" prop="location_code" style="width: 100%;">
            <el-input disabled v-model="invitation_code.customer_sign"></el-input>
            <el-button type="warning" @click="c_copyToClipBoard">复制</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import API from '@utils/sha256/myHttpClient'
// import axios from 'axios'
export default {
  name: 'invitation',
  data() {
    return {
      module_name: 'mesAPI/invitation/',
      invitation: true,
      invitation_code: {},
      sign: '',
      url: ''
    }
  },
  mounted() {
    this.url = window.location.href.split('#')[0]
    this.getInvitation()
  },
  methods: {
    getInvitation() {
      API.get(`${this.module_name}`).then(res => {
        res.data.provider_sign = `${this.url}/#/register?sign=${res.data.provider_sign}`
        res.data.customer_sign = `${this.url}/#/register?sign=${res.data.customer_sign}`
        this.invitation_code = res.data
      })
    },
    p_copyToClipBoard() {
      // const coptVaule = this.content
      //  const input = document.createElement('isindex')
      const copyVaule = this.invitation_code.provider_sign
      // 创建'虚拟'DOM
      const input = document.createElement('input')
      document.body.appendChild(input)
      input.setAttribute('value', copyVaule)
      input.select()
      if (document.execCommand('copy')) {
        document.execCommand('copy')
        this.$message({
          type: 'success',
          message: '复制成功!'
        })
      }
      // 删除'虚拟'DOM
      console.log(this.invitation_code.customer_sign)
      this.bill_detail_dialog = false
      document.body.removeChild(input)
    },
    c_copyToClipBoard() {
      // const coptVaule = this.content
      //  const input = document.createElement('isindex')
      const copyVaule = this.invitation_code.customer_sign
      // 创建'虚拟'DOM
      const input = document.createElement('input')
      document.body.appendChild(input)
      input.setAttribute('value', copyVaule)
      input.select()
      if (document.execCommand('copy')) {
        document.execCommand('copy')
        this.$message({
          type: 'success',
          message: '复制成功!'
        })
      }
      // 删除'虚拟'DOM
      this.bill_detail_dialog = false
      document.body.removeChild(input)
    },
    //   关闭详情页面
    close_model() {
      this.$emit('CallBack', false)
    }
  }
}
</script>
<style scoped lang='css'>
.details >>> .el-dialog__title {
  color: #fff;
  font-size: 24px;
}
.forms >>> .el-select {
  width: 18px;
}
.dialog_title {
  color: #000;
  font-size: 24px;
  text-align: center;
}
.dialog_title > i {
  float: right;
  font-size: 25px;
  margin-top: 5px;
}
.forms >>> .from_item {
  font-size: 17px;
  margin-bottom: 40px;
  margin-top: 20px;
  width: 100%;
}
.forms >>> .el-form-item__content {
  width: 80%;
}
.forms >>> .el-input {
  display: inline-block;
  width: 60%;
}
/* .forms>>>.el-button {
  float: right;
  margin-top: -15px;
} */
</style>
