    <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;
  padding: 0 20px;
}
.no-relative .el-tabs__content {
  position: unset !important;
}
.order-lable-box:last-child {
  margin-top: 20px;
}
.order-lable {
  display: flex;
  flex-direction: column;
}
.order-lable span:last-child {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-top: 5px;
}
</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">
                <div class="order-info">
                    <div class="order-lable-box">
                        <div class="order-lable"><span>关联销售：</span><span>5555</span></div>
                        <div class="order-lable"><span>订单号：</span><span >111</span></div>
                        <div class="order-lable"><span>客户姓名：</span><span>1</span></div>
                    </div>
                    <div class="order-lable-box">  
                        <div class="order-lable"><span>性质：</span><span>1</span></div>
                        <div class="order-lable"><span>形成概述：</span><span>111</span></div>
                        <div class="order-lable"><span>状态：</span><span>1</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">
                            
                        </el-tab-pane>
                        <el-tab-pane label="订单核算" name="2">
                            <orderProfits :orderId="orderId"></orderProfits>
                        </el-tab-pane>
                        <el-tab-pane label="订单日志" name="3">
                            
                        </el-tab-pane>
                       
                    </el-tabs>
                </div>
            </div>
        </div>
    </template>
    <script>
import orderProfits from "./orderProfits.vue";
// import Activity from "../guestManagement/Activity";
export default {
  components: {
    // Activity,
    orderProfits,
  },
  props: {
    orderId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      activeName: "1",
      detailsData: {},
      loading: true,
    };
  },
  watch: {
    CustomerId: {
      handler(val, oldVal) {
        this.init();
        this.activeName = "1";
      },
      deep: true,
    },
  },
  mounted() {
    let $this = this;
    $this.init();
    // 监听修改更新界面
    this.MsgBus.$on("RefreshInfoBox", function() {
      $this.init();
    });
  },
  methods: {
    init() {
      return;
      this.apipost(
        "/api/Customer/GetAllCustmersModel",
        { CustomerId: this.CustomerId },
        (res) => {
          if (res.data.resultCode == 1) {
            let data = res.data.data;
            if (!data.HousePhotos) {
              data.HousePhotos = [];
            }
            if (!data.BusinessCardPhotos) {
              data.BusinessCardPhotos = [];
            }
            if (!data.Images) {
              data.Images = [];
            }
            if (!data.CustomerSourceType) {
              data.CustomerSourceType = "";
            }
            if (!data.CustomerSource) {
              data.CustomerSource = "";
            }
            if (!data.Province) {
              data.Province = "";
            }
            if (!data.Country) {
              data.Country = "";
            }
            if (!data.City) {
              data.City = "";
            }
            if (!data.District) {
              data.District = "";
            }
            this.detailsData = data;
            this.loading = true;
          }
        }
      );
    },
    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>
