<!-- 基础文本框 -->
<template>
  <ValidationProvider
    ref="provider"
    size="mini"
    :name="rulesKey ? rulesKey : label"
    :rules="rules"
    v-slot="{ errors }"
  >
    <van-field
      ref="field"
      v-model="currentValue"
      :label="label"
      :type="type"
      :maxlength="maxlength"
      :min="min"
      :max="max"
      :show-word-limit="Number(maxlength) > 0"
      :placeholder="currentPlaceholder"
      :disabled="disabled"
      :readonly="readonly"
      :colon="colon"
      :required="required || rules.indexOf('required') > -1"
      :center="center"
      :clearable="clearable"
      :error-message="errors[0]"
      :error-message-align="errorMessageAlign"
      :rows="rows"
      :autosize="autosize"
      :label-class="labelClass"
      :label-width="labelWidth"
      :label-align="labelAlign"
      :input-align="inputAlign"
      :left-icon="leftIcon"
      :right-icon="rightIcon"
      @update:model-value="modelValueEvent"
      @focus="focusEvent"
      @blur="blurEvent"
      @clear="clearEvent"
      @click="clickEvent"
      @click-input="clickInputEvent"
      @click-left-icon="clickLeftIconEvent"
      @click-right-icon="clickRightIconEvent"
      size="mini"
    >
      <!-- 自定义输入框左侧文本 -->
      <template #label> <slot name="label"></slot> </template>
      <!-- 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 -->
      <template #input><slot></slot></template>
      <!-- 自定义输入框头部图标 -->
      <template #left-icon> <slot name="left-icon"></slot> </template>
      <!-- 自定义输入框尾部图标 -->
      <template #right-icon> <slot name="right-icon"></slot> </template>
      <!-- 自定义输入框尾部按钮 -->
      <template #button> <slot name="button"></slot> </template>
      <!-- 自定义输入框最右侧的额外内容 -->
      <template #extra> <slot name="extra"></slot> </template>
    </van-field>

    <!-- 日历 -->
    <van-calendar
      ref="calendar"
      v-model="showCalendar"
      :type="calendarType"
      :title="calendarTitle"
      :color="calendarColor"
      :min-date="minDate"
      :max-date="maxDate"
      :default-date="calendarDefaultDate"
      :row-height="calendarRowHeight"
      :formatter="calendarFormatter"
      :show-title="calendarShowTitle"
      :show-subtitle="calendarShowSubtitle"
      :show-confirm="calendarShowConfirm"
      :readonly="calendarReadonly"
      :confirm-text="calendarConfirmText"
      :confirm-disabled-text="calendarConfirmDisabledText"
      :first-day-of-week="calendarFirstDayOfWeek"
      :poppable="true"
      :lazy-render="true"
      :show-mark="true"
      :position="calendarPosition"
      :round="calendarRound"
      :close-on-popstate="calendarCloseOnPopstate"
      :close-on-click-overlay="calendarCloseOnClickOverlay"
      :safe-area-inset-top="calendarSafeAreaInsetTop"
      :safe-area-inset-bottom="calendarSafeAreaInsetBottom"
      :teleport="calendarTeleport"
      :max-range="calendarMaxRange"
      :range-prompt="calendarRangePrompt"
      :show-range-prompt="calendarShowRangePrompt"
      :allow-same-day="calendarAllowSameDay"
      @select="calendarSelect"
      @confirm="calendarConfirm"
      @open="calendarOpen"
      @close="calendarClose"
      @opened="calendarOpened"
      @closed="calendarClosed"
      @unselect="calendarUnselect"
      @month-show="calendarMonthShow"
      @over-range="calendarOverRange"
    >
      <!-- 自定义标题 -->
      <template #title> <slot name="calendar-title"></slot> </template>
      <!-- 自定义底部区域内容 -->
      <template #footer> <slot name="calendar-footer"></slot> </template>
    </van-calendar>

    <!-- popup -->
    <van-popup ref="popup" v-model="showPopup" :closeable="popupCloseable" position="bottom">
      <!-- 自定义内容 -->
      <slot name="popup"></slot>

      <!-- 选择时间 -->
      <van-datetime-picker
        v-if="showDate == true"
        ref="datePicker"
        v-model="currentDate"
        :type="dateType"
        :title="dateTitle"
        :confirm-button-text="dateConfirmButtonText"
        :cancel-button-text="dateCancelButtonText"
        :show-toolbar="dateShowToolbar"
        :loading="dateLoading"
        :readonly="dateReadonly"
        :filter="dateFilter"
        :formatter="defaultFormatter"
        :columns-order="dateColumnsOrder"
        :item-height="dateItemHeight"
        :visible-item-count="dateVisibleItemCount"
        :swipe-duration="dataSwipeDuration"
        :min-date="minDate"
        :max-date="maxDate"
        :min-hour="minHour"
        :max-hour="maxHour"
        :min-minute="minMinute"
        :max-minute="maxMinute"
        @confirm="dateConfirm"
        @change="dateChange"
        @cancel="dateCancel"
      >
        <!-- 自定义整个顶部栏的内容 -->
        <template #default> <slot name="date-default"></slot> </template>
        <!-- 自定义标题内容 -->
        <template #title> <slot name="date-title"></slot> </template>
        <!-- 自定义确认按钮内容 -->
        <template #confirm> <slot name="date-confirm"></slot> </template>
        <!-- 自定义取消按钮内容 -->
        <template #cancel> <slot name="date-cancel"></slot> </template>
        <!-- 自定义选项内容 -->
        <template #option> <slot name="date-option"></slot> </template>
        <!-- 自定义选项上方内容 -->
        <template #columns-top> <slot name="date-columns-top"></slot> </template>
        <!-- 自定义选项下方内容 -->
        <template #columns-bottom> <slot name="date-columns-bottom"></slot> </template>
      </van-datetime-picker>
    </van-popup>
  </ValidationProvider>
</template>
<script>
import { ValidationProvider } from 'vee-validate'
import mixin from '../mixin' // 基础定义
import calendarMixin from '../calendarMixin' // 日历定义
import dateMixin from '../dateMixin' // 时间定义
import { i18n } from '../../../..//lib/locale/lang/index'

export default {
  name: 'CsField',
  components: { ValidationProvider },
  mixins: [mixin, calendarMixin, dateMixin],
  props: {
    // 当前输入的值
    value: {
      default: null
    },
    // 是否显示关闭图标
    popupCloseable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      i18nLang: new Vue({ i18n }),
      currentValue: '',
      showCalendar: false,
      showPopup: false,
      showDate: false,
      currentDate: ''
    }
  },
  //监听属性 类似于data概念
  computed: {
    currentPlaceholder() {
      if (this.placeholder) {
        return this.placeholder
      } else {
        return this.i18nLang.$t('common.placeholder')
      }
    }
  },
  //监控data中的数据变化
  watch: {
    value: {
      handler(val, oldVal) {
        if (this.currentValue != val && val !== oldVal) {
          this.currentValue = val
        }
      },
      immediate: true, // 首次绑定是否执行
      deep: true // 对象内部的属性监听，也叫深度监听
    },
    currentValue: {
      handler(val, oldVal) {
        if (this.value !== val && val !== oldVal) {
          this.$emit('input', val)
        }
      },
      immediate: true, // 首次绑定是否执行
      deep: true // 对象内部的属性监听，也叫深度监听
    }
  },
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.resetField()
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped></style>
