import create from '../utils/create-basic';
import { addUnit } from '../utils/format/unit';
export default create({
  render: function render() {
    var _obj;

    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      class: _vm.b()
    }, [_c('ul', {
      class: [_vm.b('security'), (_obj = {}, _obj['vm-hairline-surround'] = !_vm.gutter, _obj)],
      on: {
        "touchstart": function touchstart($event) {
          $event.stopPropagation();
          return _vm.onTouchstart($event);
        }
      }
    }, _vm._l(_vm.length, function (item, i) {
      var _obj;

      return _c('li', {
        key: i,
        class: (_obj = {}, _obj['vm-hairline-left'] = i !== 0 && !_vm.gutter, _obj),
        style: i !== 0 && _vm.gutter ? {
          marginLeft: _vm.addUnits(_vm.gutter)
        } : {}
      }, [_vm.mask ? _c('i', {
        style: {
          visibility: _vm.value[i] ? 'visible' : 'hidden'
        }
      }) : _c('span', [_vm._v(_vm._s(_vm.value[i]))]), _vm.focused && i === _vm.value.length ? _c('div', {
        class: _vm.b('cursor')
      }) : _vm._e()]);
    }), 0), _vm.info && !_vm.errorInfo ? _c('div', {
      class: _vm.b('info')
    }, [_vm._v("\n    " + _vm._s(_vm.info) + "\n  ")]) : _vm._e(), _vm.errorInfo ? _c('div', {
      class: _vm.b('error-info')
    }, [_vm._v("\n    " + _vm._s(_vm.errorInfo) + "\n  ")]) : _vm._e()]);
  },
  name: 'password-input',
  data: function data() {
    return {};
  },
  props: {
    info: String,
    gutter: [Number, String],
    focused: Boolean,
    errorInfo: String,
    mask: {
      type: Boolean,
      default: true
    },
    value: {
      type: String,
      default: ''
    },
    length: {
      type: [Number, String],
      default: 6
    }
  },
  computed: {},
  mounted: function mounted() {},
  methods: {
    addUnits: function addUnits(val) {
      return addUnit(val);
    },
    onTouchstart: function onTouchstart() {
      this.$emit('focus');
    }
  }
});