<template>
  <div v-if="show">
    <el-form label-position="top">
      <!-- 字段标识 -->
      <el-form-item
        v-if="data.type != 'grid'"
        :label="t('fm.config.widget.model')"
      >
        <el-input v-model="data.model" />
      </el-form-item>
      <!-- 标题 -->
      <el-form-item
        v-if="
          data.type !== 'grid' &&
          data.type !== 'divider' &&
          data.type != 'organ' &&
          data.type != 'school'
        "
        :label="t('fm.config.widget.name')"
      >
        <el-input v-model="data.name" />
      </el-form-item>

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

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

      <!-- 兰玉磊开始添加 -->
      <!-- 标签宽度 -->
      <!-- <el-form-item
        v-if="Object.keys(data.options).indexOf('labelWidth')>=0 &&
          data.type!=='grid' &&
          data.type!=='subform' &&
          data.type !== 'divider'"
        :label="t('fm.config.widget.labelWidth')"
      >
        <el-checkbox v-model="data.options.labelWidthDisabled">自定义</el-checkbox>
        <el-input-number v-model="data.options.labelWidth" :min="0" :step="10" :disabled="!data.options.labelWidthDisabled" />
      </el-form-item> -->
      <!-- <el-form-item
        v-if="Object.keys(data.options).indexOf('labelWidthStatus')>=0 &&
          data.type!=='grid' &&
          data.type !== 'divider'"
        label="显示标签"
      >
        <el-switch
          v-model="data.options.labelWidthStatus"
        />
      </el-form-item> -->
      <el-form-item
        v-if="Object.keys(data.options).indexOf('tip') >= 0"
        :label="t('fm.config.widget.tip')"
      >
        <el-input v-model="data.options.tip" />
      </el-form-item>
      <!-- 兰玉磊结束添加 -->

      <!-- 高度 -->
      <el-form-item
        v-if="Object.keys(data.options).indexOf('height') >= 0"
        :label="t('fm.config.widget.height')"
      >
        <el-input v-model="data.options.height" />
      </el-form-item>
      <!-- 大小 -->
      <el-form-item
        v-if="Object.keys(data.options).indexOf('size') >= 0"
        :label="t('fm.config.widget.size')"
      >
        {{ t("fm.config.widget.width") }}
        <el-input
          v-model.number="data.options.size.width"
          style="width: 90px"
          type="number"
        />
        {{ t("fm.config.widget.height") }}
        <el-input
          v-model.number="data.options.size.height"
          style="width: 90px"
          type="number"
        />
      </el-form-item>
      <!-- 占位内容 -->
      <el-form-item
        v-if="
          Object.keys(data.options).indexOf('placeholder') >= 0 &&
          (data.type != 'time' || data.type != 'date')
        "
        :label="t('fm.config.widget.placeholder')"
      >
        <el-input v-model="data.options.placeholder" />
      </el-form-item>
      <!-- 布局方式，块，行 -->
      <el-form-item
        v-if="Object.keys(data.options).indexOf('inline') >= 0"
        :label="t('fm.config.widget.layout')"
      >
        <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
        v-if="Object.keys(data.options).indexOf('showInput') >= 0"
        :label="t('fm.config.widget.showInput')"
      >
        <el-switch v-model="data.options.showInput" />
      </el-form-item>
      <!-- 最小值 -->
      <el-form-item
        v-if="Object.keys(data.options).indexOf('min') >= 0"
        :label="t('fm.config.widget.min')"
      >
        <el-input-number
          v-model="data.options.min"
          :min="0"
          :max="100"
          :step="1"
        />
      </el-form-item>
      <!-- 最大值 -->
      <el-form-item
        v-if="Object.keys(data.options).indexOf('max') >= 0"
        :label="t('fm.config.widget.max')"
      >
        <el-input-number
          v-model="data.options.max"
          :min="0"
          :max="100"
          :step="1"
        />
      </el-form-item>
      <!-- 步长 -->
      <el-form-item
        v-if="Object.keys(data.options).indexOf('step') >= 0"
        :label="t('fm.config.widget.step')"
      >
        <el-input-number
          v-model="data.options.step"
          :min="0"
          :max="100"
          :step="1"
        />
      </el-form-item>
      <!-- 是否多选 -->
      <!-- && data.options.showMultiple -->
      <el-form-item
        v-if="data.type == 'select'"
        :label="t('fm.config.widget.multiple')"
      >
        <el-switch
          v-model="data.options.multiple"
          @change="handleSelectMuliple"
        />
      </el-form-item>
      <!-- 是否可搜索 -->
      <el-form-item
        v-if="data.type == 'select' && data.options.showFilterable"
        :label="t('fm.config.widget.filterable')"
      >
        <el-switch v-model="data.options.filterable" />
      </el-form-item>
      <!-- 允许半选 -->
      <el-form-item
        v-if="Object.keys(data.options).indexOf('allowHalf') >= 0"
        :label="t('fm.config.widget.allowHalf')"
      >
        <el-switch v-model="data.options.allowHalf" />
      </el-form-item>
      <!-- 支持透明度选择 -->
      <el-form-item
        v-if="Object.keys(data.options).indexOf('showAlpha') >= 0"
        :label="t('fm.config.widget.showAlpha')"
      >
        <el-switch v-model="data.options.showAlpha" />
      </el-form-item>
      <!-- 是否显示标签 -->
      <!-- <el-form-item v-if="Object.keys(data.options).indexOf('showLabel')>=0" :label="t('fm.config.widget.showLabel')">
        <el-switch
          v-model="data.options.showLabel"
        />
      </el-form-item> -->
      <!-- 选项 -->
      <el-form-item
        v-if="Object.keys(data.options).indexOf('options') >= 0"
        :label="t('fm.config.widget.option')"
      >
        <!-- <el-radio-group v-model="data.options.remote" size="mini" style="margin-bottom:10px;">
          <el-radio-button :label="false">{{ t('fm.config.widget.staticData') }}</el-radio-button>
          <el-radio-button v-if="data.options.showRemote" :label="true">{{ t('fm.config.widget.remoteData') }}</el-radio-button>
        </el-radio-group> -->
        <template v-if="data.options.remote && data.options.showRemote">
          <div>
            <el-input v-model="data.options.remoteFunc" size="mini" style="">
              <template slot="prepend">{{
                t("fm.config.widget.remoteFunc")
              }}</template>
            </el-input>
            <el-input v-model="data.options.props.value" size="mini" style="">
              <template slot="prepend">{{
                t("fm.config.widget.value")
              }}</template>
            </el-input>
            <el-input v-model="data.options.props.label" size="mini" style="">
              <template slot="prepend">{{
                t("fm.config.widget.label")
              }}</template>
            </el-input>
            <el-input
              v-if="data.type === 'cascader'"
              v-model="data.options.props.children"
              size="mini"
              style=""
            >
              <template slot="prepend">{{
                t("fm.config.widget.childrenOption")
              }}</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"> -->
            <!-- <el-radio
                    :label="item.value"
                    style="margin-right: 5px;"
                  > -->
            <!-- </el-radio> -->
            <!-- </el-radio-group> -->
            <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">
                <i
                  class="drag-item"
                  style="font-size: 16px; margin: 0 5px; cursor: move"
                  ><i class="iconfont icon-icon_bars"
                /></i>
                <el-input
                  v-model="item.value"
                  :style="{ width: data.options.showLabel ? '90px' : '180px' }"
                  size="mini"
                />
                <el-input
                  v-if="data.options.showLabel"
                  v-model="item.label"
                  style="width: 90px"
                  size="mini"
                />
                <!-- <input v-model="item.value"/> -->
                <el-button
                  circle
                  plain
                  type="danger"
                  size="mini"
                  icon="el-icon-minus"
                  style="padding: 4px; margin-left: 5px"
                  @click="handleOptionsRemove(index)"
                />
              </li>
            </draggable>
          </template>

          <template
            v-if="
              data.type == 'checkbox' ||
              (data.type == 'select' && data.options.multiple)
            "
          >
            <!-- <el-checkbox-group v-model="data.options.defaultValue"> -->
            <!-- <el-checkbox
                    :label="item.value"
                    style="margin-right: 5px;"
                  > -->
            <!-- </el-checkbox> -->
            <!-- </el-checkbox-group> -->
            <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">
                <i
                  class="drag-item"
                  style="font-size: 16px; margin: 0 5px; cursor: move"
                  ><i class="iconfont icon-icon_bars"
                /></i>
                <el-input
                  v-model="item.value"
                  :style="{ width: data.options.showLabel ? '90px' : '180px' }"
                  size="mini"
                />
                <el-input
                  v-if="data.options.showLabel"
                  v-model="item.label"
                  style="width: 90px"
                  size="mini"
                />
                <el-button
                  circle
                  plain
                  type="danger"
                  size="mini"
                  icon="el-icon-minus"
                  style="padding: 4px; margin-left: 5px"
                  @click="handleOptionsRemove(index)"
                />
              </li>
            </draggable>
          </template>

          <template v-if="data.type === 'cascader'">
            <el-tree
              :data="data.options.options"
              node-key="id"
              default-expand-all
              :expand-on-click-node="false"
            >
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <span style="font-size: 12px">{{ node.label }}</span>
                <span>
                  <el-button
                    type="text"
                    size="mini"
                    @click="() => appendCascaderDialog(data)"
                  >
                    <i class="el-icon-circle-plus" style="font-size: 15px" />
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    @click="() => editCascaderData(data)"
                  >
                    <i class="el-icon-edit-outline" style="font-size: 15px" />
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    @click="() => removeCascaderData(node, data)"
                  >
                    <i
                      class="el-icon-remove"
                      style="font-size: 15px; color: #f56c6c"
                    />
                  </el-button>
                </span>
              </span>
            </el-tree>
          </template>

          <div
            :style="
              data.type === 'cascader'
                ? { 'margin-left': '5px' }
                : { 'margin-left': '22px' }
            "
          >
            <el-button
              type="text"
              :style="data.type === 'cascader' ? { 'font-size': '13px' } : {}"
              @click="
                data.type === 'cascader'
                  ? handleAddCascaderTopDialog()
                  : handleAddOption()
              "
            >
              {{ t("fm.actions.addOption") }}
            </el-button>
            <template v-if="data.type == 'select' && !isSubForm">
              <el-divider direction="vertical"></el-divider>
              <el-button type="text" @click="selectRelation">
                选项关联<span
                  v-if="data.options.relationStatus"
                  style="color: red"
                  >(已设置)</span
                >
              </el-button></template
            >

            <!-- <el-button v-if="data.type == 'select'" type="text" @click="data.options.defaultValue = null">
              重置默认值
            </el-button> -->
          </div>
        </template>
      </el-form-item>
      <!-- 默认值 -->
      <!-- <el-form-item v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (data.type == 'textarea' || data.type == 'input' || data.type=='rate' || data.type=='color' || data.type=='switch')" :label="t('fm.config.widget.defaultValue')">
        <el-input v-if="data.type=='textarea'" v-model="data.options.defaultValue" type="textarea" :rows="5" />
        <el-input v-if="data.type=='input'" v-model="data.options.defaultValue" />
        <el-rate v-if="data.type == 'rate'" v-model="data.options.defaultValue" style="display:inline-block;vertical-align: middle;" :max="data.options.max" :allow-half="data.options.allowHalf" />
        <el-button v-if="data.type == 'rate'" type="text" 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-switch v-if="data.type=='switch'" v-model="data.options.defaultValue" />
      </el-form-item> -->
      <!-- 显示类型 -->
      <template v-if="data.type == 'time' || data.type == 'date'">
        <el-form-item
          v-if="data.type == 'date'"
          :label="t('fm.config.widget.showType')"
        >
          <el-select v-model="data.options.type">
            <el-option value="year" />
            <el-option value="month" />
            <el-option value="date" />
            <el-option value="dates" />
            <!-- <el-option value="week"></el-option> -->
            <el-option value="datetime" />
            <el-option value="datetimerange" />
            <el-option value="daterange" />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="data.type == 'time'"
          :label="t('fm.config.widget.isRange')"
        >
          <el-switch v-model="data.options.isRange" />
        </el-form-item>
        <el-form-item
          v-if="data.type == 'date'"
          :label="t('fm.config.widget.isTimestamp')"
        >
          <el-switch v-model="data.options.timestamp" />
        </el-form-item>
        <el-form-item
          v-if="
            (!data.options.isRange && data.type == 'time') ||
            (data.type != 'time' &&
              data.options.type != 'datetimerange' &&
              data.options.type != 'daterange')
          "
          :label="t('fm.config.widget.placeholder')"
        >
          <el-input v-model="data.options.placeholder" />
        </el-form-item>
        <el-form-item
          v-if="
            data.options.isRange ||
            data.options.type == 'datetimerange' ||
            data.options.type == 'daterange'
          "
          :label="t('fm.config.widget.startPlaceholder')"
        >
          <el-input v-model="data.options.startPlaceholder" />
        </el-form-item>
        <el-form-item
          v-if="
            data.options.isRange ||
            data.options.type == 'datetimerange' ||
            data.options.type == 'daterange'
          "
          :label="t('fm.config.widget.endPlaceholder')"
        >
          <el-input v-model="data.options.endPlaceholder" />
        </el-form-item>
        <el-form-item :label="t('fm.config.widget.format')">
          <el-input v-model="data.options.format" />
        </el-form-item>
        <!-- <el-form-item v-if="data.type=='time' && Object.keys(data.options).indexOf('isRange')>=0" :label="t('fm.config.widget.defaultValue')">
          <el-time-picker
            v-if="!data.options.isRange"
            key="1"
            v-model="data.options.defaultValue"
            style="width: 100%;"
            :arrow-control="data.options.arrowControl"
            :value-format="data.options.format"
          />
          <el-time-picker
            v-if="data.options.isRange"
            key="2"
            v-model="data.options.defaultValue"
            style="width: 100%;"
            is-range
            :arrow-control="data.options.arrowControl"
            :value-format="data.options.format"
          />
        </el-form-item> -->
      </template>
      <!-- 图片上传 -->
      <template v-if="data.type == 'imgupload' || data.type == 'file'">
        <el-form-item :label="t('fm.config.widget.limit')">
          <el-input v-model.number="data.options.length" type="number" />
        </el-form-item>
        <el-form-item
          v-if="Object.keys(data.options).indexOf('isQiniu') > 0"
          :label="t('fm.config.widget.isQiniu')"
        >
          <el-switch v-model="data.options.isQiniu" />
        </el-form-item>
        <template v-if="data.options.isQiniu">
          <el-form-item label="Domain" :required="true">
            <el-input v-model="data.options.domain" />
          </el-form-item>
          <el-form-item
            :label="t('fm.config.widget.tokenFunc')"
            :required="true"
          >
            <el-input v-model="data.options.tokenFunc" />
          </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-form-item>
          <el-form-item :label="t('fm.config.widget.setHeaders')">
            <el-row
              v-for="(uploadItem, uploadIndex) in headers"
              :key="uploadIndex"
            >
              <el-col :span="10">
                <el-input
                  v-model="uploadItem.key"
                  type="textarea"
                  :rows="1"
                  placeholder="KEY"
                />
              </el-col>
              <el-col :span="10" style="float: left; margin-left: 10px">
                <el-input
                  v-model="uploadItem.value"
                  type="textarea"
                  :rows="1"
                  placeholder="VALUE"
                />
              </el-col>
              <el-col :span="2">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  plain
                  circle
                  style="padding: 4px; margin-left: 5px"
                  @click="handleDelHeader(uploadIndex)"
                />
              </el-col>
            </el-row>
            <el-button
              type="text"
              style="font-size: 12px; color: #1890ff"
              @click="handleAddHeader"
              >添加</el-button
            >
          </el-form-item>
        </template>
      </template>
      <!-- 多行文本 -->
      <template v-if="data.type === 'text'">
        <el-form-item label="文字内容">
          <el-input
            v-model="data.options.defaultValue"
            placeholder="请输入文字内容"
          />
        </el-form-item>
      </template>
      <!-- <template v-if="data.type==='text'">
        <el-form-item label="文字内容">
          <el-input v-model="data.options.defaultValue" placeholder="请输入文字内容" />
        </el-form-item>
        <el-form-item label="文字大小">
          <el-input v-model="data.options.font_size" placeholder="请输入字体大小" />
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-input v-model="data.options.font_color" placeholder="请输入文字颜色" />
        </el-form-item>
        <el-form-item label="设置粗体">
          <el-input v-model="data.options.font_weight" placeholder="请输入设置粗体" />
        </el-form-item>
        <el-form-item label="字体属性">
          <el-input v-model="data.options.font_family" placeholder="请输入字体属性" />
        </el-form-item>
      </template> -->
      <!-- 分割符 -->
      <template v-if="data.type === 'divider'">
        <el-form-item label="文字内容">
          <el-input
            v-model="data.options.defaultValue"
            placeholder="请输入文字内容"
          />
        </el-form-item>
        <el-form-item label="文字位置">
          <el-radio-group v-model="data.options.content_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>
        <el-form-item label="分割线方向">
          <el-radio-group v-model="data.options.direction">
            <el-radio-button label="horizontal">横</el-radio-button>
            <el-radio-button label="vertical">竖</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="文字大小">
          <el-input v-model="data.options.font_size" placeholder="请输入字体大小" />
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-input v-model="data.options.font_color" placeholder="请输入文字颜色" />
        </el-form-item>
        <el-form-item label="设置粗体">
          <el-input v-model="data.options.font_weight" placeholder="请输入设置粗体" />
        </el-form-item>
        <el-form-item label="字体属性">
          <el-input v-model="data.options.font_family" placeholder="请输入字体属性" />
        </el-form-item> -->
      </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 value="Object" :label="t('fm.config.widget.object')" />
            <el-option value="Array" :label="t('fm.config.widget.array')" />
          </el-select>
        </el-form-item>
      </template>
      <!-- 珊格 -->
      <template v-if="data.type === 'grid'">
        <el-form-item :label="t('fm.config.widget.gutter')">
          <el-input v-model.number="data.options.gutter" type="number" />
        </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"
                style="font-size: 16px; margin: 0 5px; cursor: move"
                ><i class="iconfont icon-icon_bars"
              /></i>
              <el-input
                v-model.number="item.span"
                :placeholder="t('fm.config.widget.span')"
                size="mini"
                style="width: 100px"
                type="number"
              />

              <el-button
                circle
                plain
                type="danger"
                size="mini"
                icon="el-icon-minus"
                style="padding: 4px; margin-left: 5px"
                @click="handleOptionsRemove(index)"
              />
            </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 value="end" :label="t('fm.config.widget.justifyEnd')" />
            <el-option
              value="center"
              :label="t('fm.config.widget.justifyCenter')"
            />
            <el-option
              value="space-around"
              :label="t('fm.config.widget.justifySpaceAround')"
            />
            <el-option
              value="space-between"
              :label="t('fm.config.widget.justifySpaceBetween')"
            />
          </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
              value="middle"
              :label="t('fm.config.widget.alignMiddle')"
            />
            <el-option
              value="bottom"
              :label="t('fm.config.widget.alignBottom')"
            />
          </el-select>
        </el-form-item>
      </template>
      <!-- 非珊格 -->
      <template
        v-if="
          data.type !== 'grid' &&
          data.type !== 'text' &&
          data.type !== 'divider'
        "
      >
        <el-form-item :label="t('fm.config.widget.attribute')">
          <!-- <el-checkbox v-if="Object.keys(data.options).indexOf('readonly')>=0" v-model="data.options.readonly">{{ t('fm.config.widget.readonly') }}</el-checkbox> -->
          <el-checkbox
            v-if="Object.keys(data.options).indexOf('disabled') >= 0"
            v-model="data.options.disabled"
            >{{ t("fm.config.widget.disabled") }}
          </el-checkbox>
          <!-- <el-checkbox v-if="Object.keys(data.options).indexOf('showPassword')>=0" v-model="data.options.showPassword">{{ t('fm.config.widget.showPassword') }}	</el-checkbox> -->
          <el-checkbox
            v-if="Object.keys(data.options).indexOf('editable') >= 0"
            v-model="data.options.editable"
            >{{ t("fm.config.widget.editable") }}</el-checkbox
          >
          <!-- <el-checkbox v-if="Object.keys(data.options).indexOf('clearable')>=0" v-model="data.options.clearable">{{ t('fm.config.widget.clearable') }} </el-checkbox> -->
          <el-checkbox
            v-if="Object.keys(data.options).indexOf('arrowControl') >= 0"
            v-model="data.options.arrowControl"
            >{{ t("fm.config.widget.arrowControl") }}</el-checkbox
          >
          <el-checkbox
            v-if="Object.keys(data.options).indexOf('isDelete') >= 0"
            v-model="data.options.isDelete"
            >{{ t("fm.config.widget.isDelete") }}</el-checkbox
          >
          <el-checkbox
            v-if="Object.keys(data.options).indexOf('isEdit') >= 0"
            v-model="data.options.isEdit"
            >{{ t("fm.config.widget.isEdit") }}</el-checkbox
          >
          <el-checkbox
            v-if="Object.keys(data.options).indexOf('showAllLevels') >= 0"
            v-model="data.options.showAllLevels"
            >{{ t("fm.config.widget.showAllLevels") }}</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 value="number" :label="t('fm.config.widget.number')" />
            <!-- <el-option value="boolean" :label="t('fm.config.widget.boolean')" /> -->
            <el-option value="integer" :label="t('fm.config.widget.integer')" />
            <el-option value="float" :label="t('fm.config.widget.float')" />
            <!-- <el-option value="url" :label="t('fm.config.widget.url')" />
            <el-option value="email" :label="t('fm.config.widget.email')" />
            <el-option value="hex" :label="t('fm.config.widget.hex')" /> -->
          </el-select>

          <!-- <div v-if="Object.keys(data.options).indexOf('pattern')>=0">
            <el-input v-model.lazy="data.options.pattern" size="mini" style=" width: 240px;" :placeholder="t('fm.config.widget.patternPlaceholder')" />
          </div> -->
        </el-form-item>
      </template>
      <el-form-item
        v-if="Object.keys(data.options).indexOf('displayVerifiy') >= 0"
        :label="t('fm.config.widget.displayVerifiy')"
      >
        <el-radio-group v-model="data.options.displayVerifiy.type">
          <el-radio label="hide">不校验</el-radio>
          <el-radio label="and">与</el-radio>
          <el-radio label="or">或</el-radio>
        </el-radio-group>
        <div v-if="data.options.displayVerifiy.type !== 'hide'">
          <template v-for="(item, index) in data.options.displayVerifiy.list">
            <div :key="item.model">
              <el-input
                v-model="item.model"
                size="mini"
                :placeholder="
                  t('fm.config.widget.displayVerifiyPlaceholderModel')
                "
              />
              <el-input
                v-model="item.value"
                size="mini"
                :placeholder="
                  t('fm.config.widget.displayVerifiyPlaceholderValue')
                "
              />
              <el-button
                v-if="index > 0"
                type="text"
                icon="el-icon-remove-outline"
                @click="delDisplayVerifiy(index)"
                >删 除</el-button
              >
              <hr
                v-if="data.options.displayVerifiy.list.length > 1"
                style="background-color: #dcdfe6; border: none; height: 1px"
              />
            </div>
          </template>
          <el-button
            type="text"
            icon="el-icon-circle-plus-outline"
            @click="addDisplayVerifiy"
            >新 增</el-button
          >
        </div>
      </el-form-item>
    </el-form>
    <el-dialog
      title="提示"
      :visible.sync="cascaderDialog"
      width="30%"
      append-to-body
      :before-close="handleClose"
    >
      <div>
        <el-form ref="addTreeData" :model="addTreeData" label-width="80px">
          <el-form-item
            prop="label"
            label="标题"
            :rules="{
              required: true,
              message: '标题不能为空',
              trigger: 'blur',
            }"
          >
            <el-input v-model="addTreeData.label" style="width: 95%" />
          </el-form-item>
          <el-form-item
            prop="value"
            label="内容"
            :rules="{
              required: true,
              message: '内容不能为空',
              trigger: 'blur',
            }"
          >
            <el-input v-model="addTreeData.value" style="width: 95%" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cascaderDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            operatingStatus === 'add'
              ? appendCascaderData()
              : (cascaderDialog = false)
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      :title="selectTitle"
      :visible.sync="selectDialog"
      width="50%"
      append-to-body
    >
      <div class="select-container" style="margin-top: -20px">
        <p>
          根据选择的选项，显示其他控件。当前控件和上级选项不能被关联显示。
          <span style="color: red">选中的选项自动保存</span>
        </p>
        <el-row class="select-title">
          <el-col :span="8">当选项为</el-col>
          <el-col :span="16">显示以下控件</el-col>
        </el-row>
        <el-row
          v-for="(options, index) in data.options.options"
          :key="index"
          class="select-value"
        >
          <el-col :span="8">
            <span style="line-height: 36px">{{ options.value }}</span>
          </el-col>
          <el-col :span="16">
            <el-select
              v-model="options.relationOptions"
              style="width: 100% !important"
              multiple
              clearable
              placeholder=""
              @change="relationChange"
            >
              <el-option
                v-for="field in fieldList"
                :key="field.value"
                :label="field.label"
                :value="field.value"
                :disabled="field.disabled"
              >
                <!-- :disabled="field.value == data.model" -->
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="selectDialog = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Draggable from "vuedraggable";
import zhCN from "../lang/zh-CN";
export default {
  components: {
    Draggable,
  },
  /* eslint-disable */
  props: ["form", "data"],
  data() {
    return {
      selectTreeData: {},
      addTreeData: {},
      cascaderDialog: false,
      operatingStatus: "add",
      validator: {
        type: null,
        required: null,
        pattern: null,
        range: null,
        length: null,
      },
      headers: [],
      selectDialog: false,
      selectTitle: "选项关联",
      fieldList: [],
      change: null,
      relationOptions: [], // 对象
    };
  },
  computed: {
    show() {
      if (this.data && Object.keys(this.data).length > 0) {
        return true;
      }
      return false;
    },
    isSubForm() {
      // 判断是否在子表单里
      const templates = this.form.list || [];
      let status = false;
      templates.forEach((template) => {
        // 判断是否是子表单
        const formStructure = template.columns || [];
        if (formStructure.length > 0) {
          formStructure.forEach((item) => {
            let subList = item.list || [];
            subList.forEach((sub) => {
              if (sub.model == this.data.model) {
                status = true;
              }
            });
          });
        }
      });
      return status;
    },
  },
  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);
      }
    },
    headers: {
      handler: function (val) {
        if (this.data.options) {
          if (this.headers.length > 0) {
            this.data.options.headers = {};
            for (var headerValue of this.headers) {
              this.data.options.headers[headerValue.key] = headerValue.value;
            }
          } else {
            this.data.options.headers = {};
          }
        }
      },
      deep: true,
    },
  },
  created() {
    // console.log(this.data, "created", this.form);
    this.handleInitHeaders();
  },
  methods: {
    t(str) {
      const fields = str.split(".");
      let tempStr = { ...zhCN };
      fields.forEach((i) => {
        tempStr = tempStr[i];
      });
      return tempStr;
    },
    addDisplayVerifiy() {
      this.data.options.displayVerifiy.list.push({
        model: new Date().valueOf(),
        value: "字段值",
      });
    },
    delDisplayVerifiy(index) {
      this.data.options.displayVerifiy.list.splice(index, 1);
    },
    // 级联选择器
    handleAddCascaderTopDialog() {
      this.selectTreeData = "top";
      this.addTreeData = {};
      this.cascaderDialog = true;
    },
    handleClose() {},
    appendCascaderDialog(val) {
      this.operatingStatus = "add";
      this.addTreeData = {};
      this.selectTreeData = val;
      this.cascaderDialog = true;
    },
    relationChange() {
      this.$forceUpdate();
      console.log(this.data);
      let relationStatus = false;
      let options = this.data.options.options || [];
      options.forEach((item) => {
        if (item.relationOptions && item.relationOptions.length > 0) {
          relationStatus = true;
        }
      });
      this.data.options.relationStatus = relationStatus;
    },
    async selectRelation() {
      this.fieldList = this.formatTemplateData(this.form);
      const data = this.data;
      let temp = data.options.options || [];
      temp.forEach((t) => {
        // 初始化
        if (!t.relationOptions) {
          t.relationOptions = [];
        }
      });
      this.selectTitle = data.name + "- 选项关联";
      this.selectDialog = true;
    },
    formatTemplateData(template) {
      this.fieldList = [];
      const templates = template.list || [];
      const optionList = [];
      templates.forEach((template) => {
        const options = {
          label: template.name,
          value: template.model,
          type: template.type,
          disabled:
            template.options.relationStatus ||
            template.model == this.data.model,
        };
        if (template.type != "text") {
          optionList.push(options);
        }
        // const formStructure = template.columns || [];
        // if (formStructure.length > 0) {
        //   let tempList = [];
        //   formStructure.forEach((item) => {
        //     let subList = item.list || [];
        //     subList.forEach((sub) => {
        //       optionList.push({
        //         label: sub.name,
        //         value: sub.model,
        //         type: sub.type,
        //       });
        //     });
        //   });
        // }
      });
      return optionList;
    },
    appendCascaderData() {
      this.$refs["addTreeData"].validate((valid) => {
        if (valid) {
          if (this.selectTreeData === "top") {
            this.data.options.options.push(this.addTreeData);
          } else {
            if (this.selectTreeData.children) {
              this.selectTreeData.children.push(this.addTreeData);
            } else {
              this.$set(this.selectTreeData, "children", [this.addTreeData]);
            }
          }
          this.cascaderDialog = false;
        }
      });
    },
    editCascaderData(val) {
      this.operatingStatus = "edit";
      this.addTreeData = val;
      this.cascaderDialog = true;
    },
    removeCascaderData(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },

    handleInitHeaders() {
      if (this.data.options) {
        for (var key in this.data.options.headers) {
          this.headers.push({
            key: key,
            value: this.data.options.headers[key],
          });
        }
      }
    },
    handleAddHeader() {
      this.headers.push({
        key: "",
        value: "",
      });
    },
    handleDelHeader(index) {
      this.headers.splice(index, 1);
    },
    handleOptionsRemove(index) {
      if (this.data.type === "grid") {
        this.data.columns.splice(index, 1);
      } else {
        this.data.options.options.splice(index, 1);
      }
    },
    handleAddOption() {
      let addItem = {
        value:
          this.t("fm.config.widget.newOption") +
          (this.data.options.options.length + 1),
        relationOptions: [],
      };
      if (this.data.options.showLabel) {
        addItem.label =
          this.t("fm.config.widget.newOption") +
          (this.data.options.options.length + 1);
      }
      this.data.options.options.push(addItem);
    },
    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}${this.t(
            "fm.config.widget.validatorRequired"
          )}`,
        };
      } else {
        this.validator.required = null;
      }

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

    validateDataType(val) {
      if (!this.show) {
        return false;
      }
      // 为了处理，float 类型校验的问题
      if (val && this.data.type != "input") {
        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();
    },
  },
};
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.select-container :deep(.el-col) {
  padding: 16px 16px;
  /* border: 1px solid #f0f0f0; */
}
.select-title {
  background: #fafafa;
  border-right: 1px solid #f0f0f0;
}
.select-value {
  border-right: 1px solid #f0f0f0;
  display: flex;
  width: 100%;
}
.select-value:last-child {
  border-bottom: 1px solid #f0f0f0;
}
.select-value :deep(.el-col-8) {
  display: flex;
  align-items: center;
}
.select-container :deep(.el-col-8),
.select-container :deep(.el-col-16) {
  border-top: 1px solid #f0f0f0;
  border-left: 1px solid #f0f0f0;
}
</style>
