<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="labelPosition">
        <el-select v-model="labelPosition">
          <el-option label="right（右边）" value="right" />
          <el-option label="left（左边）" value="left" />
          <el-option label="top（上方）" value="top" />
        </el-select>
      </el-form-item>
      <el-form-item label="标签的宽度" prop="labelWidth">
        <el-input v-model="labelWidth" placeholder="标签的宽度" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="标签的后缀" prop="labelSuffix">
        <el-input v-model="labelSuffix" placeholder="标签的后缀" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="禁用" prop="disabled">
        <el-switch v-model="disabled" />
      </el-form-item>
      <el-form-item label="行内表单模式" prop="inline">
        <el-switch v-model="inline" />
      </el-form-item>
      <el-form-item label="不显示必填红色星号" prop="required">
        <el-switch v-model="required" />
      </el-form-item>
      <el-form-item label="显示校验信息" prop="showMessage">
        <el-switch v-model="showMessage" />
      </el-form-item>
      <el-form-item label="行内校验信息" prop="inlineMessage">
        <el-switch v-model="inlineMessage" />
      </el-form-item>
      <el-form-item label="校验结果图标" prop="statusIcon">
        <el-switch v-model="statusIcon" />
      </el-form-item>
      <el-form-item label="rules改变后立即触发一次验证" prop="ruleChange">
        <el-switch v-model="ruleChange" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ApDevItemBase from './ApDevItemBase'

export default {
  name: 'ApDevItemForm',
  extends: ApDevItemBase,
  data() {
    return {
      size: '', // 尺寸
      inline: false, // 行内表单模式
      labelPosition: 'right', // 标签的位置
      labelWidth: '80px', // 标签的宽度
      labelSuffix: '', // 标签的后缀
      required: false, // 是否显示必填字段的标签旁边的红色星号
      showMessage: true, // 是否显示校验错误信息
      inlineMessage: false, // 是否以行内形式展示校验信息
      statusIcon: false, // 是否在输入框中显示校验结果反馈图标
      ruleChange: true, // 是否在rules属性改变后立即触发一次验证
      disabled: false // 是否禁用
    }
  },
  // 监听每个属性的变化，对生成的模板进行修改
  watch: {
    size() {
      this.initOpt()
    },
    inline() {
      this.initOpt()
    },
    labelPosition() {
      this.initOpt()
    },
    labelWidth() {
      this.initOpt()
    },
    labelSuffix() {
      this.initOpt()
    },
    required() {
      this.initOpt()
    },
    showMessage() {
      this.initOpt()
    },
    inlineMessage() {
      this.initOpt()
    },
    statusIcon() {
      this.initOpt()
    },
    ruleChange() {
      this.initOpt()
    },
    disabled() {
      this.initOpt()
    }
  },
  created() {
    this.initOpt()
  },
  methods: {
    // 初始化代码生成模板
    initOpt() {
      // ---------- 模板 ----------
      // 代码
      this.template = `<el-form ref="ruleForm" :model="ruleForm" :rules="rules" @size@ @inline@ @labelPosition@ @labelWidth@ @labelSuffix@ @required@ @showMessage@ @inlineMessage@ @statusIcon@ @ruleChange@ @disabled@>
            @html@
        </el-form>`

      // 数据
      this.data = `{
                    @labelPosition@@disabled@
                    ruleForm: {
                        name: '',
                        region: '',
                        date1: '',
                        date2: '',
                        delivery: false,
                        type: [],
                        resource: '',
                        desc: ''
                    },
                    rules: {
                        name: [
                            { required: true, message: '请输入活动名称', trigger: 'blur' },
                            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                        ],
                        region: [
                            { required: true, message: '请选择活动区域', trigger: 'change' }
                        ],
                        date1: [
                            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                        ],
                        date2: [
                            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                        ],
                        type: [
                            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                        ],
                        resource: [
                            { required: true, message: '请选择活动资源', trigger: 'change' }
                        ],
                        desc: [
                            { required: true, message: '请填写活动形式', trigger: 'blur' }
                        ]
                    }
                }`

      // 方法
      this.methods = `{
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                }
            }`

      // ---------- 模板内容替换 ----------
      const str = `<el-form-item label="活动名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" prop="region">
                <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动时间" required>
                <el-col :span="11">
                <el-form-item prop="date1">
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                <el-form-item prop="date2">
                    <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="即时配送" prop="delivery">
                <el-switch v-model="ruleForm.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质" prop="type">
                <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊资源" prop="resource">
                <el-radio-group v-model="ruleForm.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式" prop="desc">
                <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>`
      this.replaceTemplate('@html@', str)

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

      if (this.inline) {
        this.replaceTemplate('@inline@', 'inline')
      } else {
        this.replaceTemplate(' @inline@', ``)
      }

      if (this.labelPosition == 'right' || this.labelPosition == '') {
        this.replaceTemplate(' @labelPosition@', '')
        this.replaceData('@labelPosition@', `labelPosition: 'right',`)
      } else {
        this.replaceTemplate('@labelPosition@', ':label-position="labelPosition"')
        this.replaceData('@labelPosition@', `labelPosition: '${this.labelPosition}',`)
      }

      if (this.labelWidth == '') {
        this.replaceTemplate(' @labelWidth@', '')
      } else {
        this.replaceTemplate('@labelWidth@', `label-width="${this.labelWidth}"`)
      }

      if (this.labelSuffix == '') {
        this.replaceTemplate(' @labelSuffix@', '')
      } else {
        this.replaceTemplate('@labelSuffix@', `label-suffix="${this.labelSuffix}"`)
      }

      if (this.required) {
        this.replaceTemplate('@required@', 'hide-required-asterisk')
      } else {
        this.replaceTemplate(' @required@', '')
      }

      if (this.showMessage) {
        this.replaceTemplate(' @showMessage@', ``)
      } else {
        this.replaceTemplate('@showMessage@', ':show-message="false"')
      }

      if (this.inlineMessage) {
        this.replaceTemplate('@inlineMessage@', ':inline-message="true"')
      } else {
        this.replaceTemplate(' @inlineMessage@', ``)
      }
      if (this.statusIcon) {
        this.replaceTemplate('@statusIcon@', ':status-icon="true"')
      } else {
        this.replaceTemplate(' @statusIcon@', ``)
      }
      if (this.ruleChange) {
        this.replaceTemplate(' @ruleChange@', ``)
      } else {
        this.replaceTemplate('@ruleChange@', ':validate-on-rule-change="false"')
      }

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