<template>
  <div v-if="show">
    <el-form label-position="top">
      
      <template v-if="data.type != 'grid'">
        <el-form-item label="数据绑定Key">
          <el-input v-model="data.model"  size="mini"></el-input>
        </el-form-item>
      </template>

      <el-form-item :label="data.type=='text'?'文本内容':data.type=='divider'?'展示文本':'标题'" v-if="data.type!='grid'">
        <el-input v-if="data.type!='text'" size="mini" v-model="data.name"></el-input>
        <el-input v-if="data.type=='text'"   type="textarea" :rows="2" size="mini" v-model="data.name"></el-input>
      </el-form-item>
      <el-form-item label="宽度" v-if="Object.keys(data.options).indexOf('width')>=0&&data.type!='divider'">
        <el-input  size="mini" v-model="data.options.width"></el-input>
      </el-form-item>

      <el-form-item label="标签宽度" v-if="Object.keys(data.options).indexOf('isLabelWidth')>=0">
             <el-checkbox v-model="data.options.isLabelWidth">自定义</el-checkbox>
             <el-input-number  size="mini" :disabled="!data.options.isLabelWidth" v-model="data.options.labelWidth" :min="0"></el-input-number>
      </el-form-item>

     
      <el-form-item label="控制按钮" v-if="Object.keys(data.options).indexOf('controls')>=0&&data.type=='number'">
          <el-switch  size="mini" v-model="data.options.controls"></el-switch>
      </el-form-item>

      <el-form-item label="控制按钮位置" v-if="Object.keys(data.options).indexOf('controlsPosition')>=0&&data.type=='number'">
         <el-select  size="mini" v-model="data.options.controlsPosition">
            <el-option value="center" label="两侧"></el-option>
            <el-option value="right" label="右侧"></el-option>
         </el-select>
      </el-form-item>

      <el-form-item label="高度" v-if="Object.keys(data.options).indexOf('height')>=0">
        <el-input  size="mini" v-model="data.options.height"></el-input>
      </el-form-item>

      <el-form-item label="大小" v-if="Object.keys(data.options).indexOf('size')>=0">
        宽度：<el-input  size="mini" style="width: 80px;" type="number" v-model.number="data.options.size.width"></el-input>
        高度：<el-input  size="mini" style="width: 80px;" type="number" v-model.number="data.options.size.height"></el-input>
      </el-form-item>
      
      <el-form-item label="占位内容" v-if="(Object.keys(data.options).indexOf('placeholder')>=0 && data.type!='time'&& data.type!='date')">
        <el-input  size="mini" v-model="data.options.placeholder"></el-input>
      </el-form-item>
      <el-form-item label="布局方式" v-if="Object.keys(data.options).indexOf('inline')>=0">
        <el-radio-group  size="mini" v-model="data.options.inline">
          <el-radio-button :label="false">块级</el-radio-button>
          <el-radio-button :label="true">行内</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="显示输入框" v-if="Object.keys(data.options).indexOf('showInput')>=0">
        <el-switch  size="mini" v-model="data.options.showInput" ></el-switch>
      </el-form-item>
      
      <el-form-item label="显示间断点" v-if="Object.keys(data.options).indexOf('showStops')>=0 && data.type=='slider'">
        <el-switch  size="mini" v-model="data.options.showStops" ></el-switch>
      </el-form-item>

      <el-form-item label="显示tooltip" v-if="Object.keys(data.options).indexOf('showTooltip')>=0 && data.type=='slider'">
        <el-switch  size="mini" v-model="data.options.showTooltip" ></el-switch>
      </el-form-item>

      <el-form-item label="最小值" v-if="Object.keys(data.options).indexOf('min')>=0">
        <el-input-number  size="mini" v-model="data.options.min" :min="0" :step="data.options.step"></el-input-number>
      </el-form-item>
      <el-form-item label="最大值" v-if="Object.keys(data.options).indexOf('max')>=0">
        <el-input-number  size="mini" v-model="data.options.max" :min="0" :step="data.options.step"></el-input-number>
      </el-form-item>
      <el-form-item label="步长" v-if="Object.keys(data.options).indexOf('step')>=0">
        <el-input-number  size="mini" v-model="data.options.step" :min="0" :step="1"></el-input-number>
      </el-form-item>
      <el-form-item label="默认值" v-if="data.type=='slider' && Object.keys(data.options).indexOf('defaultValue')>=0">
        <el-input-number  size="mini" v-model="data.options.defaultValue" :min="0" :max="data.options.max" :step="data.options.step"></el-input-number>
      </el-form-item>
      <el-form-item label="是否多选" v-if="data.type=='select' || data.type=='imgupload'">
        <el-switch  size="mini" v-model="data.options.multiple" @change="handleSelectMuliple"></el-switch>
      </el-form-item>
      <el-form-item label="是否可搜索" v-if="data.type=='select'">
        <el-switch  size="mini" v-model="data.options.filterable"></el-switch>
      </el-form-item>
      <el-form-item label="允许半选" v-if="Object.keys(data.options).indexOf('allowHalf')>=0">
        <el-switch
            size="mini"
            v-model="data.options.allowHalf"
          >
          </el-switch>
      </el-form-item>
      <el-form-item label="支持透明度选择" v-if="Object.keys(data.options).indexOf('showAlpha')>=0">
        <el-switch
             size="mini"
            v-model="data.options.showAlpha"
          >
          </el-switch>
      </el-form-item>
      <el-form-item label="是否显示标签" v-if="Object.keys(data.options).indexOf('showLabel')>=0">
        <el-switch
            size="mini"
            v-model="data.options.showLabel"
          >
        </el-switch>
      </el-form-item>
      <el-form-item label="选项" v-if="Object.keys(data.options).indexOf('options')>=0 && data.type!=='usercomponents' ">
        <el-radio-group  v-model="data.options.remote" size="mini" style="margin-bottom:10px;">
          <el-radio-button :label="false">静态数据</el-radio-button>
          <el-radio-button :label="true">远端数据</el-radio-button>
        </el-radio-group>
        <template v-if="data.options.remote">
          <div>
           <el-checkbox v-model="data.options.remoteUnique" style="margin-right:2px;">远端URL(或方法)切换</el-checkbox>
           <el-button type="text" v-if="data.options.remoteUnique && data.options.remoteUniqueFunc!=''" @click="checkingRemoteUrl" style="margin-left:8px;color:red;" size="mini">验证URL连接</el-button>
           <el-input size="mini" v-if="!data.options.remoteUnique" style="" v-model="data.options.remoteFunc">
              <template slot="prepend">远端方法</template>
            </el-input>
            <el-input v-if="data.options.remoteUnique" :title="data.options.remoteUniqueFunc" size="mini" style="" v-model="data.options.remoteUniqueFunc">
              <template slot="prepend">远端URL</template>
            </el-input>
            <el-input size="mini" v-if="data.options.remoteUnique" placeholder="如：data.data.~.~" style="" v-model="data.options.remoteUniqueFuncStr">
              <template slot="prepend">返回值路径</template>
            </el-input>
            
            <el-input size="mini" style="" v-model="data.options.props.value">
              <template slot="prepend">值</template>
            </el-input>
            <el-input size="mini" style="" v-model="data.options.props.label">
              <template slot="prepend">标签</template>
            </el-input>
          </div>
        </template>
        <template v-else>
          <template v-if="data.type=='radio' || (data.type=='select'&&!data.options.multiple)">
            <el-radio-group v-model="data.options.defaultValue">
              <draggable tag="ul" :list="data.options.options" 
                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data.options.options" :key="index" >
                  <el-radio
                    :label="item.value" 
                    style="margin-right: 5px;"
                  >
                    <el-input :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" v-model="item.value"></el-input>
                    <el-input style="width:90px;" size="mini" v-if="data.options.showLabel" v-model="item.label"></el-input>
                    <!-- <input v-model="item.value"/> -->
                  </el-radio>
                  <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
                  <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
                  
                </li>
              </draggable>
              
            </el-radio-group>
          </template>

          <template v-if="data.type=='checkbox' || (data.type=='select' && data.options.multiple)">
            <el-checkbox-group v-model="data.options.defaultValue">

              <draggable tag="ul" :list="data.options.options" 
                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data.options.options" :key="index" >
                  <el-checkbox
                    :label="item.value"
                    style="margin-right: 5px;"
                  >
                    <el-input :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" v-model="item.value"></el-input>
                    <el-input style="width:90px;" size="mini" v-if="data.options.showLabel" v-model="item.label"></el-input>
                  </el-checkbox>
                  <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
                  <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
                  
                </li>
              </draggable>
            </el-checkbox-group>
          </template>
          <div style="margin-left: 22px;">
            <el-button type="text" @click="handleAddOption">添加选项</el-button>
          </div>
        </template>
        
      </el-form-item>

      <el-form-item label="远端数据" v-if="data.type=='cascader'">
        <div>
           <el-checkbox v-model="data.options.remoteUnique" style="margin-right:2px;">远端URL(或方法)切换</el-checkbox>
           <el-button type="text" v-if="data.options.remoteUnique && data.options.remoteUniqueFunc!=''" @click="checkingRemoteUrl" style="margin-left:8px;color:red;" size="mini">验证URL连接</el-button>
           <el-input size="mini" v-if="!data.options.remoteUnique" style="" v-model="data.options.remoteFunc">
              <template slot="prepend">远端方法</template>
            </el-input>
            <el-input v-if="data.options.remoteUnique" :title="data.options.remoteUniqueFunc" size="mini" style="" v-model="data.options.remoteUniqueFunc">
              <template slot="prepend">远端URL</template>
            </el-input>
            <el-input size="mini" v-if="data.options.remoteUnique" placeholder="如：data.data.~.~" style="" v-model="data.options.remoteUniqueFuncStr">
              <template slot="prepend">返回值路径</template>
            </el-input>
          <el-input size="mini" style="" v-model="data.options.props.value">
            <template slot="prepend">值</template>
          </el-input>
          <el-input size="mini" style="" v-model="data.options.props.label">
            <template slot="prepend">标签</template>
          </el-input>
          <el-input size="mini" style="" v-model="data.options.props.children">
            <template slot="prepend">子选项</template>
          </el-input>
        </div>
      </el-form-item>

      <el-form-item label="远端数据" v-if="data.type=='usercomponents'">
        <div>
          <el-checkbox v-model="data.options.remoteUnique" style="margin-right:2px;">远端URL(或方法)切换</el-checkbox>
          <el-button type="text" v-if="data.options.remoteUnique && data.options.remoteUniqueFunc!=''" @click="checkingRemoteUrl" style="margin-left:8px;color:red;" size="mini">验证URL连接</el-button>
          <el-input size="mini" v-if="!data.options.remoteUnique" style="" v-model="data.options.remoteFunc">
            <template slot="prepend">远端方法</template>
          </el-input>
           <el-input size="mini" v-if="data.options.remoteUnique" style="" v-model="data.options.remoteUniqueFunc">
            <template slot="prepend">远端URL</template>
          </el-input>
        
          <el-input size="mini" v-if="data.options.remoteUnique" placeholder="如：data.data.~.~" style="" v-model="data.options.remoteUniqueFuncStr">
            <template slot="prepend">返回值路径</template>
          </el-input>
        
          <draggable tag="ul" :list="data.options.options" 
            v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
            handle=".drag-item"
          >
            <li v-for="(item, index) in data.options.options" :key="index" >
                <el-checkbox v-model="item.show" style="margin-right:2px;"></el-checkbox>
                <el-input style="width:95px;" size="mini" v-model="item.value" clearable></el-input>
                <el-input style="width:96px;" size="mini" v-model="item.label" clearable></el-input>
                <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
                <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
                <el-input placeholder="宽度" v-model="item.width" style="width:72px;margin-left:16px;" size="mini"></el-input>
                <el-checkbox  v-if="item.show" v-model="item.filterable" style="margin-left:6px;" @change="usercomFilter(item,index)">筛选</el-checkbox>
                <el-checkbox  v-if="item.show" v-model="item.display" style="margin-left:0px;" @change="usercomDisplay(item,index)">显示</el-checkbox>
                <el-checkbox  v-model="item.return" style="margin-left:6px;" @change="usercomReturn(item,index)">返回Key</el-checkbox>
            </li>
          </draggable>

          <div style="margin-left: 22px;">
            <el-button type="text" @click="handleAddZujianOption">添加选项</el-button>
          </div>
        </div>
      </el-form-item>

      <el-form-item :label="data.type=='text'?'文本内容':'默认值'" v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (data.type == 'textarea' || data.type == 'input' || data.type=='rate' || data.type=='color' || data.type=='switch' || data.type=='text')">
        <el-input v-if="data.type=='textarea'" type="textarea" :rows="5" v-model="data.options.defaultValue"></el-input>
        <el-input v-if="data.type=='input'" v-model="data.options.defaultValue"></el-input>
        <el-input v-if="data.type=='text'"  type="textarea" :rows="3"  v-model="data.options.defaultValue"></el-input>
        <el-rate v-if="data.type == 'rate'" style="display:inline-block;vertical-align: middle;" :max="data.options.max" :allow-half="data.options.allowHalf" v-model="data.options.defaultValue"></el-rate>
        <el-button type="text" v-if="data.type == 'rate'" style="display:inline-block;vertical-align: middle;margin-left: 10px;" @click="data.options.defaultValue=0">清空</el-button>
        <el-color-picker 
          v-if="data.type == 'color'"
          v-model="data.options.defaultValue"
          :show-alpha="data.options.showAlpha"
        ></el-color-picker>
        <el-switch v-if="data.type=='switch'" v-model="data.options.defaultValue"></el-switch>
      </el-form-item>

      <!-- divider start -->
      <el-form-item label="类型" v-if="(data.type=='divider')">
            <el-radio-group size="mini" v-model="data.options.direction" >
              <el-radio-button label="horizontal">横向分隔符</el-radio-button>
              <el-radio-button label="vertical">纵向分隔符</el-radio-button>
              <el-radio-button label="placeholder">占位符</el-radio-button>
              
            </el-radio-group>
      </el-form-item>
      <el-form-item label="边距" v-if="(data.type=='divider')">
           <el-input-number size="mini" v-model="data.options.margin" :min="0"></el-input-number>&nbsp; px
      </el-form-item>

      <el-form-item label="展示文本" v-if="Object.keys(data.options).indexOf('defaultValue')>=0 &&(data.type=='divider') &&data.options.direction=='horizontal'">
           <el-input size="mini" v-if="data.type=='divider'" placeholder="显示在分隔符上的文字" v-model="data.options.defaultValue"></el-input>
      </el-form-item>

       <el-form-item label="文本方向" v-if="(data.type=='divider') && data.options.direction=='horizontal'">
            <el-radio-group size="mini" v-model="data.options.position" >
              <el-radio-button label="left">左边</el-radio-button>
              <el-radio-button label="center">中间</el-radio-button>
              <el-radio-button label="right">右边</el-radio-button>
            </el-radio-group>
      </el-form-item>
      <!-- divider end -->

      <el-form-item label="行高" v-if="(data.type=='text')">
           <el-input v-model="data.options.lineHeight"></el-input>
      </el-form-item>

      <el-form-item label="对齐方式" v-if="(data.type=='text')">
          <el-radio-group size="mini" v-model="data.options.textAlign">
            <el-radio-button label="left">左对齐</el-radio-button>
            <el-radio-button label="center">居中对齐</el-radio-button>
            <el-radio-button label="right">右对齐</el-radio-button>
          </el-radio-group>
      </el-form-item>

      <el-form-item label="字体大小" v-if="(data.type=='text')">
           <el-input-number v-model="data.options.fontSize" :min="1"></el-input-number> px
      </el-form-item>

      <el-form-item label="字体颜色" v-if="(data.type=='text')">
          <el-color-picker v-model="data.options.color"></el-color-picker>
      </el-form-item>

      <el-form-item label="字体样式" v-if="(data.type=='text')">
         <el-checkbox-group v-model="data.options.fontStyle">
            <el-checkbox label="bold">加粗</el-checkbox>
            <el-checkbox label="italic">斜体</el-checkbox>
            <el-checkbox label="underline">下划线</el-checkbox>
            <el-checkbox label="line-through">删除线</el-checkbox>
          </el-checkbox-group>
      </el-form-item>

      <template v-if="data.type == 'time' || data.type == 'date'">
        <el-form-item label="显示类型" v-if="data.type == 'date'">
          <el-select v-model="data.options.type">
            <el-option value="year"></el-option>
            <el-option value="month"></el-option>
            <el-option value="date"></el-option>
            <el-option value="dates"></el-option>
            <!-- <el-option value="week"></el-option> -->
            <el-option value="datetime"></el-option>
            <el-option value="datetimerange"></el-option>
            <el-option value="daterange"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否为范围选择" v-if="data.type == 'time'">
          <el-switch
            v-model="data.options.isRange"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="是否获取时间戳" v-if="data.type == 'date'">
          <el-switch
            v-model="data.options.timestamp"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="占位内容" v-if="(!data.options.isRange && data.type == 'time') || (data.type != 'time' && data.options.type != 'datetimerange' && data.options.type != 'daterange')">
          <el-input v-model="data.options.placeholder"></el-input>
        </el-form-item>
        <el-form-item label="开始时间占位内容" v-if="(data.options.isRange) || data.options.type=='datetimerange' || data.options.type=='daterange'">
          <el-input v-model="data.options.startPlaceholder"></el-input>
        </el-form-item>
        <el-form-item label="结束时间占位内容" v-if="data.options.isRange || data.options.type=='datetimerange' || data.options.type=='daterange'">
          <el-input v-model="data.options.endPlaceholder"></el-input>
        </el-form-item>
        <el-form-item label="格式">
          <el-input v-model="data.options.format"></el-input>
        </el-form-item>
        <el-form-item label="默认值" v-if="data.type=='date' && Object.keys(data.options).indexOf('defaultValue')>=0">
            <el-radio-group v-model="dataDefaultRadio" size="mini" @change="resetDataDefaultRadio">
                <el-radio-button label="select">选择值</el-radio-button>
                <el-radio-button label="input">输入值</el-radio-button>
            </el-radio-group>

            <el-date-picker
              v-if="dataDefaultRadio=='select'"
              v-model="data.options.defaultValue"
              :type="data.options.type"
              placeholder="选择日期">
            </el-date-picker>
            <el-input v-if="dataDefaultRadio=='input'" v-model="data.options.defaultValue" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="默认值" v-if="data.type=='time' && Object.keys(data.options).indexOf('defaultValue')>=0 && Object.keys(data.options).indexOf('isRange')<=0">
            <el-time-picker
              v-model="data.options.defaultValue"
            >
            </el-time-picker>
        </el-form-item>
        <el-form-item label="默认值" v-if="data.type=='time' && Object.keys(data.options).indexOf('isRange')>=0">
          <el-time-picker 
            key="1"
            style="width: 100%;"
            v-if="!data.options.isRange"
            v-model="data.options.defaultValue"
            :arrowControl="data.options.arrowControl"
            :value-format="data.options.format"
          >
          </el-time-picker>
          <el-time-picker 
            key="2"
            v-if="data.options.isRange"
            style="width: 100%;"
            v-model="data.options.defaultValue"
            is-range
            :arrowControl="data.options.arrowControl"
            :value-format="data.options.format"
          >
          </el-time-picker>
        </el-form-item>
      </template>

      <template v-if="data.type=='imgupload'">
        
        <el-form-item label="最大上传数">
          <el-input type="number" v-model.number="data.options.length"></el-input>
        </el-form-item>
        <!-- <el-form-item label="使用七牛上传">
          <el-switch v-model="data.options.isQiniu"></el-switch>
        </el-form-item> -->
        <template v-if="data.options.isQiniu">
          <el-form-item label="Domain" :required="true">
          <el-input v-model="data.options.domain"></el-input>
          </el-form-item>
          <el-form-item label="获取七牛Token方法" :required="true">
            <el-input v-model="data.options.tokenFunc"></el-input>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="图片上传地址" :required="true">
            <el-input v-model="data.options.action"></el-input>
          </el-form-item>
        </template>
      </template>

      <template v-if="data.type=='blank'">
        <el-form-item label="绑定数据类型">
          <el-select v-model="data.options.defaultType">
            <el-option value="String" label="字符"></el-option>
            <el-option value="Object" label="对象"></el-option>
            <el-option value="Array" label="数组"></el-option>
          </el-select>
        </el-form-item>
      </template>

      <template v-if="data.type == 'grid'">
        <el-form-item label="栅格间隔">
          <el-input type="number" v-model.number="data.options.gutter"></el-input>
        </el-form-item>
        <el-form-item label="列配置项">
          <draggable tag="ul" :list="data.columns" 
            v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
            handle=".drag-item"
          >
            <li v-for="(item, index) in data.columns" :key="index" >
              <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
              <el-input placeholder="栅格值" size="mini" style="width: 100px;" type="number" v-model.number="item.span"></el-input>
              
              <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
              
            </li>
          </draggable>
          <div style="margin-left: 22px;">
            <el-button type="text" @click="handleAddColumn">添加列</el-button>
          </div>
        </el-form-item>
        <el-form-item label="水平排列方式">
          <el-select v-model="data.options.justify">
            <el-option value="start" label="左对齐"></el-option>
            <el-option value="end" label="右对齐"></el-option>
            <el-option value="center" label="居中"></el-option>
            <el-option value="space-around" label="两侧间隔相等"></el-option>
            <el-option value="space-between" label="两端对齐"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="垂直排列方式">
          <el-select v-model="data.options.align">
            <el-option value="top" label="顶部对齐"></el-option>
            <el-option value="middle" label="居中"></el-option>
            <el-option value="bottom" label="底部对齐"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="自定义Class">
          <el-input v-model="data.options.customClass"></el-input>
        </el-form-item>

      </template>
      

      <template v-if="data.type != 'grid'">
  
        <el-form-item label="操作属性" v-if="data.type != 'divider'">
          <el-checkbox v-model="data.options.readonly" v-if="Object.keys(data.options).indexOf('readonly')>=0">完全只读</el-checkbox>
          <el-checkbox v-model="data.options.hidden" v-if="Object.keys(data.options).indexOf('hidden')>=0">隐藏	</el-checkbox>
          <el-checkbox v-model="data.options.disabled" v-if="Object.keys(data.options).indexOf('disabled')>=0">禁用	</el-checkbox>
          <el-checkbox v-model="data.options.editable" v-if="Object.keys(data.options).indexOf('editable')>=0">文本框可输入</el-checkbox>
          <el-checkbox v-model="data.options.clearable" v-if="Object.keys(data.options).indexOf('clearable')>=0">显示清除按钮</el-checkbox>
          <el-checkbox v-model="data.options.arrowControl" v-if="Object.keys(data.options).indexOf('arrowControl')>=0">使用箭头进行时间选择</el-checkbox>
          <el-checkbox v-model="data.options.isDelete" v-if="Object.keys(data.options).indexOf('isDelete')>=0">删除</el-checkbox>
          <el-checkbox v-model="data.options.isEdit" v-if="Object.keys(data.options).indexOf('isEdit')>=0">编辑</el-checkbox>
          
        </el-form-item>
        <el-form-item label="校验"  v-if="data.type != 'divider'">
          <div>
            <el-checkbox v-model="data.options.required">必填</el-checkbox>
          </div>
          <el-select v-if="Object.keys(data.options).indexOf('dataType')>=0" v-model="data.options.dataType" size="mini" >
            <el-option value="string" label="字符串"></el-option>
            <el-option value="number" label="数字"></el-option>
            <el-option value="boolean" label="布尔值"></el-option>
            <el-option value="integer" label="整数"></el-option>
            <el-option value="float" label="浮点数"></el-option>
            <el-option value="url" label="URL地址"></el-option>
            <el-option value="email" label="邮箱地址"></el-option>
            <el-option value="hex" label="十六进制"></el-option>
          </el-select>
          
          <div v-if="Object.keys(data.options).indexOf('pattern')>=0">
            <el-input size="mini" v-model.lazy="data.options.pattern"  style=" width: 240px;" placeholder="填写正则表达式"></el-input>
          </div>
        </el-form-item>
      </template>
    </el-form>
    <cus-dialog
          :visible="getValueVisible"
          @on-close="getValueVisible = false"
          ref="getValuePreview"
          width="800px"
          form
          :action="false"
        >
          <div id="getvalueeditor" style="height: 400px; width: 100%;">{{getValueTemplate}}</div>
          
          <div class="getJsonCopyValue">
            <el-button type="primary" class="get-json-btn" :data-clipboard-text="getJsonCopyValue">复制数据</el-button>
          </div>
        </cus-dialog>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import CusDialog from './CusDialog'
import Clipboard from 'clipboard'
export default {
  components: {
    Draggable,
    CusDialog
  },
  props: ['data'],
  data () {
    return {
      getValueTemplate:'',
      getJsonCopyValue:'',
      getValueVisible:false,
      jsonClipboard: null,
      dataDefaultRadio:'select',
      validator: {
        type: null,
        required: null,
        pattern: null,
        range: null,
        length: null
      }
    }
  },
  computed: {
    show () {
      if (this.data && Object.keys(this.data).length > 0) {
        return true
      }
      return false
    }
  },
  methods: {
    checkingRemoteUrl(){
      // this.$axios.
      this.$axios.get(this.data.options.remoteUniqueFunc).then((response)=>{
          
          const str = this.data.options.remoteUniqueFuncStr==undefined?'':this.data.options.remoteUniqueFuncStr
          const ss = str==''?'':str.split(".")
          var responseStr = {}
          if ( ss =='') {
            responseStr = response
          }
          if (ss.length ==1 && ss !='') {
            responseStr = response[ss[0]]
          }
          if (ss.length ==2 && ss !='') {
            responseStr =  (response[ss[0]][ss[1]]);
          }
          if (ss.length ==3 && ss !='') {
            responseStr = (response[ss[0]][ss[1]][ss[2]]);
          }
          if (ss.length ==4 && ss !='') {
            responseStr = (response[ss[0]][ss[1]][ss[2]][ss[3]]);
          }
          if (ss.length ==5 && ss !='') {
            responseStr = (response[ss[0]][ss[1]][ss[2]][ss[3]][ss[4]]);
          }
          if (ss.length ==6 && ss !='') {
            responseStr = (response[ss[0]][ss[1]][ss[2]][ss[3]][ss[4]][ss[5]]);
          }

          this.getValueVisible = true
          this.getValueTemplate =(responseStr)
          // console.log(JSON.stringify(responseStr))
          this.$nextTick(() => {
            const editor = ace.edit('getvalueeditor')
            editor.session.setMode("ace/mode/json")

            if (!this.jsonClipboard) {
              this.jsonClipboard = new Clipboard('.get-json-btn')
              this.jsonClipboard.on('success', (e) => {
                this.$message.success('复制成功')
              })
            }
            this.getJsonCopyValue = JSON.stringify(responseStr)
          })
          
      }).catch((err)=>{
        console.log(err);
        this.$message.error('错误请求')
      })

    },
    usercomFilter(item,index){
      const arr = this.data.options.options
      for (let i = 0; i < arr.length; i++) {
        const element = arr[i];
        if (i!=index) {
          element.filterable = false
        }
      }
    },
    usercomDisplay(item,index){
      const arr = this.data.options.options
      for (let i = 0; i < arr.length; i++) {
        const element = arr[i];
        if (i!=index) {
          element.display = false
        }
      }
    },
    usercomReturn(item,index){
      const arr = this.data.options.options
      for (let i = 0; i < arr.length; i++) {
        const element = arr[i];
        if (i!=index) {
          element.return = false
        }
      }
    },
    resetDataDefaultRadio(){
       this.data.options.defaultValue = ''
    },
    handleOptionsRemove (index) {
      if (this.data.type === 'grid') {
        this.data.columns.splice(index, 1)
      } else {
        this.data.options.options.splice(index, 1)
      }
      
    },
    handleAddOption () {
      if (this.data.options.showLabel) {
        this.data.options.options.push({
          value: '新选项',
          label: '新选项'
        })
      } else {
        this.data.options.options.push({
          value: '新选项'
        })
      }
      
    },
    handleAddZujianOption(){
        this.data.options.options.push({
          filterable:false,
          show:true,
          width:null,
          display:false,
          return:false,
          value: '新选项',
          label: '新选项'
        })
    },
    handleAddColumn () {
      this.data.columns.push({
        span: '',
        list: []
      })
    },
    generateRule () {
      this.data.rules = []
      Object.keys(this.validator).forEach(key => {
        if (this.validator[key]) {
          this.data.rules.push(this.validator[key])
        }
      })
    },
    handleSelectMuliple (value) {
      if (value) {
        if (this.data.options.defaultValue) {
          this.data.options.defaultValue = [this.data.options.defaultValue]
        } else {
          this.data.options.defaultValue = []
        }
        
      } else {
        if (this.data.options.defaultValue.length>0){
          this.data.options.defaultValue = this.data.options.defaultValue[0]
        } else {
          this.data.options.defaultValue = ''
        }
        
      }
    },

    validateRequired (val) {
      if (val) {
        this.validator.required = {required: true, message: `${this.data.name}必须填写`}
      } else {
        this.validator.required = null
      }

      this.$nextTick(() => {
        this.generateRule()
      })
    },

    validateDataType (val) {
      if (!this.show) {
        return false
      }
      
      if (val) {
        this.validator.type = {type: val, message: this.data.name + '格式不正确'}
      } else {
        this.validator.type = null
      }

      this.generateRule()
    },
    valiatePattern (val) {
      if (!this.show) {
        return false
      }

      if (val) {
        this.validator.pattern = {pattern: val, message: this.data.name + '格式不匹配'}
      } else {
        this.validator.pattern = null
      }

      this.generateRule()
    }
  },
  watch: {
    'data.options.isRange': function(val) {
      if (typeof val !== 'undefined') {
        if (val) {
          this.data.options.defaultValue = null
        } else {
          if (Object.keys(this.data.options).indexOf('defaultValue')>=0) 
            this.data.options.defaultValue = ''
        }
      }
    },
    'data.options.required': function(val) {
      this.validateRequired(val)
    },
    'data.options.dataType': function (val) {
      this.validateDataType(val)
    },
    'data.options.pattern': function (val) {
      this.valiatePattern(val)
    },
    'data.name': function (val) {
      if (this.data.options) {
        this.validateRequired(this.data.options.required)
        this.validateDataType(this.data.options.dataType)
        this.valiatePattern(this.data.options.pattern)
      }
    }
  }
}
</script>
