<template>
  <div style="padding: 0px 10px;">
    <el-form label-position="left" label-width="100px">
      <el-form-item label="类型" prop="type">
        <el-select v-model="type">
          <el-option label="checkbox（默认)" value="checkbox" />
          <el-option label="button（按钮类型）" value="button" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="this.type == 'button'" label="尺寸" prop="size">
        <el-select v-model="size">
          <el-option label="medium（中等）" value="medium" />
          <el-option label="small（小）" value="small" />
          <el-option label="mini（迷你）" value="mini" />
        </el-select>
      </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 v-if="this.type == 'checkbox'" label="边框" prop="border">
        <el-switch v-model="border" />
      </el-form-item>
      <el-form-item label="min" prop="min">
        <el-input v-model="min" placeholder="最小勾选数量" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="max" prop="max">
        <el-input v-model="max" placeholder="最大勾选数量" style="width: 178px;" />
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item v-if="this.type == 'button'" label="选中时的文本颜色" prop="textColor">
        <el-color-picker v-model="textColor" show-alpha size="small" />
      </el-form-item>
      <el-form-item v-if="this.type == 'button'" label="选中时的填充颜色" prop="fill">
        <el-color-picker v-model="fill" show-alpha size="small" />
      </el-form-item>
      <div class="ap-split-line" />
      <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: 'ApDevItemCheckbox',
  extends: ApDevItemBase,
  data() {
    return {
      type: 'checkbox', // 类型
      size: 'medium', // 尺寸
      disabled: false, // 是否禁用
      border: false, // 是否显示边框
      min: '', // 可被勾选的最小数量
      max: '', // 可被勾选的最大数量
      textColor: '#ffffff', // 按钮形式激活时的文本颜色
      fill: '#409EFF', // 按钮形式激活时的填充色和边框色
      change: false // 当绑定值变化时
    }
  },
  watch: {
    type() {
      this.initOpt()
    },
    size() {
      this.initOpt()
    },
    disabled() {
      this.initOpt()
    },
    border() {
      this.initOpt()
    },
    min() {
      this.initOpt()
    },
    max() {
      this.initOpt()
    },
    textColor() {
      this.initOpt()
    },
    fill() {
      this.initOpt()
    },
    change() {
      this.initOpt()
    }
  },
  created() {
    this.initOpt()
  },
  methods: {
    initOpt() {
      this.template = `<el-checkbox-group v-model="check" @size@ @disabled@ @min@ @max@ @textColor@ @fill@ @change@>
            @html@
        </el-checkbox-group>`

      this.data = `{
                    check: ['复选框A', '复选框B'],@disabled@
                }`

      this.methods = `{
                @change@
            }`

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

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

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

      if (this.type == 'checkbox') {
        let str = `<el-checkbox label="复选框A" @border@></el-checkbox>
            <el-checkbox label="复选框B" @border@></el-checkbox>
            <el-checkbox label="复选框C" @border@></el-checkbox>`
        if (this.border) {
          str = str.replaceAll('@border@', 'border')
        } else {
          str = str.replaceAll(' @border@', '')
        }
        this.replaceTemplate('@html@', str)
        this.replaceTemplate(' @textColor@', '')
        this.replaceTemplate(' @fill@', '')
        this.replaceTemplate(' @size@', '')
      } else if (this.type == 'button') {
        const str = `<el-checkbox-button label="复选框A"></el-checkbox-button>
            <el-checkbox-button label="复选框B"></el-checkbox-button>
            <el-checkbox-button label="复选框C"></el-checkbox-button>`
        this.replaceTemplate('@html@', str)
        this.replaceTemplate('@textColor@', `text-color="${this.textColor}"`)
        this.replaceTemplate('@fill@', `fill="${this.fill}"`)
        if (this.size == '') {
          this.replaceTemplate(' @size@', '')
        } else {
          this.replaceTemplate('@size@', `size="${this.size}"`)
        }
      }

      if (this.change) {
        this.replaceTemplate('@change@', `@change="changeFn"`)
        this.replaceMethods('@change@', `changeFn() {
                    console.log('绑定值变化');
                }`)
      } else {
        this.replaceTemplate(' @change@', ``)
        this.replaceMethods('@change@', ``)
      }
    }
  }
}
</script>
