<template>
  <div class="blind-box-goods-detail-con">
    <div class="desc">
      <div class="header flex-default">
        <m-icon icon="icon-double-arrow" :size="10" className="icon" />
        <div class="title">查看盲盒详情</div>
      </div>
      <div class="blind-cell">
        <div class="item-con flex-default" @click="goShop(data.merchantId)">
          <div class="title">发行方</div>
          <div class="content flex-default">
            <div class="text">{{data.merchantName}}</div>
            <m-icon icon="icon-more" :size="16" className="more"/>
          </div>
        </div>
        <div class="item-con flex-default" @click="handleRule">
          <div class="title">规则介绍</div>
          <div class="content flex-default">
            <div class="text">盲盒规则</div>
            <m-icon icon="icon-more" :size="16" className="more"/>
          </div>
        </div>
        <div class="item-con flex-default">
          <div class="title">限量发行</div>
          <div class="content flex-default">
            <div class="text">{{data.circulation}}份</div>
            <!-- <m-icon icon="icon-more" :size="10" className="more" /> -->
          </div>
        </div>
      </div>
    </div>
    <div class="blind-detail">
      <div class="header">
        商品详情
      </div>
      <div class="detail" v-html="data&&data.detail" v-finishHtml></div>
    </div>
    <van-popup v-model="showPopup" position="bottom" round closeable>
    <div class="blind-rule">
      <div class="title">规则说明</div>
      <div class="content" v-html="data &&data.blindBoxRule" v-finishHtml></div>
    </div>
  </van-popup>
  </div>
</template> 

<script>
export default {
  directives:{
    finishHtml:{
      update(el) {
        let children=el.childNodes
        for(let item of children){
          if(item.style.paddingLeft!=='10px'){
            item.style.padding="0 10px"
          }
        }
      }
    },
  },
  props: {
    data: {
    type: Object,
      default: () => {
        return {};
      },
    }
  },
  data() {
    return {
      showPopup: false
    }
  },
  methods: {
    handleRule() {
      this.showPopup = true
    },
  },
};
</script>

<style lang="less">
.blind-box-goods-detail-con {
  border-radius: 10px;
  margin-top: 20px;
  // padding-bottom: 15px;

  .desc {
    background: url("~@/assets/img/blind-box-detail.png") no-repeat;
    background-size: 100%;
    padding-bottom: 10px;
    .header {
      justify-content: center;
      align-items: center;
      .icon {
        margin-right: 5px;
      }
      .title {
        color: #140603;
        font-size: 14px;
        font-weight: bold;
      }
    }
    .blind-cell {
      background: #ffffff;
      margin: 20px 16px;
      border-radius: 6px;
      // height: 116px;
      > .item-con {
        height: 38px;
        align-items: center;
        justify-content: space-between;
        padding: 0 14px;
      }
      > .item-con > .title {
        font-size: 14px;
        color: #030711;
        margin-right: 15px;
      }
      > .item-con > .content {
        .text {
          font-size: 14px;
          color: #030711;
          flex: 1;
          // margin-right: 20px;
          white-space: pre-line;
        }
      }
    }
  }
  .blind-detail {
    background: #ffffff;
    border-radius: 12px 12px 0px 0px;
    margin-top:-12px;
    .header {
      padding: 20px 16px;
      color: #030711;
      font-size: 16px;
      font-weight: 600;
    }
  }
  .blind-rule {
    min-height: 200px;
    padding-top: 15px;
    .title {
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      color: #140603;
      margin-bottom: 15px;
    }
    .content{
      min-height: 200px;
      background: #F5F7FB;
      border-radius: 10px 10px 0px 0px;
      padding:15px;
      overflow: auto;
      font-size: 14px;
    }
  }
}
</style>