<template>
  <el-form data-vv-scope="field" size="small" inline>
    <!-- 自定义控件宽高 isWidth-->
    <template v-if="field.options.isWidth && !field.options.isEditor">
      <ht-form-item label label-width v-if="formType != 'mobile'">
        <template slot="label">
          自定义控件宽度
          <el-tooltip content="是否设置控件的宽度 如 80%">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <el-input
          v-model="field.options.width"
          placeholder="宽度：100%"
          style="float: left"
          @change="changeWidth"
        />
      </ht-form-item>
    </template>
    <!-- 统计函数 -->
    <template
      v-if="
        isBasicsProperty(field.options.basicsProperty, 'input') ||
          isBasicsProperty(field.options.basicsProperty, 'number') ||
          isBasicsProperty(field.options.basicsProperty, 'currency')
      "
    >
      <ht-form-item
        label="统计函数"
        label-width="100px"
        v-if="field.options.mathExp"
      >
        <template slot="label">
          <el-tooltip content="函数统计将被移除，请使用公式编辑功能">
            <i class="property-tip icon-notes" />
          </el-tooltip>
          <label>统计函数</label>
        </template>
        <span style="color: red">请使用公式编辑功能</span>
      </ht-form-item>
      <el-popconfirm
        title="确定清空吗？"
        @onConfirm="clearFunction"
        @confirm="clearFunction"
        trigger="hover"
        v-if="field.options.mathExp"
      >
        <el-button type="danger" slot="reference" class="el-icon-circle-close"
          >清空</el-button
        >
      </el-popconfirm>
    </template>
    <!-- 标题字体样式 noTitle -->
    <template v-if="!field.noTitle">
      <ht-form-item label="标题样式" label-width="100px" v-if="!field.noTitle">
        <div style="display:flex;justify-content:start;align-items: center;">
          <div v-if="data.ctrlType !== 'text'">
            <div class="color-selected" style="width:148px">
              <div class="color2">字体颜色</div>
              <el-color-picker
                v-model="field.options.lableColor"
                size="mini"
              ></el-color-picker>
              <i class="el-icon-caret-bottom"></i>
            </div>
            <div
              class="title-color-wrap"
              style="margin-top:8px;"
              v-if="data.parentNodeType === 'sub' && !data.parentType"
            >
              <div class="color-selected" style="width:148px">
                <div class="color">背景色</div>
                <el-color-picker
                  v-model="field.options.labelBgColor"
                  size="mini"
                ></el-color-picker>
                <i class="el-icon-caret-bottom"></i>
              </div>
            </div>
          </div>
          <div class="grid-checkbox-group" style="margin-right: 10px;">
            <el-tooltip
              class="item"
              effect="light"
              content="加粗"
              placement="top"
            >
              <el-checkbox
                v-model="field.options.boldLable"
                :key="field.key"
                border
                class="bold-checkbox"
              >
                <i class="icon-jiacu label-align-size bold-icon"></i>
              </el-checkbox>
            </el-tooltip>
          </div>
          <div
            v-if="
              data.parentNodeType != 'sub' ||
                (data.parentNodeType == 'sub' &&
                  data.parentType &&
                  data.parentType == 'subDiv')
            "
          >
            <el-radio-group
              v-model="field.options.labelAlign"
              size="small"
              class="grid-radio-group"
            >
              <el-tooltip
                class="item"
                effect="light"
                content="左对齐"
                placement="top"
              >
                <el-radio-button label="left" class="position-checkbox"
                  ><i class="icon-juzuoduiqi label-align-size position-icon"></i
                ></el-radio-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="light"
                content="居中"
                placement="top"
              >
                <el-radio-button label="center" class="position-checkbox"
                  ><i
                    class="icon-juzhongduiqi- label-align-size position-icon"
                  ></i
                ></el-radio-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="light"
                content="右对齐"
                placement="top"
              >
                <el-radio-button label="right" class="position-checkbox"
                  ><i class="icon-juyouduiqi label-align-size position-icon"></i
                ></el-radio-button>
              </el-tooltip>
            </el-radio-group>
          </div>
        </div>
        <!--  <div>
          <el-checkbox v-model="field.options.hideCtrl">隐藏控件</el-checkbox>
        </div>
        <div>
          <el-checkbox
            v-if="
              (data.parentNodeType != 'sub' ||
                (data.parentNodeType == 'sub' &&
                  data.parentType == 'subDiv')) &&
                (data.parentNodeType != 'sun' ||
                  (data.parentNodeType == 'sun' && data.parentType == 'sunDiv'))
            "
            v-model="field.options.hideLabel"
            active-text="隐藏标题"
            @change="hideTitleChange(field.options.hideLabel)"
            >隐藏标题</el-checkbox
          >
        </div> -->
      </ht-form-item>
      <!-- <ht-form-item
        v-if="isBasicsProperty(field.ctrlType, 'property-text')"
        label="内容对齐方式"
        label-width
      >
        <el-select v-model="field.options.textAlign" placeholder="">
          <el-option label="左对齐" value="left"></el-option>
          <el-option label="居中" value="center"></el-option>
          <el-option label="右对齐" value="right"></el-option>
        </el-select>
      </ht-form-item> -->
    </template>

    <!-- 文件只读时的权限-->
    <template
      v-if="
        isBasicsProperty(field.ctrlType, 'attachment') ||
          isBasicsProperty(field.ctrlType, 'imageViewer')
      "
    >
      <ht-form-item>
        <template slot="label">
          <el-tooltip content="文件只读时的权限">
            <label>文件只读时的权限</label>
          </el-tooltip>
        </template>
        <el-checkbox
          v-model="field.options.file.allowPreview"
          style="margin-right: 10px"
          >允许预览</el-checkbox
        >
        <el-checkbox v-model="field.options.file.allowDownload" v-if="!(formType == 'mobile'&& field.ctrlType == 'imageViewer' )"
          >允许下载</el-checkbox
        >
      </ht-form-item>
    </template>

    <template v-if="hasHyperlink()">
      <ht-form-item>
        <template slot="label">
          超链接
          <el-tooltip placement="top">
            <i class="icon-my-todo-comment" />
            <div slot="content">
              超链接仅在只读时可点击链接跳转。<br />
              前端路由地址${fvue}；后端路由地址${mvue}；表单变量${data.zb.field01}
            </div>
          </el-tooltip>
          <span class="select-form-var">
            <el-select
              clearable
              placeholder="表单变量"
              @change="hylinkUrlVarChange"
            >
              <el-option-group
                v-for="(group, idenx) in allBoData"
                :key="idenx"
                :label="group.desc"
              >
                <el-option
                  v-for="item in group.children"
                  :key="item.id"
                  :label="item.desc"
                  :value="
                    'data.' +
                      item.path +
                      (group.nodeType == 'sub' ? '[0]' : '') +
                      '.' +
                      item.name
                  "
                ></el-option>
              </el-option-group>
            </el-select>
          </span>
        </template>
        <ht-input
          ref="hyperlinkUrl"
          :rows="4"
          type="textarea"
          v-model="field.options.hyperlinkUrl"
          :maxlength="500"
          :showWordLimit="true"
          placeholder="请输入超链接"
          style="width: 100%;float: left;"
        />
      </ht-form-item>
      <ht-form-item label="超链接打开方式">
        <ht-select
          :validate="{required: field.options.hyperlinkUrl ? true : false}"
          v-model="field.options.hyperlinkOpenType"
          :options="hyperlinkOpenType"
        ></ht-select>
      </ht-form-item>
      <ht-form-item
        label="弹窗大小"
        label-width
        v-if="field.options.hyperlinkOpenType === 'dialog'"
      >
        <ht-input
          v-show="false"
          v-model="field.options.hyperlinkWidth"
          placeholder="宽度"
          :maxlength="50"
          :showWordLimit="true"
          :validate="{
            required:
              field.options.hyperlinkOpenType === 'dialog' ? true : false
          }"
        />
        <ht-input
          v-show="false"
          v-model="field.options.hyperlinkHeight"
          placeholder="高度"
          :maxlength="50"
          :showWordLimit="true"
          :validate="{
            required:
              field.options.hyperlinkOpenType === 'dialog' ? true : false
          }"
        />
        <div style="display:flex;justify-content:start;align-items: center;">
          <div class="min-max_box" style="margin-right: 16px;">
            <span class="btn-pre">宽</span>
            <el-input-number
              v-model="field.options.hyperlinkWidth"
              placeholder="宽度"
              controls-position="right"
              type="number"
              :min="200"
              :max="2000"
            ></el-input-number>
          </div>
          <div class="min-max_box">
            <span class="btn-pre">高</span>
            <el-input-number
              v-model="field.options.hyperlinkHeight"
              placeholder="高度"
              controls-position="right"
              :min="200"
              :max="2000"
            ></el-input-number>
          </div>
        </div>
      </ht-form-item>
    </template>

    <!-- 提示信息 tooltip-->
    <template v-if="!field.noTooltip">
      <ht-form-item label="提示信息(tooltip)" label-width="100px">
        <template slot="label">
          提示信息
          <el-tooltip content="字段的提示信息（tooltip）">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <el-button
          class="icon-bianji"
          size="small"
          type="primary"
          style="width: 48%"
          plain
          @click="tipClick"
          >编写内容</el-button
        >
        <el-button
          icon="icon-guojihua"
          size="small"
          type="primary"
          plain
          style="width: 48%"
          @click="editI18nMessage('tip')"
          >国际化</el-button
        >
      </ht-form-item>
    </template>
    <template v-if="!field.noTooltip && field.ctrlType == 'iframe'">
      <ht-form-item label="是否业务表单" label-width="100px">
        <el-switch
          v-model="field.options.isBusinessForm"
          active-text="是"
          inactive-text="否"
        >
        </el-switch>
      </ht-form-item>
    </template>
    <template
      v-if="
        !field.noTooltip &&
          field.ctrlType == 'iframe' &&
          field.options.isBusinessForm
      "
    >
      <ht-form-item label="iframe别名" label-width="100px">
        <el-input
          v-model="field.options.iframeNmae"
          placeholder="请输入内容"
        ></el-input
      ></ht-form-item>
    </template>

    <template
      v-if="
        !field.noTooltip &&
          field.ctrlType == 'iframe' &&
          field.options.isBusinessForm
      "
    >
      <ht-form-item label="url参数" label-width="100px">
        <el-button type="primary" @click="openIframeUrlParameterDialog()"
          >设置</el-button
        >
      </ht-form-item>
    </template>
    <template
      v-if="
        !field.noTooltip &&
          field.ctrlType == 'iframe' &&
          field.options.isBusinessForm
      "
    >
      <ht-form-item label="返回值" label-width="100px">
        <el-button type="primary" @click="openReturnParameterDialog()"
          >设置</el-button
        >
      </ht-form-item>
    </template>
    <!-- 禁用isInputEdit-->
    <template
      v-if="isAdvancedProperty(field.options.advancedProperty, 'isInputEdit')"
    >
      <ht-form-item label-width="100px" class="form-inline-item">
        <template slot="label">
          是否禁用
          <el-tooltip content="文本框为置灰状态并且不可编辑">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <el-switch
          v-model="field.options.isInputEdit"
          :active-value="true"
          :inactive-value="false"
          @change="handleDisabledChange"
        >
        </el-switch>
      </ht-form-item>
      <ht-form-item
        v-if="field.options.isInputEdit"
        label-width="100px"
        class="form-inline-item"
      >
        <template slot="label">
          禁用时是否校验
        </template>
        <el-switch
          v-model="field.options.isValidate"
          :active-value="true"
          :inactive-value="false"
        >
        </el-switch>
      </ht-form-item>
    </template>

    <!-- disabled-->
    <template
      v-if="isAdvancedProperty(field.options.advancedProperty, 'disabled')"
    >
      <ht-form-item label-width="100px" class="form-inline-item">
        <template slot="label">
          是否禁用
          <el-tooltip content="控件为置灰状态并且不可编辑">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <el-switch
          v-model="field.options.disabled"
          :active-value="true"
          :inactive-value="false"
          @change="handleDisabledChange"
        >
        </el-switch>
      </ht-form-item>
      <ht-form-item
        v-if="field.options.disabled"
        label-width="100px"
        class="form-inline-item"
      >
        <template slot="label">
          禁用时是否校验
        </template>
        <el-switch
          v-model="field.options.isValidate"
          :active-value="true"
          :inactive-value="false"
        >
        </el-switch>
      </ht-form-item>
    </template>

    <!-- <template v-if="isBasicsProperty(field.ctrlType, 'input')">
      <ht-form-item label-width="100px" label="编辑">
        <el-checkbox v-model="field.options.isReadonly">
          不可编辑
          <el-tooltip content="文本框不可编辑">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </el-checkbox>
      </ht-form-item>
    </template> -->
    <!-- 绑定流水号 isBindIdentity-->
    <template
      v-if="
        isAdvancedProperty(field.options.advancedProperty, 'isBindIdentity')
      "
    >
      <ht-form-item label-width="100px" class="form-inline-item">
        <template slot="label">
          流水号
          <el-tooltip content="流程启动时生成流水号">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <el-switch
          @change="identityCheck"
          v-model="field.options.isBindIdentity"
          :active-value="true"
          :inactive-value="false"
        ></el-switch>
      </ht-form-item>
      <ht-form-item
        v-if="field.options.isBindIdentity"
        label="选择流水号"
        label-width="100px"
      >
        <ht-select
          v-model="field.options.bindIdentityjson.alias"
          :options="identitys"
          style="width:100%"
          :props="{key: 'alias', value: 'name'}"
        />
      </ht-form-item>
      <!--  获取单选复选控件动态值选项 @change="setCurrentCustomQuery()"-->
      <ht-load-data
        :url="identityUrl"
        requestMethod="post"
        context="portal"
        @after-load-data="afterLoadIdentityData"
      ></ht-load-data>
    </template>
    <!-- 富文本 isEditor-->
    <template
      v-if="
        isAdvancedProperty(field.options.advancedProperty, 'isEditor') &&
          field.ctrlType !== 'property-text' &&
          field.ctrlType !== 'date'
      "
    >
      <!-- <ht-form-item label="富文本" class="form-inline-item">
        <el-switch
          v-model="field.options.isEditor"
          @change="editorChange"
          :active-value="true"
          :inactive-value="false"
        ></el-switch>
      </ht-form-item> -->

      <template v-if="field.options.isEditor">
        <ht-form-item label="富文本设置" class="form-inline-item">
          <el-checkbox
            v-if="field.options.isEditor"
            v-model="field.options.noToolbar"
            >无工具栏</el-checkbox
          >
        </ht-form-item>
        <ht-form-item v-if="formType != 'mobile'">
          <div class="form-inline-item">
            <div class="width-height_box" style="margin-right: 10px">
              <span class="btn-pre">高</span>
              <el-input-number
                v-model="field.options.initialFrameHeight"
                placeholder="高度(px)"
                controls-position="right"
                :min="1"
                :max="1000"
                type="number"
              ></el-input-number>
            </div>
            <div class="width-height_box">
              <span class="btn-pre">宽</span>
              <el-input-number
                v-model="field.options.initialFrameWidth"
                placeholder="宽度(px)"
                controls-position="right"
                :min="1"
                :max="1000"
                type="number"
              ></el-input-number>
            </div>
          </div>
        </ht-form-item>
      </template>
    </template>
    <!-- 是否密码框 inputType-->
    <template
      v-if="
        isAdvancedProperty(field.options.advancedProperty, 'inputType') &&
          field.ctrlType !== 'number'
      "
    >
      <ht-form-item label-width="100px" class="form-inline-item">
        <template slot="label">
          密码输入框
          <el-tooltip content="文本框内容是否以密码的形式显示">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <el-switch
          v-model="field.options.inputType"
          :active-value="true"
          :inactive-value="false"
        >
        </el-switch>
      </ht-form-item>
    </template>
    <!-- 绑定前缀、后缀 bindPreAndSufFix-->
    <template
      v-if="
        isAdvancedProperty(
          field.options.advancedProperty,
          'bindPreAndSufFix'
        ) &&
          field.ctrlType !== 'number' &&
          field.ctrlType !== 'date'
      "
    >
      <ht-form-item label-width="100px" class="form-inline-item">
        <template slot="label">
          绑定前后缀
          <el-tooltip content="前缀文本框前部分固定的内容，后缀则后部分">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <el-checkbox
          v-model="field.options.isBindPreAndSufFix"
          @change="bindPreAndSufFixChange"
        >
          绑定
        </el-checkbox>
      </ht-form-item>
      <ht-form-item>
        <div v-if="field.options.isBindPreAndSufFix" class="bind-flex-line">
          <ht-input
            class="bind-flex-line_input"
            v-model="field.options.bindPreAndSufFixjson.preFix"
            placeholder="请输入前缀"
            @change="isNumberPrefix"
          ></ht-input>
          <ht-input
            class="bind-flex-line_input"
            v-model="field.options.bindPreAndSufFixjson.sufSix"
            placeholder="请输入后缀"
          ></ht-input>
        </div>
      </ht-form-item>
    </template>
    <!--字段校验规则-->
    <template v-if="showValidateProperty">
      <ht-form-item label-width="100px">
        <template slot="label">
          <div>
            字段校验<span style="color: red">(带*的支持EXCEL导入时校验)</span>
            <el-tooltip content="进行校验时，会按照从上至下的顺序依次校验">
              <i class="property-tip icon-notes" />
            </el-tooltip>
          </div>
        </template>
        <ValidataProperty
          :data.sync="field"
          ref="validateProperty"
          :boData.sync="mainBoFields"
          :fieldIndexData="fieldIndexData"
        />
      </ht-form-item>
    </template>

    <!-- 设置自定义脚本  script-->
    <template
      v-if="isAdvancedProperty(field.options.advancedProperty, 'script')"
    >
      <ht-form-item>
        <template slot="label">
          控件执行方法
          <el-tooltip content="设置控件执行的方法">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <el-button
          icon="icon-set"
          type="primary"
          size="small"
          plain
          style="width: 100%"
          @click="autoRunJSScript"
          >设置自定义脚本</el-button
        >
      </ht-form-item>
    </template>

    <!-- 通用的不放在 template中-->
    <el-dialog
      title="统计函数"
      :visible.sync="dialogCountVisible"
      destroy-on-close
      append-to-body
      :close-on-click-modal="false"
    >
      <math-dialog
        :bo-def-data="boDefData"
        :visible.sync="dialogCountVisible"
        :math-exp.sync="field.options.mathExp"
      />
    </el-dialog>

    <el-dialog
      title="自定义运行脚本设置"
      :visible.sync="dialogScriptVisible"
      append-to-body
      class="urgent-text"
      :close-on-click-modal="false"
    >
      <div>
        <p>
          <span>
            <strong>备注：</strong>
          </span>
        </p>
        <p>只需要填写function内的业务逻辑 内置参数有</p>
        <code>
          function(req,data,i18n,Message,Loading,formVm,_this){
          <br />// 业务逻辑代码 <br />// req 异步请求封装
          可以查看带中的request.js <br />// i18n 国际化对象
          i18n.t('login.login'); // data 在线表单数据对象 <br />// Message,
          Loading 分别ElementUI 的message 和 loading组件 <br />// formVm
          form的vue实例对象 使用如下 <br />// formVm.data 表单数据 <br />//
          formVm.$t('login.login') 国际化 <br />// _this 当前控件的vue对象
          _this.inputVal 控件绑定的model值 <br />} // 如果是设置树控件的脚本
          多三个参数 nodeData节点数据 ,node节点对象,treeComponent 树组件对象
        </code>
        <p>如果设置了输入框 返回值将直接绑带到输入框中</p>
      </div>
      <ht-form-item label="自定义JS脚本" label-width>
        <ht-select
          clearable
          placeholder="选择表单变量"
          v-model="diyScript"
          :options="allBoData"
          :props="{key: 'name', value: 'desc'}"
          @change="diyScriptChange"
        >
          <template slot-scope="{options}">
            <el-option-group
              v-for="(group, idenx) in options"
              :key="idenx"
              :label="group.desc"
            >
              <el-option
                v-for="item in group.children"
                :key="item.id"
                :label="item.desc"
                :value="
                  'data.' +
                    item.path +
                    (group.nodeType == 'sub' ? '[0]' : '') +
                    '.' +
                    item.name
                "
              ></el-option>
            </el-option-group>
          </template>
        </ht-select>
      </ht-form-item>
      <div style="width: 100%; height: 100%">
        <textarea
          v-model="scriptText"
          type="textarea"
          rows="15"
          autocomplete="off"
          ref="scriptText"
          style="width: 99%; height: 100%"
        ></textarea>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialogScriptVisible = false
            scriptText = ''
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="scriptOk">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="字段提示"
      :visible.sync="dialogTipVisible"
      append-to-body
      class="urgent-text"
      :close-on-click-modal="false"
    >
      <htEditor v-model="tooltip" :config="myConfig"></htEditor>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialogTipVisible = false
            tooltip = ''
          "
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="
            dialogTipVisible = false
            field.options.tip = tooltip
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <i18n-message-edit
      ref="i18nMessageEdit"
      :messageKey="i18nMessageKey"
      @after-save="afterSaveI18n"
    />
    <iframeUrlParameterDialog
      v-if="field.ctrlType == 'iframe'"
      ref="iframeUrlParameterDialog"
      :field="field"
      :allBoData="allBoData"
    ></iframeUrlParameterDialog>

    <iframeReturnParameterDialog
      v-if="field.ctrlType == 'iframe'"
      ref="iframeReturnParameterDialog"
      :field="field"
      :allBoData="allBoData"
    ></iframeReturnParameterDialog>
  </el-form>
</template>

<script>
import iframeUrlParameterDialog from '@/components/form/IframeUrlParameterDialog.vue'
import iframeReturnParameterDialog from '@/components/form/IframeReturnParameterDialog.vue'

import ValidataProperty from '@/components/form/ValidataProperty.vue'
import htEditor from '@/components/common/HtEditor.vue'
import i18nMessageEdit from '@/components/system/I18nMessageEdit.vue'
import MathDialog from '@/components/form/customView/MathDialog.vue'

const HYPERLINK_OPEN_TYPE = [
  {key: 'dialog', value: '弹窗打开'},
  {key: 'newPage', value: '新增标签页'},
  {key: 'currentPage', value: '当前页面'}
]
const HYPERLINK_CTRLS = [
  'input',
  'explain',
  'number',
  'time',
  'dic',
  'autocomplete',
  'richText',
  'textarea',
  'date',
  'dialog',
  'selector'
]

export default {
  name: 'advanced-property',
  props: [
    'data',
    'mainBoFields',
    'allBoData',
    'boDefData',
    'fieldIndexData',
    'formType'
  ],
  components: {
    ValidataProperty,
    htEditor,
    i18nMessageEdit,
    MathDialog,
    iframeUrlParameterDialog,
    iframeReturnParameterDialog
  },
  data() {
    return {
      hyperlinkOpenType: HYPERLINK_OPEN_TYPE,
      myConfig: {
        initialFrameHeight: 240,
        UEDITOR_HOME_URL:
          window.location.origin +
          '/' +
          window.location.pathname.split('/')[1] +
          '/static/ueditor/',
        toolbars: [
          [
            // 'source', //源代码
            'undo', //撤销
            'bold', //加粗
            'indent', //首行缩进
            'italic', //斜体
            'underline', //下划线
            'strikethrough', //删除线
            'subscript', //下标
            'fontborder', //字符边框
            'superscript', //上标
            'formatmatch', //格式刷
            'forecolor', //字体颜色
            'justifyleft', //居左对齐
            'justifycenter', //居中对齐
            'justifyright', //居右对齐
            'justifyjustify', //两端对齐
            'fontfamily', //字体
            'fontsize', //字号
            'insertorderedlist', //有序列表
            'insertunorderedlist', //无序列表
            'lineheight', //行间距
            'inserttable' //插入表格
          ]
        ],
        // 初始容器宽度
        initialFrameWidth: '100%',
        zIndex: 9999,
        enableAutoSave: false,
        readonly: false
      },
      effectObj: {
        validateObj: {
          fieldPath: this.data.fieldPath,
          options: {
            validateList: [],
            validate: '',
            validateType:
              'confirmed|email|regex|id_card|min|max|min_value|max_value|isAfter|isBefore|isStart|isEnd|numeric|between|is|digits|mobile|required|alpha_spaces|alpha_dash|alpha_num|alpha|method'
          }
        }
      },
      field: this.data,
      customQuerys: [],
      customQueryUrl: '',
      fields: [],
      dialogLinkageVisible: false, //联动设置对话框
      linkage: [
        {
          value: '',
          effect: [
            {
              validateObj: {
                fieldPath: this.data.fieldPath,
                options: {
                  validateList: [],
                  validate: '',
                  validateType:
                    'confirmed|email|regex|id_card|min|max|min_value|max_value|isAfter|isBefore|isStart|isEnd|numeric|between|is|digits|mobile|required|alpha_spaces|alpha_dash|alpha_num|alpha|method'
                }
              }
            }
          ]
        }
      ], //联动表达式
      items: [
        //联动校验显示隐藏
        {key: 'n', value: '隐藏'},
        {key: 'w', value: '显示'},
        {key: 'b', value: '必填'}
      ],
      identityUrl: '', //获取流水号数据url
      identitys: [], //流水号数据
      scriptText: '', //自定义js脚本对话框值
      isBnt: false, //是否按钮脚本
      diyScript: '', //自定义js脚本对话框表单值
      dialogScriptVisible: false, //自定义js脚本对话框
      dialogTipVisible: false,
      dialogCountVisible: false, //数字统计框
      tooltip: '',
      i18nMessageKey: '',
      createKeyMap: {
        text: true,
        image: true,
        'immediate-single': true,
        'immediate-textarea': true
      }
    }
  },
  computed: {
    showValidateProperty() {
      const {
        validateType,
        isInputEdit,
        disabled,
        advancedProperty
      } = this.field.options
      const ctrlType = this.field.ctrlType
      return (
        (validateType != undefined && !['property-text'].includes(ctrlType)) ||
        (this.isAdvancedProperty(advancedProperty, 'disabled') && !disabled)
      )
    }
  },
  mounted() {
    if (this.field.options.isBindIdentity) {
      this.identityUrl = '/sys/identity/v1/getAll'
    }

    if (this.field.options.bindIdentityjson) {
      if (this.field.options.bindIdentityjson.alias) {
        this.identityCheck()
      }
    }
  },
  methods: {
    handleDisabledChange(val) {
      this.$set(this.field.options, 'isValidate', val)
    },
    hasHyperlink() {
      if (
        this.formType != 'mobile' &&
        HYPERLINK_CTRLS.includes(this.field.ctrlType)
      ) {
        return true
      }
      return false
    },
    async hylinkUrlVarChange(myValue) {
      const myField = this.$refs.hyperlinkUrl
      var value = '${' + myValue + '}'
      if (myField.selectionStart || myField.selectionStart === 0) {
        var startPos = myField.selectionStart
        var endPos = myField.selectionEnd
        this.scriptText =
          myField.value.substring(0, startPos) +
          value +
          myField.value.substring(endPos, myField.value.length)
        await this.$nextTick() // 这句是重点, 圈起来
        myField.focus()
        myField.setSelectionRange(endPos + value.length, endPos + value.length)
      } else {
        this.field.options.hyperlinkUrl += value
      }
    },
    openReturnParameterDialog() {
      this.$refs['iframeReturnParameterDialog'].openDialog()
    },
    openIframeUrlParameterDialog() {
      this.$refs['iframeUrlParameterDialog'].openDialog()
    },

    editorChange(value) {
      if (value && this.field.options.customInput) {
        this.field.options.customValueBase64 = Base64.encode(
          this.field.options.customInput
        )
      }
      if (value) {
        this.field.options.placeholder = ''
        this.$set(this.field.options, 'custDefaultSelectVal', '')
      }
    },
    //判断控件是否有特殊基础属性
    isBasicsProperty(basicsProperty, alias) {
      if (basicsProperty && alias) {
        const basicsPropertys = basicsProperty.split('|')
        if (basicsPropertys.includes(alias)) {
          return true
        } else {
          return false
        }
      }
      return false
    },
    clearFunction() {
      this.field.options.mathExp = undefined
    },
    bindPreAndSufFixChange(model) {
      if (!model) {
        this.field.options.bindPreAndSufFixjson = {}
      }
    },
    afterSaveI18n(data) {
      data.key = data.key.replace('$', '#')
      if (data.prop.endsWith('placeholder')) {
        this.field.options.placeholder = data.key
        this.field.options.placeholder_zh = data.desc
      } else if (data.prop.endsWith('tip')) {
        this.tooltip = data.key
        this.field.options.tip = data.key
        this.field.options.tip_zh = data.desc
      } else {
        this.field.desc = data.key
        this.field.desc_zh = data.desc
      }
    },
    editI18nMessage(after) {
      this.i18nMessageKey = this.field.fieldPath || this.field.path
      if (this.createKeyMap[this.field.ctrlType]) {
        this.i18nMessageKey =
          this.formData.formKey +
          '.' +
          this.field.ctrlType +
          Math.random() * 5000
      }
      if (this.i18nMessageKey && after) {
        this.i18nMessageKey += after
      }
      this.$refs.i18nMessageEdit.handleOpen()
    },
    //字段填写提示按钮
    tipClick() {
      this.dialogTipVisible = true
      if (!this.field.options.tip) {
        this.tooltip = ''
        return
      }
      this.tooltip = this.field.options.tip
    },
    async diyScriptChange(myValue) {
      const myField = this.$refs.scriptText
      var value = myValue
      if (myField.selectionStart || myField.selectionStart === 0) {
        var startPos = myField.selectionStart
        var endPos = myField.selectionEnd
        this.scriptText =
          myField.value.substring(0, startPos) +
          value +
          myField.value.substring(endPos, myField.value.length)
        await this.$nextTick() // 这句是重点, 圈起来
        myField.focus()
        myField.setSelectionRange(endPos + value.length, endPos + value.length)
      } else {
        this.scriptText += value
      }
    },
    scriptOk() {
      this.dialogScriptVisible = false
      if (!this.scriptText) {
        this.field.options.script = ''
        return
      }
      if (!this.isBnt) {
        this.field.options.script = Base64.encode(this.scriptText)
      } else {
        this.field.options.script = Base64.encode(this.scriptText)
      }
    },
    autoRunJSScript(isBnt) {
      if (isBnt) {
        this.isBnt = true
      }
      this.dialogScriptVisible = true
      if (!this.field.options.script) return
      this.scriptText = Base64.decode(this.field.options.script)
    },
    //关闭联动设置对话框
    closeDialogLinkage() {
      this.dialogLinkageVisible = false
      this.linkage.length = 0
    },
    linkageOk() {
      this.dialogLinkageVisible = false
      Object.assign(this.field.options.linkage, this.linkage)
    },
    addRows() {
      this.linkage.push({
        value: '',
        effect: [
          {
            validateObj: {
              fieldPath: this.field.fieldPath,
              options: {
                validateList: [],
                validate: '',
                validateType:
                  'confirmed|email|regex|id_card|min|max|min_value|max_value|isAfter|isBefore|isStart|isEnd|numeric|between|is|digits|mobile|required|alpha_spaces|alpha_dash|alpha_num|alpha|method'
              }
            }
          }
        ]
      })
    },
    openLinkage() {
      if (this.field.options.linkage && this.field.options.linkage.length > 0) {
        Object.assign(this.linkage, this.field.options.linkage)
      } else {
        if (this.linkage.length == 1) {
          this.linkage.length = 0
        }
      }
      this.dialogLinkageVisible = true
    },

    //选择单选或复选的动态选项
    setCurrentCustomQuery() {
      const _this = this
      this.customQuerys.forEach(item => {
        if (this.field.options.customQuery.alias == item.alias) {
          if (typeof item.conditionfield == 'string') {
            item.conditionfield = JSON.parse(item.conditionfield) //parseToJson(item.customQuery.conditionfield);
            item.resultfield = JSON.parse(item.resultfield) // parseToJson(item.customQuery.resultfield);
          }
          //把当前对象克隆一份到控件属性配置
          Object.assign(_this.field.options.customQuery, item)
        }
      })
      //删除掉无效的参数
      var bind = []
      this.field.options.customQuery.conditionfield.forEach(item => {
        if (item.defaultType == 1) {
          bind.push(item)
        }
      })
      this.field.options.bind = bind
    },
    dynamicClick() {
      this.customQueryUrl = '/form/customQuery/v1/list'
      this.field.options.customQuery = {}
      this.field.options.bind = []
      this.field.options.options = []
      if (this.field.options.choiceType == 'dynamic') {
        this.field.options.linkage = []
      }
    },
    afterCustomQueryLoadData(data) {
      this.customQuerys = data.rows
    },
    afterLoadIdentityData(data) {
      this.identitys = data
    },
    identityCheck() {
      if (this.field.options.isBindIdentity) {
        this.identityUrl = '/sys/identity/v1/getAll'
      } else {
        this.identityUrl = ''
      }
    },
    isAdvancedProperty(advabcedAttr, alias) {
      if (advabcedAttr && alias) {
        const advabcedAttrs = advabcedAttr.split('|')
        if (advabcedAttrs.includes(alias)) {
          return true
        } else {
          return false
        }
      }
      return false
    },
    isNumberPrefix() {
      if (
        this.field.ctrlType == 'number' &&
        this.field.options.bindPreAndSufFixjson.preFix
      ) {
        this.field.options.width = '90%'
      }
    },
    changeWidth(v) {
      if (!/^([1-9]\d*|0)(?:\.\d+)?%?|px|auto|vw|vh$/.test(v)) {
        this.$message.warning('请输入正确格式的宽度')
        this.$set(this.field.options, 'width', null)
      }
    }
  },
  watch: {
    data: {
      handler(val) {
        this.field = val
      },
      deep: true,
      immediate: true
    },
    field: {
      handler(val) {
        this.$emit('update:data', val)
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
@import '@/assets/css/form-editor.scss';
.min-max_box {
  display: flex;
  align-items: center;
  .btn-pre {
    display: inline-block;
    width: 38px;
    text-align: center;
    background: #f5f7fa;
    border: 1px solid #dcdee0;
    border-right: none;
    line-height: 30px;
    height: 30px;
    border-radius: 2px 0px 0px 2px;
    color: #666666;
  }
  .elSelect,
  .el-input-number--small {
    width: calc(100% - 38px) !important;
    height: 32px;
    .el-input__inner {
      border-radius: 0px 2px 2px 0;
    }
    .el-input-number__increase,
    .el-input-number__decrease {
      background: #f5f7fa;
      color: #666666;
    }
  }
  .inputs.ht-form-inputs__inline {
    width: 100%;
    .el-input-number--small {
      width: 100%;
    }
  }
}
.btn-radio >>> .el-radio-button__inner {
  padding: 5px 5px;
}
.btn-padding {
  padding: 5px 5px;
}
.btn-radio {
  margin-left: 14px;
}
.btn-radio >>> .el-radio-button__inner {
  padding: 5px 5px;
}
.choiceType-table td {
  padding: 3px;
}
.customQuery-inputs >>> .inputs,
.customQuery-inputs >>> .inputs .el-select {
  width: 100%;
}
.choiceType-bottom .el-form-item {
  margin-bottom: 0px;
}
.linkageTable-tr td {
  text-align: center;
}
.linkage-div-bottom >>> .el-form-item {
  margin-bottom: 0px;
}
.title-color-wrap {
  margin-right: 16px;
}
::v-deep .label-color-picker {
  height: 20px;
  .el-color-picker__trigger {
    height: 20px;
    width: 20px;
    padding: 1px;
    margin-right: 3px;
  }
}
.label-align-size {
  font-size: 14px;
}
.bind-flex-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  > .bind-flex-line_input {
    width: 49%;
  }
}
.ht-form-item-colon ::v-deep .el-form-item__label::after {
  content: '';
}
.ht-form-item-colon >>> .el-form-item__label:after {
  content: '';
}
/* 不换行的表单项 */
.form-inline-item {
  display: flex;
  flex-wrap: nowrap !important;
  /deep/.el-form-item__label {
    text-align: left;
  }
}
.color-selected {
  display: flex;
  position: relative;
  align-items: center;
  border: 1px solid #dcdee0;
  text-align: center;
  height: 32px;
  line-height: 32px;
  margin-right: 10px;
  .color {
    display: inline-block;
    padding: 0 10px;
    background: #f5f7fa;
  }
  .color2 {
    display: inline-block;
    padding: 0 10px;
    background: #f5f7fa;
    width: 56px;
    height: 32px;
    line-height: 32px;
  }
  .el-icon-caret-bottom {
    position: absolute;
    right: 7px;
  }
  /deep/.el-color-picker--mini {
    height: 20px;
    margin: 0 12px;
  }
  /deep/.el-color-picker--mini .el-color-picker__trigger {
    height: 20px;
    width: 32px;
    padding: 0 !important;
  }
}
.grid-radio-group {
  /deep/.el-radio-button__inner {
    width: 35px;
  }
  .position-checkbox {
    height: 34px;
    /deep/.el-radio-button__orig-radio {
      display: none;
    }
    /deep/.el-radio-button__inner {
      padding: 5px;
      .position-icon {
        font-size: 22px;
      }
    }
  }
  /deep/.is-checked {
    background: #e8f3ff;
  }
}
.grid-checkbox-group {
  /deep/.el-checkbox-button__inner {
    width: 32px;
  }
  .bold-checkbox {
    padding: 6px 8px;
    border-radius: 2px;
    height: 34px;
    /deep/.el-checkbox__input {
      display: none;
    }
    /deep/.el-checkbox__label {
      padding: 0;
      .bold-icon {
        font-size: 16px;
      }
    }
  }
  /deep/.is-checked {
    background: #e8f3ff;
  }
}
/deep/.el-radio-button:first-child .el-radio-button__inner {
  border-radius: 2px 0 0 2px;
}
/deep/.el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 2px 2px 0;
}
.width-height_box {
  align-items: center;
  .btn-pre {
    display: inline-block;
    width: 36px;
    text-align: center;
    background: #f5f7fa;
    border: 1px solid #dcdee0;
    border-right: none;
    line-height: 30px;
    height: 30px;
    border-radius: 2px 0px 0px 2px;
    color: #666666;
  }
  .el-input-number--small {
    width: calc(100% - 38px);
    .el-input__inner {
      border-radius: 0 2px 2px 0;
    }
    .el-input-number__increase,
    .el-input-number__decrease {
      background: #f5f7fa;
      color: #666666;
    }
  }
}
/deep/.el-input-group__append,
.el-input-group__prepend {
  border-radius: 2px;
}

.select-form-var {
  float: right;
  width: 100px;
  ::v-deep.el-select {
    .el-input {
      .el-input__inner {
        border: none;
      }
      .el-input__inner::placeholder {
        color: #262626;
      }
      .el-select__caret.el-input__icon::before {
        content: '\e790';
        color: #262626;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>