<template>
  <!-- <headers title="考勤地点设置" /> -->
  <view class="set-attendance-container">
    <h3>考勤地点设置</h3>

    <u-form :model="data.parmeters" ref="formRef" label-position="top">
      <u-form-item label="考勤地址名称" prop="F_LQKJ_HITAREA"
        ><u-input v-model="data.parmeters.F_LQKJ_HITAREA" clearable
      /></u-form-item>
      <u-form-item label="有效范围" prop="F_LQKJ_SCOPE"
        ><u-input
          type="select"
          v-model="data.parmeters.F_LQKJ_SCOPE"
          @tap="data.show = true"
      /></u-form-item>
      <u-form-item label="请设置定位的应用范围" prop="">
        <u-radio-group v-model="data.parmeters.type" shape="square">
          <u-radio name="0">仅当前课程考勤定位 </u-radio>
          <u-radio name="1">同步班级所有课程的考勤定位 </u-radio>
        </u-radio-group>
      </u-form-item>
    </u-form>

    <view class="footer">
      <u-button @tap="back" size="medium">上一步</u-button>
      <u-button type="success" size="medium" @tap="submit">确认</u-button>
    </view>
  </view>
  <u-select
    v-model="data.show"
    :list="data.list"
    @confirm="onConfirm"
  ></u-select>
</template>

<script setup lang="ts">
// import headers from "@/components/header/index.vue"
import { setAddr } from "@/api/position"
import { toast } from "@/utils/util"
import { useMapStore } from "@/store/modules/mapStore"

const mapStore = useMapStore()

const formRef = ref()

const data = reactive({
  parmeters: {
    F_LQKJ_LONGITUDE: "",
    F_LQKJ_SCOPE: "",
    FCOURSEID: 0,
    type: 0,
    F_LQKJ_HITAREA: "",
    classId: "",
  },
  rules: {
    F_LQKJ_HITAREA: [
      {
        required: true,
        message: "请输入考勤地址名称",
        trigger: ["change", "blur"],
      },
    ],
    F_LQKJ_SCOPE: [
      {
        required: true,
        message: "请设置有效范围",
        trigger: "blur",
      },
    ],
  },
  show: false,
  list: [
    {
      value: "100米",
      label: "100米",
    },
    {
      value: "200米",
      label: "200米",
    },
    {
      value: "300米",
      label: "300米",
    },
    {
      value: "400米",
      label: "400米",
    },
    {
      value: "500米",
      label: "500米",
    },
    {
      value: "600米",
      label: "600米",
    },
    {
      value: "700米",
      label: "700米",
    },
    {
      value: "800米",
      label: "800米",
    },
  ],
})

const back = () => {
  uni.navigateBack()
}

const submit = () => {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      const { data: res } = await setAddr({ parmeters: data.parmeters })
      if (res.code == 200) {
        uni.navigateBack({ delta: 2 })
        toast("设置成功")
      }
    } else {
    }
  })
}

const onConfirm = (item: any) => {
  data.parmeters.F_LQKJ_SCOPE = item[0].value
}

onReady(() => {
  formRef.value.setRules(data.rules)
  setTimeout(() => {
    data.parmeters.F_LQKJ_HITAREA = mapStore.mapData.hitArea
    data.parmeters.F_LQKJ_LONGITUDE = mapStore.mapData.Longitude
    data.parmeters.F_LQKJ_SCOPE = mapStore.mapData.Scope
    data.parmeters.FCOURSEID = mapStore.mapData.courseId
    data.parmeters.type = mapStore.mapData.type
    data.parmeters.classId = mapStore.mapData.classId
    console.log(mapStore.mapData)
  }, 100)
})
</script>

<style lang="scss" scoped>
body {
  background-color: #fff;
}
.set-attendance-container {
  padding: 30rpx;
  background-color: #fff;

  .footer {
    position: fixed;
    bottom: 10%;
    left: 0;
    width: 100%;
    display: flex;

    .u-btn {
      width: 30%;
    }
  }
}
</style>
