<template>
  <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 { setAddr } from "@/api/position";
import { toast } from "@/utils/util";
import { useMapStore } from "@/stores/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 }: any = 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>
