<template>
  <table cellspacing="0" cellpadding="0" class="order-detail">
    <thead>
      <tr>
        <template v-for="(cols, index) in tableCols">
          <th :key="index" :style="'width: ' + cols.width">{{ cols.title }}</th>
        </template>
      </tr>
    </thead>
    <tbody>
      <template v-for="(goods, index) in tableData">
        <tr :key="index">
          <td>{{ goods.productSku }}</td>
          <td>
            <img
              :src="
                'http://shopmanage.yohobuy.com/platform/product/getRemoteImageUrlBySku?sku_id=' +
                  goods.productSku +
                  '&size=40x60'
              "
            />
          </td>
          <td style="text-align: left">
            <p>{{ goods.productName }}</p>
            <p>{{ goods.prodcutCode }}</p>
            <p>尺码：{{ goods.sizeName }} 颜色：{{ goods.colorName }}</p>
          </td>
          <td>{{ goods.buyNumber }}</td>
          <td>{{ goods.productPrice && goods.productPrice.retailPrice ? goods.productPrice.retailPrice : '' }}</td>
          <td>{{ goods.salePrice }}</td>
          <td>{{ goods.lastPrice }}</td>
          <td>
            {{
              goodsPromos[goods.id] && goodsPromos[goods.id].couponsDiscountAmount
                ? goodsPromos[goods.id].couponsDiscountAmount
                : 0
            }}
          </td>
          <td>{{ goodsPromos[goods.id] && goodsPromos[goods.id].yohoCoin ? goodsPromos[goods.id].yohoCoin : 0 }}</td>
          <td>
            {{ goodsPromos[goods.id] && goodsPromos[goods.id].redPackage ? goodsPromos[goods.id].redPackage : 0 }}
          </td>
          <td>
            {{
              goodsPromos[goods.id] && goodsPromos[goods.id].giftCardAmount ? goodsPromos[goods.id].giftCardAmount : 0
            }}
          </td>
          <td>
            {{
              goodsPromos[goods.id] && goodsPromos[goods.id].activityAmount ? goodsPromos[goods.id].activityAmount : 0
            }}
          </td>
          <td>{{ goods.subtotal }}</td>
        </tr>
      </template>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="13" style="text-align: left">
          <span>实付金额：¥{{ orderInfo.lastOrderAmount }}</span>
          <span>快递费：¥{{ orderInfo.shippingCost }}</span>
        </td>
      </tr>
      <tr>
        <td td colspan="13">
          <div class="ivu-card">
            <div class="ivu-card-head" style="text-align: left">
              <p slot="title">使用优惠券</p>
            </div>
            <i-table border :columns="couponsTableCols" :data="couponsData"></i-table>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="13">
          <template v-if="orderPromos">
            <template v-for="(item, index) in orderPromos">
              <Row :key="index">{{ item.promotionTitle }} {{ item.beginTime }} — {{ item.endTime }}</Row>
            </template>
          </template>
          <template v-else>
            <span>没有参加活动.</span>
          </template>
        </td>
      </tr>
    </tfoot>
  </table>
</template>

<script>
export default {
  name: 'OrderGoodsInfo',
  props: ['orderInfo', 'tableData', 'couponsData', 'goodsPromos', 'orderPromos'],
  data() {
    return {
      tableCols: [
        { title: 'sku', width: '8%' },
        { title: '商品图片', width: '8%' },
        { title: '商品信息', width: '10%' },
        { title: '数量', width: '6%' },
        { title: '吊牌价', width: '6%' },
        { title: '销售价', width: '6%' },
        { title: '成交价', width: '6%' },
        { title: '优惠券', width: '6%' },
        { title: 'YOHO币', width: '6%' },
        { title: '红包', width: '6%' },
        { title: '礼品卡', width: '6%' },
        { title: '活动优惠', width: '6%' },
        { title: '小计', width: '6%' },
      ],
      couponsTableCols: [
        {
          title: '优惠券名称',
          key: 'couponTitle',
        },
        {
          title: '优惠券面值',
          key: 'couponAmount',
        },
        {
          title: '优惠券金额调整',
          key: 'couponAdjustAmount',
        },
        {
          title: '费用承担类型',
          key: 'feeSharingTypeStr',
        },
        {
          title: '费用承担比例',
          key: 'feeSharingRatio',
        },
      ],
    };
  },
};
</script>
<style lang="scss">
table.order-detail {
  width: 100%;
  height: auto;
  thead {
    th {
      padding: 8px 0;
      border: 1px solid #cccccc;
      text-align: center;
    }
  }
  tbody,
  tfoot {
    tr {
      height: 35px;
      td {
        border: 1px solid #cccccc;
        border-top: none;
        border-right: none;
        text-align: center;
        padding: 5px;
        span {
          margin-left: 10px;
          margin-right: 20px;
        }
      }
      td:last-child {
        border-right: 1px solid #cccccc;
      }
    }
  }
}
</style>