<template>
  <el-popover
    placement="top"
    trigger="hover"
    class="components-ipfs_all"
    popper-class="tx-hash-popover"
  >
    <div class="components-ipfs_all">
      <p class="tx_hash__title">
        {{ $t('view-on-the-chain') }}
      </p>
      <div
        v-show="hash"
        class="tx_hash__address"
      >
        <a
          :href="link + hash"
          target="_blank"
        >
          Hash: {{ hash }}
        </a>
        <svg-icon
          icon-class="copy"
          class="icon"
          @click="copy(hash)"
        />
      </div>
    </div>
    <svg-icon
      slot="reference"
      :style="{ 'font-size': size }"
      icon-class="eth_mini2"
      class="eth_mini_icon"
    />
  </el-popover>
</template>

<script>
export default {
  props: {
    hash: {
      type: String,
      required: true
    },
    size: {
      type: String,
      default: '18px'
    }
  },
  data() {
    return {
      link: 'https://rinkeby.etherscan.io/tx/'
    }
  },
  computed: {
  },
  methods: {
    copy(val) {
      this.$copyText(val).then(
        () => this.$message({ showClose: true, message: this.$t('success.copy'), type: 'success' }),
        () => this.$message({ showClose: true, message: this.$t('error.copy'), type: 'error' })
      )
    }
  }
}
</script>

<style lang="less" scoped>

.components-ipfs_all {
  .eth_mini_icon {
    color: @purpleDark;
    cursor: pointer;
  }
  .tx_hash__title {
    padding: 0;
    margin: 0 0 10px;
    font-size:14px;
    font-weight:bold;
    color:rgba(0,0,0,1);
    line-height:20px;
  }
  .tx_hash__address {
    margin: 0;
    display: flex;
    align-items: center;
    a {
      padding: 0;
      margin: 0;
      font-size:12px;
      color:@purpleDark;
      line-height:17px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .icon {
      margin: 0;
      color: @purpleDark;
      font-size: 16px;
      cursor: pointer;
    }
  }
}

</style>

<style lang="less">
.tx-hash-popover {
  width: 370px;
}

@media screen and (max-width: 390px) {
  .tx-hash-popover {
    width: 90%;
  }
}
</style>
