<template>
  <div class="assets-list-item-con" @click="toDetail">
    <div class="sku-con flex-default">
      <img class="thumb" :src="skuData.thumb" />
      <div class="right-con">
        <div class="top">
          <div class="name">{{ skuData.name }}</div>
          <div class="coin">{{ itemData.coin }}</div>
        </div>
        <div class="price-con">
          <span class="total-label">总价</span>
          <m-price :amt="priceTotal" />
        </div>
      </div>
    </div>
    <div class="info-con">
      <div class="info-item flex-default">
        <div class="label">规格</div>
        <div class="val">{{ skuLabel }}</div>
      </div>
      <div class="info-item flex-default">
        <div class="label">单价</div>
        <div class="val">{{ skuData.originalPrice || 0 }}元</div>
      </div>
      <div class="info-item flex-default">
        <div class="label">可用</div>
        <div class="val">{{ itemData.amount }}</div>
      </div>
      <div class="info-item flex-default">
        <div class="label">冻结</div>
        <div class="val">{{ itemData.frozen }}</div>
      </div>
    </div>
    <div class="opt-con flex-default" v-if="showOpt">
      <!-- <van-button
        @click.stop="handleWithdraw"
        color="#AEAEAE"
        round
        plain
      >
        提货
      </van-button> -->
      <van-button
        @click.stop="handleTransferGift"
        color="linear-gradient(270deg, #488FF7 0%, #2C66F5 100%)"
        round
      >
        转赠
      </van-button>
      <!-- <van-button
        @click.stop="handleTransfer"
        color="linear-gradient(270deg, #F07C5B 0%, #DD2E41 100%)"
        round
      >
        转让
      </van-button> -->
    </div>
  </div>
</template>
<script>
export default {
  props: {
    itemData: {
      type: Object,
      default: function () {
        return {};
      },
    },
    tab: {
      type: Object,
    },
  },
  computed: {
    skuData() {
      return this.itemData.skuVo ? this.itemData.skuVo : {};
    },
    skuLabel() {
      if (this.skuData.skuProps) {
        return this.skuData.skuProps.map((item) => item.propVal).join(" ");
      }
      return "";
    },
    showOpt() {
      return +this.itemData.amount > 0;
    },
    priceTotal() {
      let amt = this.itemData.amount + this.itemData.frozen;
      if (this.skuData.originalPrice) {
        return amt * this.skuData.originalPrice;
      }
      return 0;
    },
  },
  data() {
    return {};
  },
  methods: {
    toDetail() {
      let query = { coin: this.itemData.coin, skuId: this.skuData.skuId };
      this.$router.push({ name: "assets-detail", query });
    },
    handleWithdraw() {
      let query = { coin: this.itemData.coin };
      this.$router.push({ name: "assets-withdraw", query });
    },
    handleTransferGift() {
      let query = { coin: this.itemData.coin };
      this.$router.push({ name: "assets-transfer-gift", query });
    },
    handleTransfer() {
      let query = { coin: this.itemData.coin };
      this.$router.push({ name: "assets-transfer", query });
    },
  },
};
</script>
<style lang="less">
.assets-list-item-con {
  padding: 14px 10px;
  background: #ffffff;
  box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.07);
  border-radius: 6px;
  margin-bottom: 10px;

  > .sku-con {
    margin-bottom: 12px;
    .thumb {
      width: 80px;
      height: 80px;
      border-radius: 6px;
      object-fit: cover;
      margin-right: 14px;
    }
    .right-con {
      height: 70px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .right-con .top {
      flex: 1;
      .name,
      .coin {
        width: 200px;
        font-size: 14px;
        font-weight: bold;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .name {
        margin-bottom: 3px;
      }
    }
    .right-con > .price-con {
      display: flex;
      align-items: flex-end;
      .total-label {
        font-size: 12px;
        margin-right: 5px;
      }
    }
  }

  > .info-con {
    background: #f9faf9;
    border-radius: 2px;
    padding: 7px 14px;
    display: flex;
    flex-wrap: wrap;
    .info-item {
      width: 50%;
      line-height: 1.8;
      align-items: flex-start;
    }
    .info-item .label {
      flex-shrink: 0;
      color: #999999;
      font-size: 12px;
      font-weight: bold;
      width: 35px;
    }
    .info-item .val {
      font-weight: bold;
      font-size: 12px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  > .opt-con {
    justify-content: flex-end;
    margin-top: 16px;
    button {
      width: 82px;
      font-size: 12px;
      height: 28px;
      margin-left: 10px;
    }
  }
}
</style>