<template>
  <div style="padding: 0px 10px;">
    <el-form label-position="left" :rules="rules" label-width="100px">
      <el-form-item label="类型" prop="type">
        <el-select v-model="type">
          <el-option label="slect（选择器）" value="select" />
          <el-option label="cascader（级联选择器）" value="cascader" />
        </el-select>
      </el-form-item>
      <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>
      <div class="ap-split-line" />
      <el-form-item label="多选" prop="multiple">
        <el-switch v-model="multiple" />
      </el-form-item>
      <el-form-item label="禁用" prop="disabled">
        <el-switch v-model="disabled" />
      </el-form-item>
      <el-form-item label="搜索" prop="filterable">
        <el-switch v-model="filterable" />
      </el-form-item>
      <el-form-item label="显示清空" prop="clearable">
        <el-switch v-model="clearable" />
      </el-form-item>
      <el-form-item label="折叠tag" prop="tags">
        <el-switch v-model="tags" />
      </el-form-item>
      <el-form-item v-if="this.type == 'select'" label="可选择数" prop="limit">
        <el-input-number v-model="limit" placeholder="可选择数" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="placeholder" prop="placeholder">
        <el-input v-model="placeholder" placeholder="占位文本" style="width: 178px;" />
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item v-if="this.type == 'cascader'" label="展开方式" prop="expandTrigger">
        <el-select v-model="expandTrigger">
          <el-option label="click（点击）" value="click" />
          <el-option label="hover（悬浮）" value="hover" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="this.type == 'cascader'" label="选项分隔符" prop="separator">
        <el-input v-model="separator" placeholder="默认值为/" style="width: 178px;" />
      </el-form-item>
      <el-form-item v-if="this.type == 'cascader'" label="显示完整层级" prop="showAllLevels">
        <el-switch v-model="showAllLevels" />
      </el-form-item>
      <el-form-item v-if="this.type == 'cascader'" label="选择任意一级选项" prop="checkStrictly">
        <el-switch v-model="checkStrictly" />
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item label="blur事件" prop="blur">
        <el-switch v-model="blur" />
      </el-form-item>
      <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-item label="clear事件" prop="clear">
        <el-switch v-model="clear" />
      </el-form-item>
      <el-form-item label="下拉框出现/隐藏时" prop="visibleChange">
        <el-switch v-model="visibleChange" />
      </el-form-item>
      <el-form-item label="多选模式移除tag时" prop="removeTag">
        <el-switch v-model="removeTag" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ApDevItemBase from './ApDevItemBase'

export default {
  name: 'ApDevItemSelect',
  extends: ApDevItemBase,
  data() {
    return {
      size: '', // 尺寸
      type: 'select', // 类型
      multiple: false, // 是否多选
      disabled: false, // 是否禁用
      filterable: false, // 是否可搜索
      clearable: false, // 是否可以清空选项
      tags: false, // 多选时是否将选中值按文字的形式展示
      limit: '', // 多选时用户最多可以选择的项目数，为 0 则不限制
      placeholder: '请选择', // 占位文本
      expandTrigger: 'click', // 次级菜单的展开方式
      separator: '/', // 选项分隔符
      showAllLevels: true, // 输入框中是否显示选中值的完整路径
      checkStrictly: false, // 是否严格的遵守父子节点不互相关联
      blur: false, // 失去焦点
      focus: false, // 获取焦点
      change: false, // 选中值发生变化
      clear: false, // 点击清除
      visibleChange: false, // 下拉框出现/隐藏时触发
      removeTag: false, // 多选模式下移除tag时触发
      rules: {}
    }
  },
  watch: {
    size() {
      this.initOpt()
    },
    type() {
      this.initOpt()
    },
    multiple() {
      this.initOpt()
    },
    disabled() {
      this.initOpt()
    },
    clearable() {
      this.initOpt()
    },
    tags() {
      this.initOpt()
    },
    limit() {
      this.initOpt()
    },
    placeholder() {
      this.initOpt()
    },
    filterable() {
      this.initOpt()
    },
    expandTrigger() {
      this.initOpt()
    },
    separator() {
      this.initOpt()
    },
    showAllLevels() {
      this.initOpt()
    },
    checkStrictly() {
      this.initOpt()
    },
    blur() {
      this.initOpt()
    },
    focus() {
      this.initOpt()
    },
    change() {
      this.initOpt()
    },
    clear() {
      this.initOpt()
    },
    visibleChange() {
      this.initOpt()
    },
    removeTag() {
      this.initOpt()
    }
  },
  created() {
    this.initOpt()
  },
  methods: {
    initOpt() {
      this.template = `<@type@ v-model="value" @cascader@ @size@ @multiple@ @disabled@ @filterable@ @clearable@ @tags@ @limit@ @placeholder@ @separator@ @showAllLevels@ @propsStart@ @expandTrigger@ @checkStrictly@ @propsEnd@ @change@ @clear@ @blur@ @focus@ @visibleChange@ @removeTag@>@option@</@type@>`

      this.data = `{
                    value: '',
                    dataList: [{
                        value: 'zhinan',
                        label: '指南',
                        disabled: false,
                        children: [{
                            value: 'shejiyuanze',
                            label: '设计原则',
                            children: [{
                                value: 'yizhi',
                                label: '一致'
                            }]
                        }]
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }],
                    @multiple@@disabled@
                }`

      this.methods = `{
                @clear@@blur@@focus@@change@
            }`

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

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

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

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

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

      if (this.tags) {
        this.replaceTemplate('@tags@', ':collapse-tags="true"')
      } else {
        this.replaceTemplate(' @tags@', '')
      }

      this.replaceTemplate('@placeholder@', `placeholder="${this.placeholder}"`)

      if (this.type == 'select') {
        if (this.limit == '' || this.limit == '0') {
          this.replaceTemplate(' @limit@', '')
        } else {
          this.replaceTemplate('@limit@', `:multiple-limit=${this.limit}`)
        }
        this.replaceTemplate('@type@', 'el-select')
        this.replaceTemplate('@option@', '\n\t<el-option v-for="item in dataList" :key="item.value" :label="item.label" :value="item.value"></el-option>\n')
        this.replaceTemplate(' @cascader@', '')
        this.replaceTemplate(' @propsStart@', '')
        this.replaceTemplate(' @propsEnd@', '')
        this.replaceTemplate(' @separator@', '')
        this.replaceTemplate(' @showAllLevels@', '')
        this.replaceTemplate(' @expandTrigger@', '')
        this.replaceTemplate(' @checkStrictly@', '')
      } else {
        this.replaceTemplate('@type@', 'el-cascader')
        this.replaceTemplate('@option@', '')
        this.replaceTemplate('@cascader@', ':key="dataList.value" :options="dataList"')
        this.replaceTemplate(' @limit@', '')
        this.replaceTemplate('@propsStart@', ':props="{')
        this.replaceTemplate('@propsEnd@', '}"')
        if (this.separator == '/') {
          this.replaceTemplate(' @separator@', '')
        } else {
          this.replaceTemplate('@separator@', `separator="${this.separator}"`)
        }
        if (this.showAllLevels) {
          this.replaceTemplate(' @showAllLevels@', '')
        } else {
          this.replaceTemplate('@showAllLevels@', ':show-all-levels="false"')
        }
        if (this.expandTrigger == 'click') {
          this.replaceTemplate('@expandTrigger@', 'expandTrigger: \'click\',')
        } else {
          this.replaceTemplate('@expandTrigger@', 'expandTrigger: \'hover\',')
        }
        if (this.checkStrictly) {
          this.replaceTemplate('@checkStrictly@', ':checkStrictly="true"')
        } else {
          this.replaceTemplate(' @checkStrictly@', '')
        }
      }

      if (this.blur) {
        this.replaceTemplate('@blur@', `@blur="blurFn"`)
        this.replaceMethods('@blur@', `blurFn() {
                    console.log('失去焦点');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @blur@', ``)
        this.replaceMethods('@blur@', ``)
      }

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

      if (this.change) {
        this.replaceTemplate('@change@', `@change="changeFn"`)
        this.replaceMethods('@change@', `changeFn() {
                    console.log('选中值发生变化');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @change@', ``)
        this.replaceMethods('@change@', ``)
      }

      if (this.clear) {
        this.replaceTemplate('@clear@', `@clear="clearFn"`)
        this.replaceMethods('@clear@', `clearFn() {
                    console.log('点击清除');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @clear@', ``)
        this.replaceMethods('@clear@', ``)
      }

      if (this.visibleChange) {
        this.replaceTemplate('@visibleChange@', `@visible-change="visibleChangeFn"`)
        this.replaceMethods('@visibleChange@', `visibleChangeFn() {
                    console.log('下拉框出现/隐藏');
                },\n\t\t`)
      } else {
        this.replaceTemplate(' @visibleChange@', ``)
        this.replaceMethods('@visibleChange@', ``)
      }

      if (this.removeTag) {
        this.replaceTemplate('@removeTag@', `@remove-tag="removeTagFn"`)
        this.replaceMethods('@removeTag@', `removeTagFn() {
                    console.log('多选模式移除tag');
                },`)
      } else {
        this.replaceTemplate(' @removeTag@', ``)
        this.replaceMethods('@removeTag@', ``)
      }
    }
  }
}
</script>
