<template>
  <Layer
    v-model="visible"
    :customHeader="true"
    :maskClosable="false"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <view class="register-baby-info-content">
      <view class="register-baby-info-title">选择宝宝的生日和预产期</view>
      <view class="register-baby-info-desc">
        为了提供更有价值的服务，我们会将宝宝信息关联科学分析，星妈会不会泄漏您的任何个人信息，请放心使用。
      </view>
      <PickerCustom
        mode="date"
        :value="dateValue"
        :disabled="status == 0"
        :onPickerChange="onDateChange"
        :onLayerVisibleChange="onLayerVisibleChange"
        :onStatusChange="onStatusChange"
      >
        <view
          class="register-baby-info-picker"
          :style="status == 0 ? 'background: #e9edf1;' : ''"
        >
          <view
            class="register-baby-info-picker-value"
            :style="dateDisplay ? 'color: #1d1e25;' : ''"
            >{{ dateDisplay || "请选择宝宝的生日或预产期" }}</view
          >
          <image
            v-if="status != 0"
            class="register-baby-info-picker-arrow"
            :src="$baseUrl + 'registerLayer/icon_arrow_yellow.png'"
            mode="aspectFit"
          />
        </view>
      </PickerCustom>
      <PickerCustom
        mode="selector"
        :disabled="status == 0"
        :range="genderOptions.map((item) => item.label)"
        :value="genderIndex"
        :onPickerChange="onGenderChange"
        :onLayerVisibleChange="onLayerVisibleChange"
      >
        <view
          class="register-baby-info-picker"
          :style="status == 0 ? 'background: #e9edf1;' : ''"
        >
          <view
            class="register-baby-info-picker-value"
            :style="genderDisplay ? 'color: #1d1e25;' : ''"
            >{{ genderDisplay || "请选择宝宝的性别" }}</view
          >
          <image
            v-if="status != 0"
            class="register-baby-info-picker-arrow"
            :src="$baseUrl + 'registerLayer/icon_arrow_yellow.png'"
            mode="aspectFit"
          />
        </view>
      </PickerCustom>
      <PickerCustom
        mode="selector"
        :disabled="status == 0"
        :range="fetusOptions.map((item) => item.label)"
        :value="fetusIndex"
        :onPickerChange="onFetusChange"
        :onLayerVisibleChange="onLayerVisibleChange"
      >
        <view
          class="register-baby-info-picker"
          :style="status == 0 ? 'background: #e9edf1;' : ''"
        >
          <view
            class="register-baby-info-picker-value"
            :style="fetusDisplay ? 'color: #1d1e25;' : ''"
            >{{ fetusDisplay || "请选择胎数" }}</view
          >
          <image
            v-if="status != 0"
            class="register-baby-info-picker-arrow"
            :src="$baseUrl + 'registerLayer/icon_arrow_yellow.png'"
            mode="aspectFit"
          />
        </view>
      </PickerCustom>
      <view class="register-baby-info-status">
        <view
          class="register-baby-info-status-item"
          :class="{ active: status === 0 }"
          @click="toggleStatus(0)"
        >
          <view class="register-baby-info-status-item-icon">
            <image
              :src="
                $baseUrl +
                (status === 0
                  ? 'registerLayer/circle_yes.png'
                  : 'registerLayer/circle_no.png')
              "
              mode="aspectFit"
            />
          </view>
          <view class="register-baby-info-status-item-text">备孕中</view>
        </view>
      </view>

      <view class="register-baby-info-agreement">
        <image
          class="register-baby-info-agreement-icon"
          :src="$baseUrl + 'registerLayer/registerAgree.png'"
          mode="aspectFit"
        />
        <image
          v-if="!checked.option1"
          class="register-baby-info-agreement-checkbox checkbox-checked1"
          :src="$baseUrl + 'registerLayer/circle_no.png'"
          mode="aspectFit"
          @click="checked.option1 = !checked.option1"
        />
        <image
          v-else
          class="register-baby-info-agreement-checkbox checkbox-checked1"
          :src="$baseUrl + 'registerLayer/circle_yes.png'"
          mode="aspectFit"
          @click="checked.option1 = !checked.option1"
        />

        <view
          class="register-baby-info-hot"
          @click="openAgreement"
          data-type="member"
        />
        <view
          class="register-baby-info-hot2"
          @click="openAgreement"
          data-type="privacy"
        />
      </view>
      <view
        class="register-baby-info-btn"
        :style="isBtnActive ? 'background: #d3a358;' : 'background: #e9edf1;'"
        @click="handleBabyInfoConfirm"
      >
        完成
      </view>
    </view>
  </Layer>
</template>
<script setup>
import { ref, watch, computed } from "vue";
import { showLoading, hideLoading } from "../utils";
import { useUserStore } from "../stores/user.js";
import Layer from "./Layer.vue";
import PickerCustom from "./PickerCustom.vue";
import { throttleTap } from "../utils/index.js";
const userStore = useUserStore();

const props = defineProps({
  modelValue: Boolean,
});
const emit = defineEmits([
  "update:modelValue",
  "update:value",
  "confirm",
  "cancel",
]);

const visible = ref(props.modelValue);

watch(
  () => props.modelValue,
  (val) => (visible.value = val)
);
watch(
  () => visible.value,
  (val) => emit("update:modelValue", val)
);

function handleConfirm() {
  visible.value = false;
}
function handleCancel() {
  emit("cancel");
  visible.value = false;
}

const checked = ref({
  option1: false,
  option2: true,
});

// 宝宝信息相关
const date = ref("");
const gender = ref("");
const fetus = ref("");
// 0备孕 1孕中 2出生
const status = ref(-1);

const genderOptions = [
  { label: "男", value: "M" },
  { label: "女", value: "F" },
  { label: "未知", value: "O" },
];
const fetusOptions = [
  { label: "一胎", value: 1 },
  { label: "二胎", value: 2 },
  { label: "三胎", value: 3 },
];

// date picker
const dateValue = ref([]);
const dateDisplay = ref("");
function onDateChange(val) {
  dateDisplay.value = val;
  date.value = val;
}
// gender picker
const genderIndex = ref(0);
const genderDisplay = computed(() =>
  gender.value ? genderOptions[genderIndex.value].label : ""
);
function onGenderChange(idx) {
  genderIndex.value = idx;
  gender.value = genderOptions[idx].value;
}
// fetus picker
const fetusIndex = ref(0);
const fetusDisplay = computed(() =>
  fetus.value ? fetusOptions[fetusIndex.value].label : ""
);
function onFetusChange(idx) {
  fetusIndex.value = idx;
  fetus.value = fetusOptions[idx].value;
}

function openAgreement(e) {
  const type = e.currentTarget.dataset.type;
  if (type === "member") {
    uni.navigateTo({ url: "/pages/webview/webview?type=MEMBER_URL" });
  } else if (type === "privacy") {
    uni.navigateTo({ url: "/pages/webview/webview?type=PRIVACY_URL" });
  }
}

function onStatusChange(v) {
  status.value = v;
  return true;
}

function onLayerVisibleChange() {}

const isBtnActive = computed(() => {
  if (status.value === 0) {
    return checked.value.option1 && checked.value.option2;
  } else {
    return (
      checked.value.option1 &&
      checked.value.option2 &&
      !!date.value &&
      !!gender.value &&
      !!fetus.value
    );
  }
});

const handleBabyInfoConfirm = throttleTap(async () => {
  if (!isBtnActive.value) {
    return;
  }
  console.log("handleBabyInfoConfirm");

  showLoading();

  const req = {
    babyStage: status.value,
  };

  if (status.value !== 0) {
    req.babyBirthday = date.value;
    req.babyGender = gender.value;
    req.babyType = fetus.value;
  }
  try {
    const success = await userStore.createBabyInfo(req);
    console.log("success:", success);
    visible.value = false;
    hideLoading();
    if (success) {
      emit("confirm", {
        date: date.value,
        gender: gender.value,
        fetus: fetus.value,
        status: status.value,
      });
    }
  } catch (error) {
    hideLoading();
  }
}, 5000);

function toggleStatus(val) {
  if (status.value === val) {
    status.value = -1; // 取消高亮
  } else {
    status.value = val; // 选中
    if (val === 0) {
      date.value = "";
      dateDisplay.value = "";
      gender.value = "";
      genderIndex.value = 0;
      fetus.value = "";
      fetusIndex.value = 0;
    }
  }
}
</script>

<style lang="less" scoped>
.register-baby-info-content {
  margin: 0;
  padding: 20rpx 32rpx 0 32rpx;
  background: #f8fafc;
  border-radius: 40rpx 40rpx 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.register-baby-info-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 12rpx;
  align-self: flex-start;
}
.register-baby-info-desc {
  font-size: 26rpx;
  color: #888;
  margin-bottom: 36rpx;
  text-align: left;
  align-self: flex-start;
  line-height: 1.6;
}
.register-baby-info-picker {
  width: 654rpx;
  background: #fff;
  border-radius: 44rpx;
  margin-bottom: 28rpx;
  padding: 0 32rpx;
  height: 94rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 24rpx 0 rgba(211, 163, 88, 0.04);
  border: none;
  position: relative;
}
.register-baby-info-status {
  width: 654rpx;
  margin-bottom: 28rpx;
  display: flex;
  justify-content: center;
}
.register-baby-info-status-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 94rpx;
  background: #fff;
  color: #bdbfc3;
  border-radius: 44rpx;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  box-sizing: border-box;
  .register-baby-info-status-item-icon {
    width: 32rpx;
    height: 32rpx;
    image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .register-baby-info-status-item-text {
    font-size: 32rpx;
    color: #bdbfc3;
    margin-left: 12rpx;
    transition: color 0.2s;
  }
}
.register-baby-info-status-item.active {
  border: 2rpx solid #d3a358;
  color: #d3a358;
  .register-baby-info-status-item-text {
    color: #d3a358;
  }
}
.register-baby-info-picker-value {
  font-size: 32rpx;
  color: #bdbfc3;
  flex: 1;
  text-align: center;
}

.register-baby-info-picker-arrow {
  position: absolute;
  right: 49rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 20rpx;
  height: 12rpx;
}
.register-baby-info-agreement {
  display: flex;
  align-items: flex-start;
  font-size: 24rpx;
  color: #888;
  margin: 24rpx 0 32rpx 0;
  width: 100%;
  position: relative;
  height: 69rpx;

  .register-baby-info-agreement-icon {
    width: 574rpx;
    height: 55rpx;
    display: block;
    position: absolute;
    top: 0;
    left: 48rpx;
  }
  .register-baby-info-userInfo-icon {
    width: 515rpx;
    height: 23rpx;
    display: block;
    position: absolute;
    bottom: 0rpx;
    left: 48rpx;
  }

  .register-baby-info-agreement-checkbox {
    width: 32rpx;
    height: 32rpx;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  .checkbox-checked1 {
    left: 0rpx;
    top: -2rpx;
  }

  .checkbox-checked2 {
    left: 0;
    top: 82rpx;
  }
}
.register-baby-info-link {
  color: #d3a358;
  text-decoration: underline;
  margin-left: 8rpx;
}
.register-baby-info-btn {
  width: 654rpx;
  background: #d3a358;
  color: #fff;
  border-radius: 46rpx;
  font-size: 36rpx;
  padding: 24rpx 0;
  margin-bottom: 46rpx;
  border: none;
  box-shadow: 0 8rpx 32rpx 0 rgba(211, 163, 88, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.register-baby-info-hot {
  position: absolute;
  top: -10rpx;
  left: 220rpx;
  width: 256rpx;
  height: 40rpx;
}
.register-baby-info-hot2 {
  position: absolute;
  top: -10rpx;
  left: 480rpx;
  width: 160rpx;
  height: 40rpx;
}
</style> 

