<template>
  <view>
    <navBar
      :navTitle="collectionsDetail.name"
      :stickyShow="stickyShow"
      :color="'#000000'"
      :backBackGroundColor="'#699A70'"
    ></navBar>

    <view class="top-img">
      <image :src="collectionsDetail.coverImg"></image>
    </view>
    <view
      class="title-t"
      :style="{ fontSize: '36rpx', color: '#434343', fontWeight: 600 }"
      >{{ $t("basic.info") }}</view
    >
    <view class="info-box" style="padding: 28rpx 32rpx 4rpx 32rpx">
      <view class="item">
        <text class="label">{{ $t("series.name") }}</text>
        <text class="value">{{ payDetail.seriesName }}</text>
      </view>
      <view class="item">
        <text class="label">{{ $t("series.issuer") }}</text>
        <text class="value">{{ payDetail.senderName }}</text>
      </view>
      <view class="item">
        <text class="label">{{ $t("series.time") }}</text>
        <text class="value">{{ payDetail.createdAt }}</text>
      </view>
      <view class="item">
        <text class="label">{{ $t("series.price") }}</text>
        <text class="value">
          <text v-if="collectionsDetail.currencyType === 'normal'">{{
            symbol
          }}</text>
          <image
            src="@/static/image/home/jifen.png"
            mode="scaleToFill"
            style="width: 24rpx; height: 24rpx"
            v-else
          />
          {{ payDetail.price }}
          <!-- <text v-if="payDetail.payType === 6">{{
          $t("airdrop")
        }}</text> -->
        </text>
      </view>
      <!-- <view class="item">
				<text class="label">{{$t('series.No')}}</text>
				<text class="value">{{payDetail.payNum}}</text>
			</view> -->
      <view class="item">
        <text class="label">{{ $t("series.hash") }}</text>
        <text class="value">{{ payDetail.artworkHash }}</text>
      </view>
    </view>
    <view class="title-t">{{ $t("collection.info") }}</view>
    <view class="info-box" style="padding: 28rpx 32rpx">
      <view class="item">
        <text class="label">{{ $t("collection.name") }}</text>
        <text class="value">{{ collectionsDetail.name || "-" }}</text>
      </view>
      <view class="item">
        <text class="label">{{ $t("collection.type") }}</text>
        <text class="value">{{ collectionsDetail.collectionType || "-" }}</text>
      </view>
      <view class="item">
        <text class="label">{{ $t("collection.size") }}</text>
        <text class="value">{{ collectionsDetail.size || "-" }}</text>
      </view>
      <view class="item">
        <text class="label">{{ $t("collection.specs") }}</text>
        <text class="value">{{ collectionsDetail.specs || "-" }}</text>
      </view>
      <view class="item">
        <text class="label">{{ $t("collection.address") }}</text>
        <text class="value">{{ collectionsDetail.address || "-" }}</text>
      </view>
      <view class="item">
        <text class="label">{{ $t("collection.intro") }}</text>
        <view class="des">{{ collectionsDetail.intro || "-" }}</view>
      </view>
    </view>
    <view
      class="title-t"
      :style="{ fontSize: '36rpx', color: '#434343', fontWeight: 600 }"
      >{{ $t("collection.detail") }}</view
    >
    <view class="detail-info">
      <!-- <view class="title-t">{{$t('collection.sell')}}</view>
			<view class="box-item">
				<image v-for="item in sellPoint" :key="item" :src="item" mode="widthFix"></image>
			</view> -->
      <view v-if="collDetails.length > 0" class="title-t">{{
        $t("collection.sellDec")
      }}</view>
      <view v-if="collDetails.length > 0" class="box">
        <image
          v-for="item in collDetails"
          :src="item"
          :key="item"
          mode="widthFix"
          class="img"
        ></image>
      </view>
      <view v-if="companyInfo.length > 0" class="title-t">{{
        $t("collection.company")
      }}</view>
      <view v-if="companyInfo.length > 0" class="box">
        <image
          v-for="item in companyInfo"
          :src="item"
          :key="item"
          mode="widthFix"
          class="img"
        ></image>
      </view>
      <view v-if="copyright.length > 0" class="title-t">{{
        $t("collection.copyight")
      }}</view>
      <view v-if="copyright.length > 0" class="box">
        <image
          v-for="item in copyright"
          :src="item"
          :key="item"
          mode="widthFix"
          class="img"
        ></image>
      </view>
      <view v-if="Blockchain.length > 0" class="title-t">{{
        $t("collection.blockchain")
      }}</view>
      <view v-if="Blockchain.length > 0" class="box">
        <image
          v-for="item in Blockchain"
          :src="item"
          :key="item"
          mode="widthFix"
          class="img"
        ></image>
      </view>
    </view>

    <view class="" style="text-align: center; margin-top: 30rpx">
      <image
        src="@/static/image/home/fontree.png"
        mode="aspectFit"
        class="logo"
      ></image>
    </view>
    <image
      src="../../../static/image/mine/cert.png"
      @click="goCert"
      mode=""
      class="cert-img"
    ></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stickyShow: false,
      ID: 0,
      collectionsDetail: {},
      sellPoint: [],
      collDetails: [],
      companyInfo: [],
      copyright: [],
      Blockchain: [],
      payDetail: {},
      allImgList: [],
      symbol:
        uni.getLocale() === "en"
          ? "$"
          : uni.getLocale() === "zh-Hant"
          ? "HK$"
          : "￥",
    };
  },
  onPageScroll(e) {
    this.stickyShow = e.scrollTop > 5 ? true : false;
  },
  methods: {
    goCert() {
      console.log(this.collectionsDetail.coverImg);
      let data = {
        CollectionsUID: this.collectionsDetail.collectionUID,
        collectionImg: this.collectionsDetail.coverImg,
        seriesName: this.collectionsDetail.name,
        physical: this.collectionsDetail.physical,
        payDetail: this.payDetail,
      };
      uni.navigateTo({
        url:
          "/pages/mine/cert/cert?data=" +
          encodeURIComponent(JSON.stringify(data)),
      });
    },
    async getDetail() {
      let data = {
        ID: Number(this.ID),
      };
      let res = await this.$api.mine.paymentDetail(data);
      if (res.status === 0) {
        this.collectionsDetail = res.data.collections;
        this.payDetail = res.data.pay;
        (this.allImgList = this.collectionsDetail.cutImg
          ? JSON.parse(this.collectionsDetail.cutImg)
          : []),
          this.cutImg();
      } else {
        uni.$u.toast(this.$t("load.failed"));
      }
    },
    cutImg() {
      this.allImgList.forEach((v) => {
        if (Array.isArray(v.imgs)) {
          v.imgs = v.imgs.filter((img) => {
            if (img) {
              return img;
            }
          });
        }
      });
      this.allImgList.forEach((v) => {
        if (v.label === "卖点") {
          this.sellPoint = v.imgs;
        } else if (v.label === "藏品细节") {
          this.collDetails = v.imgs;
        } else if (v.label === "工艺/公司介绍") {
          this.companyInfo = v.imgs;
        } else if (v.label === "版权声明") {
          this.copyright = v.imgs;
        } else if (v.label === "区块链说明") {
          this.Blockchain = v.imgs;
        }
      });
    },
  },
  onLoad(option) {
    this.ID = option.ID;
    this.artworkUid = option.artworkUid;
  },
  onShow() {
    this.getDetail();
  },
};
</script>

<style lang="scss">
page {
  background: url("@/static/image/home/detail-kind-bg.png") no-repeat;
  // background-size: 100% 100%;
  // background-attachment:fixed;
  // height: 100vh;
}
.fixed-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 172rpx;
  background: #3e3e3e;
  z-index: 10;
  .btn {
    display: flex;
    padding: 42rpx 38rpx;
  }
  .back {
    width: 172rpx;
    height: 56rpx;
    border-radius: 40rpx;
    background: #efba42;
    margin-right: 30rpx;
  }
  .buyer {
    width: 484rpx;
    height: 56rpx;
    border-radius: 40rpx;
    background: #558bf2;
  }
}
.top-img {
  // background: url('../../../static/image/home/box.png') no-repeat;
  background-repeat: no-repeat;
  background-size: contain;
  width: 660rpx;
  height: 660rpx;
  border-radius: 8rpx;
  margin: 44rpx 44rpx 32rpx 46rpx;
  position: relative;
  .price {
    font-size: 48rpx;
    position: absolute;
    bottom: 10rpx;
    left: 50%;
    transform: translateX(-50%);
  }
  image {
    width: 100%;
    height: 100%;
  }
}
.box-item {
  background: rgba(255, 255, 255, 0.3);
  // margin: 0 44rpx 0 46rpx;
  image {
    width: 100%;
    // height: 198rpx;
    display: block;
  }
}
.detail-info {
  // background: rgba(0,0,0,0.8);
  background: #ffffff;
  border-radius: 8rpx;
  margin: 30rpx;
  padding: 23rpx;
  .box {
    // margin: 0 44rpx 0 46rpx;
    margin-bottom: 46rpx;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8rpx;
    // padding: 38rpx 32rpx;
    position: relative;
    .item-img {
      width: 234rpx;
      height: 234rpx;
      border-radius: 8rpx;
      position: absolute;
      top: 38rpx;
      right: 32rpx;
    }

    .img {
      width: 100%;
      display: block;
    }
  }
}
.title-t {
  text-align: center;
  margin: 40rpx 0 16rpx 0;
  color: #434343;
}
.info-box {
  margin: 0 44rpx 0 46rpx;
  margin-bottom: 46rpx;
  background: #ffffff;
  // background: rgba(11, 0, 0, 0.3);
  border-radius: 8rpx;
  // padding: 38rpx 32rpx;
  position: relative;

  .item {
    display: flex;
    font-size: 20rpx;
    margin-bottom: 32rpx;
    .label {
      color: #434343;
      padding-right: 40rpx;
      width: 130rpx;
    }
    .value {
      color: #878787;
      width: 450rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      word-break: break-all;
      white-space: normal;
    }
    .des {
      color: #878787;
      width: 450rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      word-break: break-all;
      white-space: normal;
      font-size: 20rpx;
    }
  }
  .img {
    width: 100%;
  }
}
.logo {
  margin-top: 10rpx;
  width: 202rpx;
  height: 56rpx;
  margin-bottom: 40rpx;
}
.cert-img {
  position: fixed;
  right: 40rpx;
  bottom: 25vh;
  width: 84rpx;
  height: 84rpx;
}
</style>
