<script setup lang="ts">
import urgeApi from '@/api/urge.ts'
import dayjs from 'dayjs'

const isLoading = ref(false)
const orders: Ref<anyObj> = ref([])

onBeforeMount(async () => {
  isLoading.value = true
  try {
    const {
      data: { data: res },
    } = await urgeApi.getUserInspectorOrderList()
    orders.value = res
  } finally {
    isLoading.value = false
  }
})
</script>

<template>
  <div class="orders">
    <div class="panel">
      <div class="header">
        <LineFont text="订单记录" />
      </div>
      <div class="content">
        <div class="circle-with-tail left"></div>
        <div class="circle-with-tail"></div>
        <div class="table-container">
          <div v-if="isLoading" class="loadincontainer">
            <Icon name="global_loading" loading :size="80"></Icon>
          </div>
          <table v-else>
            <thead>
              <tr>
                <th>模式</th>
                <th>价格</th>
                <th>支付价格</th>
                <th>开通时间</th>
                <th>服务周期</th>
                <th>状态</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="order in orders" :key="order.id">
                <td>{{ order.mode === 1 ? '1v1' : '1vN' }}</td>
                <td>¥{{ order.money }}</td>
                <td>¥{{ order.payAmount }}</td>
                <td>{{ dayjs(order.paymentTime).format('YYYY-MM-DD') }}</td>
                <td>
                  {{ dayjs(order.inspectorTimeStart).format('YYYY-MM-DD') }}至{{
                    dayjs(order.inspectorTimeEnd).format('YYYY-MM-DD')
                  }}
                </td>
                <td>
                  <span v-if="order.inspectorServiceStatus === 1" style="color: #99d609"
                    >服务中</span
                  >
                  <span v-else>已过期</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.loadincontainer {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
}

.orders {
  margin-top: 2.67vh;
  padding-right: 88px;
}

.panel {
  position: relative;

  &:after {
    pointer-events: none;
    content: '';
    position: absolute;
    left: 16px;
    top: 1.33vh;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 4.67vh;
    background: linear-gradient(269deg, #8f9df7 2.25%, #cab5ff 49.98%, #adadff 99.65%);
  }
}

table {
  width: 100%;
  font-size: 2.33vh;
  line-height: 3.5vh;
  border-collapse: collapse;
  text-align: center;

  tr {
    position: relative;
  }

  tr::before {
    content: '';
    position: absolute;
    height: 0.17vh;
    bottom: 0;
    width: 100%;
    background: repeating-linear-gradient(
      to right,
      #deedfc,
      #deedfc 8px,
      transparent 8px,
      transparent 16px
    );
  }

  th,
  td {
    padding: 2vh 36px;
    white-space: nowrap;

    &:not(:last-child):after {
      content: '';
      position: absolute;
      height: 100%;
      bottom: 0;
      right: 0;
      width: 2px;
      background: repeating-linear-gradient(
        to bottom,
        #deedfc,
        #deedfc 8px,
        transparent 8px,
        transparent 16px
      );
    }
  }

  th {
    color: #666;
    font-weight: 400;
    position: relative;
  }

  td {
    position: relative;
    color: $font-color;
  }
}

.header {
  position: relative;
  border-radius: 4.67vh 4.67vh 0 0;
  height: 8.33vh;
  background: linear-gradient(269deg, #adadff 2.25%, #cab5ff 51.93%, #8f9df7 99.65%);
  display: flex;
  align-items: center;
  justify-content: center;

  .title-outline {
    line-height: normal;
  }

  &:before,
  &:after {
    content: '';
    position: absolute;
    display: block;
    background: url('../../assets/panel-nail.svg');
    background-size: 100%;
    width: 44px;
    height: 6.33vh;
    top: -2.67vh;
    pointer-events: none;
  }

  &:before {
    left: 147px;
  }

  &:after {
    right: 147px;
  }
}

.content {
  position: relative;
  border-radius: 0 0 4.67vh 4.67vh;
  width: 1496px;
  height: 73.5vh;
  background: linear-gradient(180deg, #fafafa 0%, #f4f0fa 100%);
  padding: 3.33vh 24px 0 24px;
}

.table-container {
  overflow: auto;
  position: relative;

  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.15));
  width: 1448px;
  height: 68.17vh;
  background: #fff;
  border-radius: 1.67vh;
}

.circle-with-tail {
  pointer-events: none;
  position: absolute;
  width: 48px;
  height: 4vh;
  background-color: rgb(184, 197, 219);
  border-radius: 50%;
  right: 0;
  margin-right: 20px;
  top: -2vh;

  &.left {
    transform: rotate(180deg);
    margin-left: 20px;
    left: 0;
    right: auto;
  }
}

.circle-with-tail::before {
  content: '';
  position: absolute;
  width: 48px;
  height: 1.67vh;
  background-color: rgb(184, 197, 219);
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  border-radius: 1.67vh;
}
</style>
