<template>
  <div class="details" v-loading="loading">
    <div class="item first">
      <div class="left_">
        <div class="money">
          {{ moneyFormat(detailsData.amount, 2) }}
        </div>
        <div>销售额（{{ detailsData.currency || "￥" }}）</div>
      </div>
      <div class="right_">
        <div class="icon">
          <img src="@/assets/images/portrait/icon_sales.png" alt="" />
        </div>
      </div>
    </div>
    <div class="item two">
      <div class="left_">
        <div class="money">
          {{ moneyFormat(detailsData.profitAmount, 2) }}
        </div>
        <div>利润额（￥）</div>
      </div>
      <div class="right_">
        <div class="icon">
          <img src="@/assets/images/portrait/icon_profits.png" alt="" />
        </div>
      </div>
    </div>
    <div class="item three">
      <div class="left_">
        <div class="money">
          {{ detailsData.mailCount || 0 }}
        </div>
        <div>往来邮件（封）</div>
      </div>
      <div class="right_">
        <div class="icon">
          <img src="@/assets/images/portrait/icon_email.png" alt="" />
        </div>
      </div>
    </div>
    <div class="item four">
      <div class="left_">
        <div class="money">
          {{ detailsData.count }}
        </div>
        <div>报价次数（次）</div>
      </div>
      <div class="right_">
        <div class="icon">
          <img src="@/assets/images/portrait/icon_offer.png" alt="" />
        </div>
      </div>
    </div>
    <div class="item five">
      <div class="left_">
        <div class="money">
          {{ detailsData.contractCount }}
        </div>
        <div>成交合同（单）</div>
      </div>
      <div class="right_">
        <div class="icon">
          <img src="@/assets/images/portrait/icon_cjht.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  customerId: {
    type: String,
  },
});
const loading = ref(false);
let detailsData = ref({});
const { proxy } = getCurrentInstance();
const getData = () => {
  loading.value = true;
  proxy
    .post("/saleQuotation/salesStatistics", { id: props.customerId })
    .then((res) => {
      if (res.contractVo) {
        detailsData.value = res.contractVo;
      }
      setTimeout(() => {
        loading.value = false;
      }, 200);
    });
};
onMounted(() => {
  if (props.customerId) {
    getData();
  }
});
</script>

<style lang="scss" scoped>
.details {
  // margin-top: 10px;
  display: flex;
  justify-content: space-around;
  .item {
    border-radius: 10px;
    width: 13vw;
    height: 70px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .left_ {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .money {
        font-weight: 700;
        color: #333333;
        font-size: 15px;
      }
    }
    .right_ {
      .icon {
        img {
          width: 20px;
          height: 20px;
          margin-top: 6px;
        }
        width: 34px;
        height: 34px;
        margin-top: 10px;
        border-radius: 8px;
        background-color: #ffffff;
        text-align: center;
        line-height: 34px;
      }
    }
  }
  .first {
    background: linear-gradient(#c7e3fe, #dfecff);
  }
  .two {
    background: linear-gradient(#eae8fb, #ded9ff);
  }
  .three {
    background: linear-gradient(#fcf1e4, #fce5ca);
  }
  .four {
    background: linear-gradient(#e2fbe8, #e2fbe8);
  }
  .five {
    background: linear-gradient(#ffebe9, #ffebe9);
  }
}
</style>