<!--
  @description: 订单详情-收货信息-商品信息
  @Modifier：dijia
  @date：  2021/07/29
-->
<template>
  <div v-if="orderDetailObj.orderBackLog">
    <div class="title-con">
      <div class="order_title rivinfo">
        退货信息
      </div>
      <div class="order_title loginfo">
        商品信息
      </div>
    </div>
    <div class="m track-cont">
      <div class="order-track-content">
        <div>
          <div class="item">
            <div>
              售后类型：
            </div>
            <span>{{ orderDetailObj.orderBackLog.dealStatus === '010' ? '换货' : '退款退货' }}</span>
          </div>
          <div class="item">
            <div class="align-self">
              原因：
            </div>
            <span class="align-self cursor">
              {{ orderDetailObj.orderBackLog.backReason }}
            </span>
          </div>
        </div>
      </div>
      <!-- 商品信息 -->
      <div class="list-wrap">
        <div class="list-title">
          <el-row>
            <el-col :span="11">
              <div style="text-align: center">
                商品名称
              </div>
            </el-col>
            <el-col :span="5">
              <div style="text-align: center">
                数量
              </div>
            </el-col>
            <el-col :span="5">
              <div style="text-align: center">
                含税单价
              </div>
            </el-col>
            <el-col :span="3">
              <div style="text-align: center">
                小计
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="item-title-wrap">
          <div class="item-title font_normal">
            <span>订单号: {{ orderDetailObj.orderBackLog.orderNo }}</span>
            <span>退款编号: {{ orderDetailObj.orderBackLog.returnId }}</span>
            <span>店铺: <span class="depart_name">{{ orderDetailObj.orderBackLog.type }}</span></span>
          </div>
        </div>
        <div class="list-info">
          <el-row
            class="item"
          >
            <el-col :span="3">
              <div
                style="margin-left: 10px;padding-top:10px;cursor: pointer;"
                @click="goToDetail(orderDetailObj)"
              >
                <div class="img-box">
                  <img :src="orderDetailObj.orderBackLog.productPicture" alt>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div
                class="cursor goodsNameBox"
                @click="goToDetail(orderDetailObj)"
              >
                <span class="gdou" :title="orderDetailObj.orderBackLog.goodsName">{{ orderDetailObj.orderBackLog.goodsName }}</span>
              </div>
            </el-col>
            <el-col :span="5" style="line-height: 80px">
              <div style="text-align: center;color: #7F7F7F;">
                x{{ orderDetailObj.orderBackLog.number }}
              </div>
            </el-col>
            <el-col :span="5" style="line-height: 80px">
              <div style="text-align: center;color: #7F7F7F;">
                {{ orderDetailObj.orderBackLog.price| toPrice }} &nbsp;
              </div>
            </el-col>
            <el-col :span="3" style="line-height: 80px">
              <div style="text-align: center;color: #7F7F7F;">
                {{ orderDetailObj.orderBackLog.backAmount | toPrice }}
              </div>
            </el-col>
            <div style="clear: both" />
          </el-row>
          <el-row class="item" style="height:auto;padding:15px 0;border-bottom:none;">
            <el-col :span="23">
              <div class="allPrice">
                <!-- dealStatus 010是换货 区分退换类型 展示不同名字 -->
                {{ orderDetailObj.orderBackLog.dealStatus === '010' ? '订单金额' : '退款金额' }}
                &nbsp;&nbsp;&nbsp;
                <span style="color: #F59A23;font-size:14px;margin:0 5px;">¥</span>
                <span style="color: #F59A23;font-size:18px;">{{ orderDetailObj.orderBackLog.backAmount | toAllPrice }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReceiveGoods',
  filters: {
    toPrice: function(value) {
      if (value < 0) {
        value = ''
      }
      return '￥' + value
    },
    toAllPrice: function(val) {
      return val.toFixed(2)
    }
  },
  props: {
    orderDetailObj: {
      type: Object,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    goToDetail(val) {
      this.$router.push({
        path: '/shop/goodsClassDetail',
        query: { id: val.orderBackLog.productId }
      })
    }
  }
}
</script>

<style scoped lang="less">
.title-con{
  width: 100%;
  display: flex;
  justify-content: space-between;
  .rivinfo{
    width: 30%;
  }
  .loginfo{
    width: 60%;
  }
}
.order_title{
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-style: normal;
    padding-top: 15px;
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 16px;
  }
.track-cont{
    // box-shadow: 2px 2px 5px #ccc;
    display: flex;
    justify-content: space-between;
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-style: normal;
    font-size: 12px;
    margin-bottom: 20px;
    .order-track-content{
      width: 35%;
      padding: 20px 20px 40px 45px;
      box-shadow: 2px 2px 5px #dcd8d8;
      .item {
        display: flex;
        margin-top: 25px;
        padding-right: 10px;
        align-items: center;
        >div {
          width: 70px;
          margin-left: 10px;
        }
        >span {
          flex: 1;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
        >i {
          color: #007CCC;
          font-size: 16px;
        }
        .align-self {
          align-self: flex-start;
        }
        .mt3 {
          margin-top: 0px;
        }
      }
    }
  }
.goodsNameBox {
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 80px;
}
.gdou{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #000;
}
.gdou:hover {
  color: #00aaca;
}
.list-wrap {
    width: 60%;
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-style: normal;
    font-size: 12px;
    box-shadow: 2px 2px 5px #dcd8d8;
    padding: 20px 20px 0 20px;
    .list-title {
      height: 35px;
      line-height: 35px;
      color: #7F7F7F;
      background-color: rgba(242, 242, 242, 0.6);
    }

    .list-info {
      .item {
        height: 80px;
        border-bottom: 1px solid #cccccc;
        .img-box {
          display: inline-block;
          margin-right:10px;
          width: 60px;
          height: 60px;
          line-height: 60px;
          text-align: center;
          border: 1px solid rgba(242, 242, 242, 1);
          img {
            width: 80%;
            height: 80%;
          }
        }
        .allPrice {
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }
    }
  }
.item-title-wrap {
  color: #7F7F7F;
  margin-top: 10px;
  .item-title {
    width: 100%;
    background-color: rgba(242, 242, 242, 0.6);
    height: 34px;
    display: flex;
    align-items: center;
    >span {
      display: inline-block;

      &:nth-child(1) {
        margin-left: 10px;
      }

      &:nth-child(2) {
        margin-left: 20px;
        margin-right: 30px;
      }
    }
    .depart_name {
      background-color: #f59a23;
      margin-left: 10px;
      border-radius: 4px;
      border-width: 0px;
      color: #FFFFFF;
      padding: 1px 5px;
    }
  }
}
.font_normal {
  font-family: 'PingFangSC-Regular', 'PingFang SC';
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
}
</style>
