<template>
  <div style="padding: 0px 10px;">
    <el-form label-position="left" label-width="100px">
      <el-form-item v-if="type == '' || type == 'text'" label="尺寸" prop="size">
        <el-select v-model="size">
          <el-option label="默认" value="" />
          <el-option label="medium（中等）" value="medium" />
          <el-option label="small（小）" value="small" />
          <el-option label="mini（迷你）" value="mini" />
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="type">
          <el-option label="input（默认）" value="" />
          <el-option label="text（文本）" value="text" />
          <el-option label="textarea（文本域）" value="textarea" />
        </el-select>
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item label="name" prop="name">
        <el-input v-model="name" placeholder="name" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="label" prop="label">
        <el-input v-model="label" placeholder="label" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="占位文本" prop="placeholder">
        <el-input v-model="placeholder" placeholder="请输入内容" style="width: 178px;" />
      </el-form-item>
      <el-form-item v-if="type == 'text' || type == 'textarea'" label="最大输入长度" prop="maxlength">
        <el-input v-model="maxlength" placeholder="最大输入长度" style="width: 178px;" />
      </el-form-item>
      <el-form-item v-if="type == 'text' || type == 'textarea'" label="最小输入长度" prop="minlength">
        <el-input v-model="minlength" placeholder="最小输入长度" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="最大值" prop="max">
        <el-input v-model="max" placeholder="最大值" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="最小值" prop="min">
        <el-input v-model="min" placeholder="最小值" style="width: 178px;" />
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item label="字数统计" prop="showWordLimit">
        <el-switch v-model="showWordLimit" />
      </el-form-item>
      <el-form-item v-if="type == ''" label="显示清空" prop="clearable">
        <el-switch v-model="clearable" />
      </el-form-item>
      <el-form-item v-if="type == ''" label="切换密码图标" prop="showPassword">
        <el-switch v-model="showPassword" />
      </el-form-item>
      <el-form-item label="禁用" prop="disabled">
        <el-switch v-model="disabled" />
      </el-form-item>
      <el-form-item label="只读" prop="readonly">
        <el-switch v-model="readonly" />
      </el-form-item>
      <el-form-item label="自动获取焦点" prop="autofocus">
        <el-switch v-model="autofocus" />
      </el-form-item>
      <el-form-item label="触发表单校验" prop="validateEvent">
        <el-switch v-model="validateEvent" />
      </el-form-item>
      <el-form-item v-if="type == 'text' || type == 'textarea'" label="输入框行数" prop="row">
        <el-input v-model="row" placeholder="输入框行数" style="width: 178px;" />
      </el-form-item>
      <el-form-item v-if="type == 'textarea'" label="是否能缩放" prop="resize">
        <el-select v-model="resize">
          <el-option label="none（禁止）" value="none" />
          <el-option label="both（允许）" value="both" />
          <el-option label="horizontal（水平）" value="horizontal" />
          <el-option label="vertical（垂直）" value="vertical" />
        </el-select>
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item label="tabindex" prop="tabindex">
        <el-input v-model="tabindex" placeholder="tabindex" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="头部图标" prop="prefixIcon">
        <el-input v-model="prefixIcon" placeholder="例：el-icon-date" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="尾部图标" prop="suffixIcon">
        <el-input v-model="suffixIcon" placeholder="例：el-icon-date" style="width: 178px;" />
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item label="blur事件" prop="blur">
        <el-switch v-model="blur" />
      </el-form-item>
      <el-form-item label="focus事件" prop="focus">
        <el-switch v-model="focus" />
      </el-form-item>
      <el-form-item label="change事件" prop="change">
        <el-switch v-model="change" />
      </el-form-item>
      <el-form-item label="input事件" prop="input">
        <el-switch v-model="input" />
      </el-form-item>
      <el-form-item label="clear事件" prop="clear">
        <el-switch v-model="clear" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ApDevItemBase from './ApDevItemBase'

export default {
  name: 'ApDevItemInput',
  extends: ApDevItemBase,
  data() {
    return {
      size: '', // 尺寸(type != textarea 时)
      type: '', // 类型
      name: '', // name
      label: '', // 输入框关联的label文字
      placeholder: '', // 占位文本
      maxlength: '', // 最大输入长度
      minlength: '', // 最小输入长度
      max: '', // 最大值
      min: '', // 最小值
      showWordLimit: false, // 是否显示输入字数统计
      clearable: true, // 是否可清空
      showPassword: false, // 是否显示切换密码图标
      disabled: false, // 是否禁用
      readonly: false, // 是否只读
      autofocus: false, // 自动获取焦点
      validateEvent: true, // 输入时是否触发表单的校验
      row: 2, // 输入框行数(type == textarea 时)
      resize: '', // 控制是否能被用户缩放
      tabindex: '', // 输入框的tabindex
      prefixIcon: '', // 输入框头部图标
      suffixIcon: '', // 输入框尾部图标
      blur: false, // 失去焦点
      focus: false, // 获取焦点
      change: false, // 失去焦点/点击回车
      input: false, // input值改变
      clear: false // 点击清除
    }
  },
  // 监听每个属性的变化，对生成的模板进行修改
  watch: {
    size() {
      this.initOpt()
    },
    type() {
      this.initOpt()
    },
    maxlength() {
      this.initOpt()
    },
    minlength() {
      this.initOpt()
    },
    showWordLimit() {
      this.initOpt()
    },
    placeholder() {
      this.initOpt()
    },
    clearable() {
      this.initOpt()
    },
    showPassword() {
      this.initOpt()
    },
    disabled() {
      this.initOpt()
    },
    prefixIcon() {
      this.initOpt()
    },
    suffixIcon() {
      this.initOpt()
    },
    row() {
      this.initOpt()
    },
    name() {
      this.initOpt()
    },
    readonly() {
      this.initOpt()
    },
    max() {
      this.initOpt()
    },
    min() {
      this.initOpt()
    },
    resize() {
      this.initOpt()
    },
    autofocus() {
      this.initOpt()
    },
    label() {
      this.initOpt()
    },
    tabindex() {
      this.initOpt()
    },
    validateEvent() {
      this.initOpt()
    },
    blur() {
      this.initOpt()
    },
    focus() {
      this.initOpt()
    },
    change() {
      this.initOpt()
    },
    input() {
      this.initOpt()
    },
    clear() {
      this.initOpt()
    }
  },
  created() {
    this.initOpt()
  },
  methods: {
    // 初始化代码生成模板
    initOpt() {
      // ---------- 模板 ----------
      // 代码
      this.template = `<el-input v-model="value" @size@ @type@ @name@ @label@ @placeholder@ @maxlength@ @minlength@ @max@ @min@ @showWordLimit@ @clearable@ @showPassword@ @disabled@ @readonly@ @autofocus@ @validateEvent@ @row@ @resize@ @tabindex@ @prefixIcon@ @suffixIcon@ @blur@ @focus@ @change@ @input@ @clear@></el-input>`

      // 数据
      this.data = `{
                    value: '',@disabled@@readonly@
                }`

      // 方法
      this.methods = `{
                @blur@@focus@@change@@input@@clear@
            }`

      // ---------- 模板内容替换 ----------
      if (this.size == '') {
        this.replaceTemplate(' @size@', '')
      } else {
        this.replaceTemplate('@size@', `size="${this.size}"`)
      }

      if (this.type == '') {
        this.replaceTemplate(' @type@', '')
      } else {
        this.replaceTemplate('@type@', `type="${this.type}"`)
      }

      if (this.name == '') {
        this.replaceTemplate(' @name@', '')
      } else {
        this.replaceTemplate('@name@', `name="${this.name}"`)
      }

      if (this.label == '') {
        this.replaceTemplate(' @label@', '')
      } else {
        this.replaceTemplate('@label@', `label="${this.label}"`)
      }

      if (this.placeholder == '') {
        this.replaceTemplate(' @placeholder@', '')
      } else {
        this.replaceTemplate('@placeholder@', `placeholder="${this.placeholder}"`)
      }

      if (this.maxlength == '') {
        this.replaceTemplate(' @maxlength@', '')
      } else {
        this.replaceTemplate('@maxlength@', `:maxlength=${this.maxlength}`)
      }

      if (this.minlength == '') {
        this.replaceTemplate(' @minlength@', '')
      } else {
        this.replaceTemplate('@minlength@', `:minlength=${this.minlength}`)
      }

      if (this.max == '') {
        this.replaceTemplate(' @max@', '')
      } else {
        this.replaceTemplate('@max@', `max="${this.max}"`)
      }

      if (this.min == '') {
        this.replaceTemplate(' @min@', '')
      } else {
        this.replaceTemplate('@min@', `min="${this.min}"`)
      }

      if (this.showWordLimit) {
        this.replaceTemplate('@showWordLimit@', 'show-word-limit')
      } else {
        this.replaceTemplate(' @showWordLimit@', ``)
      }

      if (this.clearable) {
        this.replaceTemplate(' @clearable@', ``)
      } else {
        this.replaceTemplate('@clearable@', ':clearable="false"')
      }

      if (this.showPassword) {
        this.replaceTemplate('@showPassword@', 'show-password')
      } else {
        this.replaceTemplate(' @showPassword@', ``)
      }

      if (this.disabled) {
        this.replaceTemplate('@disabled@', ':disabled="disabledFlag"')
        this.replaceData('@disabled@', '\n\t\tdisabledFlag: true,')
      } else {
        this.replaceTemplate(' @disabled@', ``)
        this.replaceData('@disabled@', '')
      }

      if (this.readonly) {
        this.replaceTemplate('@readonly@', ':readonly="readonlyFlag"')
        this.replaceData('@readonly@', '\n\t\treadonlyFlag: true,')
      } else {
        this.replaceTemplate(' @readonly@', ``)
        this.replaceData('@readonly@', '')
      }

      if (this.autofocus) {
        this.replaceTemplate('@autofocus@', 'autofocus')
      } else {
        this.replaceTemplate(' @autofocus@', ``)
      }

      if (this.validateEvent) {
        this.replaceTemplate(' @validateEvent@', ``)
      } else {
        this.replaceTemplate('@validateEvent@', ':validate-event=false')
      }

      if (this.row == 2 || this.row == '') {
        this.replaceTemplate(' @row@', '')
      } else {
        this.replaceTemplate('@row@', `:row=${this.row}`)
      }

      if (this.resize == '') {
        this.replaceTemplate(' @resize@', '')
      } else {
        this.replaceTemplate('@resize@', `resize="${this.resize}"`)
      }

      if (this.tabindex == '') {
        this.replaceTemplate(' @tabindex@', '')
      } else {
        this.replaceTemplate('@tabindex@', `tabindex="${this.tabindex}"`)
      }

      if (this.prefixIcon == '') {
        this.replaceTemplate(' @prefixIcon@', '')
      } else {
        this.replaceTemplate('@prefixIcon@', `prefix-icon="${this.prefixIcon}"`)
      }

      if (this.suffixIcon == '') {
        this.replaceTemplate(' @suffixIcon@', '')
      } else {
        this.replaceTemplate('@suffixIcon@', `suffix-icon="${this.suffixIcon}"`)
      }

      if (this.blur) {
        this.replaceTemplate('@blur@', `@blur="blurFn"`)
        this.replaceMethods('@blur@', `blurFn() {
                    console.log('失去焦点');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @blur@', ``)
        this.replaceMethods('@blur@', ``)
      }

      if (this.focus) {
        this.replaceTemplate('@focus@', `@focus="focusFn"`)
        this.replaceMethods('@focus@', `focusFn() {
                    console.log('获取焦点');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @focus@', ``)
        this.replaceMethods('@focus@', ``)
      }

      if (this.change) {
        this.replaceTemplate('@change@', `@change="changeFn"`)
        this.replaceMethods('@change@', `changeFn() {
                    console.log('失去焦点/点击回车');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @change@', ``)
        this.replaceMethods('@change@', ``)
      }

      if (this.input) {
        this.replaceTemplate('@input@', `@input="inputFn"`)
        this.replaceMethods('@input@', `inputFn() {
                    console.log('input值改变');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @input@', ``)
        this.replaceMethods('@input@', ``)
      }

      if (this.clear) {
        this.replaceTemplate('@clear@', `@clear="clearFn"`)
        this.replaceMethods('@clear@', `clearFn() {
                    console.log('点击清除');
                },`)
      } else {
        this.replaceTemplate(' @clear@', ``)
        this.replaceMethods('@clear@', ``)
      }
    }
  }
}
</script>
