<template>
  <div class="order">
    <div class="header">
      <div class="title">
        <div>{{ $filters.getProductType(item.categoryId) }}</div>
        <h3 class="van-ellipsis">{{ item.productName }}</h3>
      </div>
      <template>
        <span class="pay-state">{{
          [3, 4].includes(item.payType)
            ? pay_status_words_ty[item.status]
            : pay_status_words[item.status]
        }}</span>
      </template>
    </div>
    <!-- <div class="header">
      <div class="title">
        <div>投资课堂</div>
        <h3 class="van-ellipsis">产品名称</h3>
      </div>
      <span class="pay-state">支付完成</span>
    </div> -->
    <div class="valid-Date">
      <span>有效日期：</span>
      <p v-if="item.payType === 4">
        {{ $filters.dateFormat(item.moduleStart, "YYYY/MM/DD") }}-长期
      </p>
      <template v-else>
        <!-- <p v-if="item.period === 0 || item.period === 99 ">{{ item.moduleStart | dateFormat('YYYY/MM/DD') }}-长期</p> -->
        <p v-if="isLong">
          {{ $filters.dateFormat(item.moduleStart, "YYYY/MM/DD") }}-长期
        </p>
        <p v-else>
          {{ $filters.dateFormat(item.moduleStart, "YYYY/MM/DD") }}-{{
            $filters.dateFormat(item.moduleEnd, "YYYY/MM/DD")
          }}
        </p>
      </template>
    </div>
    <div class="footer">
      <div>
        <span>订单金额：</span>
        <p v-if="item.payType === 4">佣金率{{ item.rate * 1000 }}‰</p>
        <p v-else>{{ $filters.getPrice(item) }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed } from "vue";
import dayjs from "dayjs";
import { pay_status_words, pay_status_words_ty } from "@/utils/contant";

const props = defineProps({
  item: {
    type: Object,
    require: true,
    default: () => {},
  },
});

const isLong = computed(() => {
  const intervalDay = dayjs(props.item.moduleStart).diff(
    dayjs(props.item.moduleStart),
    "day"
  );
  if (intervalDay > 380) {
    return true;
  } else {
    return false;
  }
});
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}
.order {
  margin: 0 0;
  padding: 30px 0;
  background: #ffffff;
  border-radius: 20px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .title {
    display: flex;
    align-items: center;
    max-width: 80%;
    div {
      // display: inline-block;
      padding: 17px 8px 18px;
      margin-right: 16px;
      background: rgba(255, 74, 29, 0.1);
      border-radius: 8px;
      font-family: sans-serif;
      font-weight: 400;
      font-size: 24px;
      // transform: scale(0.83);
      // transform-origin: 0 0;
      color: #ff4a1d;
      // letter-spacing: 0;
      line-height: 0;
      // line-height: 14px;
    }
    h3 {
      flex: 1;
      margin: 0;
      font-size: 28px;
      color: #333333;
      // padding-top: 2px;
    }
  }
  .pay-state {
    font-weight: 400;
    font-size: 24px;
    color: #666666;
  }
}
.valid-Date {
  display: flex;
  align-items: center;
  margin-bottom: 19px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  text-align: justify;
  line-height: 36px;
  span {
    color: rgba(102, 102, 102, 1);
  }
  p {
    margin: 0;
    color: rgba(51, 51, 51, 1);
  }
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  div {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0;
    text-align: justify;
    line-height: 36px;
    span {
      color: rgba(102, 102, 102, 1);
    }
    p {
      margin: 0;
      color: rgba(51, 51, 51, 1);
    }
  }
  .pay-progress {
    display: inline-block;
    font-weight: 400;
    font-size: 20px;
    // transform: scale(0.83);
    transform-origin: 0 0;
    color: #c1272f;
  }
}
</style>
