<template>
  <div style="padding: 0px 10px;">
    <el-form label-position="left" label-width="100px">
      <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 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>
      <el-form-item label="数值精度" prop="precision">
        <el-input-number v-model="precision" placeholder="数值精度" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="计数器步长" prop="step">
        <el-input-number v-model="step" placeholder="计数器步长" style="width: 178px;" />
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item label="只能输入步长的倍数" prop="stepStrictly">
        <el-switch v-model="stepStrictly" />
      </el-form-item>
      <el-form-item label="禁用" prop="disabled">
        <el-switch v-model="disabled" />
      </el-form-item>
      <el-form-item label="使用控制按钮" prop="controls">
        <el-switch v-model="controls" />
      </el-form-item>
      <el-form-item v-if="controls == true" label="控制按钮位置" prop="controlsPosition">
        <el-select v-model="controlsPosition">
          <el-option label="right（右边）" value="right" />
        </el-select>
      </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>
  </div>
</template>

<script>
import ApDevItemBase from './ApDevItemBase'

export default {
  name: 'ApDevItemInputNumber',
  extends: ApDevItemBase,
  data() {
    return {
      name: '', // name
      label: '', // 输入框关联的label文字
      placeholder: '请输入内容', // 占位文本
      max: 'Infinity', // 最大值
      min: '-Infinity', // 最小值
      precision: '', // 数值精度
      step: 1, // 计数器步长
      stepStrictly: false, // 是否只能输入 step 的倍数
      disabled: false, // 是否禁用
      controls: true, // 是否使用控制按钮
      controlsPosition: '', // 控制按钮位置
      blur: false, // 失去焦点
      focus: false, // 获取焦点
      change: false // 失去焦点/点击回车
    }
  },
  // 监听每个属性的变化，对生成的模板进行修改
  watch: {
    size() {
      this.initOpt()
    },
    type() {
      this.initOpt()
    },
    name() {
      this.initOpt()
    },
    label() {
      this.initOpt()
    },
    placeholder() {
      this.initOpt()
    },
    max() {
      this.initOpt()
    },
    min() {
      this.initOpt()
    },
    precision() {
      this.initOpt()
    },
    step() {
      this.initOpt()
    },
    stepStrictly() {
      this.initOpt()
    },
    disabled() {
      this.initOpt()
    },
    controls() {
      this.initOpt()
    },
    controlsPosition() {
      this.initOpt()
    },
    blur() {
      this.initOpt()
    },
    focus() {
      this.initOpt()
    },
    change() {
      this.initOpt()
    }
  },
  created() {
    this.initOpt()
  },
  methods: {
    // 初始化代码生成模板
    initOpt() {
      // ---------- 模板 ----------
      // 代码
      this.template = `<el-input-number v-model="value" @max@ @min@ @precision@ @step@ @stepStrictly@ @disabled@ @controls@ @controlsPosition@ @change@ @blur@ @focus@></el-input-number>`

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

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

      // ---------- 模板内容替换 ----------
      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.max == 'Infinity') {
        this.replaceTemplate(' @max@', '')
      } else {
        this.replaceTemplate('@max@', `:max=${this.max}`)
      }

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

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

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

      if (this.stepStrictly) {
        this.replaceTemplate('@stepStrictly@', 'step-strictly')
      } else {
        this.replaceTemplate(' @stepStrictly@', ``)
      }

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

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

      if (this.controlsPosition == '') {
        this.replaceTemplate(' @controlsPosition@', '')
      } else {
        this.replaceTemplate('@controlsPosition@', `controls-position="${this.controlsPosition}"`)
      }

      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@', ``)
      }
    }
  }
}
</script>
