<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <page-head :title="data.title"></page-head>
    <view class="uni-common-mt uni-padding-wrap" style="padding-bottom: 30px;">
      <view>
        <view class="uni-title">
          <text class="uni-title-text">设置输入框的初始内容</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-default" :focus="data.firstInputFocus" class="uni-input" value="hello uni-app x" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">type取值（不同输入法表现可能不一致）</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-type-text" class="uni-input" type="text" placeholder="文本输入键盘" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-type-number" class="uni-input" type="number" placeholder="数字输入键盘" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-type-digit" class="uni-input" type="digit" placeholder="带小数点的数字输入键盘" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-type-tel" class="uni-input" :type="data.inputTypeTel" placeholder="电话输入键盘" />
        </view>
        <!-- #ifndef MP-WEIXIN -->
        <view class="input-wrapper">
          <input id="uni-input-type-search" class="uni-input" type="search" placeholder="搜索输入键盘" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-type-email" class="uni-input" type="email" placeholder="邮箱输入键盘" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-type-url" class="uni-input" type="url" placeholder="url输入键盘" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-type-none" class="uni-input" type="none" placeholder="聚焦但不弹出键盘" />
        </view>
        <!-- #endif -->
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">密码输入框</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-password" class="uni-input" :password="data.inputPassword" type="text" :value="data.inputPasswordValue" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">无value设置的密码输入框</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" :password="true" type="text" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">占位符样式</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-placeholder1" class="uni-input" :placeholder-style="data.inputPlaceHolderStyle"
            placeholder="占位符文字颜色为红色" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-placeholder2" class="uni-input" :placeholder-class="data.inputPlaceHolderClass"
            placeholder="占位符字体大小为10px" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-placeholder3" class="uni-input" placeholder-class=""
            placeholder="placeholder-class 传入空字符串" />
        </view>
        <view class="input-wrapper">
          <input class="uni-input" :placeholder-style="data.inputPlaceHolderStyle"
            value="不设置placeholder只设置placeholder-style" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-placeholder2" style="font-family: AlimamaDaoLiTiOTF;font-weight: bold;text-align: right;" class="uni-input" :placeholder-style="data.placeholderStyle"
            placeholder="占位符以及内容右对齐" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">设置禁用输入框</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-disable" class="uni-input" :disabled="true" value="禁用状态 input" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">设置最大输入长度</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-maxlength" class="uni-input" :maxlength="10" placeholder="最大输入长度为10"
            :value="data.inputMaxLengthValue" @input="onMaxLengthInput" :focus="data.inputMaxLengthFocus" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">设置光标与键盘的距离</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" :cursor-spacing="1000" placeholder="光标与键盘的距离为1000px" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">自动获取焦点</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-focus" class="uni-input" :focus="data.focus"
            @keyboardheightchange="inputFocusKeyBoardChange" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">confirm-type取值（不同输入法表现可能不一致）</text>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-confirm-send" class="uni-input" confirmType="send" placeholder="键盘右下角按钮显示为发送" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-confirm-search" class="uni-input" confirmType="search" placeholder="键盘右下角按钮显示为搜索" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-confirm-next" class="uni-input" confirmType="next" placeholder="键盘右下角按钮显示为下一个" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-confirm-go" class="uni-input" confirmType="go" placeholder="键盘右下角按钮显示为前往" />
        </view>
        <view class="input-wrapper">
          <input id="uni-input-confirm-done" class="uni-input" confirmType="done" placeholder="键盘右下角按钮显示为完成" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">点击键盘右下角按钮时保持键盘不收起</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" :confirm-hold="true" />
        </view>
      </view>

      <view>
        <view class="uni-title" @click="setCursor(4)">
          <text class="uni-title-text">设置输入框聚焦时光标的位置（点这里）</text>
        </view>
        <view class="input-wrapper">
          <input ref="input" class="uni-input" value="0123456789" :focus="data.cursorInputFocus" :cursor="data.cursor" @blur="onCursorBlurChange" />
        </view>
      </view>

      <view>
        <view class="uni-title" @click="setSelection(0, 4)">
          <text class="uni-title-text">设置输入框聚焦时光标的起始位置和结束位置（点这里）</text>
        </view>
        <view class="input-wrapper">
          <input ref="input2" class="uni-input" value="0123456789" :selection-start="data.selectionStart"
            :selection-end="data.selectionEnd" :focus="data.selectionInputFocus" @blur="onSelectionBlurChange" />
        </view>
      </view>

      <view>
        <view class="uni-title" style="flex-direction: row; align-items: center">
          <text class="uni-title-text" style="flex-shrink: 1;">设置光标颜色为红色（Android的微信小程序非skyline下仅支持黑和绿）</text>
          <switch style="margin-left: 10px" @change="changeCursorColor" :checked="data.cursor_color == '#FF0000'"></switch>
        </view>
        <view class="input-wrapper">
          <input id="uni-input-cursor-color" class="uni-input" :cursor-color="data.cursor_color" :focus="data.cursorColorInputFocus" @blur="cursorColorInputBlur" value="光标颜色" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">键盘弹起时，自动上推页面</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" :adjust-position="true" />
        </view>
      </view>

      <view>
        <view class="uni-title" style="flex-direction: row; align-items: center">
          <text class="uni-title-text" style="flex-shrink: 1;">设置hold-keyboard</text>
          <switch style="margin-left: 10px" @change="changeHoldKeyboard" :checked="data.holdKeyboard"></switch>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" :hold-keyboard="data.holdKeyboard" value="hold keyboard " />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">通过 style 设置 padding</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" style="height: 60px;padding: 20px;" value="style padding:20px" placeholder="style padding:20px"></input>
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">input事件</text>
          <text class="uni-subtitle-text" v-if="data.inputEventDetail">{{
            data.inputEventDetail
          }}</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" @input="onInput" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text" @click="triggerFocusOrBlur">点击触发focus事件或blur事件</text>
          <text class="uni-subtitle-text" v-if="data.focusAndBlurEventDetail">{{
            data.focusAndBlurEventDetail
          }}</text>
        </view>
        <view class="input-wrapper">
          <input id="trigger-focus-blur-input" class="uni-input" @focus="onFocus" @blur="onBlur" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">confirm事件</text>
          <text class="uni-subtitle-text" v-if="data.confirmEventDetail">{{
            data.confirmEventDetail
          }}</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" @confirm="onConfirm" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">change事件</text>
          <text class="uni-subtitle-text" v-if="data.changeEventDetail">{{
            data.changeEventDetail
          }}</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" @change="onChange" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">带清除按钮的输入框</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" placeholder="带清除按钮的输入框" :value="data.inputClearValue" @input="clearInput" />
          <image class="uni-icon" src="/static/icons/clear.png" v-if="data.showClearIcon" @click="clearIcon">
          </image>
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">可查看密码的输入框</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" placeholder="请输入密码" :password="data.showPassword" />
          <image class="uni-icon" :src="
              !data.showPassword
                ? '/static/icons/eye-active.png'
                : '/static/icons/eye.png'
            " @click="changePassword"></image>
        </view>
      </view>
      <view>
        <view class="uni-title">
          <text class="uni-title-text">同时存在 v-model 和 value</text>
        </view>
        <view class="input-wrapper">
          <input id="both-model-value" class="uni-input" v-model="data.demoValue" value="456" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">同时存在 v-model 和 change事件</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" v-model="data.demoValue2" value="123" @change="onChange" />
        </view>
      </view>

      <view>
        <view class="uni-title" style="flex-direction: row; align-items: center">
          <text class="uni-title-text" style="flex-shrink: 1;">设置adjust-position</text>
          <switch style="margin-left: 10px" @change="changeAdjustPosition" :checked="data.adjustPosition"></switch>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" :adjust-position="data.adjustPosition" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">输入内容的同步更新UI</text>
        </view>
        <text>{{data.syncDisplayValue}}</text>
        <view class="input-wrapper">
          <input class="uni-input" v-model="data.syncDisplayValue"/>
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">maxlength初始化生效</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" :maxlength="5" value="123456789"/>
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">focus时type是none，键盘是否弹出</text>
          <boolean-data :defaultValue="false" title="显示<input />示例" @change="changeCheckedTypeNoneAndFocusCase"></boolean-data>
        </view>
        <view v-if="data.showTypeNoneAndFocusCase" class="input-wrapper">
          <input class="uni-input" focus="true" type="none"/>
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">style 设置 font-size:20px</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" style="font-size:20px" placeholder="placeholder" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">style 设置 font-size:20px</text>
          <text class="uni-title-text">placeholder-class 设置 30px</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" style="font-size:20px" placeholder-class="placeholder-class" placeholder="placeholder" />
        </view>
      </view>

      <view>
        <view class="uni-title">
          <text class="uni-title-text">style 设置 font-size:20px</text>
          <text class="uni-title-text">placeholder-class 设置 30px</text>
          <text class="uni-title-text">placeholder-style 设置 40px</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" style="font-size:20px" placeholder-class="placeholder-class" placeholder-style="font-size:40px" placeholder="placeholder" />
        </view>
      </view>

      <!-- 保证这个示例在页面底部，添加新的示例时请放在上面 -->
      <view>
        <view class="uni-title">
          <text class="uni-title-text">keyboardheightchange事件</text>
          <text class="uni-subtitle-text"
            v-if="data.keyboardHeightChangeEventDetail">{{ data.keyboardHeightChangeEventDetail }}</text>
        </view>
        <view class="input-wrapper">
          <input class="uni-input" @keyboardheightchange="onKeyboardHeightChange"
            :focus="data.focusedForKeyboardHeightChangeTest" />
        </view>
      </view>

      <text class="uni-title-text">input样式大合集</text>
      <view class="input-wrap">
        <input class="input-all-styles" value="样式效果：文本颜色深蓝色、字号16px、字重400、文本居左对齐；外边距10px、内边距10px；圆角8px；浅蓝色渐变背景、蓝色边框、透明度70%、阴影效果。" />
      </view>

      <!-- 保证这个示例在页面底部，添加新的示例时请放在上面 -->
      <navigator url="/pages/component/input/input-performance" style="margin-top: 10px;">
        <button type="primary">
          input 性能测试
        </button>
      </navigator>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>
<script setup lang="uts">
  type DataType = {
    title: string;
    firstInputFocus: boolean;
    showClearIcon: boolean;
    inputClearValue: string;
    showPassword: boolean;
    cursor: number;
    cursorInputFocus: boolean;
    cursor_color: string;
    cursorColorInputFocus: boolean;
    selectionStart: number;
    selectionEnd: number;
    selectionInputFocus: boolean;
    inputEventDetail: string;
    focusAndBlurEventDetail: string;
    confirmEventDetail: string;
    changeEventDetail: string;
    keyboardHeightChangeEventDetail: string;
    focus: boolean;
    inputPassword: boolean;
    inputTypeTel: string;
    inputPlaceHolderStyle: string;
    placeholderStyle: string;
    inputPlaceHolderClass: string.ClassString;
    inputMaxLengthValue: string;
    onMaxLengthInputValue: string;
    inputMaxLengthFocus: boolean;
    inputPasswordValue: string;
    inputFocusKeyBoardChangeValue: boolean;
    holdKeyboard: boolean;
    keyboardHeight: number;
    focusedForKeyboardHeightChangeTest: boolean;
    demoValue: string;
    demoValue2: string;
    adjustPosition: boolean;
    syncDisplayValue: string;
    triggerFocus: boolean;
    triggerBlur: boolean;
    showTypeNoneAndFocusCase: boolean;
  }

  // 使用reactive避免ref数据在自动化测试中无法访问
  const data = reactive({
    title: 'input',
    firstInputFocus: false,
    showClearIcon: false,
    inputClearValue: '',
    showPassword: true,
    cursor: -1,
    cursorInputFocus: false,
    cursor_color: "#3393E2",
    cursorColorInputFocus: false,
    selectionStart: -1,
    selectionEnd: -1,
    selectionInputFocus: false,
    inputEventDetail: '',
    focusAndBlurEventDetail: '',
    confirmEventDetail: '',
    changeEventDetail: '',
    keyboardHeightChangeEventDetail: '',
    focus: true,
    inputPassword: true,
    inputTypeTel: "tel",
    inputPlaceHolderStyle: "color:red",
    placeholderStyle: "font-family: AlimamaDaoLiTiOTF;font-weight: bold;text-align: right",
    inputPlaceHolderClass: "uni-input-placeholder-class",
    inputMaxLengthValue: "",
    onMaxLengthInputValue: "",
    inputMaxLengthFocus: false,
    inputPasswordValue: "cipher",
    inputFocusKeyBoardChangeValue: true,
    holdKeyboard: false,
    keyboardHeight: 0,
    focusedForKeyboardHeightChangeTest: false,
    demoValue: '123',
    demoValue2: '123',
    adjustPosition: false,
    syncDisplayValue: '',
    triggerFocus: false,
    triggerBlur: false,
    showTypeNoneAndFocusCase: false
  } as DataType)

  const inputFocusKeyBoardChange = (e : UniInputKeyboardHeightChangeEvent) => {
    data.inputFocusKeyBoardChangeValue = e.detail.height > 50
  }

  const onMaxLengthInput = (event : UniInputEvent) => {
    data.onMaxLengthInputValue = event.detail.value
  }

  const setCursor = (cursor : number) => {
    // (this.$refs['input'] as UniInputElement).focus();
    data.cursorInputFocus = true
    data.cursor = cursor;
  }

  const onCursorBlurChange = () => {
    data.cursor = 0
    data.cursorInputFocus = false
  }

  const setSelection = (selectionStart : number, selectionEnd : number) => {
    // (this.$refs['input2'] as UniInputElement).focus();
    data.selectionInputFocus = true
    data.selectionStart = selectionStart;
    data.selectionEnd = selectionEnd;
  }

  const onSelectionBlurChange = () => {
    data.selectionEnd = 0;
    data.selectionInputFocus = false
  }

  const clearInput = (event : UniInputEvent) => {
    data.inputClearValue = event.detail.value
    if (event.detail.value.length > 0) {
      data.showClearIcon = true
    } else {
      data.showClearIcon = false
    }
  }

  const clearIcon = () => {
    data.inputClearValue = ''
    data.showClearIcon = false
  }

  const changePassword = () => {
    data.showPassword = !data.showPassword
  }

  const onInput = (event : UniInputEvent) => {
    console.log("键盘输入", JSON.stringify(event.detail));
    data.inputEventDetail = JSON.stringify(event.detail)
  }

  const onFocus = (event : UniInputFocusEvent) => {
    data.triggerFocus = true
    console.log("输入框聚焦", JSON.stringify(event.detail));
    data.focusAndBlurEventDetail = JSON.stringify(event.detail);
  }

  const onBlur = (event : UniInputBlurEvent) => {
    data.triggerBlur = true
    console.log("输入框失去焦点", JSON.stringify(event.detail));
    data.focusAndBlurEventDetail = JSON.stringify(event.detail);
  }

  const onConfirm = (event : UniInputConfirmEvent) => {
    console.log("点击完成按钮", JSON.stringify(event.detail));
    data.confirmEventDetail = JSON.stringify(event.detail);
  }

  const onChange = (event : UniInputChangeEvent) => {
    console.log("输入内容变化", JSON.stringify(event.detail));
    data.changeEventDetail = JSON.stringify(event.detail);
  }

  const onKeyboardHeightChange = (event : UniInputKeyboardHeightChangeEvent) => {
    console.log("键盘高度发生变化", JSON.stringify(event.detail));
    data.keyboardHeightChangeEventDetail = JSON.stringify(event.detail);
    data.keyboardHeight = event.detail.height;
  }

  const test_check_input_value = () : number => {
    return data.onMaxLengthInputValue.length
  }

  const changeCursorColor = (event : UniSwitchChangeEvent) => {
    const checked = event.detail.value;
    if (checked) {
      data.cursor_color = "#FF0000"
    } else {
      data.cursor_color = "#3393E2"
    }
    // const input = uni.getElementById<UniInputElement>("uni-input-cursor-color")
    // input?.focus()
    data.cursorColorInputFocus = true
  }

  const cursorColorInputBlur = (event : UniInputBlurEvent) => {
    data.cursorColorInputFocus = false
  }

  const changeHoldKeyboard = (event : UniSwitchChangeEvent) => {
    const checked = event.detail.value;
    data.holdKeyboard = checked
  }

  const changeAdjustPosition = (event : UniSwitchChangeEvent) => {
    const checked = event.detail.value;
    data.adjustPosition = checked
  }

  const triggerFocusOrBlur = () => {
    const input = uni.getElementById("trigger-focus-blur-input")!
    if(data.triggerFocus){
      data.triggerFocus = false
      input.blur()
    } else {
      data.triggerBlur = false
      input.focus()
    }
  }


  const changeCheckedTypeNoneAndFocusCase = (checked : boolean) => {
    data.showTypeNoneAndFocusCase = checked
  }

  defineExpose({
    data,
    triggerFocusOrBlur
  })
</script>

<style scoped>
  .input-wrapper {
    display: flex;
    padding: 8px 13px;
    margin: 5px 0;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: #ffffff;
  }

  .uni-input {
    height: 28px;
    font-size: 15px;
    padding: 0px;
    flex: 1;
    background-color: #ffffff;
  }

  .uni-icon {
    width: 24px;
    height: 24px;
  }

  .uni-input-placeholder-class {
    font-size: 10px;
  }

  .placeholder-class{
    font-size: 30px;
  }

  .input-wrap {
    flex-direction: row;
    justify-content: center;
  }

  .input-all-styles {
    color: #0008a7;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    width: 90%;
    height: 40px;
    min-width: 200px;
    margin: 10px;
    padding: 10px;
    border-radius: 8px;
    background-color: #e3f2fd;
    background-image: linear-gradient(to right, #e3f2fd, #a9d5fa);
    border: 1px solid #007aff;
    opacity: 0.7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  @font-face {
    font-family: AlimamaDaoLiTiOTF;
    src: url('/static/font/AlimamaDaoLiTi.otf');
  }
</style>