<template>
  <div
    v-if="permission !== 'n'"
    :class="[
      'inputs',
      formInputsDisplay == 'block'
        ? 'ht-form-inputs__block'
        : 'ht-form-inputs__inline',
    ]"
  >
    <div v-if="inputWriteable">
      <input
        v-if="disabled && isValidate && !isMobile"
        v-model="inputVal"
        v-validate="inputValidate"
        type="hidden"
        :name="inputName"
        :data-vv-as="name"
      />

      <template v-if="isSubCellReadOnly">
        <input
          v-model="inputVal"
          v-validate="inputValidate"
          type="hidden"
          :name="inputName"
          :data-vv-as="name"
        />
        <div class="sub-table-cell-readonly" @click="handleCellClick">
          <span>
            {{ inputVal }}
          </span>
        </div>
      </template>
      <template v-else>
        <el-time-select
          v-if="!isMobile"
          v-model="inputVal"
          v-validate="inputValidate"
          :name="inputName"
          :data-vv-as="name"
          :clearable="clearable"
          :picker-options="pickerOptions"
          :placeholder="placeholder"
          :disabled="
            disabled ||
            (permission && permission === 'd') ||
            (permission_sub && permission_sub === 'd')
          "
          :readonly="readonly"
          :size="inputSize"
          :editable="editable"
          @blur="handleBlur"
        ></el-time-select>
        <div v-else>
          <!-- 校验 -->
          <div style="height: 32px; position: relative">
            <input
              v-show="!inputVal && inputVal !== ''"
              v-model="inputVal"
              v-validate="validateRules"
              class="mobile_field_input"
              readonly
              :name="inputName"
              :data-vv-as="name"
            />
            <van-cell
              v-validate="!inputVal && validateRules"
              :value="inputVal"
              :name="inputName"
              :data-vv-as="name"
              :is-link="
                !(readonly || disabled || (permission && permission === 'd'))
              "
              class="mobile-cell"
              @click="handleShowPicker"
            >
              <template #default>
                <span v-if="inputVal" class="cell-text">{{ inputVal }}</span>
                <span v-if="!inputVal" class="placeholder-class">
                  {{ mobilePlaceholder('请选择') }}
                </span>
                <van-icon
                  v-if="
                    (inputVal && !disabled) ||
                    (inputVal && !(permission && permission === 'd'))
                  "
                  name="clear"
                  color="#bfbfbf"
                  class="cell-close"
                  @click.stop="inputVal = ''"
                />
              </template>
            </van-cell>
          </div>
          <van-popup v-model:show="showPicker" round position="bottom">
            <van-datetime-picker
              v-model="currentDate"
              type="time"
              :placeholder="placeholder"
              :min-date="minDate"
              :max-date="maxDate"
              @cancel="showPicker = false"
              @confirm="confirmDate"
            />
          </van-popup>
        </div>
      </template>
    </div>

    <ht-field-tail
      :field-name="inputName"
      :readonly="!inputWriteable"
      :input-value="inputVal"
      :hyperlink="hyperlink"
    />
  </div>
</template>
<script>
  import HtFieldTail from '../../FieldTail/index'
  import permission from '@/mixins/permission.js'
  import inputName from '@/mixins/inputName.js'
  import form from '@/mixins/form.js'
  import mobileMode from '@/mixins/mobileMode.js'
  import popupMode from '@/mixins/popupMode.js'
  import tableFieldReadOnly from '@/mixins/tableFieldReadOnly.js'

  export default {
    name: 'HtTimeSelect',
    components: {
      HtFieldTail,
    },
    mixins: [
      permission,
      inputName,
      form,
      mobileMode,
      popupMode('showPicker'),
      tableFieldReadOnly,
    ],
    props: {
      value: String,
      pickerOptions: {
        type: Object,
        default() {
          return {
            start: '00:00',
            step: '00:15',
            end: '23:59',
          }
        },
      },
      clearable: {
        type: Boolean,
        default: true,
      },
      readonly: {
        type: Boolean,
        default: false,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      editable: {
        type: Boolean,
        default: true,
      },
      hyperlink: Object,
      isValidate: {
        type: Boolean,
        default: false,
      },
      minDate: {
        type: Date,
        default: new Date(1925, 1, 1),
      },
      maxDate: {
        type: Date,
        default: new Date(2125, 1, 1),
      },
    },
    data() {
      return {
        showPicker: false,
      }
    },
    computed: {
      inputVal: {
        get: function () {
          return isNaN(this.value) && this.isClockFormat(this.value)
            ? this.value
            : ''
        },
        set: function (val) {
          this.$emit('input', val)
        },
      },
      currentDate: {
        get: function () {
          let current_hours = new Date().getHours()
          let current_minutes = new Date().getMinutes()
          if (this.inputVal) {
            return this.inputVal
          }
          return `${current_hours}:${current_minutes}`
        },
        set: function (val) {},
      },
      validateRules() {
        return this.disabled && !this.isValidate ? '' : this.inputValidate
      },
    },
    methods: {
      handleBlur() {
        // element会触发blur事件，且参数为vue实例对象，在veeValidate中会将该对象识别为日期的值导致必填校验失效。
        // 这里再次触发校验，让其对该控件的值再做一次校验。
        setTimeout(() => {
          this.$validator.validate(this.inputName)
        }, 10)
      },
      confirmDate(val) {
        this.showPicker = false
        this.inputVal = val
      },
      handleShowPicker() {
        if (
          this.readonly ||
          this.disabled ||
          (this.permission && this.permission === 'd')
        )
          return
        this.showPicker = true
      },
      isClockFormat(str) {
        // 定义24小时制的时钟格式正则表达式
        var regexHour = /^([0-9]|[0-1][0-9]|2[0-3])(:[0-5][0-9]$)/
        // 定义12小时制的时钟格式正则表达式
        var regexAMPM = /^(1[0-2]|0?[1-9]):[0-5][0-9]\s?(am|pm)$/i
        return regexHour.test(str) || regexAMPM.test(str)
      },
    },
  }
</script>
<style lang="scss" scoped>
  div[aria-invalid='true'] ::v-deep .el-input__inner,
  div[aria-invalid='true'] ::v-deep .el-input__inner:focus {
    border-color: #f56c6c;
  }
  .inputs.ht-form-inputs__block {
    ::v-deep {
      .el-date-editor {
        width: 100%;
      }
    }
  }
  .van-cell {
    min-height: 32px;
    padding-top: 3px;
    padding-bottom: 0;
    padding-right: 0;
    &::after {
      display: none;
    }
    .van-cell__title {
      width: 1px;
      flex-grow: 0;
    }
  }
  .mobile-cell {
    padding: 0;
    display: flex;
    align-items: center;
    .van-cell__value {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .cell-text {
        color: #262626;
        font-size: 14px;
        text-align: right;
      }
      .cell-close {
        margin-left: 4px;
      }
    }
    .placeholder-class {
      color: #bfbfbf;
      font-size: 14px;
      text-align: right;
    }
  }
</style>
