<template>
  <div class="position-container">
    <u-card :show-head="false" margin="0">
      <template #body>
        <view class="position-header">
          <h3>{{ positionItem.courseName }}</h3>
        </view>
        <view class="item">
          <text>上课地点：{{ positionItem.classArea }}</text>
        </view>
        <view class="item">
          <text
            >考勤定位：{{
              positionItem.StateType ? positionItem.hitArea : "未设置"
            }}</text
          >
        </view>
        <view class="item">
          <text
            >应用范围：{{
              positionItem.type
                ? positionItem.type == "1"
                  ? "同步班级所有课程的考勤定位"
                  : "仅当前课程考勤定位"
                : "未设置"
            }}
          </text>
        </view>
      </template>
      <template #foot>
        <view class="position-footer">
          <text>所属班级：{{ positionItem.className }}</text>
          <u-button type="primary" size="mini" @tap="openMap">{{
            current ? "修改定位" : "设置定位"
          }}</u-button>
        </view>
      </template>
    </u-card>
  </div>
</template>

<script setup lang="ts">
import { useMapStore } from "@/store/modules/mapStore"

const props = defineProps({
  positionItem: {
    type: Array,
    default: () => [],
  } as any,
  current: {
    type: Number,
    default: 0,
  },
})

const mapStore = useMapStore()

const openMap = () => {
  mapStore.setMapData(props.positionItem)
  uni.navigateTo({
    url: "/pages/setPositioning/map",
  })
}
</script>

<style lang="scss" scoped>
.position-container {
  margin-bottom: 20rpx;
  .position-header {
    margin-bottom: 30rpx;
  }

  .item {
    margin-bottom: 20rpx;
  }

  .position-footer {
    display: flex;
    justify-content: space-between;

    .u-btn {
      margin: 0;
    }
  }
}
</style>
