<template>
  <div class="input-container" :style="{'width':width,'height':height}">
    <al-label
      :label="label"
      :labelWidth="labelWidth"
      :labelOption="labelOption"
      :value="labelActiveIndex"
      @input="labelChange"
      :height="height"
      :type="type"><span v-if="required" style="color: #FF7457;">*&nbsp;</span>{{label}}</al-label>

    <!--正常input-->
    <al-form-item :class="{'autoWidth':label}" :prop="prop" v-if="!autocomplete"
                  :style="{width:label||labelOption.length?'calc( 100% - '+labelWidth+')':'100%','height':height,'line-height':height}">
      <el-input
        :value="value"
        @input="onInput"
        :placeholder="placeholder"
        :style="{width:'100%','height':height,'line-height':height}"
        :class="{'textareaInput':type=='textarea'}"
        :disabled="disabled"
        :clearable="clearable"
        :showPassword="showPassword"
        :maxlength="maxlength"
        :minlength="minlength"
        :show-word-limit="showWordLimit"
        :prefix-icon="prefixIcon"
        :suffix-icon="suffixIcon"
        :type="type"
      >
      </el-input>
    </al-form-item>

    <!--带输入建议的input-->
    <al-form-item :class="{'autoWidth':label}" :prop="prop" v-if="autocomplete"
                  :style="{width:label||labelOption.length?'calc( 100% - '+labelWidth+')':'100%','height':height,'line-height':height}">
      <el-autocomplete
        :value="value"
        @input="onInput"
        :placeholder="placeholder"
        :style="{width:'100%','height':height,'line-height':height}"
        :disabled="disabled"
        :clearable="clearable"
        :showPassword="showPassword"
        :prefix-icon="prefixIcon"
        :suffix-icon="suffixIcon"
        :fetch-suggestions="querySearch"
        @select="handleSelect"
        type="text"
      ></el-autocomplete>
    </al-form-item>

    <!--密码验证-->
    <al-rate v-if="checkLevel" :class="{'autoWidthLeft':label}" :style="{'margin-left':labelWidth}"
             :val="checkStrength"></al-rate>
  </div>
</template>

<script>
    import AlFormItem from '../AlFormItem'
    import alRate from '../AlRate'

    export default {
        name: "index",
        data() {
            return {
                input: '',
            }
        },
        components: {
            AlFormItem,
            alRate
        },
        methods: {
            onInput(newValue) {
                this.$emit("input", newValue)
            },
            querySearch(queryString, cb) {
                var queryData = this.queryData;
                var results = queryString ? queryData.filter(this.createFilter(queryString)) : queryData;//搜索结果
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            /**根据搜索字段，创建筛选函数*/
            createFilter(queryString) {
                return (queryData) => {
                    return (queryData.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            /*点击下拉选项*/
            handleSelect(item) {
                this.$emit("select", item)
            },
            labelChange(v){
                this.$emit('labelChange',v)
            }
        },
        props: {
            showWordLimit: {
                type: Boolean,
                default: false
            },
            minlength:{
                type:Number,
            },
            maxlength:{
                type:Number,
            },
            labelActiveIndex:{
                type:Number,
                default:0
            },
            prop: {
                type: String,
                default: ''
            },
            //检查密码等级
            checkLevel: {
                type: Boolean,
                default: false
            },
            //后置图标
            suffixIcon: {
                type: String,
                default: 'name'
            },
            //预留文字
            placeholder: {
                type: String,
                default: '请输入内容'
            },
            //前置图标
            prefixIcon: {
                type: String,
                default: ''
            },
            //输入值
            value: {
                type: String,
                default: ''
            },
            //宽度
            width: {
                type: String,
                default: '100%'
            },
            //高度
            height: {
                type: String,
                default: '36px'
            },
            //是否禁用
            disabled: {
                type: Boolean,
                default: false
            },
            //可清空？
            clearable: {
                type: Boolean,
                default: false
            },
            //是否必填
            required: {
                type: Boolean,
                default: false
            },
            //是否密码框
            showPassword: {
                type: Boolean,
                default: false
            },
            //标签
            label: {
                type: String,
                default: ""
            },
            //标签宽度
            labelWidth: {
                type: String,
                default: "100px"
            },
            //输入框类型
            type: {
                type: String,
                default: 'text'
            },
            //带建议的输入框
            autocomplete: {
                type: Boolean,
                default: false
            },
            //数据查询选项
            queryData: {
                type: Array,
                default() {
                    return []
                }
            },
            //label下拉框的选项
            labelOption: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        computed: {
            checkStrength: function () {
                var val = this.value;
                var lv = 0;
                if (val.match(/[a-z]/g)) {
                    lv += 2;
                }
                if (val.match(/[0-9]/g)) {
                    lv++;
                }
                if (val.match(/(.[^a-z0-9])/g)) {
                    lv += 2;
                }
                if (val.length < 6) {
                    lv = 0;
                }
                return lv
            },
        },
    }
</script>

<style scoped lang="scss">
  .textareaInput{
    height: 88px!important;
  }
  .input-container {
    font-size: 0;
    vertical-align: top;

    /deep/ {
      input {
        height: 100%;
        line-height: 100%;
        font-size: 14px;
        display: block;
      }

      textarea {
        height: 100%;
        line-height: 1.5;
        font-size: 14px;
        display: block;
      }

      .el-input {
        height: 100%;
      }
    }
  }
</style>
