<template>
    <div class="info_content_item">
      <div class="content_item_key">{{label}}</div>
      <div class="content_item_value">
          <div class="text">{{isHash? formatHash : value}}</div>
          <div class="copyBtn" @click="copyHandler(value)">
              <Icon name="icon-fuzhi" color="#7388AB" v-if="copy"></Icon>
          </div>
          
      </div>
    </div>
</template>

<script lang='ts'>
import Vue from 'vue'
import Icon from "@/components/common/Icon.vue"
import ClipboardJS from "clipboard";

export default Vue.extend({
   name:'',
   props:{
       label:{
           type: String,
           required: true,
       },
       value:{
           required: true,
       },
       copy: {
           type: Boolean,
           default: false
       },
       isHash: {
           type: Boolean,
           default: false
       }
   },
   components:{
       Icon
   },
   computed: {
       formatHash(){
           return this.value.slice(0, 20) + '...' + this.value.slice(-4)
       }
   },
   methods: {
       copyHandler(text:string | number){
            let clipboard = new ClipboardJS('.copyBtn', {
                text: function() {
                        return text.toString();
                      }
                });
            clipboard.on("success", (e)=>{
              this.$toast("复制成功~");
              e.clearSelection();
            });
      
            clipboard.on("error", ()=>{
              this.$toast("复制失败~");
            });
       }
   }
})
</script>

<style scoped lang='less'>
    .info_content_item {
      height: 30px;
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 12px;
      line-height: 30px;
      .content_item_key {
        color: #7388AB;
        min-width: 30%;
      }
      .content_item_value {
        max-width: 70%;
        color: #2B446C;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text {
            padding-right: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
      }
    }
</style>