    <style>
.orderDetails-box {
  height: 100%;
}
.orderDetails-header {
  height: 83px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
}
.orderDetails-header .left {
  display: flex;
  align-items: center;
}
.orderDetails-body {
  height: calc(100% - 83px);
  display: flex;
  flex-direction: column;
}
.orderDetails-body .order-info {
  padding: 30px;
  box-sizing: border-box;
  font-size: 12px;
  background-color: #f6f4fc;
}
.order-lable-box {
  display: flex;
  justify-content: space-between;
  color: #999999;
}
.orderDetails-content {
  flex: 1;
  position: relative;
}
.no-relative .el-tabs__content {
  position: unset !important;
}
.order-lable-box:last-child {
  margin-top: 20px;
}
.order-lable {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.order-lable span:first-child{
  font-size: 14px;
}
.order-lable span {
  font-size: 16px;
  margin-top: 10px;
}
.order-lable span:last-child{
  font-weight: bold;
}
.order-lable span.text{
  color: #333;
}
.orderDetails-content .el-tabs__header{
  padding: 0 20px;
  margin: 0;
}
.orderDetails-content .el-tabs__nav-wrap::after{
  height: 0;
  
}
.orderDetails-content .el-tabs__content{
  height: 100%;
  position: absolute;
  width: calc(100%);
  padding: 17px 0 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #f6f4fc;
}
.tatusText.greyb {
  color: #333;
}
</style>
    <template>
        <div class="orderDetails-box">
            <div class="orderDetails-header">
                <div class="left">
                    <p>订单详情</p>
                </div>
                <div class="right">
                    
                </div>
            </div>
            <div class="orderDetails-body" v-loading="loading">
                <div class="order-info">
                    <div class="order-lable-box">
                        <div class="order-lable"><span>关联销售：</span><span class="text">{{detailsData.EnterName}}</span></div>
                        <div class="order-lable"><span>订单号：</span><span class="text">{{detailsData.OrderId}}</span></div>
                        <div class="order-lable"><span>客户姓名：</span><span class="text">{{detailsData.GuestName}}</span></div>
                    </div>
                    <div class="order-lable-box">  
                        <div class="order-lable"><span>性质：</span><span class="text">{{detailsData.GuestCount>1?'多人':'单人'}}</span></div>
                        <div class="order-lable"><span>行程概述：</span><span class="text">{{detailsData.StartCityName}}</span></div>
                        <div class="order-lable"><span>状态：</span>
                          <span 
                          class="cp tatusText"
                          :class="detailsData.TicketStatus==1?'greyb':
                          (detailsData.TicketStatus==2?'success':
                          (detailsData.TicketStatus==3?'error':
                          (detailsData.TicketStatus==4?'Black':'')))">{{detailsData.TicketStatusName}}</span></div>
                    </div>
                </div>
                <div class="orderDetails-content">
                    <el-tabs v-model="activeName" class="no-relative" @tab-click="handleClick">
                        <el-tab-pane label="产品详情" name="1">
                          <productDetails :detailsData="detailsData"></productDetails>
                        </el-tab-pane>
                        <el-tab-pane label="订单核算" name="2">
                            <orderProfits :orderId="orderId"></orderProfits>
                        </el-tab-pane>
                        <el-tab-pane label="订单日志" name="3">
                            <orderLog :orderId="orderId"></orderLog>
                        </el-tab-pane>
                       
                    </el-tabs>
                </div>
            </div>
        </div>
    </template>
    <script>
import orderProfits from "./orderProfits.vue";
import productDetails from "./productDetails";
import orderLog from "./orderLog";
export default {
  components: {
    orderProfits,
    productDetails,
    orderLog
  },
  props: {
    orderId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      activeName: "1",
      detailsData: {},
      loading: false,
      
    };
  },
  watch: {
    orderId: {
      handler(val, oldVal) {
        this.init();
        this.activeName = "1";
        this.orderId = val
      },
      deep: true,
    },
  },
  mounted() {
    let $this = this;
    $this.init();
    // 监听修改更新界面
    this.MsgBus.$on("RefreshInfoBox", function() {
      $this.init();
    });
  },
  methods: {
    init() {
      this.loading = true;
      this.apipost(
        "/api/Order/GetGuestOrderInfo",
        { OrderId: this.orderId },
        (res) => {
          if (res.data.resultCode == 1) {
            let data = res.data.data;
            this.detailsData = data;
            this.loading = false;
          }else{
            this.loading = false;
          }
        }
      );
    },
    handleCommand(command) {
      if (command === "z") {
        this.$emit("transferS", 3);
      } else if (command === "g") {
        this.$emit("watersS", 1);
      }
    },
    handleClick(tab, event) {},
    editCust() {
      this.$emit("editCustS", 1);
    },
    handleClose(done) {
      done();
    },
  },
};
</script>
