<template>
  <div v-if="show">
    <el-form label-position="top">
      <el-form-item
        :label="$t('fm.config.widget.model')"
        v-if="data.type!='grid'"
      >
        <el-input v-model="data.model"></el-input>
      </el-form-item>
      <el-form-item
        :label="$t('fm.config.widget.name')"
        v-if="data.type!='grid'"
      >
        <el-input v-model="data.name"></el-input>
      </el-form-item>
      <el-form-item
        :label="$t('fm.config.widget.width')"
        v-if="Object.keys(data.options).indexOf('width')>=0"
      >
        <el-input v-model="data.options.width"></el-input>
      </el-form-item>

      <el-form-item
        :label="$t('fm.config.widget.height')"
        v-if="Object.keys(data.options).indexOf('height')>=0"
      >
        <el-input v-model="data.options.height"></el-input>
      </el-form-item>

      <el-form-item
        :label="$t('fm.config.widget.size')"
        v-if="Object.keys(data.options).indexOf('size')>=0"
      >
        {{$t('fm.config.widget.width')}} <el-input
          style="width: 90px;"
          type="number"
          v-model.number="data.options.size.width"
        ></el-input>
        {{$t('fm.config.widget.height')}} <el-input
          style="width: 90px;"
          type="number"
          v-model.number="data.options.size.height"
        ></el-input>
      </el-form-item>

      <el-form-item
        :label="$t('fm.config.widget.placeholder')"
        v-if="Object.keys(data.options).indexOf('placeholder')>=0 && (data.type!=='time' && data.type!=='date')"
      >
        <el-input v-model="data.options.placeholder"></el-input>
      </el-form-item>
      <el-form-item
        :label="$t('fm.config.widget.layout')"
        v-if="Object.keys(data.options).indexOf('inline')>=0"
      >
        <el-radio-group v-model="data.options.inline">
          <el-radio-button :label="false">{{$t('fm.config.widget.block')}}</el-radio-button>
          <el-radio-button :label="true">{{$t('fm.config.widget.inline')}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        :label="$t('fm.config.widget.showInput')"
        v-if="Object.keys(data.options).indexOf('showInput')>=0"
      >
        <el-switch v-model="data.options.showInput"></el-switch>
      </el-form-item>
      <el-form-item
        :label="$t('fm.config.widget.min')"
        v-if="Object.keys(data.options).indexOf('min')>=0"
      >
        <el-input-number
          v-model="data.options.min"
          :min="0"
          :max="100"
          :step="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        :label="$t('fm.config.widget.max')"
        v-if="Object.keys(data.options).indexOf('max')>=0"
      >
        <el-input-number
          v-model="data.options.max"
          :min="0"
          :max="100000000"
          :step="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        :label="$t('fm.config.widget.step')"
        v-if="Object.keys(data.options).indexOf('step')>=0"
      >
        <el-input-number
          v-model="data.options.step"
          :min="0"
          :max="100"
          :step="1"
        ></el-input-number>
      </el-form-item>
      <!-- data.type=='select' || -->
      <el-form-item
        :label="$t('fm.config.widget.multiple')"
        v-if=" data.type=='imgupload'  || data.type=='fileupload'"
      >
        <el-switch
          v-model="data.options.multiple"
          @change="handleSelectMuliple"
        ></el-switch>
      </el-form-item>
      <el-form-item
        :label="$t('fm.config.widget.filterable')"
        v-if="data.type=='select'"
      >
        <el-switch v-model="data.options.filterable"></el-switch>
      </el-form-item>

      <el-form-item
        :label="$t('fm.config.widget.istableshow')"
        v-if="data.type=='select' || data.type=='input'"
      >
        <el-switch v-model="data.options.isTableShow"></el-switch>
      </el-form-item>
      <el-form-item
        :label="$t('fm.config.widget.allowHalf')"
        v-if="Object.keys(data.options).indexOf('allowHalf')>=0"
      >
        <el-switch v-model="data.options.allowHalf">
        </el-switch>
      </el-form-item>
      <el-form-item
        :label="$t('fm.config.widget.showAlpha')"
        v-if="Object.keys(data.options).indexOf('showAlpha')>=0"
      >
        <el-switch v-model="data.options.showAlpha">
        </el-switch>
      </el-form-item>
      <el-form-item
        :label="$t('fm.config.widget.showLabel')"
        v-if="Object.keys(data.options).indexOf('showLabel')>=0"
      >
        <el-switch v-model="data.options.showLabel">
        </el-switch>
      </el-form-item>
      <el-form-item
        :label="$t('fm.config.widget.option')"
        v-if="Object.keys(data.options).indexOf('options') !== -1"
      >
        <el-radio-group
          v-model="data.options.remote"
          size="mini"
          style="margin-bottom:10px;"
          @change="changeRemote"
        >
          <el-radio-button :label="false">{{$t('fm.config.widget.staticData')}}</el-radio-button>
          <el-radio-button :label="true">{{$t('fm.config.widget.remoteData')}}</el-radio-button>
        </el-radio-group>
        <template v-if="data.options.remote">
          <div>
            <el-button type="primary" @click="setRemoteData">设置数据源</el-button>
            <p v-if="data.options.remoteParams && data.options.remoteParams.url">远端数据请求url: {{ data.options.remoteParams.url || '' }}<i class="el-icon-delete" @click="deleteRemoteUrl"></i></p>
            <!-- <el-input
              size="mini"
              style=""
              v-model="data.options.remoteFunc"
            >
              <template slot="prepend">{{$t('fm.config.widget.remoteFunc')}}</template>
            </el-input>
            <el-input
              size="mini"
              style=""
              v-model="data.options.props.value"
            >
              <template slot="prepend">{{$t('fm.config.widget.value')}}</template>
            </el-input>
            <el-input
              size="mini"
              style=""
              v-model="data.options.props.label"
            >
              <template slot="prepend">{{$t('fm.config.widget.label')}}</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"
                  style="margin: 10px 0;height: 30px"
                >
                  <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;cursor: move;"
                  ><i class="iconfont icon-icon_bars"></i></i>
                  <el-button
                    @click="handleOptionsRemove(index,item)"
                    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"
                  style="margin: 10px 0;height: 30px"
                >
                  <el-checkbox
                    :label="item.value"
                    style="margin-right: 5px;"
                  >
                    <el-input
                      :style="{'width': data.options.showLabel? '90px': '180px' }"
                      size="mini"
                      @blur="handleOptionsBlur"
                      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;cursor: move;"
                  ><i class="iconfont icon-icon_bars"></i></i>
                  <el-button
                    @click="handleOptionsRemove(index, item)"
                    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"
            >{{$t('fm.actions.addOption')}}</el-button>
          </div>
        </template>

      </el-form-item>
      <!-- input、textarea添加远端数据 -->
      <el-form-item
        :label="$t('fm.config.widget.option')"
        v-if="['input', 'textarea'].includes(data.type)"
      >
        <el-checkbox v-model="data.options.remote" @change="changeText">{{$t('fm.config.widget.remoteData')}}</el-checkbox>
        <template v-if="data.options.remote">
          <div>
            <el-button type="primary" @click="setRemoteData">设置数据源</el-button>
            <p v-if="data.options.remoteParams && data.options.remoteParams.url">远端数据请求url: {{ data.options.remoteParams.url || '' }}</p>
          </div>
        </template>
      </el-form-item>

      <el-form-item
        :label="$t('fm.config.widget.remoteData')"
        v-if="data.type=='cascader'"
      >
        <div>
          <el-input
            size="mini"
            style=""
            v-model="data.options.remoteFunc"
          >
            <template slot="prepend">{{$t('fm.config.widget.remoteFunc')}}</template>
          </el-input>
          <el-input
            size="mini"
            style=""
            v-model="data.options.props.value"
          >
            <template slot="prepend">{{$t('fm.config.widget.value')}}</template>
          </el-input>
          <el-input
            size="mini"
            style=""
            v-model="data.options.props.label"
          >
            <template slot="prepend">{{$t('fm.config.widget.label')}}</template>
          </el-input>
          <el-input
            size="mini"
            style=""
            v-model="data.options.props.children"
          >
            <template slot="prepend">{{$t('fm.config.widget.childrenOption')}}</template>
          </el-input>
        </div>
      </el-form-item>

      <el-form-item
        :label="$t('fm.config.widget.defaultValue')"
        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-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"
        >{{$t('fm.actions.clear')}}</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-input
          v-if="data.type=='text'"
          v-model="data.options.defaultValue"
        ></el-input>
      </el-form-item>

      <template v-if="data.type == 'time' || data.type == 'date'">
        <el-form-item
          :label="$t('fm.config.widget.showType')"
          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="$t('fm.config.widget.isRange')"
          v-if="data.type == 'time'"
        >
          <el-switch v-model="data.options.isRange">
          </el-switch>
        </el-form-item>
        <el-form-item
          :label="$t('fm.config.widget.isTimestamp')"
          v-if="data.type == 'date'"
        >
          <el-switch v-model="data.options.timestamp">
          </el-switch>
        </el-form-item>
        <el-form-item
          :label="$t('fm.config.widget.placeholder')"
          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="$t('fm.config.widget.startPlaceholder')"
          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="$t('fm.config.widget.endPlaceholder')"
          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="$t('fm.config.widget.format')">
          <el-input v-model="data.options.format"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('fm.config.widget.defaultValue')"
          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' || data.type=='fileupload' ">

        <el-form-item :label="$t('fm.config.widget.limit')">
          <el-input
            type="number"
            v-model.number="data.options.length"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.isQiniu')">
          <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="$t('fm.config.widget.tokenFunc')"
            :required="true"
          >
            <el-input v-model="data.options.tokenFunc"></el-input>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item
            :label="$t('fm.config.widget.imageAction')"
            :required="true"
          >
            <el-input v-model="data.options.action"></el-input>
          </el-form-item>
        </template>
      </template>

      <template v-if="data.type=='ctable'">
        <template>
          <el-form-item
            :label="$t('fm.config.widget.cTableAction')"
            :required="true"
          >
            <el-input
              v-model="data.options.action"
              @input="setTableDefault(data)"
            ></el-input>
          </el-form-item>
        </template>
      </template>

      <template v-if="data.type=='blank'">
        <el-form-item :label="$t('fm.config.widget.defaultType')">
          <el-select v-model="data.options.defaultType">
            <el-option
              value="String"
              :label="$t('fm.config.widget.string')"
            ></el-option>
            <el-option
              value="Object"
              :label="$t('fm.config.widget.object')"
            ></el-option>
            <el-option
              value="Array"
              :label="$t('fm.config.widget.array')"
            ></el-option>
          </el-select>
        </el-form-item>
      </template>

      <template v-if="data.type == 'grid'">
        <el-form-item :label="$t('fm.config.widget.gutter')">
          <el-input
            type="number"
            v-model.number="data.options.gutter"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.columnOption')">
          <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 hhh"
                style="font-size: 16px;cursor: move;"
              ><i class="iconfont icon-icon_bars"></i></i>
              <el-input
                :placeholder="$t('fm.config.widget.span')"
                size="mini"
                style="width: 100px;"
                type="number"
                v-model.number="item.span"
              ></el-input>

              <el-button
                @click="handleOptionsRemove(index, item)"
                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"
            >{{$t('fm.actions.addColumn')}}</el-button>
          </div>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.justify')">
          <el-select v-model="data.options.justify">
            <el-option
              value="start"
              :label="$t('fm.config.widget.justifyStart')"
            ></el-option>
            <el-option
              value="end"
              :label="$t('fm.config.widget.justifyEnd')"
            ></el-option>
            <el-option
              value="center"
              :label="$t('fm.config.widget.justifyCenter')"
            ></el-option>
            <el-option
              value="space-around"
              :label="$t('fm.config.widget.justifySpaceAround')"
            ></el-option>
            <el-option
              value="space-between"
              :label="$t('fm.config.widget.justifySpaceBetween')"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.align')">
          <el-select v-model="data.options.align">
            <el-option
              value="top"
              :label="$t('fm.config.widget.alignTop')"
            ></el-option>
            <el-option
              value="middle"
              :label="$t('fm.config.widget.alignMiddle')"
            ></el-option>
            <el-option
              value="bottom"
              :label="$t('fm.config.widget.alignBottom')"
            ></el-option>
          </el-select>
        </el-form-item>
      </template>

      <template v-if="data.type != 'grid'">
        <el-form-item :label="$t('fm.config.widget.attribute')">
          <el-checkbox
            v-model="data.options.readonly"
            v-if="Object.keys(data.options).indexOf('readonly')>=0"
          >{{$t('fm.config.widget.readonly')}}</el-checkbox>
          <el-checkbox
            v-model="data.options.disabled"
            v-if="Object.keys(data.options).indexOf('disabled')>=0"
          >{{$t('fm.config.widget.disabled')}} </el-checkbox>
          <el-checkbox
            v-model="data.options.editable"
            v-if="Object.keys(data.options).indexOf('editable')>=0"
          >{{$t('fm.config.widget.editable')}}</el-checkbox>
          <el-checkbox
            v-model="data.options.clearable"
            v-if="Object.keys(data.options).indexOf('clearable')>=0"
          >{{$t('fm.config.widget.clearable')}} </el-checkbox>
          <el-checkbox
            v-model="data.options.arrowControl"
            v-if="Object.keys(data.options).indexOf('arrowControl')>=0"
          >{{$t('fm.config.widget.arrowControl')}}</el-checkbox>
          <el-checkbox
            v-model="data.options.isDelete"
            v-if="Object.keys(data.options).indexOf('isDelete')>=0"
          >{{$t('fm.config.widget.isDelete')}}</el-checkbox>
          <el-checkbox
            v-model="data.options.isEdit"
            v-if="Object.keys(data.options).indexOf('isEdit')>=0"
          >{{$t('fm.config.widget.isEdit')}}</el-checkbox>

        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.validate')">
          <div v-if="Object.keys(data.options).indexOf('required')>=0">
            <el-checkbox v-model="data.options.required">{{$t('fm.config.widget.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="$t('fm.config.widget.string')"
            ></el-option>
            <el-option
              value="number"
              :label="$t('fm.config.widget.number')"
            ></el-option>
            <el-option
              value="boolean"
              :label="$t('fm.config.widget.boolean')"
            ></el-option>
            <el-option
              value="integer"
              :label="$t('fm.config.widget.integer')"
            ></el-option>
            <el-option
              value="float"
              :label="$t('fm.config.widget.float')"
            ></el-option>
            <el-option
              value="url"
              :label="$t('fm.config.widget.url')"
            ></el-option>
            <el-option
              value="email"
              :label="$t('fm.config.widget.email')"
            ></el-option>
            <el-option
              value="hex"
              :label="$t('fm.config.widget.hex')"
            ></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="$t('fm.config.widget.patternPlaceholder')"
            ></el-input>
          </div>
        </el-form-item>
      </template>
    </el-form>
    <el-dialog
      title="获取远端数据"
      :visible.sync="dialogVisible"
      @close="closeDialog"
      >
      <el-form :model="remoteForm" :rules="rules" ref="remoteForm" label-width="100px" class="remote-form">
        <el-form-item label="请求url" prop="url">
          <el-input v-model="remoteForm.url" placeholder="请输入数据源请求地址，以/开头，例如 /getData" maxlength="31" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="请求方法" prop="method">
          <el-radio-group v-model="remoteForm.method">
            <el-radio label="POST"></el-radio>
            <el-radio label="GET"></el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="请求头" prop="header">
          <el-switch v-model="remoteForm.isRequestHeader" />
          <add-key-value v-if="remoteForm.isRequestHeader" v-model="remoteForm.header" />
        </el-form-item>
        <el-form-item label="请求参数" prop="requestBody">
          <el-switch v-model="remoteForm.requestBody" />
          <add-key-value v-if="remoteForm.requestBody" v-model="remoteForm.params" />
        </el-form-item> -->
        <el-form-item label="接口返回数据处理" prop="format">
          <el-input type="textarea" v-model="remoteForm.format" placeholder="默认值是res.data"></el-input>
        </el-form-item>
        <el-form-item label="接口数据" prop="resData">
          {{ JSON.stringify(data.options.remoteData) }}
          <!-- <div>{{ ['select', 'radio', 'checkbox'].includes(data.type) ? data.options.remoteOptions : data.options.remoteObj }}</div> -->
        </el-form-item>
        <el-form-item :label="['select', 'radio', 'checkbox'].includes(data.type) ? 'value' : 'key'" prop="value">
          <el-input type="text" v-model="remoteForm.value" placeholder="默认值是value"></el-input>
        </el-form-item>
        <el-form-item v-if="['select', 'radio', 'checkbox'].includes(data.type)" label="label" prop="label">
          <el-input type="text" v-model="remoteForm.label" placeholder="默认值是label"></el-input>
        </el-form-item>
        <el-form-item label="" prop="">
          <span>注：这里的默认格式是value、label的形式，如获取到的远端数据是其他字段，请设置映射值。</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getRemoteData('remoteForm')">获取数据</el-button>
          <el-button @click="resetForm('remoteForm')">重置</el-button>
          <el-button @click="confirm('remoteForm')" title="确定之前请先填写数据返回格式和映射值value和label。">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import AddKeyValue from '@/components/AddKeyValue'
import Draggable from 'vuedraggable'
const defaultOptions = [
  {
    value: 'Option 1',
    label: 'Option 1'
  },
  {
    value: 'Option 2',
    label: 'Option 2'
  },
  {
    value: 'Option 3',
    label: 'Option 3'
  }
]
export default {
  components: {
    Draggable,
    AddKeyValue
  },
  props: ['data', 'remoteData'],
  data() {
    const validatorUrl = (rule, value = '', callback) => {
      if (!value.startsWith('/')) {
        return callback(new Error('不允许输入数字、汉字及特殊字符'))
      }
      const reg = /[^a-zA-Z\/]/g
      if (reg.test(value)) {
        return callback(new Error('不允许输入数字、汉字及特殊字符'))
      }
      return callback()
    }
    return {
      dialogVisible: false,
      remoteForm: this.defaultRemoteForm(),
        rules: {
          url: [
            { required: true, message: '请输入数据源请求地址', trigger: 'blur' },
            { validator: validatorUrl, trigger: 'blur' }
          ],
          params: [
            { required: true, message: '请填写请求参数', trigger: 'change' }
          ],
          format: [
            { required: true, message: '请填写接口返回参数格式', trigger: 'change' }
          ]
        },
      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: {
    defaultRemoteForm() {
      return {
        url: '',
          method: 'POST',
          // isRequestHeader: false,
          // header: [],
          // requestBody: false,
          // params: [],
          label: 'label',
          value: 'value',
          format: 'data.data'
      }
    },
    deleteRemoteUrl() {
      this.remoteForm = this.defaultRemoteForm()
      this.data.options.remoteOptions = []
      this.data.options.options = []
      this.data.options.remoteParams = Object.assign({}, this.remoteForm)
      this.$forceUpdate()
    },
    setRemoteData() {
      console.log('设置远端数据源', this.data)
      this.$refs.remoteForm && this.$refs.remoteForm.resetFields()
      this.$nextTick(() => {
        if (this.data.options.remoteParams) {
          this.remoteForm = Object.assign({}, this.data.options.remoteParams)
        }
        this.dialogVisible = true
      })
    },
    closeDialog() {
      console.log('close')
    },
    confirm(formName) {
      console.log('确定操作', '赋值默认值', this.data)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.data.options.remoteParams = Object.assign({}, this.remoteForm)
          const remoteData = this.getDataByStr(this.data.options.remoteData, this.remoteForm.format)
          console.log(this.data, '确实操作时data值', '处理数据', remoteData)
          // 区分文本和options
          if (['input', 'textarea'].includes(this.data.type)) {
            // 默认值
            this.data.options.defaultValue = remoteData[this.remoteForm.value] || ''
          }
          else {
            const options = remoteData.map(v => {
              return {
                'label': v[this.remoteForm.label || 'label'],
                'value': v[this.remoteForm.value || 'value']
              }
            })
            const hasValidData = options.every(v => v.label && v.value)
            console.log(options, '处理之后的数据', this.remoteForm)
            this.data.options.remoteOptions = hasValidData ? options : []
            this.data.options.options = hasValidData ? options : []
          }
          // 远端数据请求参数
          this.$forceUpdate()
          this.dialogVisible = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getDataByStr(obj, str) {
      if (!str) return obj
      const arr = str.split('.')
      let res = obj
      arr.forEach((v, i) => {
        res = res[arr[i]] ? res[arr[i]] : []
      })
      return res
    },
    getRemoteData(formName) {
      console.log(this.data, 'data', this.remoteForm, '开始请求远端数据')
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = Object.assign({}, this.remoteForm, {
            model: this.data.model,
            type: this.data.type
          })
          console.log(params, 'params---请求参数')
          this.data.options.remoteParams = Object.assign({}, params)
          this.$emit('getRemoteData', params)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.remoteForm = this.defaultRemoteForm()
      if (['select','radio', 'checkbox'].includes(this.data.type)) {
        this.data.options.remoteOptions = []
        this.data.options.options = []
      }
      this.data.options.remoteParams = Object.assign({}, this.remoteForm)
      this.data.options.remoteData = {}
    },
    handleOptionsRemove(index, item) {
      if (this.data.type === 'grid') {
        this.data.columns.splice(index, 1)
      } else if(this.data.type === 'checkbox'){
        let idx = this.data.options.defaultValue.indexOf(item.value)
        this.data.options.defaultValue.splice(idx, 1)
        this.data.options.options.splice(index, 1)
      } else {
        this.data.options.options.splice(index, 1)
      }

    },
    handleOptionsBlur() {
      if(this.data.type === 'checkbox'){
      this.data.options.defaultValue.forEach((item,index) => {
        if(this.data.options.options.findIndex((e) => e.value === item) === -1){
          this.data.options.defaultValue.splice(index, 1)
        }
      })
      }
    },
    handleAddOption() {
      if (this.data.options.showLabel) {
        this.data.options.options.push({
          value: this.$t('fm.config.widget.newOption'),
          label: this.$t('fm.config.widget.newOption')
        })
      } else {
        this.data.options.options.push({
          value: this.$t('fm.config.widget.newOption')
        })
      }
    },
    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.type=='select' ? [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 = ''
        }

      }
    },
    setTableDefault(data) {
      data.options.defaultValue = data.options.action
    },
    validateRequired(val) {
      if (val) {
        this.validator.required = { required: true, message: `${this.data.name}${this.$t('fm.config.widget.validatorRequired')}` }
      } 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 + this.$t('fm.config.widget.validatorType') }
      } 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 + this.$t('fm.config.widget.validatorPattern') }
      } else {
        this.validator.pattern = null
      }

      this.generateRule()
    },
    updateData() {
      console.log(this.data, 'data==========updateData')
      this.$forceUpdate()
    },
    changeRemote(v) {
      if (!v) {
        // 把远端数据清空
        this.data.options.remoteOptions = []
        this.data.options.remoteParams = this.defaultRemoteForm()
        this.data.options.remoteData = {}
        this.data.options.options = defaultOptions
      }
      else {
        this.data.options.options = []
      }
      this.$forceUpdate()
    },
    changeText(v) {
      console.log(v)
      this.data.options.defaultValue = ''
      this.data.options.remoteParams = this.defaultRemoteForm()
      this.data.options.remoteData = {}
      this.$forceUpdate()
    }
  },
  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>
<style scoped lang="scss">
.remote-form {
  ::deep .el-form-item__label{
    padding-right: 10px !important;
  }
  ::deep .el-form-item {
    border-bottom: none !important;
  }
}
.CodeMirror-cursors,
.CodeMirror-cursor,
.CodeMirror-code div {
  line-height: normal;
}
.vue-codemirror-wrap {
  border: 1px solid #CFD5DE;
}
.CodeMirror {
  border-radius: 6px;
}
.CodeMirror,
.CodeMirror-gutters {
  z-index: 1;
}
.vue-codemirror-wrap {
    ::deep .CodeMirror{
    height: 100px;
  }
}
</style>
