<template>
  <div>
    <div class="search-bar">
      <el-input prefix-icon="el-icon-search" clearable placeholder="请输入订单/退款/退换单号" style="width: 260px"></el-input>
      <el-select clearable placeholder="全部订单类型" style="margin-left: 10px;width: 160px"></el-select>
      <span class="search-create-time">创建时间</span>
      <el-date-picker
        clearable
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="~"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="margin-left: 10px">
      </el-date-picker>
    </div>
    <el-table class="table-header">
      <el-table-column label="商品信息" min-width="350px"></el-table-column>
      <el-table-column label="吊牌价/应收(元)" min-width="130px"></el-table-column>
      <el-table-column label="数量" min-width="70px"></el-table-column>
      <el-table-column label="小计金额(元)" min-width="120px"></el-table-column>
      <el-table-column label="订单金额(元)" min-width="210px"></el-table-column>
      <el-table-column label="收货/导购信息" min-width="250px"></el-table-column>
    </el-table>
    <div class="order-list" v-for="el in 2" :key="el">
      <div class="order-info-box">
        <div class="order-info">
          <!-- 购买单、销售单为绿色背景 order-bug -->
          <!-- 退款单背景色为红色 order-refund -->
          <!-- 退换单背景色为黄色 order-exchange -->
          <div class="order-type-tag order-exchange">购买单</div>
          <!-- 购买单、销售单为订单号 -->
          <!-- 退款单为退款单号 -->
          <!-- 退换单为退换单号 -->
          <div class="order-num">订单号：3345566788933</div>
          <!-- 退款单、退换单才有原始单号 -->
          <div class="connect-order-num">原始订单号：3345566788933</div>
          <div class="order-create-time">创建时间：2022-05-31 12:00:23</div>
          <div class="order-sync-time">订单同步时间：2022-05-31 12:02:00</div>
        </div>
        <div class="store-info">
          <!-- 天猫、微盟、抖音、门店 -->
          <div class="store-type-tag">天猫</div>
          <div class="store-name">E.l天猫旗舰店</div>
        </div>
      </div>
      <el-table :data="tableData" :show-header="false" :span-method="spanMethod" class="order-detail">
        <el-table-column label="商品信息" min-width="350px" show-overflow-tooltip>
          <div class="goods-info-box">
            <div class="goods-logo"></div>
            <div class="goods-info">
              <p class="goods-name">2020秋冬新品 短袖圆领狼文化T恤2020秋冬新品 短袖圆领狼文化T恤2020秋冬新品 短袖圆领狼文化T恤2020秋冬新品 短袖圆领狼文化T恤</p>
              <p class="goods-num">11A556778892345</p>
              <p class="goods-sku">黑色; M</p>
            </div>
          </div>
        </el-table-column>
        <el-table-column label="吊牌价/应收(元)" min-width="130px">
          <div>120.19</div>
        </el-table-column>
        <el-table-column label="数量" min-width="70px">
          <div>1</div>
        </el-table-column>
        <el-table-column label="小计金额(元)" min-width="120px">
          <div>120.09</div>
        </el-table-column>
        <el-table-column label="订单金额(元)" class-name="order-amount" min-width="210px">
          <div class="order-descript">
            <!-- 购买单、退换单、销售单显示应收金额 -->
            <div class="order-descript-item gray">
              <div class="order-descript-label">
                <div class="order-descript-label-text">应收金额</div>：
              </div>
              <div class="order-descript-content">
                <div>240.18</div>
                <div>(含运费：10.00)</div>
              </div>
            </div>
            <!-- 退款单显示应退金额 -->
            <div class="order-descript-item gray">
              <div class="order-descript-label">
                <div class="order-descript-label-text">应退金额</div>：
              </div>
              <div class="order-descript-content">240.18</div>
            </div>
            <!-- 购买单、退换单显示优惠 -->
            <div class="order-descript-item gray">
              <div class="order-descript-label">
                <div class="order-descript-label-text">优惠</div>：
              </div>
              <div class="order-descript-content">50.00</div>
            </div>
            <!-- 购买单、销售单显示实付金额 -->
            <!-- 退款单、退换单显示实退金额 -->
            <div class="order-descript-item">
              <div class="order-descript-label">
                <div class="order-descript-label-text"> 实退金额</div>：
              </div>
              <div class="order-descript-content">
                200.18
                <el-popover placement="top" title="支付方式" width="200" trigger="hover">
                  <div>
                    <p>现金：￥1000.00</p>
                    <p>储值/钱包：￥120.09</p>
                  </div>
                  <span slot="reference" class="payment-type">
                    <i class="payment-type-icon iconfont icon-chakanxiangqing-copy"></i>
                  </span>
                </el-popover>
              </div>
            </div>
          </div>
        </el-table-column>
        <el-table-column label="收货/导购信息" min-width="250px">
          <div class="order-descript">
            <div class="order-descript-item">
              <div class="order-descript-label">
                <div class="order-descript-label-text">收件人</div>：
              </div>
              <div class="order-descript-content">一诺</div>
            </div>
            <div class="order-descript-item">
              <div class="order-descript-label">
                <div class="order-descript-label-text">手机号</div>：
              </div>
              <div class="order-descript-content">13107708212</div>
            </div>
            <div class="order-descript-item">
              <div class="order-descript-label">
                <div class="order-descript-label-text">收货地址</div>：
              </div>
              <div class="order-descript-content">浙江省杭州市余杭区仓前街道欧美金融城T2</div>
            </div>
            <!-- 销售单只显示导购，其他单不显示导购 -->
            <div class="order-descript-item">
              <div class="order-descript-label">
                <div class="order-descript-label-text">导购</div>：
              </div>
              <div class="order-descript-content">
                <div>一诺(000002)</div>
                <div>梦奇(000001)</div>
              </div>
            </div>
          </div>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      :page-sizes="[20, 40, 60, 80]"
      :total="params.total"
      :page-size="params.pageSize"
      :current-page="params.currentPage"
      @current-change="onCurrentChange"
      @size-change="onSizeChange"
      background
      layout="total,sizes,prev,pager,next"
      style="margin-top: 20px; text-align: right"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'OrderTable',
  props: {
    tab: String
  },
  data() {
    return {
      params: {
        total: 105,
        pageSize: 20,
        currentPage: 1
      },
      tableData: [{}, {}, {}]
    }
  },
  created() {
    console.log('order table')
  },
  methods: {
    spanMethod({ rowIndex, columnIndex }) {
      if (columnIndex == 4 || columnIndex == 5) {
        if (rowIndex == 0) {
          return [this.tableData.length, 1];
        } else {
          return [0, 0];
        }
      } else {
        return [1, 1];
      }
    },
    onSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.onCurrentChange(1);
    },
    onCurrentChange(currentPage) {
      this.params.currentPage = currentPage;
    }
  }
}
</script>

<style lang="scss" scoped>
.search-bar {
  margin-bottom: 20px;
  font-size: 0;
  .search-create-time {
    margin-left: 10px;
    vertical-align: middle;
    color: #303133;
  }
}
.table-header {
  margin-bottom: 16px;
  /deep/ .el-table__empty-block {
    display: none;
  }
}
.order-list {
  +.order-list {
    margin-top: 12px;
  }
  .order-info-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    width: 100%;
    height: 36px;
    font-size: 13px;
    font-weight: 400;
    color: #303133;
    background: #F7F8FA;
    border-bottom: 1px solid #E4E7ED;
    box-sizing: border-box;
    &+.order-info-box {
      margin-top: 12px;
    }
    .order-info {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .order-type-tag {
        padding: 0 9px;
        height: 22px;
        text-align: center;
        line-height: 24px;
        font-size: 12px;
        font-weight: 400;
        color: #FFFFFF;
        border-radius: 2px;
        box-sizing: border-box;
        &.order-buy {
          background: #33AF4A;
        }
        &.order-refund {
          background: #F5222D;
        }
        &.order-exchange {
          background: #FA8C16;
        }
      }
      .order-num {
        margin-left: 17px;
        width: 166px;
      }
      .connect-order-num {
        margin-left: 30px;
        width: 179px;
      }
      .order-create-time {
        margin-left: 37px;
        width: 196px;
      }
      .order-sync-time {
        margin-left: 30px;
        width: 222px;
      }
    }
    .store-info {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .store-type-tag {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 6px;
        padding: 0 4px;
        // width: 32px;
        height: 18px;
        background: #DEE3FC;
        border-radius: 2px;
        font-size: 12px;
        font-weight: 400;
        color: #2F54EB;
      }
    }

  }
  .goods-info-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .goods-logo {
      flex-shrink: 0;
      margin-right: 10px;
      width: 60px;
      height: 60px;
      border-radius: 2px;
      border: 1px solid red;
    }
    .goods-info {
      width: calc(100% - 60px);
      .goods-name {
        width: 100%;
        font-size: 13px;
        font-weight: 400;
        color: #303133;
        line-height: 18px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .goods-num {
        margin-top: 4px;
        font-size: 12px;
        font-weight: 400;
        color: #303133;
        line-height: 17px;
      }
      .goods-sku {
        margin-top: 4px;
        font-size: 12px;
        font-weight: 400;
        color: #606266;
        line-height: 17px;
      }
    }
  }
  .order-detail {
    /deep/ .el-table__body tr:hover>td.el-table__cell {
      background: transparent;
    }
    /deep/ .order-amount {
      border-left: 1px solid #E4E7ED;
    }
    .order-descript {
      .order-descript-item {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: 14px;
        font-weight: 400;
        color: #303133;
        line-height: 20px;
        &+.order-descript-item {
          margin-top: 6px;
        }
        &.gray {
          color: #606266;
        }
        .order-descript-label {
          flex-shrink: 0;
          width: 70px;
          .order-descript-label-text {
            display: inline-block;
            width: 56px;
            text-align: justify;
            text-align-last: justify;
          }
        }
        .order-descript-content {}
        .payment-type {
          display: inline-block;
          vertical-align: middle;
          padding: 5px 5px 4px;
          border-radius: 2px;
          line-height: normal;
          font-size: 0;
          &:hover {
            background: #F2F3F5;
          }
          .payment-type-icon {
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
