<!--
  @description: 订单详情-发货信息
  @Modifier：杨胜国
  @routerPath: track-detail
  @date：  2021/06/01-10:00
-->
<template>
  <div>
    <div class="title-con">
      商品信息
    </div>
    <div class="list-wrap">
      <div class="list-title">
        <el-row>
          <el-col :span="8">
            <div style="text-align: center">
              商品名称
            </div>
          </el-col>
          <el-col :span="3">
            <div style="text-align: center">
              数量
            </div>
          </el-col>
          <el-col :span="3">
            <div style="text-align: center">
              供应商
            </div>
          </el-col>
          <el-col :span="3">
            <div style="text-align: center">
              售后状态
            </div>
          </el-col>
          <el-col :span="4">
            <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="list-info">
        <el-row
          v-for="(item,index) in orderDetailObj.orderProductList"
          :key="index"
          class="item"
        >
          <el-col :span="2">
            <div
              style="margin-left: 20px;padding-top:10px;cursor: pointer;"
              @click="goToDetail(item)"
            >
              <div class="img-box">
                <img :src="item.productPicture" alt>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div
              class="cursor goodsNameBox"
              @click="goToDetail(item)"
            >
              <span class="gdou" :title="item.goodsName">{{ item.goodsName }}</span>
            </div>
          </el-col>
          <el-col :span="3" style="line-height: 80px">
            <div style="text-align: center;color: #7F7F7F;">
              x{{ item.number }}
            </div>
          </el-col>
          <el-col :span="3" style="line-height: 80px">
            <div style="text-align: center;color: #7F7F7F;" :title="item.goodsDepartName" class="depart_name">
              {{ item.goodsDepartName }}
            </div>
          </el-col>
          <el-col :span="3" style="line-height: 80px">
            <div style="text-align: center;color: #7F7F7F;">
              {{ formatStatus(item.orderBackStatus) }}
            </div>
          </el-col>
          <el-col :span="4" style="line-height: 80px">
            <div style="text-align: center;color: #7F7F7F;">
              {{ item.commodityPrice| toPrice }} &nbsp;
            </div>
          </el-col>
          <el-col :span="3" style="line-height: 80px">
            <div style="text-align: center;color: #7F7F7F;">
              {{ item.totalPrice | toPrice }}
            </div>
          </el-col>
          <div style="clear: both" />
        </el-row>
        <el-row class="item" style="height:auto;padding:25px 0;border-bottom:none;">
          <el-col :span="23">
            <div class="allPrice">
              付款金额&nbsp;&nbsp;&nbsp;
              <span style="color: #F59A23;font-size:14px;margin:0 5px;">¥</span>
              <span style="color: #F59A23;font-size:18px;">{{ totalPrice | toAllPrice }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsDetail',
  filters: {
    toPrice: function(value) {
      if (value < 0) {
        value = ''
      }
      return '￥' + value
    },
    toAllPrice: function(val) {
      return val.toFixed(2)
    },
    formatS(val) {
      let text = ''
      switch (val) {
        case '已下单':
          text = '待审核'
          break
        default:
          text = val
      }
      return text
    }
  },
  components: {
  },
  props: {
    orderDetailObj: {
      type: Object,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
      totalPrice: 0,
      statusList: [
        {
          code: '00', value: '待处理'
        },
        {
          code: '01', value: '退货中'
        },
        {
          code: '02', value: '已取消'
        },
        {
          code: '03', value: '拒绝退货'
        },
        {
          code: '04', value: '未收到退货'
        },
        { value: '买家退货', code: '05' },
        { value: '卖家确认并发货', code: '06' },
        { value: '卖家确认退货完毕', code: '09' },
        { value: '买家确认换货结束', code: '10' }
      ]
    }
  },
  watch: {
    orderDetailObj: {
      handler(newName, oldName) {
        if (this.orderDetailObj.orderProductList != null) {
          this.orderDetailObj.orderProductList.forEach((item, index) => {
            this.totalPrice += item.totalPrice * 1
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    goToDetail(val) {
      this.$router.push({
        path: '/shop/goodsClassDetail',
        query: { id: val.goodsId }
      })
    },
    formatStatus(val) {
      if (!val) return '正常'
      for (const { code, value } of this.statusList) {
        if (code === val) {
          return value
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.title-con{
  padding-top: 15px;
  margin-bottom: 15px;
  // font-weight: bold;
  font-size: 16px;
}
.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 {
    margin-bottom: 20px;
    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: 40px;
      line-height: 40px;
      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;
          text-align: center;
          border: 1px solid rgba(242, 242, 242, 1);
          img {
            width: 80%;
            height: 80%;
            margin-top: 10%;
          }
        }
        .allPrice {
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
        .depart_name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
</style>
