<template>
  <div class="goods-detail-con">
    <div class="header flex-default">
      <m-icon icon="icon-3dot" :size="10" className="icon" />
      <div class="title">数字藏品详情</div>
    </div>
    <div class="desc flex-default">
      <!-- <m-icon icon="icon-goods-desc" :size="12" className="icon" /> -->
      <div class="title">简介</div>
    </div>
    <div class="detail" v-html="data && data.detail"  v-finishHtml></div>
    <div class="desc hash flex-default">
      <!-- <m-icon icon="icon-goods-desc" :size="12" className="icon" /> -->
      <div class="title">溯源</div>
    </div>
    <div class="detail hash-detail flex-default" @click="goTo" v-if="data && data.hash">
        <div class="left-icon">
          <img class="left-icon" src="@/assets/img/hash.png" alt="">
        </div>
        <div class="center-con">
          <div class="title">数字藏品哈希</div>
          <div class="hash">{{(data && data.hash) | hashsFilter}}</div>
        </div>
        <div class="right-icon">
          <m-icon icon="icon-more" :size="12" className="icon" />
        </div>
    </div>
     <div class="desc issue flex-default">
      <div class="title">总发行量</div>
    </div>
    <div class="desc issue-detail">
      <div class="progress-box">
          <div class="progress-con" :style="{width:progressWidth ? progressWidth + '%' : 0}">

          </div>
      </div>
      <div class="issue-data flex-default">
        <div class="left">
          已售出<span>{{data && data.sales}}份</span>
      </div>
      <div class="right">
        共{{data && data.circulation}}份
      </div>
      </div>
    </div>
  </div>
</template> 

<script>
export default {
  props: {
    data: Object,
  },
  directives:{
    finishHtml:{
      update(el) {
        let children=el.childNodes
        for(let item of children){
          if(item.style.paddingLeft!=='10px'){
            item.style.padding="0 10px"
          }
        }
      }
    },
  },
  computed: {
    progressWidth() {
      return this.data && this.data.sales / this.data.circulation * 100
    }
  },
  filters: {
    hashsFilter(val) {
      if (!val) {
        return "--";
      }
        return val.substr(0, 15) + "...." + val.substr(val.length - 15);
      },
  },
  methods:{
    goTo() {
      window.location.href = `https://nft.inmvo.com/Nft/${this.data.hash}`
    }
  }
};
</script>

<style lang="less">
.goods-detail-con {
  border-radius: 10px;
  background: #ffffff;
  margin-bottom: 10px;
  padding-bottom: 15px;
  .header {
    padding: 16px 17px;
    align-items: center;
    .icon {
      margin-right: 5px;
    }
    .title {
      color: #140603;
      font-size: 14px;
      font-weight: bold;
    }
  }
  .desc {
    padding: 0 16px 15px 16px;
    .icon {
      margin-right: 4px;
    }
    .title {
      color: #140603;
      font-size: 12px;
      font-weight: bold;
    }
  }
  .detail{
    color: #140603;
    font-size: 12px;
    padding:0 7px;
  }
  >.hash {
     padding: 16px 17px;
  }
  .hash-detail {
    margin:0 16px;
    padding:12px;
    background: #F1F5FF;
    border-radius: 6px;
    
    .left-icon{
      width:42px ;
      height: 42px;
    }
    .center-con {
      height: 42px;
      margin-left: 16px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .title{
        font-weight: 500;
        color: #140603;
        font-family: PingFangSC-Medium, PingFang SC;
        font-size: 15px;
      }
      >.hash {
        color: #999999;
        font-size: 12px;
      }
    }
  }
  .issue{
    margin-top: 14px;
  }
  .issue-detail {
    .progress-box{
      width: 100%;
      height: 10px;
      background: #EEEEEE;
      border-radius: 6px;
      .progress-con {
        background: #2C66F5;
        border-radius: 6px;
        height: 10px;
      }
    }
  }
  .issue-data{
    justify-content: space-between;
    margin-top:8px ;
    span{
      color:#2C66F5 ;
      margin-left: 5px;
    }
  }
}

</style>