<template>
  <div v-loading="loading" class="progress">
    <el-timeline reverse>
      <el-timeline-item
        v-for="(item, index) in progressList"
        :key="index"
        color="#0084FF"
        placement="top"
        hide-timestamp
      >
        <div class="details">
          <div class="t">{{ getTitle(item.type) }}</div>
          <div class="content11">
            <span class="gray"> 跟进摘要： </span>
            <span class="val"> {{ getContent(item) }} </span>
          </div>
          <div class="gray">{{ item.createTime }}</div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
const props = defineProps({
  customerId: {
    type: String,
  },
});
const { proxy } = getCurrentInstance();
const loading = ref(false);
const progressList = ref([]);
const getData = () => {
  loading.value = true;
  proxy
    .post("/saleQuotation/latestFollowUp", { id: props.customerId })
    .then((res) => {
      console.log(res, "adas");
      progressList.value = res.rows;
      setTimeout(() => {
        loading.value = false;
      }, 200);
    });
};
onMounted(() => {
  if (props.customerId) {
    getData();
  }
});

const getTitle = (type) => {
  switch (type) {
    case 10:
      return "报价单";
    case 20:
      return "合同";
    default:
      return "";
  }
};
const getContent = (item) => {
  if (item.type === 10) {
    return "报价单总金额 " + proxy.moneyFormat(item.amount, 2);
  } else if (item.type === 20) {
    return (
      "合同总金额 " +
      proxy.moneyFormat(item.amount, 2) +
      ` (${item.contractCode}) `
    );
  }
};
</script>

<style lang="scss" scoped >
:deep(.el-timeline-item) {
  padding-bottom: 10px;
}
:deep(.el-timeline-item__wrapper) {
  top: 5px;
}
.progress {
  padding: 10px;
}
.details {
  padding: 10px;
  background-color: #d9edff;
  border-radius: 5px;
  font-size: 12px;
  .t {
    color: #333333;
    font-weight: bold;
  }
  .content11 {
    margin: 4px 0;
    display: flex;
    .val {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .gray {
    color: #999999;
  }
}
</style>
<style >
ul {
  margin: 0px;
  padding: 0px;
}
</style>

