<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">NFT介绍</div>
    </div>
    <div class="detail" v-html="data && data.detail"></div>
    <div class="desc hash flex-default">
      <!-- <m-icon icon="icon-goods-desc" :size="12" className="icon" /> -->
      <div class="title">NFT哈希</div>
    </div>
    <div class="detail hash-detail" v-if="data && data.hash">{{data && data.hash}}</div>
     <div class="desc issue flex-default">
      <div class="title">NFT发行</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,
  },
 
  computed: {
    progressWidth() {
      return this.data && this.data.sales / this.data.circulation * 100
    }
  }
};
</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;
    font-size: 12px;
    // width: 259px;
    word-wrap: break-word;
    word-break: break-all;
    color: #2C66F5;
    border-bottom: 1px solid #2C66F5;
  }
  .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>