<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="宽度" prop="width">
        <el-input v-model="width" placeholder="width" style="width: 178px;" />
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item label="打开时图标" prop="activeIcon">
        <el-input v-model="activeIcon" placeholder="打开时所显示图标的类名" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="关闭时图标" prop="inactiveIcon">
        <el-input v-model="inactiveIcon" placeholder="关闭时所显示图标的类名" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="打开时文字" prop="activeText">
        <el-input v-model="activeText" placeholder="打开时的文字描述" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="关闭时文字" prop="inactiveText">
        <el-input v-model="inactiveText" placeholder="关闭时的文字描述" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="打开时的值" prop="activeValue">
        <el-input v-model="activeValue" placeholder="打开时的值" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="关闭时的值" prop="inactiveValue">
        <el-input v-model="inactiveValue" placeholder="关闭时的值" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="打开时背景色" prop="activeColor">
        <el-input v-model="activeColor" placeholder="打开时的背景色" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="关闭时背景色" prop="inactiveColor">
        <el-input v-model="inactiveColor" placeholder="关闭时的背景色" style="width: 178px;" />
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item label="禁用" prop="disabled">
        <el-switch v-model="disabled" />
      </el-form-item>
      <el-form-item label="触发表单校验" prop="validateEvent">
        <el-switch v-model="validateEvent" />
      </el-form-item>
      <div class="ap-split-line" />
      <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: 'ApDevItemSwitch',
  extends: ApDevItemBase,
  data() {
    return {
      name: '', // name属性
      width: '40', // 宽度
      disabled: false, // 是否禁用
      activeIcon: '', // 打开时所显示图标的类名，设置此项会忽略active-text
      inactiveIcon: '', // 关闭时所显示图标的类名，设置此项会忽略inactive-text
      activeText: '', // 打开时的文字描述
      inactiveText: '', // 关闭时的文字描述
      activeValue: 'true', // 打开时的值
      inactiveValue: 'false', // 关闭时的值
      activeColor: '#409EFF', // 打开时的背景色
      inactiveColor: '#C0CCDA', // 关闭时的背景色
      validateEvent: true, // 改变状态时是否触发表单的校验
      focus: false, // focus事件
      change: false // change事件
    }
  },
  // 监听每个属性的变化，对生成的模板进行修改
  watch: {
    name() {
      this.initOpt()
    },
    width() {
      this.initOpt()
    },
    disabled() {
      this.initOpt()
    },
    activeIcon() {
      this.initOpt()
    },
    inactiveIcon() {
      this.initOpt()
    },
    activeText() {
      this.initOpt()
    },
    inactiveText() {
      this.initOpt()
    },
    activeValue() {
      this.initOpt()
    },
    inactiveValue() {
      this.initOpt()
    },
    activeColor() {
      this.initOpt()
    },
    inactiveColor() {
      this.initOpt()
    },
    validateEvent() {
      this.initOpt()
    },
    focus() {
      this.initOpt()
    },
    change() {
      this.initOpt()
    }
  },
  created() {
    this.initOpt()
  },
  methods: {
    // 初始化代码生成模板
    initOpt() {
      // ---------- 模板 ----------
      // 代码
      this.template = `<el-switch v-model="value" @name@ @width@ @disabled@ @activeIcon@ @inactiveIcon@ @activeText@ @inactiveText@ @activeValue@ @inactiveValue@ @activeColor@ @inactiveColor@ @validateEvent@ @change@ @focus@></el-switch>`

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

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

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

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

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

      if (this.activeIcon == '') {
        this.replaceTemplate(' @activeIcon@', '')
      } else {
        this.replaceTemplate('@activeIcon@', `active-icon-class="${this.activeIcon}"`)
      }

      if (this.inactiveIcon == '') {
        this.replaceTemplate(' @inactiveIcon@', '')
      } else {
        this.replaceTemplate('@inactiveIcon@', `inactive-icon-class="${this.inactiveIcon}"`)
      }

      if (this.activeText == '') {
        this.replaceTemplate(' @activeText@', '')
      } else {
        this.replaceTemplate('@activeText@', `active-text="${this.activeText}"`)
      }

      if (this.inactiveText == '') {
        this.replaceTemplate(' @inactiveText@', '')
      } else {
        this.replaceTemplate('@inactiveText@', `inactive-text="${this.inactiveText}"`)
      }

      if (this.activeValue == '' || this.activeValue == 'true') {
        this.replaceTemplate(' @activeValue@', '')
      } else {
        this.replaceTemplate('@activeValue@', `active-value="${this.activeValue}"`)
      }

      if (this.inactiveValue == '' || this.inactiveValue == 'false') {
        this.replaceTemplate(' @inactiveValue@', '')
      } else {
        this.replaceTemplate('@inactiveValue@', `inactive-value="${this.inactiveValue}"`)
      }

      if (this.activeColor == '' || this.activeColor == '#409EFF') {
        this.replaceTemplate(' @activeColor@', '')
      } else {
        this.replaceTemplate('@activeColor@', `active-color="${this.activeColor}"`)
      }

      if (this.inactiveColor == '' || this.inactiveColor == '#C0CCDA') {
        this.replaceTemplate(' @inactiveColor@', '')
      } else {
        this.replaceTemplate('@inactiveColor@', `inactive-color="${this.inactiveColor}"`)
      }

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

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

      if (this.change) {
        this.replaceTemplate('@change@', `@change="changeFn"`)
        this.replaceMethods('@change@', `changeFn() {
                    console.log('switch 状态发生变化');
                }`)
      } else {
        this.replaceTemplate(' @change@', ``)
        this.replaceMethods('@change@', ``)
      }
    }
  }
}
</script>
