<template>
  <div class="box">
    <div class="left">
      <div class="top bck">
        <div class="scroll">
          <div class="title-box">
            <TitleInfo :content="titleList[0]"></TitleInfo>
          </div>
          <div>
            <CustomerInfo
              :customerId="customerId"
              :key="customerId"
            ></CustomerInfo>
          </div>
        </div>
      </div>

      <div class="bottom bck">
        <div class="scroll">
          <div class="title-box">
            <TitleInfo :content="titleList[1]"></TitleInfo>
          </div>
          <div class="content-box">
            <LatestProgress
              :customerId="customerId"
              :key="customerId"
            ></LatestProgress>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="box-one bck">
        <div class="scroll">
          <div class="title-box">
            <TitleInfo :content="titleList[2]"></TitleInfo>
          </div>
          <div class="content-box">
            <SaleStatistics
              :customerId="customerId"
              :key="customerId"
            ></SaleStatistics>
          </div>
        </div>
      </div>

      <div class="box-two bck">
        <div class="scroll">
          <div class="title-box">
            <TitleInfo :content="titleList[3]"></TitleInfo>
          </div>
          <div class="content-box">
            <LineTrend :customerId="customerId" :key="customerId"></LineTrend>
          </div>
        </div>
      </div>

      <div class="box-three bck">
        <div class="scroll">
          <div class="title-box">
            <TitleInfo :content="titleList[4]"></TitleInfo>
          </div>
          <div class="content-box">
            <SalesDetails
              :customerId="customerId"
              :key="customerId"
            ></SalesDetails>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import TitleInfo from "@/components/TitleInfo/index.vue";
import CustomerInfo from "./com/CustomerInfo.vue";
import SalesDetails from "./com/SalesDetails.vue";
import LineTrend from "./com/LineTrend.vue";
import SaleStatistics from "./com/SaleStatistics.vue";
import LatestProgress from "./com/LatestProgress.vue";

const route = useRoute();
const titleList = ["客户信息", "最新跟进", "销售统计", "销售走势", "销售明细"];
const customerId = ref("");

onMounted(() => {
  customerId.value = route.query.id;
});
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  padding: 10px;
  height: calc(100vh - 120px);
  // overflow-y: auto;

  .left {
    width: 400px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    .top {
      margin-bottom: 10px;
      min-height: 300px;
      box-sizing: border-box;
    }
    .bottom {
      flex: 1;
      height: calc(100vh - 420px);
    }
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    // .box-one {
    //   padding-bottom: 10px;
    // }
    .box-three {
      // flex: 1;
      min-height: 200px;
    }
    .box-two {
      margin: 10px 0;
      flex: 1;
      box-sizing: border-box;
    }
  }
}
.bck {
  background-color: #fff;
}
.scroll {
  display: flex;
  flex-direction: column;
  padding: 10px;
  height: 100%;
  box-sizing: border-box;
  .title-box {
    height: 24px;
  }
  .content-box {
    flex: 1;
    padding-top: 10px;
    overflow-y: auto;
  }
}
</style>