<template>
  <view class="order">
    <wd-skeleton animation="gradient" theme="paragraph" v-if="isLoading" />
    <view class="order-list" v-else-if="orderList.length">
      <view class="order-item" v-for="(item, index) in orderList" :key="index">
        <view class="title-state">
          <view class="title">{{item.title}}</view>
          <view class="state" :style="{color: item.status === 1 ? '#615DFF' : '#A9AAB5'}">{{item.status === 1 ? '服务中' : '已过期'}}</view>
        </view>
        <view class="order-info">
          <view class="info-item">
            <view class="label">原<text>价</text></view>
            <view class="value">{{item.money}}</view>
          </view>
          <view class="info-item">
            <view class="label">实际支付</view>
            <view class="value">{{item.payAmount}}</view>
          </view>
          <view class="info-item">
            <view class="label">开通时间</view>
            <view class="value">{{dayjs(item.paymentTime).format("YYYY.MM.DD HH:mm:ss")}}</view>
          </view>
          <view class="info-item">
            <view class="label">服务周期</view>
            <view class="value">{{dayjs(item.startTime).format("YYYY.MM.DD")}} ~ {{dayjs(item.endTime).format("YYYY.MM.DD")}}</view>
          </view>
        </view>
      </view>
    </view>
    <empty content="还没有订单"/>
  </view>
</template>

<script setup lang=ts>
import {ref} from "vue";
import dayjs from "dayjs";
import {onLoad} from "@dcloudio/uni-app";
import {getInspectorOrderList} from "@/api";
import Empty from "@/components/Empty";

const orderList = ref<{
  title: string,
  paymentTime: string,
  startTime: string,
  endTime: string,
  payAmount: string,
  money: string,
  status: number
}[]>([])

const modeType = {1: '1v1', 2: '1vN'}

const isLoading = ref(true)

onLoad((options) => {
  getInspectorOrderList({userId: options.id}).then(({data}) => {
    orderList.value = data.map(item => {
      return {
        title: modeType[item.mode] + '督学模式',
        paymentTime: item.paymentTime,
        startTime: item.inspectorTimeStart,
        endTime: item.inspectorTimeEnd,
        payAmount: item.payAmount,
        money: item.money,
        status: item.inspectorServiceStatus
      }
    })
  }).finally(() => {
    isLoading.value = false
  })
})

</script>

<style scoped lang="scss">
.order {
  .order-list {
    .order-item {
      padding: 30rpx;
      border-radius: 20rpx;
      background-color: #fff;
      margin-bottom: 30rpx;
      .title-state {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;
        height: 45rpx;
        .title {
          font-size: 30rpx;
          font-weight: 500;
          color: #0A1F13;
        }
        .state {
          font-size: 26rpx;
        }
      }
      .order-info {
        .info-item {
          display: flex;
          align-items: center;
          height: 42rpx;
          margin-bottom: 10rpx;
          .label {
            width: 140rpx;
            font-size: 28rpx;
            flex-shrink: 0;
            color: #A9AAB5;
          }
          .value {
            font-size: 28rpx;
          }
          &:last-child {
            margin-bottom: 0;
          }
          &:not(:first-child) {
            .label {
              &::after {
                content: "：";
              }
            }
          }
          &:first-child {
            .label {
              display: flex;
              justify-content: space-between;
              > text {
                &::after {
                  content: "：";
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
