<template>
  <div class="mu-text-field"  :class="textFieldClass" :style="focus ? errorStyle : {}">
     <!-- <icon v-if="icon" class="mu-text-field-icon" :class="iconClass" :value="icon"></icon> -->
    <div @click="handleLabelClick" ref="content" class="mu-text-field-content">
      <text-field-label v-if="label" :float="float" :focus="focus" :normal-class="labelClass" :focus-class="labelFocusClass">{{label}}</text-field-label>
      <text-field-hint v-if="hintText" :text="hintText" :show="showHint" :class="hintTextClass"></text-field-hint>

        <div class='mu-text-field__toolbar' :v-if="iconName">

          <chaos-icon v-if='focus && inputValue'  @click.stop="handleTouch"   :class="[{'empty_menu':ulist && ulist.length == 0}]"  icon='m-sys-yuanxingguanbi'></chaos-icon>

          <span v-if="ulist && ulist.length > 0" :class="[ iconFocus ? 'login_input_arrow_up':'login_input_arrow_down']" @click.stop="handleArrow"></span>
          <mu-icon @click.stop="handleIconFocus" v-if="getIconName" :name="getIconName" ref="button" :color="getIconColor"></mu-icon>
        </div>
        <slot>
          <input v-if="!multiLine" ref="input" :type="typeField" :value="inputValue" autocapitalize="off" :maxlength="maxlength"
             @change="handleChange" @focus="handleFocus" @input="handleInput" @blur="handleBlur" @keyup="handleKeyUp"
            :max="max" :min="min" class="mu-text-field-input" :class="[{inputClass,'psw_show':pswShow}]"  />
        </slot>
        <slot name="operationBar">

        </slot>
        <underline v-if="underlineShow" :error="!!errorText"
        :error-color="errorColor" :focus="lineActive" :normal-class="underlineClass" :focus-class="underlineFocusClass"/>
        <div class="mu-text-field-help" :class="helpTextClass" :style="errorStyle" v-if="errorText || helpText || maxlength > 0">
          <div>
            {{errorText || helpText}}
          </div>

        </div>
    </div>

    <div>
      <mu-popover v-if="toogleList" :open="open" :auto-position="false" :append-body="false"  :trigger="trigger" :anchor-origin="anchorOrigin"   :target-origin="targetOrigin" @close="handleClose">
        <mu-menu v-if="ulist && ulist.length > 0" >
          <mu-menu-item disableTouchRipple
          v-for="(uInfo, index) in ulist"
          :class="(ulist.length == index+1)? 'lastItem': ''"
          :title="uInfo.account"
          :key="index"
          @click="fillForm(uInfo, index)"
          v-on:iconClick="deleteUInfo(index)" />
        </mu-menu>
      </mu-popover>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "../../styles/import.less";
@import "../../styles/mixins/setOnepx.less";

.inputValue_del_icon{
  position:absolute !important;
  top:8px !important;
  right:30px;
  z-index:98;
  cursor:pointer;
  font-size:20px;

}

.mu-text-field__toolbar .mu-icon {
  margin-top:4px;
}
.fadeInDown-enter-active{
  max-height:220px;
  animation:fadeInDown .5s;
}
.fadeInDown-leave-active {
  max-height:0;
  animation:fadeInDown .5s;
}

.bsui-list__container{
  background:#fff;
  border:1px solid #C7C7C7;
  border-top:0;
  position:absolute;
  margin-top:1px;
  z-index: 99;
  width:100%;
  overflow-y:auto;
  max-height:220px;
  -webkit-transition: all .5s cubic-bezier(0, 1, 0, 1) .1s;
  transition: all .5s cubic-bezier(0, 1, 0, 1) .1s;

}
.bsui-list__account__item{
  padding:20px 12px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  color:#3a4247;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  & :before {
    .setBottomLine(@bsuiGridBorderColor);
  }
}

.account__item__bd{
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.mu-text-field__toolbar a{
  display: inline-block;
}

.mu-text-field{
  .Ionicons{
    &:before{
       color: #bfc4c7;
    }
    position: relative;
  }
  .Ionicons.ion-ios-eye {
    &:before{
      color: #1695f0;
    }
  }
  .ion-ios-close:before {
    font-size: 20px;
  }
  font-size: 16px;
  width: 256px;
  min-height: 48px;
  display: inline-block;
  position: relative;
  color: @secondaryTextColor;

  margin-bottom: 8px;
  &.full-width {
    width: 100%;
  }
  &.has-icon {
    padding-left: 56px;
  }
  &.focus-state {

    &.error{
      color: $red;
    }
  }
  &.has-label{
    min-height: 72px;
  }
}
.mu-text-field-icon {
  position: absolute;
  left: 16px;
  top: 12px;
  .mu-text-field.has-label & {
    top: 36px;
  }
}
.mu-text-field-content{
  display: block;
  height: 100%;
  .mu-text-field.disabled &{
    color: @disabledColor;
    cursor: not-allowed;
  }
  .mu-text-field.has-label &{
    padding-top: 28px;
    padding-bottom: 12px;
  }
}
.mu-text-field-input{
  appearance: none;
  outline: none;
  border: none;
  background: none;
  border-radius: 0 0 0 0;
  box-shadow: none;
  display: block;
  padding: 0;
  margin: 0;
  width: 72%;
  font-size: 17px;
  color: #3a4247;
  line-height: 30px;
  margin-top: 24px;
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.mu-text-field-help {
  position: absolute;
  margin-top: 6px;
  font-size: 12px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  left: 0;
  right: 0;
  .mu-text-field.has-icon & {
    left: 56px;
  }
  .mu-text-field.error &{
    color: $red;
  }
  .mu-text-field.disabled &{
    color: inherit;
  }
}
.testCls {
  background-color: orange;
}

</style>
<script>
import icon from '../../icon';
import chaosIcon from '../../chaos-icon/ChaosIcon';
import underline from './textFieldUnderline';
import textFieldLabel from './textFieldLabel';
import { getColor } from '../../utils';
import textFieldHint from './textFieldHint';
import popover from '../../popover';
import { Menu, MenuItem } from '../../menu';

export default {
  name: 'mu-text-field',
  props: {
    type: {
      type: String,
      default: 'text',
    },
    toggleType:{
      type: Boolean,
      default: false,
    },
    toogleList:{
      type: Boolean,
      default: false,
    },
    iconName:{
      type:String,
    },
    activeIconName: {
      type: String,
    },
    activeColor:{
      type: String,
    },
    iconColor: {
      type:String,
    },
    icon: {
      type: String,
    },
    iconClass: {
      type: [String, Array, Object],
    },
    label: {
      type: String,
    },
    labelFloat: {
      type: Boolean,
      default: false,
    },
    labelClass: {
      type: [String, Array, Object],
    },
    labelFocusClass: {
      type: [String, Array, Object],
    },
    hintText: {
      type: String,
    },
    hintTextClass: {
      type: [String, Array, Object],
    },
    value: {},
    inputClass: {
      type: [String, Array, Object],
    },
    hasArrow:{
      type:Boolean,
      default: false
    },
    multiLine: {
      type: Boolean,
      default: false,
    },
    rows: {
      type: Number,
      default: 1,
    },
    rowsMax: {
      type: Number,
    },
    errorText: {
      type: String,
    },
    errorColor: {
      type: String,
    },
    helpText: {
      type: String,
    },
    helpTextClass: {
      type: [String, Array, Object],
    },
    maxlength: {
      type: Number,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    fullWidth: {
      type: Boolean,
      default: false,
    },
    underlineShow: {
      type: Boolean,
      default: true,
    },
    underlineClass: {
      type: [String, Array, Object],
    },
    underlineFocusClass: {
      type: [String, Array, Object],
    },
    max: {
      type: [Number, String],
    },
    min: {
      type: [Number, String],
    },
    ulist: {
      type: Array,
      default:function(){
        return [];
      },
    },
    handleinput:{
      type:Function
    }
  },
  data () {
      return {
          clear: false,
          iconFocus: false,
          focus: false,
          typeField: this.type,
          showDelIcon: false,
          inputValue: this.value,
          charLength: 0,
          showAccountHistory: this.showAccountHistory,
          open: false,
          trigger: null,
          anchorOrigin: {
              vertical: 'bottom',
              horizontal: 'left'
          },
          targetOrigin: {
              vertical: 'top',
              horizontal: 'left'
          },
          topTipShow: false,
          tipContent: '',
          pswShow: true,
          lineActive: false,

      }
  },
  mounted () {
    if(this.toogleList) {
      this.trigger = document.querySelector('.mu-text-field-content');
    }

  },
  watch:{
    ulist:function(val){
      this.showDropDown = val.length > 0;
    }
  },
  computed: {
    showDropDown:function(){
      return this.ulist.length > 0;
    },
    getIconColor () {
      return this.iconFocus ? this.activeColor || '#acb7bf' : '#acb7bf' ;
    },

    getIconName () {
      if(this.toggleType) {
        return (this.typeField == 'text' ) ? this.activeIconName : this.iconName
      }
      return this.open ? (this.activeIconName || this.iconName ) : this.iconName;
    },
    textFieldClass () {
      return {
        'focus-state': this.focus,
        'has-label': this.label,
        'no-empty-state': this.inputValue,
        'has-icon': this.icon,
        'error': this.errorText,
        'multi-line': this.multiLine,
        'disabled': this.disabled,
        'full-width': this.fullWidth,
        'clear': this.clear,
      }
    },
    float () {
      return this.labelFloat && !this.focus && !this.inputValue && this.inputValue !== 0
    },
    errorStyle () {
      return {
        color: !this.disabled && this.errorText ? getColor(this.errorColor) : ''
      }
    },
    showHint () {
      return !this.float && !this.inputValue && this.inputValue !== 0
    }
  },
  methods: {
    handleTouch (e) {

      this.handleClearInputValue(e);

    },
    handleKeyUp(e) {
      var node = e.target.parentNode.parentNode;
      var pwdLength = e.target.value.length;
      var val = e.target.value.trim();
      this.$emit('pwdkeyup', node ,pwdLength);
      this.$emit('keyup', e);
      this.clear = val ? 'clear' : '';
      if(val.length == 0) {
        this.$emit('clear-input');
      }
    },
    toggle () {
      this.open = !this.open;
    },
    handleClose () {
      this.open = false;
      this.iconFocus = false;
    },
    stringify (obj) {
      return JSON.stringify(obj)
    },
    handleArrow() {
        this.iconFocus = !this.iconFocus;
        this.lineActive = !this.lineActive;
        if(this.toggleType) {
          this.typeField = this.typeField == 'text' ? 'password' : 'text';
        }
        if(this.toogleList) {
          this.toggle();
        }
    },
    handleIconFocus(){
      this.iconFocus = !this.iconFocus;
      this.pswShow = !this.pswShow;
      if(this.toggleType) {
        this.typeField = this.typeField == 'text' ? 'password' : 'text';
      }
      if(this.toogleList) {
        this.toggle();
      }
    },
    handleClearInputValue () {
        this.inputValue = '';
        this.clear = '';
        this.showDelIcon = false;
        this.$emit('clear-input');
        this.$refs.input.focus();
    },
    handleShowAccountHistoryList (event) {
      this.showAccountHistory = !this.showAccountHistory;
    },
    handleFocus (event) {
      setTimeout(()=>{
        this.clear = event.target.value.trim().length > 0 ? 'clear' : '';
        this.focus = true;
        this.lineActive = true;
        this.iconFocus = false;
        this.$emit('focus', event)
      }, 0)
    },
    handleBlur (event) {
      setTimeout(()=>{
        this.clear = '';
        this.focus = false;
        this.lineActive = false;
        this.$emit('blur', event)
      }, 500)
    },
    handleInput (e) {
      this.focus = true;
      this.inputValue = e.target.value;
      this.showDelIcon = this.inputValue.length > 0;
      this.clear = this.inputValue.length > 0 ? 'clear' : '';
      this.$emit('handleinput',e.target.value)
    },
    handleChange (e) {
      this.focus = true;
      this.clear = e.target.value.length > 0 ? 'clear' : '';
      this.$emit('change', e, e.target.value);
      this.showDelIcon = e.target.value.length > 0;
    },
    handleLabelClick () {
      this.$emit('labelClick')
    },
    fillForm (uInfo, index) {
      this.open = false;
      if (uInfo.password === undefined) {
        return;
      }
      this.inputValue = uInfo.account;
      this.focus = false;
      this.clear = '';
      this.lineActive = false;
      this.iconFocus = false;
      this.$emit('fill-form', uInfo);
    },
    deleteUInfo (index) {

      let uInfoStorage = {};
      let userList = this.ulist || [];
      var userData = userList[index];
      userList.splice(index,1);
      this.ulist = userList;
      if (userList.length === 0) {
        this.open = false;
      }
      this.lineActive = false;
      this.clear = '';
      this.iconFocus = false;
      this.focus = false;
      this.$emit('updateuinfo', userList, userData);
    },
  },
  watch: {
    value(val) {
      this.inputValue = val;
    },
    inputValue(val, oldVal) {
      this.charLength = this.maxlength && String(this.inputValue) ? String(this.inputValue).length : 0
      this.$emit('input', val)
    },
    charLength(val) {
      if(val > this.maxlength && !this.isTextOverflow) {
        this.isTextOverflow = true;
        this.$emit('textOverflow', true);
        this.$emit('text-overflow', true);
      }

      if(this.isTextOverflow && val <= this.maxlength) {
        this.isTextOverflow = false;
        this.$emit('textOverflow', false);
        this.$emit('text-overflow', false);
      }
    }
  },
  components: {
    underline,
    'text-field-label': textFieldLabel,
    'text-field-hint': textFieldHint,
    'mu-icon': icon,
    'mu-popover': popover,
    'mu-menu': Menu,
    'mu-menu-item': MenuItem,
    'chaos-icon':chaosIcon
  },
}

</script>
