<template>
  <view class="wh-full">
    <BasicListLayout @register="register">
      <template v-slot="{ item }">
        <view
          class="white-bg-color r-md p-15 mb-15"
          @click="toCourseDetail(item)"
        >
          <view class="flex-row items-center">
            <image
              src="/static/test/1.png"
              class="course-image r-md wi-180 he-180"
              mode="aspectFill"
            />
            <view class="flex-col ml-10 flex-1">
              <text class="font-bold font-16">{{ "机器人创客" }}</text>
              <view class="text-gray-600 text-md mt-10">
                <text class="font-12 cor-949AA4">开课老师：</text>
                <text class="font-12">{{ "叶老师" }}</text>
              </view>
              <view class="text-gray-600 text-md mt-5">
                <text class="font-12 cor-949AA4">上课地点：</text>
                <text class="font-12">{{ "第一教学楼302" }}</text>
              </view>
              <view class="mt-5">
                <text class="font-12 cor-949AA4">金额：</text>
                <text class="font-12 cor-FF8D02">¥{{ "142" }}</text>
              </view>
            </view>
          </view>
        </view>
      </template>
    </BasicListLayout>
  </view>
</template>

<script setup lang="ts">
import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
import { testList } from "@/api/test/test";

const [register, { reload }] = useLayout({
  api: testList,
  componentProps: {},
});

const toCourseDetail = (item: any) => {
  uni.navigateTo({
    url: `/pages/base/groupTeaching/zhujiaoDetails`,
  });
};
</script>
<style lang="scss" scoped>
.course-image {
  width: 120rpx;
  height: 120rpx;
}
</style>
