<template>
  <div style="padding: 0px 10px;">
    <el-form label-position="left" label-width="100px">
      <el-form-item 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="默认" value="" />
          <el-option label="primary（主要）" value="primary" />
          <el-option label="success（成功）" value="success" />
          <el-option label="warning（警告）" value="warning" />
          <el-option label="danger（危险）" value="danger" />
          <el-option label="info（信息）" value="info" />
          <el-option label="text（文字）" value="text" />
        </el-select>
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item label="朴素按钮" prop="plain">
        <el-switch v-model="plain" />
      </el-form-item>
      <el-form-item label="圆角按钮" prop="round">
        <el-switch v-model="round" />
      </el-form-item>
      <el-form-item label="圆形按钮" prop="circle">
        <el-switch v-model="circle" />
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item label="加载中状态" prop="loading">
        <el-switch v-model="loading" />
      </el-form-item>
      <el-form-item label="禁用" prop="disabled">
        <el-switch v-model="disabled" />
      </el-form-item>
      <el-form-item label="聚焦" prop="autofocus">
        <el-switch v-model="autofocus" />
      </el-form-item>
      <el-form-item label="图标代码" prop="icon">
        <el-input v-model="icon" placeholder="例：el-icon-delete" style="width: 178px;" />
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item label="click事件" prop="click">
        <el-switch v-model="click" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ApDevItemBase from './ApDevItemBase'

export default {
  name: 'ApDevItemButton',
  extends: ApDevItemBase,
  data() {
    return {
      size: '', // 尺寸
      type: '', // 类型
      plain: false, // 是否朴素按钮
      round: false, // 是否圆角按钮
      circle: false, // 是否圆形按钮
      loading: false, // 是否加载中状态
      disabled: false, // 是否禁用状态
      autofocus: false, // 是否默认聚焦
      icon: '', // 图标类名
      click: false // 点击事件
    }
  },
  // 监听每个属性的变化，对生成的模板进行修改
  watch: {
    size() {
      this.initOpt()
    },
    type() {
      this.initOpt()
    },
    plain() {
      this.initOpt()
    },
    round() {
      this.initOpt()
    },
    circle() {
      this.initOpt()
    },
    loading() {
      this.initOpt()
    },
    disabled() {
      this.initOpt()
    },
    autofocus() {
      this.initOpt()
    },
    icon() {
      this.initOpt()
    },
    click() {
      this.initOpt()
    }
  },
  created() {
    this.initOpt()
  },
  methods: {
    // 初始化代码生成模板
    initOpt() {
      // ---------- 模板 ----------
      // 代码
      this.template = `<el-button @size@ @type@ @plain@ @round@ @circle@ @loading@ @disabled@ @autofocus@ @icon@ @click@>按钮</el-button>`

      // 数据
      this.data = `{
                    @loading@@disabled@@autofocus@
                }`

      // 方法
      this.methods = `{
                @click@
            }`

      // ---------- 模板内容替换 ----------
      // 尺寸
      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.plain) {
        this.replaceTemplate('@plain@', 'plain')
      } else {
        this.replaceTemplate(' @plain@', '')
      }

      // 是否圆角按钮
      if (this.round) {
        this.replaceTemplate('@round@', 'round')
      } else {
        this.replaceTemplate(' @round@', '')
      }

      // 是否圆形按钮
      if (this.circle) {
        this.replaceTemplate('@circle@', 'circle')
      } else {
        this.replaceTemplate(' @circle@', '')
      }

      // 是否加载中状态
      if (this.loading) {
        this.replaceTemplate('@loading@', ':loading="loadingFlag"')
        if (this.disabled || this.autofocus) {
          this.replaceData('@loading@', 'loadingFlag: true,\n\t\t')
        } else {
          this.replaceData('@loading@', 'loadingFlag: true,')
        }
      } else {
        this.replaceTemplate(' @loading@', '')
        this.replaceData('@loading@', '')
      }

      // 是否禁用状态
      if (this.disabled) {
        this.replaceTemplate('@disabled@', ':disabled="disabledFlag"')
        if (this.autofocus) {
          this.replaceData('@disabled@', 'disabledFlag: true,\n\t\t')
        } else {
          this.replaceData('@disabled@', 'disabledFlag: true,')
        }
      } else {
        this.replaceTemplate(' @disabled@', '')
        this.replaceData('@disabled@', '')
      }

      // 是否默认聚焦
      if (this.autofocus) {
        this.replaceTemplate('@autofocus@', ':autofocus="autofocusFlag"')
        this.replaceData('@autofocus@', 'autofocusFlag: true,')
      } else {
        this.replaceTemplate(' @autofocus@', '')
        this.replaceData('@autofocus@', '')
      }

      // 图标类名
      if (this.icon == '') {
        this.replaceTemplate(' @icon@', '')
      } else {
        this.replaceTemplate('@icon@', `icon="${this.icon}"`)
      }

      if (this.click) {
        this.replaceTemplate('@click@', `@click="clickFn"`)
        this.replaceMethods('@click@', `clickFn() {
                    console.log('点击按钮');
                }`)
      } else {
        this.replaceTemplate(' @click@', ``)
        this.replaceMethods('@click@', ``)
      }
    }
  }
}
</script>
