<template>
  <div class="snapshot-list">
    <div class="snapshot-list-warning">
      {{ desc }}
    </div>
    <div class="snapshot-list-content">
      <div class="title">订单包含的商品</div>
      <div class="content">
        <div
          v-for="(item, index) in orderInfo"
          :key="index"
          class="item"
          @click="toSnapshotDetail(item.skuId, item.skuNo)"
        >
          <div class="img">
            <img v-if="item.imageUrl" :src="item.imageUrl" />
          </div>
          <div class="info">
            <div class="info-content">
              <div class="sku-name">
                {{ item.skuName || '' }}
              </div>
              <div class="sku-attr">
                <div v-if="item.price" class="price">¥{{ item.price }}</div>
                <div v-if="item.count" class="attr">{{ item.count }}件</div>
              </div>
            </div>
            <div class="operation">
              <button>交易快照</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from '@/api/snapshot';
export default {
  data() {
    return {
      orderInfo: {},
      desc: '交易快照包含订单创建时商品描述和下单信息，买方和平台在发生交易时，该页面作为判定依据',
      shipmentType: '' // 商品类型102：服务类商品   其他的实物类商品
    };
  },
  created() {
    this.getSnapshot();
  },
  methods: {
    async getSnapshot() {
      const { orderNo, auth, shipmentType } = this.$route.query;
      this.auth = auth;
      this.shipmentType = shipmentType;
      const [res, err] = await api.getOrderSnapshot(orderNo, auth);
      if (err) {
        this.$toast('获取订单快照失败');
        return;
      }
      this.orderInfo = res;
    },
    toSnapshotDetail(skuId, skuNo) {
      // 服务类商品
      if (+this.shipmentType === 102) {
        this.$router.push({
          name: 'ServiceGoodsDetails',
          query: {
            skuNo,
            scene: 'snapshot' //展示静态页面服务类商品详情
          }
        });
        return;
      }
      this.$router.push({
        name: 'snapshotDetail',
        query: {
          skuId,
          skuNo,
          auth: this.auth
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.snapshot-list {
  width: 100%;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
  &-warning {
    background: @white;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    flex-shrink: 0;
    height: 42px;
  }
  &-content {
    height: calc(100% - 80px);
    border-radius: 8px;
    background: @white;
    display: flex;
    flex-direction: column;
    .title {
      background: @white;
      border-radius: 8px 8px 0 0;
      font-size: 16px;
      color: #333;
      letter-spacing: -0.58px;
      height: 45px;
      display: flex;
      align-items: center;
      font-weight: bold;
      border-bottom: 1px solid #ebebeb;
      padding: 0 8px;
    }
    .content {
      flex: 1;
      overflow: auto;
      .item {
        box-sizing: border-box;
        width: 100%;
        height: 100px;
        padding: 0 8px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ebebeb;
        .img {
          width: 85px;
          height: 85px;
          margin-right: 6px;
          img {
            max-width: 100%;
            max-height: 100%;
            border-radius: 8px;
          }
        }
        .info {
          height: 85px;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          &-content {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            color: #333;
            .sku-name {
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              letter-spacing: -0.31px;
              line-height: 18px;
            }
            .sku-attr {
              flex-shrink: 0;
              width: 90px;
              .price {
                letter-spacing: -0.47px;
                text-align: right;
                line-height: 17px;
              }
              .attr {
                color: #999999;
                letter-spacing: -0.31px;
                text-align: right;
                line-height: 17px;
              }
            }
          }
          .operation {
            display: flex;
            justify-content: flex-end;
            button {
              width: 86px;
              height: 30px;
              border: 0.5px solid #ec1500;
              border-radius: 20px;
              background: @white;
              font-size: 14px;
              color: #ec1500;
            }
          }
        }
      }
    }
  }
}
</style>
