<template>
  <div class="order-detail-wrapper">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird" :jumPathThird="jumPathThird"></bread-crumb>
    <div class="order-detail-content screenSet" id="screenSet">
      <div class="header-title">订单详情</div>
      <div class="detail-all-info">
        <div class="trade-status" v-if="orderStatus == 1"><img src="../../assets/image/order/order_status1.png"/>交易成功</div>
        <div class="trade-status" v-if="orderStatus == 2"><img src="../../assets/image/order/order_status2.png"/>已发货</div>
        <div class="trade-status" v-if="orderStatus == 3"><img src="../../assets/image/order/order_status3.png"/>待发货</div>
        <div class="trade-status" v-if="orderStatus == 4"><img src="../../assets/image/order/order_status4.png"/>待支付</div>
        <div class="trade-status" v-if="orderStatus == 5"><img src="../../assets/image/order/order_status5.png"/>交易关闭</div>
        <div class="trade-info">
          <el-card class="left-card">
            <div slot="header" class="clearfix">
              <span>物流信息</span>
            </div>
            <div>
              <p class="trade-status1">
                <i class="el-icon-truck" style="font-size: 18px"></i>
                <span class="send-status">已发货</span>
              </p>
              <p>收货地址：上海市浦东新区花木路世纪大厦22楼，张三，13273896478</p>
              <p>物流公司：申通快递</p>
              <p>快递单号：14792837492875</p>
              <p>备注：是是是背部我of我那飞机我饿发窘</p>
            </div>
          </el-card>
          <el-card class="right-card">
            <div slot="header" class="clearfix">
              <span>订单信息</span>
            </div>
            <div>
              <p>订单编号：12579284048</p>
              <p>下单时间：2020-03-20 13:36:28</p>
              <p>支付方式：微信支付</p>
              <p>支付时间：2020-03-20 13:36:28</p>
              <p>发货时间：2020-03-20 13:36:28</p>
              <p>成交时间：2020-03-20 13:36:28</p>
            </div>
          </el-card>
        </div>
        <el-table :data="tableData" border class="item-table" style="width: 100%;margin-top: 30px;">
          <el-table-column prop="name" label="商品名称" min-width="100" align="center"></el-table-column>
          <el-table-column prop="guige" label="规格" min-width="100" align="center">
            <!--<template slot-scope="scope">-->
              <!--<span>{{ scope.row.type | dynamicFlagStatus }}</span>-->
            <!--</template>-->
          </el-table-column>
          <el-table-column prop="num" label="数量" min-width="100" align="center">
            <template slot-scope="scope">
              <span>×{{ scope.row.num }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价" min-width="100" align="center">
            <template slot-scope="scope">
              <span>￥{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" min-width="100" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.status | rangeStatus }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="total-set">
          <p><span>商品总额：</span><span>￥180.00</span></p>
          <p><span>优惠：</span><span>￥10.00</span></p>
          <p class="total-price"><span>实付：</span><span>￥170.00</span></p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  // import { openLoading, closeLoading } from "../../utils/utils";
  import BreadCrumb from "@/components/breadcrumb.vue";
  export default {
    components: {
      BreadCrumb
    },
    data(){
      return{
        curmbFirst: '商铺管理',
        curmbSecond: '订单管理',
        jumPathThird: '/order-manage',
        curmbThird: '订单详情',
        orderStatus: 1,
        tableData: [
          {
            name: '阿司匹林',
            guige: '50mg*20粒*盒',
            num: '2',
            price: '27',
            status: 1,
          }
        ],
      }
    },
    created() {

    },
    methods: {

    },
  }
</script>
<style lang="scss">
  .order-detail-wrapper{
    .order-detail-content{
      background: #fff;
      padding: 10px;
      .header-title{
        padding: 10px 12px;
        font-size: 13px;
        color: #449284;
        border-bottom: 1px solid #efefef;
      }
      .detail-all-info{
        .trade-status{
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 30px 0;
          text-align: center;
          font-size: 24px;
          img{
            width: 25px;
            height: 25px;
            margin-right: 15px;
          }
          .set-icon{
            color: #449284;
            font-size: 28px;
            margin-right: 10px;
          }
        }
        .trade-info{
          width: 100%;
          box-sizing: border-box;
          display: flex;
          font-size: 13px;
          justify-content: space-between;
          .left-card{
            width: 69%;
            display: inline-block;
            margin-right: 2%;
            .trade-status1{
              padding-bottom: 5px;
              display: flex;
              align-items: center;
              .send-status{
                margin-left: 10px;
                display: inline-block;
              }
            }
          }
          .right-card{
            width: 28%;
            display: inline-block;
          }
          .left-card, .right-card{
            p{
              color: #838683;
              line-height: 22px;
            }
          }
          .clearfix:before,
          .clearfix:after {
            display: table;
            content: "";
          }
          .clearfix:after {
            clear: both
          }
        }
        .total-set{
          text-align: right;
          margin-top: 10px;
          p{
            font-size: 13px;
            color: #999999;
            line-height: 24px;
            span:first-child{
              display: inline-block;
              width: 72px;
              text-align: left;
            }
            span:last-child{
              display: inline-block;
              width: 90px;
            }
          }
          .total-price{
            font-size: 15px;
            color: #333333;
            margin-top: 5px;
          }
        }
      }
    }
    .el-button--text{
      color: #449284;
      font-size: 14px;
      &::after{
        content: '';
        position: relative;
        height: 14px;
        /*border-right: 1px solid #EBEEF5;*/
        border-right: 1px solid #aaaaaa;
        padding-right: 10px;
      }
      &:last-of-type{
        &::after{
          content: '';
          position: relative;
          width: 1px;
          height: 14px;
          border-right: none;
        }
      }
    }
  }
</style>
