<template>
  <div class="orderDetails salesOrderDetails">
    <div class="head-title">
      <span @click="CommonJump('afterSalesOrder')" class="blue point">售后列表</span> / 订单详情
    </div>
    <div class="content app-order-detail">
        <el-card class="app-order-status" shadow="never">
            <el-steps :active="activeStep" align-center>
                <el-step title="买家申请售后" icon="el-icon-edit" :description="dataInfo.CreateDate">
                    <i :class="activeStep>0?'step01Active':'step01'" slot="icon"></i>
                </el-step>
                <el-step title="卖家同意受理" icon="el-icon-edit" :description="dataInfo.AuditTime">
                    <i :class="activeStep>1?'step02Active':'step02'" slot="icon"></i>
                </el-step>
                <template>
                    <el-step v-if="activeStep<3" title="未完成售后" icon="el-icon-edit">
                        <i :class="activeStep>2?'step03Active':'step03'" slot="icon"></i>
                    </el-step>
                    <el-step v-else title="已完成售后" icon="el-icon-edit" :description="dataInfo.FinishTime">
                        <i :class="activeStep>2?'step03Active':'step03'" slot="icon"></i>
                    </el-step>
                </template>
            </el-steps>
      </el-card>
      <el-row :gutter="16">
        <el-col :span="8">
          <div flex="dir:top" class="card-box">
            <h3>售后信息</h3>
            <template v-if="dataInfo.OrderInfo">
              <div flex="dir:left cross:center" class="item-box">
                <span class="label">售后类型:</span>
                <div>{{dataInfo.TypeName}}</div>
              </div>
              <div v-if="dataInfo.VoucherList && dataInfo.VoucherList.length>0" flex="dir:left cross:center" class="item-box">
                <span flex-box="0" class="label">凭证图片:</span>
                <div flex-box="1">
                    <img @click="OpenImg(item)" v-for="(item,index) in dataInfo.VoucherList" :key="index" slot="reference" :src="item" alt="" class="small-img">
                </div>
              </div>
              <div flex="dir:left cross:center" class="item-box">
                <span class="label">订单号:</span>
                <div>{{dataInfo.ReOrderNo}}</div>
              </div>
              <div flex="dir:left cross:center" class="item-box">
                <span class="label">实付金额:</span>
                <div>{{dataInfo.Income}}</div>
              </div>
              <div flex="dir:left cross:center" class="item-box">
                <span class="label">申请退款:</span>
                <div>{{dataInfo.Refund}}</div>
              </div>
              <div flex="dir:left cross:center" class="item-box">
                <span class="label">买家:</span>
                <div>{{dataInfo.UserName}}</div>
              </div>
            </template>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="card-box">
            <h3>售后物流</h3>
            <div v-for="(item,index) in dataInfo.ExpressList" :key="index">
                <div flex="dir:left cross:center" class="item-box">
                    <span class="label">收货人:</span>
                    <div>{{item.Name}}</div>
                </div>
                <div flex="dir:left cross:center" class="item-box">
                    <span class="label">快递信息:</span>
                    <div>
                        <span class="el-tag el-tag--mini el-tag--light">{{item.ExpressName}}</span>
                        <span></span>
                        <a v-if="item.Type==1" :href="'https://www.baidu.com/s?wd='+item.ExpressName+item.ExpressNumber" target="_blank" title="点击搜索运单号">{{item.ExpressNumber}}</a>
                        <span v-if="item.Type==2">{{item.ExpressNumber}}</span>
                    </div>
                </div>
            </div>

          </div>
        </el-col>
        <el-col :span="8">
          <div flex="dir:top" class="card-box">
            <h3>售后过程</h3>
            <div v-for="(item,index) in dataInfo.AfterSaleLoglist" :key="index" class="list-item-box">
                <div flex="dir:left cross:center" class="item-box">
                    <span class="label">
                        <span v-if="item.Type==1">买家:</span>
                        <span v-if="item.Type==2">卖家:</span>
                    </span>
                    <div class="label">{{item.CreateDate}}</div>
                </div>
                <div>{{item.Content}}</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-card style="margin-top:15px" shadow="never">
        <el-table border :data="DetailList" style="width: 100%">
          <el-table-column prop="Id" label="商品标题">
            <template slot-scope="scope">
              <div flex="dir:left cross:center">
                <img :src="getIconLink(scope.row.CoverImagePath)" alt=""
                  style="height: 60px; width: 60px; margin-right: 5px;">
                <div class="app-ellipsis">
                  <div class="vue-line-clamp" style="word-break: break-all; -webkit-line-clamp: 1;">
                    {{scope.row.GoodsName}}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="规格" width="200" align="center">
            <template slot-scope="scope">
              <el-tag :key="index2" v-for="(list,index2) in scope.row.SpecificationList" style="top: 5px;position: relative;margin-right: 5px; max-width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" size="mini">
                  {{list}}
              </el-tag>
            </template>

          </el-table-column>
          <el-table-column prop="Unit_Price" label="单价" width="120" align="center">
            <template slot-scope="scope">
             ￥{{scope.row.Unit_Price}}
            </template>
          </el-table-column>
          <el-table-column prop="Number" label="数量" width="80" align="center">
          </el-table-column>
          <el-table-column prop="Original_Price" label="原价" width="120" align="center">
            <template slot-scope="scope">
             ￥{{scope.row.Original_Price}}
            </template>
          </el-table-column>
          <el-table-column prop="Final_Price" label="折扣后" width="120" align="center">
            <template slot-scope="scope">
             ￥{{scope.row.Final_Price}}
            </template>
          </el-table-column>
        </el-table>
        <el-form label-width="200px" class="app-order-count-price">
          <el-form-item label="商品小计">
            ￥{{OrderInfo.PreferPrice}}
          </el-form-item>
          <el-form-item label="运费">
            ￥{{OrderInfo.FreightMoney}}
          </el-form-item>
          <el-form-item label="实付款">
            <span style="color: rgb(255, 69, 68);">￥<b>{{OrderInfo.Income}}</b></span>
          </el-form-item>
        </el-form>
      </el-card>
      <div flex="dir:right" class="action-box">
        <template>
            <!-- <el-button v-if="(activeStep==2 || activeStep==3) && !exitState" style="margin-left: 10px;" size="small"
            type="primary">打印发货单</el-button>
            <el-button style="margin-left: 10px;" size="small" type="primary">打印小票</el-button>
            <el-button @click="qrEnd(dataInfo)" v-if="activeStep==4 && !exitState" style="margin-left: 10px;" size="small"
            type="primary">确认完成</el-button>
            <el-button @click="ConfirmSh(dataInfo)" v-if="activeStep==3 && !exitState" style="margin-left: 10px;"
            size="small" type="primary">确认收货</el-button>
            <el-button @click="fhBtn(dataInfo)" v-if="activeStep==2 && !exitState" style="margin-left: 10px;" size="small"
            type="primary">发货</el-button> -->
            <el-button @click="CommonJump('orderDetails',{OrderId:OrderInfo.OrderId})" style="margin-left: 10px;" size="small"
            type="primary">订单详情</el-button>
            <!-- v-if="dataInfo.Type==1 && dataInfo.ReOrderStatus==4" -->
            <el-button @click="dkOpenDig(dataInfo)" style="margin-left: 10px;" size="small"
            type="primary">打款</el-button>

        </template>
      </div>
    </div>
    <!-- 修改收货地址 -->
    <el-dialog title="修改收货地址" :visible.sync="shDig" width="600px">
      <el-form :model="shMsg" :rules="shMsgrule" ref="shMsg" label-width="80px">
        <el-form-item label="收件人" prop="Consignee">
          <el-input size="small" v-model="shMsg.Consignee"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="Mobile">
          <el-input type="number" size="small" v-model="shMsg.Mobile"></el-input>
        </el-form-item>
        <el-form-item label="所在区域" prop="Province">
          <el-select size="small" @change="shMsg.City='',getCity(shMsg.Province)" v-model="shMsg.Province"
            style="width:144px" filterable placeholder="请选择">
            <el-option v-for="item in provinceList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
          <el-select size="small" @change="shMsg.District='',getArea(shMsg.City)" v-model="shMsg.City"
            style="width:144px" filterable placeholder="请选择">
            <el-option v-for="item in cityList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
          <el-select size="small" v-model="shMsg.District" style="width:144px" filterable placeholder="请选择">
            <el-option v-for="item in areaList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="ShoppingAddress">
          <el-input size="small" v-model="shMsg.ShoppingAddress"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="shDig = false">取 消</el-button>
        <el-button size="small" type="primary" @click="shsubmitForm('shMsg')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 订单取消 -->
    <el-dialog title="修改" :visible.sync="exitDig" width="600px">
      <el-form :model="exitMsg" ref="exitMsg" label-width="0">
        <p style="padding:10px 0" v-if="exitMsg.Type==1">修改备注：</p>
        <el-form-item>
          <el-input type="textarea" row="2" size="small" v-model="exitMsg.Remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="exitDig = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitForm('exitMsg')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 发货 -->
    <el-dialog custom-class="app-send" title="发货" :visible.sync="fhDig" width="35%">
      <div class="title-box">
        <span class="text">选择发货商品</span>
        <span>(默认全选)</span>
      </div>
      <el-table ref="fahuoTable" :data="fahuoList" @selection-change="TableSelectChange" style="width: 100%">
        <el-table-column :selectable="selectable" type="selection" width="55">
        </el-table-column>
        <el-table-column prop="id" label="图片" width="60">
          <template slot-scope="scope">
            <img style="width:30px;height:30px" :src="domainManager().ImageUrl+scope.row.CoverImagePath" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="GoodsName" label="名称" width="314">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.IsBindExpress==1" style="margin-left:5px" size="small" type="success">已发货</el-tag>
            <span>{{scope.row.GoodsName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Number" label="数量" width="80">
        </el-table-column>
        <el-table-column prop="Specification" label="规格">
        </el-table-column>
      </el-table>
      <div class="title-box"><span class="text">物流信息</span></div>
      <el-form :model="fhMsg" ref="exitMsg" :rules="fhrules" label-width="130px">
        <el-form-item label="物流快递">
          <el-radio v-model="fhMsg.Type" :label="1">快递</el-radio>
          <el-radio v-model="fhMsg.Type" :label="2">其他方式</el-radio>
        </el-form-item>
        <template v-if="fhMsg.Type==1">
          <el-form-item label="快递公司" prop="ExpressId">
            <el-select class="w200" size="small" v-model="fhMsg.ExpressId" filterable placeholder="请选择">
              <el-option v-for="item in ExpressList" :key="item.ID" :label="item.Name" :value="item.ID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收件人邮编">
            <el-input type="number" min="1" size="small" v-model="fhMsg.PostCode"></el-input>
          </el-form-item>
          <el-form-item label="快递单号" prop="ExpressNumber">
            <el-input size="small" v-model="fhMsg.ExpressNumber">
              <!-- <el-button slot="append"> 获取面单</el-button> -->
            </el-input>
          </el-form-item>
          <el-form-item label="商家留言">
            <el-input type="textarea" row="2" size="small" v-model="fhMsg.Remark"></el-input>
          </el-form-item>
        </template>
        <template v-if="fhMsg.Type==2">
          <el-form-item label="物流内容">
            <el-input type="textarea" row="2" size="small" v-model="fhMsg.Remark"></el-input>
          </el-form-item>
        </template>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="fhDig = false">取 消</el-button>
        <el-button size="small" type="primary" @click="FhsubmitForm('fhMsg')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 打款 -->
    <el-dialog
        title="确认已收到货"
        :visible.sync="dkDig"
        width="600px">
        <div flex="main:center cross:center" style="text-align: center; font-size: 16px;">
            <i class="el-icon-warning" style="color: rgb(230, 162, 60); margin-right: 10px; font-size: 24px;"></i>
            <span class="span-label">确认收货后,退款金额</span>
            <el-input class="w100" size="small" v-model="dkMsg.Refund" style="margin:0 6px" type="number" min="1" placeholder="请输入内容"></el-input>
            <span class="span-label">元将直接返还给用户！</span>
        </div>
        <div style="text-align:right;margin-top:20px">
            <el-button size="small" @click="dkDig=false">取消</el-button>
            <el-button size="small" type="primary" @click="SaleForRefunds">确定</el-button>
        </div>
    </el-dialog>
    <!-- 查看图片 -->
    <el-dialog
        :visible.sync="seeimgDig"
        width="45%">
        <div>
            <img :src="imgSrc" style="width:100%;max-width:100%;"  alt="">
        </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        imgSrc:'',
        seeimgDig:false,
        activeStep: 0,
        tableData: [{
          Id: 1
        }],
        OrderId: 0,
        dataInfo: {},
        OrderInfo: {},
        shDig: false,
        shMsg: {
          OrderId: 0,
          Consignee: '',
          Mobile: '',
          Province: '',
          City: '',
          District: '',
          ShoppingAddress: '',
        },
        shMsgrule: {
          Province: [{
            required: true,
            message: '请选择省',
            trigger: 'change'
          }],
          ShoppingAddress: [{
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }],
          Mobile: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          Consignee: [{
            required: true,
            message: '请输入收件人',
            trigger: 'blur'
          }],
        },
        provinceList: [],
        cityList: [],
        areaList: [],
        exitMsg: {
          OrderId: 0,
          Type: 1,
          Remark: '',
        },
        exitDig: false,
        fhrules: {
          ExpressId: [{
            required: true,
            message: '请选择快递公司',
            trigger: 'change'
          }],
          ExpressNumber: [{
            required: true,
            message: '请输入快递单号',
            trigger: 'blur'
          }],
        },
        fhMsg: {
          Id: 0,
          OrderId: '',
          Type: 1,
          ExpressId: '',
          PostCode: '',
          ExpressNumber: '',
          Remark: '',
          OrderDetailIdList: [],
        },
        fahuoList: [],
        fhDig: false,
        checkfhList: [],
        ExpressList: [],
        exitState: false,
        ReOrderId:'',
        DetailList:[],
        dkMsg:{},
        dkDig:false,
      };
    },
    created() {
      if (this.$route.query.ReOrderId) {
        this.ReOrderId = this.$route.query.ReOrderId;
        this.getData()
        this.getProvince();
        this.getExpressInfo();

      }
    },
    methods: {
        OpenImg(item){
            this.imgSrc=item;
            this.seeimgDig=true;
        },
        // 打款
        SaleForRefunds(){
            this.apipost('/api/order/SetOrderAfterSaleForRefunds',this.dkMsg,
                res => {
                if (res.data.resultCode === 1) {
                    this.getList();
                    this.Success(res.data.message)
                    this.dkDig=false;
                } else {
                    this.Error(res.data.message);
                }
                },
                null
            );
        },
        // 打款
        dkOpenDig(item){
            this.dkMsg={
                Refund:item.Refund,
                ReOrderId:item.ReOrderId
            };
            this.dkDig=true;
        },
      // 确认完成
      qrEnd(item, num) {
        let msg = {
          OrderId: item.OrderId,
          Type: num
        };
        let that = this;
        that.$confirm('是否完成该订单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.apipost('/api/order/SetOrderOperation', msg,
            res => {
              if (res.data.resultCode === 1) {
                this.getList();
                this.Success(res.data.message)

              } else {
                this.Error(res.data.message);
              }
            },
            null
          );
        }).catch(() => {

        });
      },
      // 确认收货
      ConfirmSh(item) {
        let msg = {
          OrderId: item.OrderId,
          Type: 5
        };
        let that = this;
        that.$confirm('是否确认收货?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.apipost('/api/order/SetOrderOperation', msg,
            res => {
              if (res.data.resultCode === 1) {
                this.getData();
                this.Success(res.data.message)

              } else {
                this.Error(res.data.message);
              }
            },
            null
          );
        }).catch(() => {

        });
      },
      FhsubmitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.fhMsg.OrderDetailIdList = [];
            if (this.checkfhList.length == 0) {
              this.Error("至少选择一项！");
              return;
            }
            this.checkfhList.forEach(item => {
              this.fhMsg.OrderDetailIdList.push(item.Id);
            })
            if (this.fhMsg.Type == 2) {
              this.fhMsg.ExpressId = "";
              this.fhMsg.PostCode = "";
              this.fhMsg.ExpressNumber = "";
            }
            this.apipost('/api/order/SetOrderSendGoods', this.fhMsg,
              res => {
                if (res.data.resultCode === 1) {
                  this.getData();
                  this.fhDig = false;
                  this.Success(res.data.message)

                } else {
                  this.Error(res.data.message);
                }
              },
              null
            );
          } else {
            return false;
          }
        });
      },
      TableSelectChange(val) {
        this.checkfhList = val;

      },
      selectable(row, index) {
        return row.IsBindExpress === 2
      },
      // 发货
      fhBtn(item) {
        this.fhDig = true;
        this.fhMsg = {
          Id: 0,
          OrderId: item.OrderId,
          Type: 1,
          ExpressId: '',
          PostCode: '',
          ExpressNumber: '',
          Remark: '',
          OrderDetailIdList: [],
        }
        this.fahuoList = item.DetailList;
      },
      getData() {
        this.apipost("/api/order/GetOrderAfterSaleInfo", {
          ReOrderId: this.ReOrderId
        }, res => {
          if(res.data.resultCode==1){
            this.dataInfo = res.data.data;
            let data = res.data.data;
            // 未付款
            if (data.CreateDate != '' && data.AuditTime=='') {
              this.activeStep = 1;
            }
            if (data.CreateDate != '' && data.AuditTime!='' && data.FinishTime=='') {
              this.activeStep = 2;
            }
            if (data.FinishTime!='') {
              this.activeStep = 3;
            }

            if (data.OrderInfo) {
              this.OrderInfo = data.OrderInfo;
            }
            this.DetailList=[];
            this.DetailList.push(data.OrderInfo)
          }

        })
      },
      // 快递公司
      getExpressInfo() {
        this.apipost("/api/MallBase/GetExpressInfo", {}, res => {
          if (res.data.resultCode == 1) {
            this.ExpressList = res.data.data;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      // 修改备注
      OrderExit() {
        this.exitMsg = {
          OrderId: this.dataInfo.OrderId,
          Type: 1,
          Remark: this.dataInfo.Remark,
        }
        this.exitDig = true;
      },
      // 订单操作
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.apipost('/api/order/SetOrderOperation', this.exitMsg,
              res => {
                if (res.data.resultCode === 1) {
                  this.getData();
                  this.Success(res.data.message)
                  this.exitDig = false;

                } else {
                  this.Error(res.data.message);
                }
              },
              null
            );
          } else {
            return false;
          }
        });
      },
      // 修改收货地址
      ExitshAdress(item) {
        this.shDig = true;
        this.shMsg = {
          OrderId: this.dataInfo.OrderId,
          Consignee: item.Consignee,
          Mobile: item.Mobile,
          Province: item.Province,
          City: item.City,
          District: item.District,
          ShoppingAddress: item.ShoppingAddress,
        }
        this.getCity(item.Province);
        this.getArea(item.City);
      },
      shsubmitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.apipost('/api/order/SetOrderShopingAddress', this.shMsg,
              res => {
                if (res.data.resultCode === 1) {
                  this.getData();
                  this.Success(res.data.message)
                  this.shDig = false;

                } else {
                  this.Error(res.data.message);
                }
              },
              null
            );
          } else {
            return false;
          }
        });
      },
      getArea(val) {
        this.apipost("/api/Destination/GetChildList", {
          Id: val
        }, res => {
          this.areaList = res.data.data;
        })
      },
      getCity(val) {
        this.apipost("/api/Destination/GetChildList", {
          Id: val
        }, res => {
          this.cityList = res.data.data;
          if (this.cityList.length > 0) {
            this.getArea(this.cityList[0].ID)
          }
        })
      },
      getProvince() {
        this.apipost("/api/Destination/GetChildList", {
          Id: 1
        }, res => {
          this.provinceList = res.data.data;
          if (this.provinceList.length > 0) {
            this.getCity(this.provinceList[0].ID)
          }
        })
      },

    },
    mounted() {

    }
  };

</script>
<style>
.salesOrderDetails .list-item-box {
    border-bottom: 1px solid #E3E3E3;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.salesOrderDetails .small-img {
    width: 45px;
    height: 45px;
    cursor: pointer;
    margin-right: 5px;
}
  .app-order-detail .goods-pic {
    width: 35px;
    height: 35px;
    margin: 0 4px;
  }

  .app-order-detail .express-address {
    width: 80%;
  }

  .app-order-detail .action-box {
    padding: 10px 20px;
  }

  .app-order-detail .app-order-count-price .el-form-item {
    margin-bottom: 5px;
  }

  .app-order-detail .app-order-count-price {
    float: right;
    margin-right: 55px;
    font-size: 12px;
    text-align: right;
    margin-top: 15px;
  }

  .app-order-detail h3 {
    padding: 15px 0;
  }

  .app-order-detail .share-price {
    color: #EF8933;
  }

  .app-order-detail .share-title {
    font-size: 15px;
    margin: 10px 0 5px;
  }

  .app-order-detail .card-box .label {
    color: #999999;
    margin-right: 10px;
  }

  .app-order-detail .item-box {
    margin-bottom: 10px;
  }

  .app-order-detail .card-box {
    border: 1px solid #EBEEF5;
    border-radius: 3px;
    padding: 10px;
    height: 300px;
    overflow-y: scroll;
  }

  .app-order-detail .stepExit {
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_6_active.png");
  }
  .app-order-detail .step03 {
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_4.png");
  }

  .app-order-detail .step02 {
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_2.png");
  }
  .app-order-detail .step01 {
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/status_5.png");
  }
  .app-order-detail .step03Active {
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/s_1_active.png");
  }

  .app-order-detail .step02Active {
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/s_3_active.png");
  }

  .app-order-detail .step01Active {
    height: 30px;
    width: 30px;
    background-image: url("../../assets/img/userman/s_1_active.png");
  }

  .app-order-detail .app-order-status {
    padding: 50px 120px;
    margin-bottom: 30px;
  }

  .orderDetails .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

</style>