<template>
  <view class="record">
    <view class="record-bg" :style="{ backgroundImage: `url(${baseUrl}/images/bg-6.png)` }"></view>
    <view class="record-content">
      <view class="card">
        <view class="card-tab">
          <view class="card-tab-item" :class="{ active: type == 1 }" @click="
              type = 1;
              getList()
            ">
            <text>未出行</text>
          </view>
          <view class="card-tab-item" :class="{ active: type == 2 }" @click="
              type = 2;
              getList()
            ">
            <text>已完成</text>
          </view>
        </view>
        <view class="card-list">
          <view class="card-list-item" v-for="item in list" :key="item.id" @click="goToDetail(item.id)">
            <image class="card-list-item-icon" src="@/assets/reservation-images/icon-list.png" mode="widthFix" />
            <view class="card-list-item-right">
              <view class="record-name">{{ item.title }}</view>
              <view class="record-time">
                <image style="width: 30rpx; height: 30rpx; margin-right: 12rpx"
                  src="@/assets/reservation-images/calendar-gray.png" mode="widthFix" />
                <text style="font-size: 26rpx">{{ item.date }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    baseUrl
  } from '@/reservation/config'
  import {
    ref,
    onMounted
  } from 'vue'
  import {
    reservationList
  } from '@/api/reservation'
  defineOptions({
    name: 'record',
  })

  const list = ref([])
  const type = ref(1) // 1: 未出行 2: 已完成
  onMounted(() => {
    getList()
  })

  const getList = () => {
    reservationList({
      type: type.value,
    }).then((res) => {
      list.value = res.data
    })
  }

  const goToDetail = (id) => {
    uni.navigateTo({
      url: '/reservation/record/detail?id=' + id,
    })
  }
</script>

<style lang="less" scoped>
  @import './index.less';
</style>