<template>
  <div class="order-transfer-list-item-con">
    <div class="header flex-between">
      <div class="merchant flex-default">
        <img class="avatar" :src="data.tranOrder.sellerInfo.headUrl" />
        <span class="name">{{ data.tranOrder.sellerInfo.nickName }}</span>
      </div>
      <span class="status" :style="{ color: statusObj.color }">
        {{ statusObj.label }}
      </span>
    </div>

    <div class="goods-info flex-default">
      <img class="thumb" :src="data.skuVo.thumb" />
      <div class="content">
        <div class="info flex-between">
          <div class="left">
            <p class="name">{{ data.skuVo.name }}</p>
            <p class="coin">{{ data.skuVo.coinName }}</p>
          </div>
          <div class="right">
            <p class="price">￥{{ data.tranOrder.price.toFixed(2) }}</p>
            <p class="num">X{{ data.tranOrder.number }}</p>
          </div>
        </div>
        <p class="sku">{{ skuLabel }}</p>
        <p class="time">{{ data.tranOrder.createTime | timeFilter }}</p>
      </div>
    </div>

    <div class="bottom-opt flex-default">
      <van-button color="#AEAEAE" plain round @click="handleLink">
        联系买家
      </van-button>
      <van-button
        type="primary"
        plain
        round
        @click="handlePay"
        v-if="statusMap.UN_PAY"
      >
        去付款
      </van-button>
    </div>
  </div>
</template>

<script>
import { PayType, TransferOrderStatus, TransferOrderStatusObj } from "@/enums";
export default {
  props: {
    data: Object,
  },
  computed: {
    statusObj() {
      let status = this.data.tranOrder.status;
      return (
        TransferOrderStatusObj[status] ||
        TransferOrderStatusObj[TransferOrderStatus.UN_PAY]
      );
    },
    skuLabel() {
      if (this.data.skuVo && this.data.skuVo.skuProps) {
        return this.data.skuVo.skuProps.map((item) => item.propVal).join("-");
      }
      return "--";
    },
    statusMap() {
      let map = {};
      Object.keys(TransferOrderStatus).forEach((key) => {
        map[key] = TransferOrderStatus[key] == this.data.tranOrder.status;
      });
      return map;
    },
  },
  data() {
    return {};
  },
  methods: {
    handleLink() {},
    handlePay() {
      let query = { pid: this.data.tranPay.payId, type: PayType.TRANSFER };
      this.$router.push({ name: "payment", query });
    },
  },
};
</script>

<style lang="less">
.order-transfer-list-item-con {
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 15px;
  margin-top: 10px;
  > .header {
    margin-bottom: 15px;
    .merchant {
      flex: 1;
    }
    .avatar {
      height: 18px;
      width: 18px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .name {
      font-size: 14px;
      font-weight: bold;
    }
    .status {
      font-size: 12px;
      font-weight: bold;
    }
  }

  > .goods-info {
    margin-bottom: 20px;
    > .thumb {
      height: 85px;
      width: 85px;
      border-radius: 3px;
      margin-right: 10px;
    }
    > .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 84px;
      padding: 5px 0;
      .info {
        flex: 1;
        align-items: flex-start;
      }
      .info .left {
        text-align: left;
        font-size: 13px;
        .name {
          font-weight: bold;
          margin-bottom: 8px;
        }
      }
      .info .right {
        text-align: right;
        font-family: DINAlternate-Bold;
        .price {
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 8px;
        }
      }
      .sku,
      .time {
        color: #72767d;
        font-size: 12px;
      }
      .time {
        font-family: DINAlternate-Bold;
      }
    }
  }

  > .bottom-opt {
    justify-content: flex-end;
    button {
      height: 27px;
      font-size: 12px;
      margin-left: 10px;
    }
  }
}
</style>
