<template>
  <likeGood :page-type="1">
    <view class="order-detail">
      <view class="order-express-list">
        <view v-if="logisticsPackages.length > 1" class="express-more">
          <p>你的订单被分为多个包裹发出：</p>
          <view class="express-more-list">
            <view
              v-for="(item, index) in logisticsPackages"
              :key="index"
              class="express-box"
              :class="[{ active: item.selected }]"
              @click="changeParcel(index)"
            >
              <dl class="express-media">
                <dt>
                  <p class="express-media-name">{{ `包裹${index + 1}` }}</p>
                  <text class="express-media-num">{{ `共${item.skuCount || 0}件` }}</text>
                </dt>
                <dd>
                  <img :src="item.skus[0].imageUrl" alt="" />
                </dd>
              </dl>
            </view>
          </view>
        </view>
        <view class="order-title">
          <view>
            <image class="express-icon" src="https://img.lkbang.net/xcx/express-icon.png" />
            <text class="express-txt">{{ logisticsData.logisticsName }}</text>
            <text class="express-num">{{ logisticsData.logisticsBillNo }}</text>
          </view>
          <view class="express-copy" @click="copyText(logisticsData.logisticsBillNo)">复制</view>
        </view>
        <view class="ul">
          <view v-for="(item, inx) in logisticsData.logisticsList" :key="inx">
            <view
              v-for="(list, i) in item.detailList"
              :key="i"
              class="li express-current"
              :class="[{ leftLine: i !== item.detailList.length - 1 }]"
            >
              <!-- <image
                v-if="inx == 0 && i == 0"
                class="express-success-icon"
                src="https://img.lkbang.net/xcx/success-icon.png"
              /> -->
              <div v-if="inx == 0 && i == 0" class="express-success-icon" />
              <image
                v-else-if="inx !== 0"
                class="express-ongoing-icon"
                src="https://img.lkbang.net/xcx/ongoing-icon.png"
              />
              <view v-if="i > 0" class="express-min-icon" />
              <view class="text">
                <view v-if="i == 0" class="title">{{ item.title }}</view>
                <view class="desc">{{ list.desc }}</view>
                <view class="date">{{ list.logisticsTime }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </likeGood>
</template>
<script>
import likeGood from "@/components/likeGood";
import authApi from "@/api/address.api";

export default {
  components: {
    likeGood
  },
  data() {
    return {
      logisticsData: [],
      logisticsPackages: []
    };
  },
  onLoad(options) {
    console.log(options);
    this.orderLogistics(options);
  },
  methods: {
    async orderLogistics(val) {
      //物流信息
      Object.keys(val).forEach(
        i => val[i] === undefined || (val[i] === "undefined" && delete val[i])
      );
      const [getData] = await authApi.orderLogistics(val);
      if (getData) {
        this.logisticsPackages = getData.logisticsPackages;
        this.logisticsData = this.logisticsPackages.find(i => i.selected) || {};
      }
    },
    changeParcel(idx) {
      this.logisticsPackages.forEach((i, index) => {
        i.selected = index === idx;
        i.selected && (this.logisticsData = i);
      });
    },
    copyText(val) {
      uni.setClipboardData({
        data: val,
        success(res) {
          /* #ifdef MP-ALIPAY */
          uni.showToast({
            title: "复制成功",
            icon: "none"
          });
          /* #endif */
          console.log(res);
        }
      });
    },
    phoneCall(val) {
      uni.makePhoneCall({
        phoneNumber: val
      });
    },
    open(ref) {
      this.$refs[ref].open();
    },
    radioChange(evt) {
      console.log(evt.target.value, typeof evt.target.value);
      this.current = +evt.target.value;
    }
  }
};
</script>
<style lang="scss" scoped>
.order-express-list {
  background: $white;
  border-radius: 12rpx;
  margin: 24rpx;
  .ul {
    position: relative;
    padding-left: 36rpx;
    // margin-top: 30rpx;
    padding-top: 30rpx;
  }
  .leftLine::before {
    top: 20rpx;
    left: -2rpx;
    content: " ";
    display: block;
    position: absolute;
    width: 2rpx;
    background-color: #dcdee0;
    height: calc(100% - 40rpx);
  }
  .li {
    // border-left: 1rpx solid #ccc;
    position: relative;
    padding-left: 20rpx;
    padding-bottom: 40rpx;
    font-size: 24rpx;
    color: #999;
    line-height: 1.6;
    .text {
      font-size: 24rpx;
      .title {
        font-size: 30rpx;
      }
      .desc {
        width: 600rpx;
      }
    }
  }
  .li:last-child {
    border: none;
    .express-min-icon {
      left: -6rpx;
    }
  }
  .li:first-child {
    color: #333;
  }
  .text {
    position: relative;
    top: -15rpx;
    left: 15rpx;
  }
}
.order-title {
  display: flex;
  justify-content: space-between;
  height: 85rpx;
  line-height: 85rpx;
  padding: 0 20rpx;
  margin-top: 18rpx;
  font-size: 26rpx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.express {
  &-icon {
    width: 40rpx;
    height: 40rpx;
    vertical-align: middle;
  }
  &-txt,
  &-num {
    margin-left: 10rpx;
  }
  &-copy {
    color: #ec1500;
  }
  &-current {
    .text {
      // color: #333;
      line-height: 1.6;
    }
    .tel {
      color: #5371e0;
    }
    .date {
    }
  }
  &-success-icon,
  &-ongoing-icon {
    position: absolute;
    width: 40rpx;
    height: 40rpx;
    left: -20rpx;
    top: -10rpx;
  }
  &-min-icon {
    position: absolute;
    border-radius: 50%;
    background: #dcdcdc;
    width: 14rpx;
    height: 14rpx;
    left: -8rpx;
    top: -1rpx;
  }
}
.order-detail {
  ::v-deep .order-card {
    margin: 0 20rpx 20rpx;
  }
  &-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx;
    padding: 20rpx 110rpx;
    background: $white;
    border-radius: 12rpx;
    .Od-status-desc {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-right: 20rpx;
      text {
        &:first-child {
          margin-bottom: 10rpx;
          font-size: 32rpx;
          font-weight: bold;
          color: #333333;
        }
        &:last-child {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
    image {
      width: 200rpx;
      height: 200rpx;
    }
  }
  &-area {
    margin: 0 20rpx 20rpx;
    padding: 20rpx;
    background: $white;
    border-radius: 12rpx;
    .Od-area-person {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      text {
        &:first-child {
          display: inline-block;
          margin-right: 20rpx;
          width: 72rpx;
          height: 30rpx;
          line-height: 30rpx;
          text-align: center;
          background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
          border-radius: 6rpx;
          font-size: 22rpx;
          color: #ffffff;
        }
        &:last-child {
          font-size: 26rpx;
          color: #333333;
        }
      }
    }
    .Od-area-address {
      font-size: 24rpx;
      color: #666666;
    }
  }
  &-price {
    margin: 0 20rpx 20rpx;
    .Od-price-statistic {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 20rpx 0;
      background: #fff;
      &:first-child {
        border-radius: 12rpx 12rpx 0 0;
      }
      &:last-child {
        padding-bottom: 20rpx;
        border-radius: 0 0 12rpx 12rpx;
      }
      text {
        font-size: 26rpx;
        &:first-child {
          color: #999999;
        }
        &:last-child {
          color: #333333;
        }
      }
      .Odp-statistic_bold {
        font-size: 30rpx !important;
        color: #ec3333 !important;
      }
    }
  }
  &-info {
    margin: 0 20rpx 20rpx;
    padding: 20rpx;
    font-size: 26rpx;
    color: #999999;
    border-radius: 12rpx;
    background: $white;
    text {
      display: block;
      margin-bottom: 20rpx;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  &-bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 120rpx;
    padding: 20rpx;
    background: $white;
    border-top: $border-sm solid $bg-color-g1;
    .Od-bottom_grey {
      border: $border-sm solid #999999;
      color: #666666;
    }
    .Od-bottom_red {
      border: $border-sm solid #ec1500;
      color: #ec1500;
    }
    button {
      margin: 0;
      margin-right: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 172rpx;
      height: 60rpx;
      font-size: $font-base;
      border-radius: $border-radius-2;
      background: $white;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  &-reason {
    .Od-reason-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 120rpx;
      radio {
        margin-right: 20rpx;
        transform: scale(0.7);
      }
      text {
        font-size: 30rpx;
        color: #333333;
      }
    }
    .Od-reason-button {
      position: fixed;
      left: 40rpx;
      right: 40rpx;
      bottom: 0;
      padding: $padding-md 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 80rpx;
        font-size: $font-base;
        font-weight: bold;
        border-radius: $border-radius-2;
        &:first-child {
          border: $border-sm solid $border-red;
          background: $bg-color;
          color: $font-color-search;
        }
        &:last-child {
          color: $white;
          background-image: $background-primary;
        }
      }
    }
  }
}
.express {
  &-success-icon {
    height: 14rpx;
    width: 14rpx;
    border-radius: 7rpx;
    background: linear-gradient(270deg, #ff5d00 0%, #ff1900 100%);
    margin-left: 14rpx;
  }
  &-more {
    padding-top: 24rpx;
    padding-left: 20rpx;
    p {
      height: 40rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #333;
    }
  }
  &-more-list {
    display: flex;
    overflow-x: auto;
  }
  &-more-title {
    font-size: 28rpx;
    font-weight: 400;
    height: 40rpx;
    line-height: 40rpx;
    color: #333;
  }
  &-box {
    flex: 0 0 250rpx;
    margin: 22rpx 8rpx 0 0;
    border: 2rpx solid #dcdee0;
    border-radius: 16rpx;
    height: 112rpx;
    padding: 16rpx 24rpx;
    box-sizing: border-box;
  }
  &-box.active {
    border: 2rpx solid #ec1500;
  }
  &-media {
    display: flex;
    justify-content: space-between;
    dt,
    dd {
      flex: 0 0 90rpx;
    }
    dt * {
      display: block;
      font-style: normal;
    }
    dd img {
      width: 80rpx;
      height: 80rpx;
      display: block;
    }
    &-name {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
      height: 40rpx;
      line-height: 40rpx;
    }
    &-num {
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      margin-top: 8rpx;
      height: 34rpx;
      line-height: 34rpx;
    }
  }
}
::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
</style>
