<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="radio（默认)" value="radio" />
          <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 == 'radio'" label="边框" prop="border">
        <el-switch v-model="border" />
      </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: 'ApDevItemRadio',
  extends: ApDevItemBase,
  data() {
    return {
      type: 'radio', // 类型
      size: 'medium', // 尺寸
      disabled: false, // 是否禁用
      border: false, // 是否显示边框
      textColor: '#fff', // 按钮形式激活时的文本颜色
      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-radio-group v-model="radio" @disabled@ @textColor@ @fill@ @change@>
            @html@
        </el-radio-group>`

      this.data = `{
                    radio: '单选框A',@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.type == 'radio') {
        const str = `<el-radio label="单选框A" @border@></el-radio>
            <el-radio label="单选框B" @border@></el-radio>
            <el-radio label="单选框C" @border@></el-radio>`
        this.replaceTemplate('@html@', str)
        this.replaceTemplate(' @textColor@', '')
        this.replaceTemplate(' @fill@', '')
        this.replaceTemplate(' @size@', '')
        if (this.border) {
          this.replaceTemplate('@border@', 'border')
        } else {
          this.replaceTemplate(' @border@', '')
        }
      } else if (this.type == 'button') {
        const str = `<el-radio-button label="单选框A"></el-radio-button>
            <el-radio-button label="单选框B"></el-radio-button>
            <el-radio-button label="单选框C"></el-radio-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>
