<template>
  <view>
    <navBar
      :navTitle="seriesName"
      :stickyShow="stickyShow"
      :color="'#000000'"
      :backBackGroundColor="'#699A70'"
    >
    </navBar>
    <view class="top-img">
      <image :src="collectionImg"></image>
    </view>

    <view
      class=""
      style="margin: auto; width: 500rpx"
      v-if="physical && status === 2"
    >
      <u-button
        type="primary"
        :text="$t('apply.logistics')"
        class="apply"
        @click="apply"
      ></u-button>
    </view>
    <view class="info-box">
      <view class="title">{{ $t("logistics.info") }}</view>
      <view class="address-box">
        <view class="item">
          <text class="label">{{ $t("telephone") }}</text>
          <text class="value" @click="goPhone">(852) 5491 1547</text>
        </view>
      </view>

      <view class="address-box" v-if="status > 3">
        <view class="item bm">
          <text class="label">{{ $t("consignee.name") }}</text>
          <text class="value">{{ express.name }}</text>
        </view>
        <view class="item bm">
          <text class="label">{{ $t("consignee.address") }}</text>
          <text class="value">{{ express.address }}</text>
        </view>
        <view class="item">
          <text class="label">{{ $t("consignee.phone") }}</text>
          <text class="value">{{ express.telNum }}</text>
        </view>
      </view>
    </view>

    <view class="info-box">
      <view class="title">{{ $t("realHashTitle") }}</view>
      <view class="box">
        <view class="item">
          <text class="label">{{ $t("realHash") }}</text>
          <text class="value">{{ realHash }}</text>
        </view>
      </view>
    </view>

    <view class="info-box">
      <view class="title">{{ $t("release.info") }}</view>
      <view class="box">
        <view class="item">
          <text class="label">{{ $t("series.issuer") }}</text>
          <text class="value">{{ detail.publisher || "-" }}</text>
        </view>
        <view class="item">
          <text class="label">{{ $t("release.time") }}</text>
          <text class="value">{{ detail.published_time || "-" }}</text>
        </view>
        <view class="item">
          <text class="label">{{ $t("brand.side") }}</text>
          <text class="value">{{ detail.brand_name || "-" }}</text>
        </view>
        <view class="item">
          <text class="label">{{ $t("series.hash") }}</text>
          <text class="value">{{ detail.brand_hash || "-" }}</text>
        </view>
      </view>
    </view>
    <view class="info-box">
      <view class="title">{{ $t("circulation.info") }}</view>
      <view class="detail">
        <view class="item" v-for="(item, index) in flows" :key="index">
          <view class="left">
            {{ item.createdAt }}
            <!-- <view class="" style="font-size: 10rpx;">
							星期二 下午 5:07
						</view> -->
          </view>
          <view class="right">
            <view class="cricle2" v-if="item.status === 1"></view>
            <view class="cricle" v-else></view>
            <view class="item">
              <text class="label">{{ $t("possessor") }}</text>
              <text class="value">{{ item.holdName || "-" }}</text>
            </view>
            <view class="item">
              <text class="label">{{ $t("collection.status") }}</text>
              <text class="value">{{
                item.status == 1 ? $t("in.library") : $t("been.applied")
              }}</text>
            </view>
            <view class="item">
              <text class="label">{{ $t("circulation.type") }}</text>
              <text class="value">{{
                item.type == 1 ? $t("on.line") : "-"
              }}</text>
            </view>
            <view class="item">
              <text class="label">{{ $t("circulation.time") }}</text>
              <text class="value">{{ item.createdAt || "-" }}</text>
            </view>
            <view class="item" v-if="item.flowHash">
              <text class="label">{{ $t("transaction.hash") }}</text>
              <text class="value" style="font-size: 24rpx">{{
                item.flowHash || "-"
              }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="" style="text-align: center; margin-top: 30rpx">
      <image src="@/static/image/home/fontree.png" mode="" class="logo"></image>
    </view>
    <u-popup
      :show="showApply"
      mode="center"
      @close="closeApply"
      bgColor="transparent"
    >
      <view class="popup-top"> *{{ $t("apply.tips") }} </view>
      <view class="popup-box">
        <view class="title">{{ $t("input.address") }}</view>
        <view class="">
          <view class="input-box">
            <view class="label">{{ $t("consignee.name") }}</view>
            <view class="input">
              <u--input
                border="none"
                shape="circle"
                v-model="name"
                :placeholder="$t('input.pla')"
              ></u--input>
            </view>
          </view>
          <view class="input-box">
            <view class="label">{{ $t("consignee.address") }}</view>
            <view class="input">
              <u--textarea
                v-model="address"
                border="none"
                :placeholder="$t('input.pla')"
                autoHeight
              ></u--textarea>
            </view>
          </view>
          <view class="input-box">
            <view class="label">{{ $t("consignee.phone") }}</view>
            <view class="input">
              <u--input
                border="none"
                shape="circle"
                v-model="telNum"
                :placeholder="$t('input.pla')"
              ></u--input>
            </view>
          </view>
        </view>
      </view>
      <view class="btns">
        <u-button
          :text="$t('navbar.back')"
          color="#EDC466"
          @click="closeApply"
          style="width: 260rpx; height: 56rpx; border-radius: 40rpx"
        ></u-button>
        <u-button
          :text="$t('apply.btn')"
          color="#699A70"
          @click="applyCom"
          style="width: 260rpx; height: 56rpx; border-radius: 40rpx"
        ></u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stickyShow: false,
      showApply: false,
      address: "",
      name: "",
      telNum: "",
      CollectionsUID: "",
      express: {},
      flows: [],
      detail: {},
      seriesName: "",
      collectionImg: "",
      ID: "",
      status: "",
      realHash: "",
      physical: "",
      //订单状态(1-待支付 2-成功 3-失败，4-已申请快递，5后台批准快递 6-退款)
    };
  },
  onPageScroll(e) {
    this.stickyShow = e.scrollTop > 5 ? true : false;
  },
  onShow() {
    console.log(11111111, this.flows);
  },
  methods: {
    apply() {
      this.showApply = true;
    },
    closeApply() {
      this.showApply = false;
      this.name = "";
      this.address = "";
      this.telNum = "";
    },
    async applyCom() {
      let name = this.$common.vefEmpty(
        this.name,
        this.$t("error.consignee.name")
      );
      let address = this.$common.vefEmpty(
        this.address,
        this.$t("error.consignee.address")
      );
      let telNum = this.$common.vefEmpty(
        this.telNum,
        this.$t("error.consignee.phone")
      );
      if (!name || !address || !telNum) return;
      let data = {
        ID: Number(this.ID),
        express: {
          address: this.address,
          name: this.name,
          telNum: this.telNum,
        },
      };
      let res = await this.$api.mine.paymentApproval(data);
      if (res.status === 0) {
        uni.$u.toast(this.$t("apply.succes"));
        this.status = 4;
        this.express = res.data.express;
        this.flows = res.data.flows;
      } else {
        uni.$u.toast(this.$t("apply.error"));
      }
      this.showApply = false;
      this.name = "";
      this.address = "";
      this.telNum = "";
    },
    goPhone(val) {
      // 拨打电话
      uni.makePhoneCall({
        phoneNumber: val,
      });
    },
    async getDetail() {
      let data = {
        CollectionsUID: this.CollectionsUID,
      };
      let res = await this.$api.mine.certDetail(data);
      if (res.status === 0) {
        this.detail = res.data;
      } else {
        uni.$u.toast(this.$t("load.failed"));
      }
    },
  },
  onLoad(option) {
    const item = JSON.parse(decodeURIComponent(option.data));
    this.CollectionsUID = item.CollectionsUID;
    this.physical = item.physical;
    this.ID = item.payDetail.ID;
    this.express = item.payDetail.express;
    this.flows = item.payDetail.flows;
    this.status = item.payDetail.status;
    this.realHash = item.payDetail.realHash;
    this.collectionImg = item.collectionImg;
    console.log(this.collectionImg);
    this.seriesName = item.seriesName;
    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;
}

.top-img {
  background-repeat: no-repeat;
  background-size: contain;
  width: 660rpx;
  height: 660rpx;
  border-radius: 8rpx;
  margin: 44rpx 44rpx 32rpx 46rpx;
  position: relative;

  image {
    width: 100%;
    height: 100%;
  }
}

.apply {
  width: 500rpx;
  height: 60rpx;
  border-radius: 40rpx !important;
  // background: #558BF2;
  background: #699a70;
  border-color: #699a70;
  margin-bottom: 30rpx;
}

.info-box {
  margin: 0 44rpx 0 46rpx;
  margin-bottom: 46rpx;
  border-radius: 8rpx;
  // padding: 38rpx 32rpx;
  position: relative;

  .title {
    text-align: center;
    font-size: 32rpx;
    margin-bottom: 30rpx;
    color: #434343;
  }

  .box {
    // background: rgba(255,255,255,0.3);
    background: #ffffff;
    padding: 24rpx 32rpx;
    border-radius: 8rpx;

    .item {
      display: flex;
      margin: 32rpx 0;
      font-size: 20rpx;

      .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;
      }
    }
  }

  .address-box {
    // background: rgba(255,255,255,0.3);
    background: #ffffff;
    padding: 24rpx 32rpx;
    margin-top: 30rpx;
    border-radius: 8rpx;

    .bm {
      border-bottom: 1px solid #dedede;
      padding-bottom: 20rpx;
    }

    .item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin: 15rpx 0;
      font-size: 20rpx;

      .label {
        padding-right: 40rpx;
        width: 150rpx;
        font-size: 28rpx;
        color: #434343;
      }

      .value {
        text-align: right;
        width: 400rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        word-break: break-all;
        white-space: normal;
        color: #878787;
      }
    }
  }

  .detail {
    // background: rgba(255,255,255,0.3);
    padding: 24rpx 32rpx;
    background: #ffffff;
    margin-top: 30rpx;

    .item {
      display: flex;
    }

    .left {
      font-size: 16rpx;
      padding-right: 30rpx;
      color: #434343;
    }

    .right {
      border-left: 1rpx solid #464646;
      padding: 0 30rpx;
      position: relative;

      .item {
        margin-bottom: 30rpx;
      }

      .label {
        color: #434343;
        padding-right: 20rpx;
        width: 130rpx;
      }

      .value {
        color: #434343;
        width: 260rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        word-break: break-all;
        white-space: normal;
      }

      .cricle {
        width: 22rpx;
        height: 22rpx;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: -14rpx;
        background: #e4e4e4;
      }

      .cricle2 {
        width: 21rpx;
        height: 21rpx;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: -13rpx;
        background: #699a70;
        border: 1px solid #699a70;
      }
    }
  }
}

.logo {
  margin-top: 10rpx;
  width: 202rpx;
  height: 56rpx;
  margin-bottom: 40rpx;
}

.popup-box {
  background: rgba(0, 0, 0, 0.8);
  width: 582rpx;
  overflow: hidden;
  padding: 30rpx 0;

  .title {
    font-size: 40rpx;
    text-align: center;
    margin-top: 30rpx;
    margin-bottom: 100rpx;
  }

  .input-box {
    display: flex;
    justify-content: space-between;
    // align-items: center;
    padding: 0 34rpx 34rpx 38rpx;

    .label {
      font-size: 28rpx;
    }

    .input {
      width: 340rpx;
      display: flex;
      align-items: center;

      /deep/ .input-placeholder {
        font-size: 24rpx;
        text-align: right;
      }

      /deep/ .uni-input-input {
        font-size: 24rpx;
        color: #fff;
        text-align: right;
      }

      /deep/ .u-textarea {
        background: transparent;
        width: 340rpx;
        padding: 0;
        text-align: right;
      }

      /deep/ .u-textarea__field {
        color: #ffffff;
      }
    }
  }
}

.btns {
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
}

.popup-top {
  width: 582rpx;
  padding: 22rpx 0;
  background: rgba(255, 255, 255, 0.3);
  font-size: 32rpx;
  text-align: center;
  margin-bottom: 30rpx;
}
</style>
