<template>
  <view class="pt-30 pr-30 pl-30 flex-column flex-between">
    <style-input
      :title="form.title"
      :value="form.value"
      :focus="true"
      :type="form.title === '昵称' ? 'nickname' : 'text'"
      @input="input"
      @focus="inputFocus"
    />
  </view>

  <style-bottom-view>
    <view class="pl-30 pr-30 pb-30" :style="bottomViewStyle">
      <style-button type="primary" @click="save">保存</style-button>
    </view>
  </style-bottom-view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
const form = ref({
  key: "",
  title: "",
  value: "",
  originValue: "",
});
const bottomViewStyle = ref({});
const input = (e: any) => {
  form.value.value = e.value;
};
const inputFocus = (e: any) => {
  let pb = e.height + 20;
  if (form.value.title === "昵称") {
    pb += 40;
  }
  bottomViewStyle.value =
    e.focus && e.height > 0
      ? {
          "padding-bottom": `${pb}px`,
        }
      : {};
};
const save = () => {
  const { value, originValue } = form.value;
  if (value === originValue) {
    uni.showModal({
      title: "提示",
      content: "未保存修改，返回后本次编辑无效",
      confirmColor: "#2d9e95",
      confirmText: "知道了",
      showCancel: false,
      success() {
        uni.navigateBack();
      },
    });
    return;
  }
  getApp<any>().globalData.lastData.profile = {
    key: form.value.key,
    value,
  };
  uni.navigateBack();
};
onLoad((options: any) => {
  // console.log(options)
  let value = "";
  if (options.value) {
    value = decodeURIComponent(options.value);
  }
  uni.setNavigationBarTitle({
    title: options.title || "",
  });
  form.value.key = options.key;
  form.value.title = options.title || "";
  form.value.value = value;
  form.value.originValue = value;
});
</script>

<style lang="scss" scoped>
.profile-edit-page {
  width: 100%;
}
</style>
