<template>
  <u-popup
    v-model="props.show"
    mode="center"
    closeable
    width="600rpx"
    border-radius="24"
    @close="handleClose"
  >
    <view class="position">
      <view class="title">请设置定位的应用范围</view>
      <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 prop="F_LQKJ_SCOPE" :border-bottom="false">
          <u-radio-group v-model="num" shape="square">
            <u-radio name="0"
              >距离范围{{
                data.parmeters.F_LQKJ_SCOPE ? data.parmeters.F_LQKJ_SCOPE : 0
              }}米</u-radio
            >
          </u-radio-group>
        </u-form-item>
        <u-form-item
          prop="F_LQKJ_SCOPE"
          :border-bottom="false"
          style="margin-left: 48rpx"
        >
          <u-radio-group
            v-model="data.parmeters.F_LQKJ_SCOPE"
            shape="square"
            @change="change"
          >
            <u-radio name="200">200</u-radio>
            <u-radio name="500">500</u-radio>
            <u-radio name="1000">1000</u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item
          prop="type"
          :border-bottom="false"
          style="margin-bottom: 24rpx"
        >
          <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="handleClose" size="medium">拒绝</u-button>
        <u-button type="success" size="medium" @tap="submit">确认</u-button>
      </view>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
import { setAddr } from "@/api/position";
import { toast } from "@/utils/util";
import { useMapStore } from "@/store/modules/mapStore";

const mapStore = useMapStore();

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:show"]);

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",
      },
    ],
  },
});
const num = ref();
const formRef = ref();

const change = () => {
  num.value = "0";
};

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

const init = () => {
  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;
  if (data.parmeters.F_LQKJ_SCOPE) num.value = "0";
  formRef.value.setRules(data.rules);
};

const handleClose = () => {
  formRef.value?.resetFields();
  emits("update:show", false);
};

const resetFields = () => {};

defineExpose({
  init,
});
</script>

<style lang="scss" scoped>
:deep(.u-iconfont::before) {
  margin-top: 24rpx;
}

.u-form-item {
  padding: 0;
}
.position {
  padding: 40rpx 32rpx;
  .title {
    font-size: 34rpx;
    font-weight: 500;
    color: #000000;
    margin-bottom: 32rpx;
  }

  :deep(.u-iconfont::before) {
    margin-top: 0;
  }

  .footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8rpx;

    .u-btn {
      width: 176rpx;
      height: 66rpx;
      background: #04a7ff;
      border-radius: 12rpx;
    }
    :deep(.u-hairline-border:after) {
      border: 0;
    }
    & .u-btn:first-child {
      color: #04a7ff;
      background: rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
