<!-- CopyRight (C) 2017-2022 HUNDSUN Holding Limited. -->
<!-- Created by asiaChan on 17/12/14. -->
<!--A general input component-->

<template>
<div>
  <lc-cell :label="label"
    class="lc-input"
    :cell-style="cellStyle"
    :cell-index="cellIndex"
    :label-style="labelStyles"
    :title-style="titleStyle"
    :has-top-border="hasTopBorder"
    :has-bottom-border="hasBottomBorder"
    :accessible="true">
    <div slot="title">
      <!-- type=text -->
      <input
        v-if="!type || type === 'text'"
        :class="['lc-input__inner', showWarn && 'lc-input_warn', disabled && 'lc-input-disabled']"
        :style="inputStyle"
        :maxlength="max"
        :autofocus="autofocus"
        type="text"
        :name="name"
        :placeholder="placeholder"
        :disabled="disabled"
        v-model="currentValue"
        @focus="onFocus"
        @blur="onBlur"
        @return="onReturn"
        @input="onInput"
        @change="onChange"
        ref="input"/>
      <!-- type=date -->
      <!-- 133153 lighting-ui中的lc-input组件，type=date时 不支持min max属性 -->
      <input
        v-if="type === 'date'"
        :style="inputStyle"
        class="lc-input__inner"
        :autofocus="autofocus"
        type="date"
        :max="max"
        :min="min"
        :name="name"
        :placeholder="placeholder"
        :disabled="disabled"
        v-model="currentValue"
        @focus="onFocus"
        @blur="onBlur"
        @return="onReturn"
        @input="onInput"
        @change="onChange"
        ref="input"/>
      <!-- type=time -->
      <input
        v-if="type === 'time'"
        :style="inputStyle"
        class="lc-input__inner"
        :autofocus="autofocus"
        type="time"
        :name="name"
        :placeholder="placeholder"
        :disabled="disabled"
        v-model="currentValue"
        @focus="onFocus"
        @blur="onBlur"
        @return="onReturn"
        @input="onInput"
        @change="onChange"
        ref="input"/>
      <!-- type=number -->
      <input
        v-if="type === 'number'"
        :style="inputStyle"
        class="lc-input__inner"
        :maxlength="max"
        :autofocus="autofocus"
        type="number"
        :name="name"
        :placeholder="placeholder"
        :disabled="disabled"
        v-model="currentValue"
        @focus="onFocus"
        @blur="onBlur"
        @return="onReturn"
        @input="onInput"
        @change="onChange"
        ref="input"/>
      <!-- type=email -->
      <input
        v-if="type === 'email'"
        :style="inputStyle"
        class="lc-input__inner"
        :maxlength="max"
        :autofocus="autofocus"
        type="email"
        :name="name"
        :placeholder="placeholder"
        :disabled="disabled"
        v-model="currentValue"
        @focus="onFocus"
        @blur="onBlur"
        @return="onReturn"
        @input="onInput"
        @change="onChange"
        ref="input"/>
      <!-- type=url -->
      <input
        v-if="type === 'url'"
        :style="inputStyle"
        class="lc-input__inner"
        :maxlength="max"
        :autofocus="autofocus"
        type="url"
        :name="name"
        :placeholder="placeholder"
        :disabled="disabled"
        v-model="currentValue"
        @focus="onFocus"
        @blur="onBlur"
        @return="onReturn"
        @input="onInput"
        @change="onChange"
        ref="input"/>
      <!-- type=password -->
      <input
        v-if="type === 'password'"
        :style="inputStyle"
        class="lc-input__inner"
        :maxlength="max"
        :autofocus="autofocus"
        type="password"
        :name="name"
        :placeholder="placeholder"
        :disabled="disabled"
        v-model="currentValue"
        @focus="onFocus"
        @blur="onBlur"
        @return="onReturn"
        @input="onInput"
        @change="onChange"
        ref="input"/>
      <!-- type=tel -->
      <input
        v-if="type === 'tel'"
        :style="inputStyle"
        class="lc-input__inner"
        :maxlength="max"
        :autofocus="autofocus"
        type="tel"
        :name="name"
        :placeholder="placeholder"
        :disabled="disabled"
        v-model="currentValue"
        @focus="onFocus"
        @blur="onBlur"
        @return="onReturn"
        @input="onInput"
        @change="onChange"
        ref="input"/>
    </div>

    <div class="lc-input__ft" slot="value">
      <image style="width: 30px;height: 30px;" :src="checkIcon" @click="clear" v-if="showClear && currentValue && !disabled"></image>
      <!-- <i class="lc-input-icon lc-input-icon-warn" v-show="showWarn"></i>
      <i class="lc-input-icon lc-input-icon-warn" v-if="!novalidate && hasLengthEqual && equalWith && !valid"></i>
      <i  class="lc-input-icon lc-input-icon-success" v-show="!novalidate && equalWith && equalWith === currentValue && valid"></i> -->

      <slot name="right"></slot>
    </div>
  </lc-cell>

  <div class="error-msg" v-if="showWarn">
      <image style="width: 28px; height: 28px; margin-right: 20px;" :src="warnIcon"></image>
      <text class="error-text">{{ firstError }}</text>
    </div>
</div>
</template>


<script>

import LcCell from '../lc-cell';
import isEmail from 'validator/lib/isEmail'
import isMobilePhone from 'validator/lib/isMobilePhone'
import { CLEAR_ICON, WARN_ICON } from './type'

const validators = {
  'email': {
    fn: isEmail,
    msg: '邮箱'
  },
  'china-mobile': {
    fn (str) {
      var count = 1;
      if(count>0) {
        count = 0;
        return isMobilePhone(str, 'zh-CN')
      }   
    },
    msg: '手机号码'
  }
}


export default {
  components: { LcCell},
  created () {
    this.currentValue = (this.value === undefined || this.value === null) ? '' :  this.value

    if (this.required && typeof this.currentValue === 'undefined') {
      this.valid = false
    };
    //136047 lc-input组件，type=date，设置max的值小于min时，jsn页面可以选择任意日期，而浏览器中无法选择日期
    if(this.type === 'date' && this.max < this.min){
        console.error("【lighting-ui warn】max值不能小于min值")  
    }
  },
  props: {
    label: String,
    type: {
      type: String,
      default: 'text'
    },
    value: [String, Number],
    name: String,
    placeholder: String,
    disabled: Boolean,
    autofocus: {
      type: Boolean,
      default: false
    },
    // 133153 lighting-ui中的lc-input组件，type=date时 不支持min max属性
    min: [String, Number],
    max: [String, Number],
    isType: [String, Function],
    showClear: {
      type: Boolean,
      default: true
    },
    novalidate: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    equalWith: String,
    labelAlign: String,    
    labelWidth: {
      type: String,
      default: '150px'
    },  
    inputStyle: {
      type: Object,
      default:()=>({})
    },
    cellIndex: {
      type: String,
      default: ''
    },
    cellStyle: {
        type: Object,
        default: () => ({})
    },
    titleStyle: {
        type: Object,
        default: () => ({marginRight:'0'})
    },
    hasTopBorder:{
        type: Boolean,
        default: true
    },
    hasBottomBorder:{
        type: Boolean,
        default: true
    },
    labelColor: {
      type: String,
      default: '#4A4A4A'
    }
  },
  computed: {
    labelStyles () {
      return {
        width: this.labelWidth || '',
        textAlign: this.labelAlign || 'left',
        color: this.disabled ? '#7A7A7A' : this.labelColor
      }
    },
    hasErrors () {
      return Object.keys(this.errors).length > 0
    },
    showWarn () {
      return !this.novalidate  && !this.valid && this.firstError && this.forceShowError;
    },
    checkIcon () {
      return CLEAR_ICON;
    },
    warnIcon () {
      return WARN_ICON;
    }
  },
  methods: {
    clear () {
      this.currentValue = ''
      this.focus()
    },
    focus () {
      this.$refs.input.focus()
    },
    blur () {
      this.$refs.input.blur()
    },
    onFocus ($event) {
      this.$emit('onFocus', this.currentValue, $event)
    },
    onBlur ($event) {
      this.validate()
      this.$emit('onBlur', this.currentValue, $event)
    },
    //weex不支持keyup事件
    onReturn ($event) {
      if ($event.key === 'Enter') {
        $event.target.blur()
        this.$emit('onEnter', this.currentValue, $event)
      }
    },
    onInput($event) {
      this.$emit('onInput', this.currentValue, $event)
    },
    onChange($event) {
      this.$emit('onChange', this.currentValue, $event)
    },
    getError () {
      let key = Object.keys(this.errors)[0]
      this.firstError = this.errors[key]
    },
    validate () {
      if(this.novalidate) {
        return;
      }

      if (typeof this.equalWith !== 'undefined') {
        this.validateEqual()
        return
      }
      this.errors = {}

      if (!this.currentValue && !this.required && !this.min) {
        this.valid = true
        return
      }
      if (!this.currentValue && this.required) {
        this.valid = false
        this.forceShowError = true  //new
        this.errors.required = '必填'
        this.getError()
        return
      }

      if (typeof this.isType === 'string') {
        const validator = validators[this.isType]
        if (validator) {
          let value = this.currentValue

          this.valid = validator[ 'fn' ](value)
          if (!this.valid) {
            this.forceShowError = true
            this.errors.format = validator[ 'msg' ] + '格式错误'
            this.getError()
            return
          } else {
            delete this.errors.format
          }
        }
      }

      if (typeof this.isType === 'function') {
        const validStatus = this.isType(this.currentValue)
        this.valid = validStatus.valid
        if (!this.valid) {
          this.errors.format = validStatus.msg
          this.forceShowError = true
          if (!this.firstError) {
            this.getError()
          }
          return
        } else {
          delete this.errors.format
        }
      }

      if (this.min) {
        if (this.currentValue.length < this.min) {
          this.errors.min = `最少应该输入${this.min}个字符`
          this.valid = false
          if (!this.firstError) {
            this.getError()
          }
          this.forceShowError = true//新增
          return
        } else {
          this.forceShowError = false
          delete this.errors.min
        }
      }

      if (this.max) {
        if (this.currentValue.length > this.max) {
          this.errors.max = `最多可以输入${this.max}个字符`
          this.valid = false
          this.forceShowError = true
          return
        } else {
          this.forceShowError = false
          delete this.errors.max
        }
      }

      this.valid = true
    },

    validateEqual () {
      if (!this.equalWith && this.currentValue) {
        this.valid = false
        this.errors.equal = '输入不一致'
        return
      }
  
      if (this.currentValue !== this.equalWith) {
        this.valid = false;
        this.forceShowError = true
        this.errors.equal = '输入不一致'
        return
      } else {
        if (!this.currentValue && this.required) {
          this.valid = false
        } else {
          this.valid = true
          delete this.errors.equal
          // this.errors.equal = {}
        }
      }
    }
  },
  data: () => ({ 
    firstError: '',
    forceShowError: false,
    valid: true,
    currentValue: '',
    errors: {}
  }),
  watch: {
    valid () {
      this.getError()
    },
    value (val) {
      this.currentValue = val
    },
    equalWith (newVal) {
      // if (newVal && this.equalWith) {
      //   if (newVal.length === this.equalWith.length) {
      //     this.hasLengthEqual = true
      //   }
      //   this.validateEqual()
      // } else {
      //   this.validate()
      // }
    },
    currentValue (newVal) {
      //去掉了!
      // if (!this.equalWith && newVal) {
      //   this.validateEqual()
      // }
      // if (newVal!=='' && this.equalWith) {
      //   if (newVal.length === this.equalWith.length) {
      //     this.hasLengthEqual = true
      //   }
      //   this.validateEqual()
      // } else {
      //   this.validate()
      // }
      // this.$emit('on-change', newVal)
      this.$emit('input', newVal);

    }
  }
}
</script>

<style scoped>
/* 141669 【TS:201905220658-经纪业委会（云纪）-盛利强-【需求类型】	需求【需求描述】	1.lc-input】 */
.lc-input__inner {
  background-color: #fff;
  color: #4A4A4A;
  /* line-height: 34px; */
  font-size: 30px;
  outline: none;
}
.lc-input__inner:focus {
  outline: none;
}

.lc-input_warn {
  color: #DE3B24;
}

.lc-input-disabled {
  color: #7A7A7A;
}


.lc-input-icon-clear {
  /* width: 15px;
  height: 15px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAYAAADnRuK4AAAABmJLR0QA/wD/AP+gvaeTAAAN8klEQVR42u1da2wc1RWetrwKEm0BFfUhHo0K/ABBUVqpQKH0IfWhVkALgfIoVRX6p1J/oKJWTdsICaio1ECkqtrG9jzWOzO7cWLHTtZO7GTj+Bk7cZz4nbffdmI7iRO/HU/PWZs0fqy993pm996590iHJNg7O3PPN/eee853zlUUwUTX9TuzgtYTmma/qmnWBl23MuHv+ZpulYO2gPaDDiVQ/Flz/HfhM7OftTbgtfCaeG1Fin8kOzv7q2DkdapufgRGLwFj98GfjsfaO/td9iZNM1/S9chXpCX4AcztAJhfarqZBUbsSAFYktX22dnK/AXeo7QUQ2Ka5l3wtr8Vf+t1a5Ih0CTSCQB4sWpY6+WSlyZRVfUWeJtfgaWpCAwyxQFoEikCPorL7ObN0ZulZT0HjvmQZlgfw6APcgyaRDqAz5YZjDwoLe2iOI7zKdUwfza3S3IE0XJ8Zmn9VYqmhZ8Gf6FUIODMV8OKwRg8KZFAKIZhrYUB3C0scBYDqTAraD8ukbEicCL3w4AVSNAk1AJVte6TSFkgsVjsBthVvQMDdFmCZCU1hzXDfBvHTCInnloIPwsDc0ICg1gbdN38trDAiUQiN8EAfAADMS3BQK1Tqm69FwgEbhQsnhN6DJasJgkA17QxM2g/KgZ4DOtNeOARaXTX9QrM6K/5FjiBQMGt4PxlS0N7q5AWMXCsfQWeLaZ5NzxclTRwykBUYRjGF30BHgyAwUP1SMOmXLsBSN/gPDBoPjPH5JMGTY8OqkHrO5w6y/YLs9wXach0849gJnqesySo/YaM7zCl07D7fZ2nmWdKGo098poaNJ9jPC1hrZMzD+szkf0io8uW9X24wTFpJOZ1FDL632Vs5gl9S0aX+croYzqJCfBkhEL3yjgPn3Ei4F/dk+akKFRH6FatNAafCpn86rRWg4DTHJKG4F6D6cqqr5eD75OZCBgSKQUPck/gi8fl4PtGx1U1+5HU+T2SDOZDtY8gS9T7eI9hvS8H27c0kHe9zq4/BV90VQ62b/Uq9jnybOkCymSrHGS/FzHaxzxZyuDCf5MDLMquzP6T2/SMNZLbI1a+zNUoNVwwLAdVBhhXkyidkQMqnkPtCqcaLlQmB1NQ1aw9q9t5Bc0fsvRAlr3dKT1Q6VRU1jiFRSWObtjSyJ7HhsLPriZZWsHKgxw5csyZnp52rpfh4ctONFrMvZGC2WGnuGS/U1lV4xwoq3JMaxtTTa5W0zWDGfAkEgTV7j37uAUPAmd0dGzeM01NTTl1dUeZuUcMINOkLHaysmwtnHkWCg54tLCEO/DgcjwzM5PwuQ4drmfEF7JzCWcf+wFWUhb7SyucZGRyctLZuWsPN+Apr6heFjyzL8Z0/AVigYyPsUASAG1mZaCrqg85ycrExISTX1DEPHiqqmtXBM8nsi9WxsostImgi4Z1kZXBLikpdUhkbGzcydsRZRY8NbV1RM9TUXGQmT7WmA9Nhmn4Ols7lIgzMjJKNOijo6PO9tydzIHnMDjGpMLULhNOB0imvmsPawO/pziW9JT/iVy5MuLkbMtn5hmOHm0kBs/FS8Osxbqiy1NVM60vs8r3KYP4CCmIME4U2boj7ffe2NhCDB50oHdFmdsUTC3bdwic59+z7HzSgCg+E+WkZybC2eP4iVPE4Bkfn3AKdu5mNDJt/m6ZvJe5j4ftL6lcgqUgHMlLOXhOn2mnAM842zvJRPmxjIzIHbw0Rjh48DCVPxEO56YmchsMO2fPdhDfIzr/uXm7mO/yEQhEPrdUW5YXeYrikm6HUQaHLkBgbpvnu8bOrm7ie8OdZi6DO8clGYtLtYmBqSmDt1RAfX0DsaHOnx9wQuZWT+4nO7TV6e3tJ74ndPZZ2jEmsYz9Zynez2kek5HHGpqJDdZ/7nzc2G7eB4Kyr/8cFXi25uzgbdyPzwNPMBj8Es90CJptck9PX3y5cSfhu80ZGBgkvocLFy6Cc5/L45jPzNvO42nCvHNqWttOEBuwu7snzsVZLVtgYHCI+LuHwB+zw7ncjvc8Pwj29h9yz5yDbfOpU2eIDdne3kkd7cXQwMWLl6j8MKZIY3TxoA+YTl+kMvaCW25SEEW25sVDA6RyDvwv08rxQQGiVXg9gPr8wuHFGExHRxexYU+ePJ00iLZtL3AuX75C5Xe57bynUbuuP8fCV0RwBFFnJ3ksBtMOyYAH0yPk/lYvgCfiq3E2TfMuBVvh+7GaAHdYNDGZ5ua2hNdEntFC/nJSflZHZxzU/qvYgBMT4T+/9mtJCr7xfX3ksZl6oF4svNaO/EIgq41R+Vd+BM9cZ7NfYenO3/1c1xQyc2DXQx6jOXxdVQRyrZEu66VfxWknj78ggDL9XhyHW2aaWM2hQ/XAySkG8ExS+VN+L3wE7PwXUxhCnNOO225MG5AIco+wZEiCJ8ESplt5CCBhThJEOgdN7IZEGptaRCp9LkcAHRep1hsTlzQxnKScb2AHCFY734IA6hetYQDGckgrPVb0l1ipIk2t9igs1YClUrHshyams5RUQ/GjoN07hnAGGhW1dQnGdpCDTCvoZFdW1Yrc/mVE0QQ/IA636VhCQyNV4s4812rmFU3wvs8ktfeL67aKRQfQlNBLGA2nemFbmUIO28q4u4QJ6kQ3UHCpl+4IMslsEWCqnGjhtvEtrcdd3cLz0lbGm228brWJ8sCYXmhrO+lJEDHeVob9okC3tZmpRprec6bPeprGwOAkBimFAZBmHcBjDPJFAA9NkwOaROpsR5A8QQAEvRP9TufAsp2Ozi6q2QTr1MvKqynbyvgfRHE6B6Tk/+pf8EScrq4eCvCMzKtTxzZzdB1Bcn0+A5l/Zq6lnZt16n197tWpH6wh7wgyFG/msN23AIKGHC/7klSPNNZ+ijp1nDWWq1OvW6bhecKOIMCE5L2IcFlSPZZm+OmhvK5TP3qsiaqY0KuOIOmsj7/WJwj+0e0P8GyPv/E0fYNI6tRpotg4I/qoqBC1/fpjDQr9wHlOZZ16K0U0u7un17WOIAyUNu/0TXMF7MRKw3XuX2Wdettx8qg2ll37oU5sYXOFn/NMT01XnXo8un2aPLpN08yBwSj0T68BaM6R5u5YS6Sl0tWp97hWp45AOEPREeTkyTM8g+gqHHvw+YUt7rhKqlLXqbe7X6fuZTMHRrVxcZdW3f43Lw+Qz2CdOl6XJurd3NLGYUGh+dFSXVq58INYrlOfbeZAHv1uamrlzIG2f7wIQNA08Tb44TjLNx6lrFNHAllqmzkMEN8jHuvJCYBGI5HIZ7k76gDPRaWhVzQ1p/7txtAATTT8MA/FicsdBQ78jrdYvGk87omm9OboEn1+UhkVx/QIqdTWHmGdA/SbhACa285PsrZs0YCnobGFiQAnaYwKuUd49DejABpftH1n+cA5dHovUUSY69M48yxUpIYgv4gURCV7S1kEUDSJEwvNl1i54aLde1fVWYznOnw8uYe1vBnwf15YEUDgYd/ESqlPZWUN0aDX1NQxHfgkrcNH34+lEp5YLHZDUic3wy//k4Wb3r+/POkpv4qDJgdYO0YSw2KpcQNQn/9Bcm78AyzUzCM5bKWtO4KnHIjvvAThMBA6OZlcLCsGLxArTRRg97VGIRHowJnDws0vd1Q2gqe0tIK7VADW06/0YuDO0+vD8QhmH1shFeS7sjLgGKVduJVHJ7O4ZD+3dAgMjE5PJw5P1DG0GTAMa61CIyxVrSJrcN++MvALauLAWe0xTUzEuAqLF3WORVAxldYwrJhCK5oWflLw/jcpiXUVFu11KmDHicsxY2VAM9Szz/9pHmaRNLSgCmXvympFVe1v8shWlOoG6zD0mOKGaLq9RQ6oWIoEQ8UtwQNWRe1kJqgOZGRE7lDcFEDkH+XACuLY6/YfFLdl48aNn4aLV8oB9r2Woa0VL0RVsx9hjS8k1V2+T2Yw8qDipYAv9L4caN82jHpX8Vowpa8JdESUOGqWerZ0LcGdXgNfOCwH3Td6yTAi9yupFFjKfisH3jcR5zeUdAiA6F/SANx32fhQSZcEAoEbsVewNAS3PX5iSdNUvRKMWAKKW6VBuNOG7Ozs2xUWBB0wuKFz0ijcaL+qWvcpLEmWYX4PbmxMGof92nbDMJ9RWBRdD/9AgohpvQLgeUphWbD4DG50ShqLOZ1Ug+ZzCg+C/WM0gU9CZHHZUlXzRwpPguusjFYzkaIYBm770wqPMgsia0gaMW06iEdZKDxLVlboazJOlBZtSXl+yyvZYpp3ywx+SmkZFUhDVvwkGDLHAn1Z4eFtHReOMXRY+YziV4Hzyd6EBx2RxnY/xgOuwmuKCJIRCt0rk7DuksHA37lHEUmwkRUe2BFvHSJBQKtTsGS9h6wIRVQxDPth6WDTUTGgcvTripQ5nrVmvgMDc1mCI4nAoGG+nXYeD5O+EXCL4M36WObSll6ucGxCodAXJFJWXNastTBguyVori1XhVlB+3GJDFLONeRwcIchsp+DPZokElYbO4I2IxBdNQRZ2qbwWTOD9qPS8q4DyXxozkca9GNHDHw2z0uLpSCQ1Ftg1/bKXPc0nmcl7DMQhRln3ebN0ZulZdMg8QNi4qcMmcVgjAkeGhjgeSSQ0lmv6/qd0oJM7d6M21Qj9BM8khHLVhhJ3M5Az+1jAPJNyNQMBApulZbiaHaKc7TBeGDIEnjz+1IAmN7Z70LAWM/LWcZnggbNClpPgIFfBUBtACNnYjdSMHo5krC02YNmhhYc9TA99//wZ83x34XPzH7W2oDXwmuKCJb/ASRw6RMAUGruAAAAAElFTkSuQmCC');
  background-size: 15px 15px; */
}
/* .lc-input-icon-clear:active {
  background-image: url('data:image/png;base64,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');
} */
.lc-input-icon-warn {
  width: 17px;
  height: 17px;
  background-image: url('data:image/png;base64,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');
  background-size: 17px 17px;
}
.lc-input-icon-success {
  width: 17px;
  height: 17px;
  background-size: 17px 17px;
}
.lc-input__ft {
  margin-left: 20px;
  text-align: right;
  flex-direction: row;
  align-items: center;
}

.error-msg {
  flex-direction: row;
  align-items: center;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.error-text {
  font-size: 26px;
  color: #E56250;
}

</style>

