<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="date（默认）" value="date" />
          <el-option label="time（时间）" value="time" />
          <el-option label="year（年）" value="year" />
          <el-option label="month（月）" value="month" />
          <el-option label="week（周）" value="week" />
          <el-option label="dates（多选）" value="dates" />
          <el-option label="daterange（日期范围）" value="daterange" />
          <el-option label="monthrange（月份范围）" value="monthrange" />
          <el-option label="datetime（年月日时分秒）" value="datetime" />
          <el-option label="datetimerange（年月日时分秒范围）" value="datetimerange" />
        </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="readonly">
        <el-switch v-model="readonly" />
      </el-form-item>
      <el-form-item label="禁用" prop="disabled">
        <el-switch v-model="disabled" />
      </el-form-item>
      <el-form-item label="可输入" prop="editable">
        <el-switch v-model="editable" />
      </el-form-item>
      <el-form-item label="显示清空" prop="clearable">
        <el-switch v-model="clearable" />
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item v-if="this.type == 'date' || this.type == 'year' || this.type == 'month' || this.type == 'week' || this.type == 'dates' || this.type == 'datetime' || this.type == 'time' && this.isRange == false" label="占位符" prop="placeholder">
        <el-input v-model="placeholder" placeholder="占位文本" style="width: 178px;" />
      </el-form-item>
      <el-form-item v-if="this.type == 'daterange' || this.type == 'monthrange' || this.type == 'datetimerange' || this.isRange == true" label="开始占位符" prop="startPlaceholder">
        <el-input v-model="startPlaceholder" placeholder="占位文本" style="width: 178px;" />
      </el-form-item>
      <el-form-item v-if="this.type == 'daterange' || this.type == 'monthrange' || this.type == 'datetimerange' || this.isRange == true" label="结束占位符" prop="endPlaceholder">
        <el-input v-model="endPlaceholder" placeholder="占位文本" style="width: 178px;" />
      </el-form-item>
      <el-form-item v-if="this.type == 'daterange' || this.type == 'monthrange' || this.type == 'datetimerange' || this.isRange == true" label="分隔符" prop="rangeSeparator">
        <el-input v-model="rangeSeparator" placeholder="分隔符" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="对齐方式" prop="align">
        <el-select v-model="align">
          <el-option label="left" value="left" />
          <el-option label="center" value="center " />
          <el-option label="right" value="right" />
        </el-select>
      </el-form-item>
      <el-form-item label="头部图标" prop="prefixIcon">
        <el-input v-model="prefixIcon" placeholder="例：el-icon-time" style="width: 178px;" />
      </el-form-item>
      <el-form-item label="清空图标" prop="clearIcon">
        <el-input v-model="clearIcon" placeholder="例：el-icon-circle-close" style="width: 178px;" />
      </el-form-item>
      <div class="ap-split-line" />
      <el-form-item v-if="this.type == 'time'" label="时间范围" prop="isRange">
        <el-switch v-model="isRange" />
      </el-form-item>
      <el-form-item v-if="this.type == 'time'" label="箭头选择" prop="arrowControl">
        <el-switch v-model="arrowControl" />
      </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>
  </div>
</template>

<script>
import ApDevItemBase from './ApDevItemBase'

export default {
  name: 'ApDevItemDateTime',
  extends: ApDevItemBase,
  data() {
    return {
      size: '', // 尺寸
      type: 'date', // 类型
      readonly: false, // 只读
      disabled: false, // 禁用
      editable: true, // 文本框可输入
      clearable: true, // 是否显示清除按钮
      placeholder: '请选择', // 占位内容
      startPlaceholder: '开始日期', // 范围选择时开始日期的占位内容
      endPlaceholder: '结束日期', // 范围选择时结束日期的占位内容
      isRange: false, // 	是否为时间范围选择，仅对<el-time-picker>有效
      arrowControl: false, // 是否使用箭头进行时间选择，仅对<el-time-picker>有效
      align: 'left', // 对齐方式
      rangeSeparator: '-', // 选择范围时的分隔符
      prefixIcon: 'el-icon-time', // 自定义头部图标的类名
      clearIcon: 'el-icon-circle-close', // 自定义清空图标的类名
      blur: false, // 失去焦点
      focus: false, // 获取焦点
      change: false // 用户确认选定的值时
    }
  },
  watch: {
    size() {
      this.initOpt()
    },
    type() {
      this.initOpt()
    },
    readonly() {
      this.initOpt()
    },
    disabled() {
      this.initOpt()
    },
    editable() {
      this.initOpt()
    },
    clearable() {
      this.initOpt()
    },
    placeholder() {
      this.initOpt()
    },
    startPlaceholder() {
      this.initOpt()
    },
    endPlaceholder() {
      this.initOpt()
    },
    isRange() {
      this.initOpt()
    },
    arrowControl() {
      this.initOpt()
    },
    align() {
      this.initOpt()
    },
    rangeSeparator() {
      this.initOpt()
    },
    prefixIcon() {
      this.initOpt()
    },
    clearIcon() {
      this.initOpt()
    },
    blur() {
      this.initOpt()
    },
    focus() {
      this.initOpt()
    },
    change() {
      this.initOpt()
    }
  },
  created() {
    this.initOpt()
  },
  methods: {
    initOpt() {
      this.template = `<@typeBox@ v-model="value" @type@ @readonly@ @disabled@ @editable@ @clearable@ @placeholder@ @startPlaceholder@ @endPlaceholder@ @isRange@ @arrowControl@ @align@ @rangeSeparator@ @prefixIcon@ @clearIcon@ @change@ @blur@ @focus@></@typeBox@>`
      this.data = `{
                    value: '',
                    @readonly@@disabled@@editable@ @clearable@@isRange@@arrowControl@
                }`
      this.methods = `{
                @blur@@focus@@change@
            }`

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

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

      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.editable) {
        this.replaceTemplate(' @editable@', '')
        this.replaceData('@editable@', '')
      } else {
        this.replaceTemplate('@editable@', ':editable="editableFlag"')
        this.replaceData('@editable@', 'editableFlag: false,\n\t\t')
      }

      if (this.clearable) {
        this.replaceTemplate(' @clearable@', '')
        this.replaceData('@clearable@', '')
      } else {
        this.replaceTemplate('@clearable@', ':clearable="clearableFlag"')
        this.replaceData('@clearable@', 'clearableFlag: false,\n\t\t')
      }

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

      if (this.prefixIcon == 'el-icon-time') {
        this.replaceTemplate(' @prefixIcon@', '')
      } else {
        this.replaceTemplate('@prefixIcon@', `prefix-icon="${this.prefixIcon}"`)
      }

      if (this.clearIcon == 'el-icon-circle-close') {
        this.replaceTemplate(' @clearIcon@', '')
      } else {
        this.replaceTemplate('@clearIcon@', `clear-icon="${this.clearIcon}"`)
      }

      if (this.type == 'time') {
        this.replaceTemplate('@typeBox@', 'el-time-picker')
        if (this.isRange) {
          this.replaceTemplate('@isRange@', ':is-range="isRangeFlag"')
          this.replaceData('@isRange@', 'isRange: true,\n\t')
        } else {
          this.replaceTemplate(' @isRange@', '')
          this.replaceData('@isRange@', '')
        }
        if (this.arrowControl) {
          this.replaceTemplate('@arrowControl@', ':arrow-control="arrowControlFlag"')
          this.replaceData('@arrowControl@', 'arrowControlFlag: true,\n\t')
        } else {
          this.replaceTemplate(' @arrowControl@', '')
          this.replaceData('@arrowControl@', '')
        }
        if (this.isRange == true) {
          this.replaceTemplate(' @placeholder@', '')
          this.replaceTemplate('@startPlaceholder@', `start-placeholder="${this.startPlaceholder}"`)
          this.replaceTemplate('@endPlaceholder@', `end-placeholder="${this.endPlaceholder}"`)
          if (this.rangeSeparator == '-') {
            this.replaceTemplate(' @rangeSeparator@', '')
          } else {
            this.replaceTemplate('@rangeSeparator@', `range-separator="${this.rangeSeparator}"`)
          }
        } else {
          this.replaceTemplate('@placeholder@', `placeholder="${this.placeholder}"`)
          this.replaceTemplate(' @rangeSeparator@', '')
          this.replaceTemplate(' @startPlaceholder@', '')
          this.replaceTemplate(' @endPlaceholder@', '')
        }
      } else {
        this.replaceTemplate('@typeBox@', 'el-date-picker')
        this.replaceTemplate(' @isRange@', '')
        this.replaceTemplate(' @arrowControl@', '')
        if (this.rangeSeparator == '-') {
          this.replaceTemplate(' @rangeSeparator@', '')
        } else {
          this.replaceTemplate('@rangeSeparator@', `range-separator="${this.rangeSeparator}"`)
        }
        if (this.type == 'daterange' || this.type == 'monthrange' || this.type == 'datetimerange' || this.isRange == true) {
          this.replaceTemplate(' @placeholder@', '')
          this.replaceTemplate('@startPlaceholder@', `start-placeholder="${this.startPlaceholder}"`)
          this.replaceTemplate('@endPlaceholder@', `end-placeholder="${this.endPlaceholder}"`)
        } else {
          this.replaceTemplate('@placeholder@', `placeholder="${this.placeholder}"`)
          this.replaceTemplate(' @startPlaceholder@', '')
          this.replaceTemplate(' @endPlaceholder@', '')
        }
        this.replaceData('@isRange@', '')
        this.replaceData('@arrowControl@', '')
      }

      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('用户确认选定的值时');
                }`)
      } else {
        this.replaceTemplate(' @change@', ``)
        this.replaceMethods('@change@', ``)
      }
    }
  }
}
</script>
