<template>
  <div class="fullheight datav-info">
    <el-form
      data-vv-scope="field"
      class="form"
      size="small"
      inline
      label-position="left"
    >
      <el-tabs
        class="field__tabs"
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane label="组件属性" class="datav-tab-pane" name="eleInfo">
          <el-scrollbar
            v-if="
              selectField.alias &&
                !(selectWidgetMap && JSON.stringify(selectWidgetMap) != '{}')
            "
            :key="selectField.key"
            class="fullheight"
          >
            <el-collapse
              accordion
              v-model="avtiveCollapseName"
              style="width: 320px"
            >
              <el-collapse-item
                v-if="selectField.alias"
                title="基本信息"
                name="baseModel"
              >
                <ht-form-item label="名称">
                  <ht-input
                    v-model="selectField.name"
                    class="ht"
                    placeholder="请输入页号"
                    autocomplete="off"
                    validate="required"
                  ></ht-input>
                </ht-form-item>
                <ht-form-item label="类型">
                  <ht-select
                    clearable
                    filterable
                    @change="onChangeChart"
                    v-model="selectField.alias"
                    :options="
                      selectField.type == 'chart' ? chartTypes : elementsTypes
                    "
                    :props="{key: 'alias', value: 'name'}"
                    class="select-field-type"
                    validate="required"
                  />
                </ht-form-item>
                <ht-form-item label="描述">
                  <ht-input
                    type="textarea"
                    v-model="selectField.desc"
                    :maxlength="200"
                    :showWordLimit="true"
                    placeholder="请输入描述"
                  />
                </ht-form-item>
              </el-collapse-item>
              <div class="color-line"></div>
              <el-collapse-item title="样式" name="styleModel">
                <div class="divider-title" v-if="selectField.type == 'chart'">
                  <i></i>图表标题
                </div>
                <ht-form-item v-if="selectField.type == 'chart'" label="标题">
                  <ht-input
                    @change="changeTitleText"
                    v-model="selectField.options.option.title.text"
                    placeholder="请输入标题"
                    autocomplete="off"
                  ></ht-input>
                </ht-form-item>
                <ht-form-item
                  v-if="
                    selectField.type == 'chart' &&
                      selectField.options.option.title.text
                  "
                  label="副标题"
                >
                  <ht-input
                    v-model="selectField.options.option.title.subtext"
                    placeholder="请输入副标题"
                    autocomplete="off"
                  ></ht-input>
                </ht-form-item>
                <ht-form-item
                  v-if="
                    selectField.type == 'chart' &&
                      selectField.options.option.title.text
                  "
                  label="位置"
                >
                  <el-radio-group
                    v-model="selectField.options.option.title.left"
                  >
                    <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>
                </ht-form-item>
                <ht-form-item
                  v-if="
                    selectField.type == 'chart' &&
                      selectField.options.option.title.text
                  "
                  label="字体样式"
                >
                  <el-input
                    v-model="
                      selectField.options.option.title.textStyle.fontSize
                    "
                    class="form-item-two"
                    type="number"
                    :min="8"
                    :max="100"
                  >
                    <template slot="append">px</template>
                  </el-input>
                  <el-color-picker
                    v-model="selectField.options.option.title.textStyle.color"
                    size="medium"
                  ></el-color-picker>
                </ht-form-item>
                <div class="divider-title"><i></i>位置尺寸</div>
                <ht-form-item label="层级" label-width="40px">
                  <el-input
                    v-model="selectField.zIndex"
                    class="form-item-two"
                    type="number"
                    :min="1"
                    :max="10000"
                    @change="checkValue"
                  >
                    <template slot="prepend">Z</template>
                  </el-input>
                </ht-form-item>
                <ht-form-item label="位置" label-width="40px">
                  <el-input
                    v-model="selectField.x"
                    class="form-item-two"
                    type="number"
                    :min="1"
                    :max="2000"
                    @change="checkValue"
                  >
                    <template slot="prepend">X</template>
                  </el-input>
                  <el-input
                    v-model="selectField.y"
                    class="form-item-two"
                    type="number"
                    :min="1"
                    :max="2000"
                    @change="checkValue"
                  >
                    <template slot="prepend">Y</template>
                  </el-input>
                </ht-form-item>
                <ht-form-item label="尺寸" label-width="40px">
                  <el-input
                    v-model="selectField.width"
                    class="form-item-two"
                    type="number"
                    :min="1"
                    :max="2000"
                    @change="checkValue"
                  >
                    <template slot="prepend">W</template>
                  </el-input>
                  <el-input
                    v-model="selectField.height"
                    class="form-item-two"
                    type="number"
                    :min="1"
                    :max="2000"
                    @change="checkValue"
                  >
                    <template slot="prepend">H</template>
                  </el-input>
                </ht-form-item>
                <div class="divider-title"><i></i>其他属性</div>

                <template v-if="selectField.type == 'chart'">
                  <ht-form-item label="深色模式">
                    <el-checkbox
                      v-model="selectField.options.deepColor"
                    ></el-checkbox>
                  </ht-form-item>

                  <ht-form-item label="高亮切换频率">
                    <el-tooltip
                      effect="dark"
                      content="高亮切换的频率(秒)，为0时不切换"
                      slot="label"
                    >
                      <span>高亮切换频率(秒)</span>
                    </el-tooltip>
                    <el-input-number
                      v-model="selectField.options.switchingFrequency"
                      :step="1"
                      :min="0"
                      :max="100"
                    ></el-input-number>
                  </ht-form-item>
                </template>

                <template v-if="selectField.alias == 'line'">
                  <ht-form-item label="平滑曲线">
                    <el-checkbox
                      v-model="selectField.options.option.lineSmooth"
                    ></el-checkbox>
                  </ht-form-item>
                </template>
                <template v-if="selectField.alias == 'ring-chart'">
                  <ht-form-item label="环半径">
                    <ht-input
                      v-model="selectField.options.config.radius"
                      placeholder="可选值：'50%'|100"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item>
                    <el-tooltip
                      effect="dark"
                      content="环半径（动态）"
                      slot="label"
                    >
                      <span>环半径（动态）</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.activeRadius"
                      placeholder="可选值：'55%'|110"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item>
                    <el-tooltip effect="dark" content="环线条宽度" slot="label">
                      <span>环线条宽度</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.lineWidth"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item>
                    <el-tooltip
                      effect="dark"
                      content="切换间隔(ms)"
                      slot="label"
                    >
                      <span>切换间隔(ms)</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.activeTimeGap"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item>
                    <el-tooltip
                      effect="dark"
                      content="数字翻牌器小数位数"
                      slot="label"
                    >
                      <span>数字翻牌器小数位数</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.digitalFlopToFixed"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item>
                    <el-tooltip
                      effect="dark"
                      content="数字翻牌器单位"
                      slot="label"
                    >
                      <span>数字翻牌器单位</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.digitalFlopUnit"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item>
                    <el-tooltip effect="dark" content="动效曲线" slot="label">
                      <span>动效曲线</span>
                    </el-tooltip>
                    <ht-select
                      clearable
                      filterable
                      class=""
                      v-model="selectField.options.config.animationCurve"
                      :options="animationCurveArray"
                      :props="{key: 'alias', value: 'alias'}"
                    />
                  </ht-form-item>
                  <ht-form-item label="显示原始值">
                    <el-radio-group
                      v-model="selectField.options.config.showOriginValue"
                    >
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                </template>
                <template v-if="selectField.alias == 'capsule-chart'">
                  <ht-form-item label="单位">
                    <ht-input
                      v-model="selectField.options.config.unit"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="显示数值">
                    <el-radio-group
                      v-model="selectField.options.config.showValue"
                    >
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                </template>
                <template v-if="selectField.alias == 'water-level-pond'">
                  <ht-form-item>
                    <el-tooltip effect="dark" content="水位图形状" slot="label">
                      <span>水位图形状</span>
                    </el-tooltip>
                    <ht-select
                      clearable
                      filterable
                      class=""
                      v-model="selectField.options.config.shape"
                      :options="[
                        {alias: 'rect', name: '矩形'},
                        {alias: 'roundRect', name: '圆角矩形'},
                        {alias: 'round', name: '圆形'}
                      ]"
                      :props="{key: 'alias', value: 'name'}"
                    />
                  </ht-form-item>
                  <ht-form-item label="波浪数量">
                    <el-tooltip effect="dark" content="波浪数量" slot="label">
                      <span>波浪数量</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.waveNum"
                      :max="20"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="波浪高度">
                    <el-tooltip effect="dark" content="波浪高度" slot="label">
                      <span>波浪高度</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.waveHeight"
                      :max="20"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="波浪透明度">
                    <el-tooltip effect="dark" content="波浪透明度" slot="label">
                      <span>波浪透明度</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.waveOpacity"
                      :max="1"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="信息格式化">
                    <el-tooltip effect="dark" content="信息格式化" slot="label">
                      <span>信息格式化</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.formatter"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                </template>
                <template v-if="selectField.alias == 'percent-pond'">
                  <ht-form-item label="边框宽度">
                    <el-tooltip effect="dark" content="边框宽度" slot="label">
                      <span>边框宽度</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.borderWidth"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="边框间隙">
                    <el-tooltip effect="dark" content="边框间隙" slot="label">
                      <span>边框间隙</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.borderGap"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="文字颜色" label-width="90px">
                    <el-tooltip effect="dark" content="文字颜色" slot="label">
                      <span>文字颜色</span>
                    </el-tooltip>
                    <el-color-picker
                      v-model="selectField.options.config.textColor"
                      size="medium"
                    ></el-color-picker>
                  </ht-form-item>
                  <ht-form-item label="边框半径">
                    <el-tooltip effect="dark" content="边框半径" slot="label">
                      <span>边框半径</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.borderRadius"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="局部渐变">
                    <el-tooltip effect="dark" content="局部渐变" slot="label">
                      <span>局部渐变</span>
                    </el-tooltip>
                    <el-radio-group
                      v-model="selectField.options.config.localGradient"
                    >
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                  <ht-form-item label="信息格式化">
                    <el-tooltip effect="dark" content="信息格式化" slot="label">
                      <span>信息格式化</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.formatter"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                </template>
                <template v-if="selectField.alias == 'conical-column-chart'">
                  <ht-form-item label="文字大小">
                    <el-tooltip effect="dark" content="文字大小" slot="label">
                      <span>文字大小</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.fontSize"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="文字颜色" label-width="90px">
                    <el-tooltip effect="dark" content="文字颜色" slot="label">
                      <span>文字颜色</span>
                    </el-tooltip>
                    <el-color-picker
                      v-model="selectField.options.config.textColor"
                      size="medium"
                    ></el-color-picker>
                  </ht-form-item>
                  <ht-form-item label="显示数值">
                    <el-tooltip effect="dark" content="显示数值" slot="label">
                      <span>显示数值</span>
                    </el-tooltip>
                    <el-radio-group
                      v-model="selectField.options.config.showValue"
                    >
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                </template>
                <template v-if="selectField.alias == 'digital-flop'">
                  <ht-form-item label="内容模板">
                    <el-tooltip effect="dark" content="内容模板" slot="label">
                      <span>内容模板</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.content"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="小数位数">
                    <el-tooltip effect="dark" content="小数位数" slot="label">
                      <span>小数位数</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.toFixed"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="动效曲线">
                    <el-tooltip effect="dark" content="动效曲线" slot="label">
                      <span>动效曲线</span>
                    </el-tooltip>
                    <ht-select
                      clearable
                      filterable
                      class=""
                      v-model="selectField.options.config.animationCurve"
                      :options="animationCurveArray"
                      :props="{key: 'alias', value: 'alias'}"
                    />
                  </ht-form-item>
                  <ht-form-item label="动效帧数">
                    <el-tooltip effect="dark" content="动效帧数" slot="label">
                      <span>动效帧数</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.animationFrame"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                </template>
                <template v-if="selectField.alias == 'scroll-board'">
                  <ht-form-item label="显示表头">
                    <el-tooltip effect="dark" content="显示表头" slot="label">
                      <span>显示表头</span>
                    </el-tooltip>
                    <el-radio-group
                      v-model="selectField.options.config.showHeader"
                      @change="changeShowHeader"
                    >
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                  <ht-form-item
                    label="表头数据"
                    v-if="selectField.options.config.showHeader"
                  >
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content='json字符串，如：["列1", "列2", "列3"]'
                      @change="changeShowHeader"
                      placement="right"
                    >
                      <ht-input
                        v-model="selectField.options.config.headerJson"
                        type="textarea"
                        :rows="3"
                        autocomplete="off"
                      ></ht-input>
                    </el-tooltip>
                  </ht-form-item>
                  <ht-form-item
                    v-if="selectField.options.config.showHeader"
                    label="表头背景色"
                    label-width="100px"
                  >
                    <el-tooltip effect="dark" content="表头背景色" slot="label">
                      <span>表头背景色</span>
                    </el-tooltip>
                    <el-color-picker
                      v-model="selectField.options.config.headerBGC"
                      size="medium"
                    ></el-color-picker>
                  </ht-form-item>
                  <ht-form-item
                    label="表头高度"
                    v-if="selectField.options.config.showHeader"
                  >
                    <el-tooltip effect="dark" content="表头高度" slot="label">
                      <span>表头高度</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.headerHeight"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="表行数">
                    <ht-input
                      v-model="selectField.options.config.rowNum"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item>
                    <span slot="label">奇数行背景色</span>
                    <el-color-picker
                      v-model="selectField.options.config.oddRowBGC"
                      size="medium"
                    ></el-color-picker>
                  </ht-form-item>
                  <ht-form-item>
                    <span slot="label">偶数行背景色</span>
                    <el-color-picker
                      v-model="selectField.options.config.evenRowBGC"
                      size="medium"
                    ></el-color-picker>
                  </ht-form-item>
                  <ht-form-item>
                    <el-tooltip
                      effect="dark"
                      content="轮播时间间隔(ms)"
                      slot="label"
                    >
                      <span>轮播时间间隔(ms)</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.waitTime"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="显示行号">
                    <el-radio-group v-model="selectField.options.config.index">
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                  <ht-form-item label="轮播方式">
                    <ht-select
                      clearable
                      filterable
                      class=""
                      v-model="selectField.options.config.carousel"
                      :options="[
                        {alias: 'single', name: '单条'},
                        {alias: 'page', name: '整页'}
                      ]"
                      :props="{key: 'alias', value: 'name'}"
                    />
                  </ht-form-item>
                  <ht-form-item>
                    <span slot="label">悬浮暂停轮播</span>
                    <el-radio-group
                      v-model="selectField.options.config.hoverPause"
                    >
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                </template>
                <template v-if="selectField.alias == 'scroll-ranking-board'">
                  <ht-form-item label="表行数">
                    <ht-input
                      v-model="selectField.options.config.rowNum"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="轮播时间间隔(ms)">
                    <el-tooltip
                      effect="dark"
                      content="轮播时间间隔(ms)"
                      slot="label"
                    >
                      <span>轮播时间间隔(ms)</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.waitTime"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="轮播方式">
                    <el-tooltip effect="dark" content="轮播方式" slot="label">
                      <span>轮播方式</span>
                    </el-tooltip>
                    <ht-select
                      clearable
                      filterable
                      class=""
                      v-model="selectField.options.config.carousel"
                      :options="[
                        {alias: 'single', name: '单条'},
                        {alias: 'page', name: '整页'}
                      ]"
                      :props="{key: 'alias', value: 'name'}"
                    />
                  </ht-form-item>
                  <ht-form-item label="数值单位">
                    <el-tooltip effect="dark" content="数值单位" slot="label">
                      <span>数值单位</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.unit"
                      type="number"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="自动排序">
                    <el-tooltip effect="dark" content="自动排序" slot="label">
                      <span>自动排序</span>
                    </el-tooltip>
                    <el-radio-group v-model="selectField.options.config.sort">
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                </template>
                <template
                  v-if="
                    selectField.alias == 'flyline-chart' ||
                      selectField.alias == 'flyline-chart-enhanced'
                  "
                >
                  <ht-form-item
                    label="中心点坐标"
                    v-if="selectField.alias == 'flyline-chart'"
                  >
                    <el-tooltip effect="dark" content="中心点坐标" slot="label">
                      <span>中心点坐标</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.centerPointStr"
                      @change="changeCenterPoint"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="飞线宽度"
                    v-if="selectField.alias == 'flyline-chart'"
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="飞线宽度" slot="label">
                      <span>飞线宽度</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.lineWidth"
                      type="number"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="飞线宽度"
                    v-if="selectField.alias == 'flyline-chart-enhanced'"
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="飞线宽度" slot="label">
                      <span>飞线宽度</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.line.width"
                      type="number"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="飞线颜色"
                    v-if="selectField.alias == 'flyline-chart'"
                    label-width="100px"
                    style="width: 100%"
                  >
                    <el-tooltip effect="dark" content="飞线颜色" slot="label">
                      <span>飞线颜色</span>
                    </el-tooltip>
                    <el-color-picker
                      v-model="selectField.options.config.flylineColor"
                      size="medium"
                    ></el-color-picker>
                  </ht-form-item>
                  <ht-form-item
                    label="飞线颜色"
                    v-if="selectField.alias == 'flyline-chart-enhanced'"
                    label-width="100px"
                    style="width: 100%"
                  >
                    <el-tooltip effect="dark" content="飞线颜色" slot="label">
                      <span>飞线颜色</span>
                    </el-tooltip>
                    <el-color-picker
                      v-model="selectField.options.config.line.color"
                      size="medium"
                    ></el-color-picker>
                  </ht-form-item>
                  <ht-form-item
                    label="动画时长"
                    v-if="selectField.alias == 'flyline-chart'"
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="动画时长" slot="label">
                      <span>动画时长</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.durationStr"
                      @change="changeCenterDuration"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="动画时长"
                    v-if="selectField.alias == 'flyline-chart-enhanced'"
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="动画时长" slot="label">
                      <span>动画时长</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.line.durationStr"
                      @change="changeCenterLineDuration"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="显示半径"
                    v-if="selectField.alias == 'flyline-chart-enhanced'"
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="显示半径" slot="label">
                      <span>显示半径</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.line.radius"
                      type="number"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item>
                    <el-tooltip
                      effect="dark"
                      content="飞线收束程度"
                      slot="label"
                    >
                      <span>飞线收束程度</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.k"
                      :min="-1"
                      :max="1"
                      type="number"
                      :integer="true"
                      :default-value="1"
                      :precision="1"
                      :step="0.1"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="飞线曲率" label-width="90px">
                    <el-tooltip effect="dark" content="飞线曲率" slot="label">
                      <span>飞线曲率</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.curvature"
                      :min="1"
                      :max="10"
                      type="number"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item>
                    <el-tooltip
                      effect="dark"
                      content="飞线显示半径"
                      slot="label"
                    >
                      <span>飞线显示半径</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.flylineRadius"
                      type="number"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item>
                    <el-tooltip
                      effect="dark"
                      :content="
                        selectField.alias == 'flyline-chart'
                          ? '飞线起始点数据'
                          : '飞线点'
                      "
                      slot="label"
                    >
                      <span>{{
                        selectField.alias == 'flyline-chart'
                          ? '飞线起始点数据'
                          : '飞线点'
                      }}</span>
                    </el-tooltip>
                    <codemirror
                      ref="pointstText"
                      v-model="selectField.options.config.pointsStr"
                      :options="cmOptions"
                      @ready="onPointsCmReady"
                      @input="changePoints"
                      style="width: 190px; height: 300px"
                      name="jsCode"
                    ></codemirror>
                  </ht-form-item>
                  <ht-form-item
                    label="飞线"
                    v-if="selectField.alias == 'flyline-chart-enhanced'"
                  >
                    <codemirror
                      ref="linestText"
                      v-model="selectField.options.config.linesStr"
                      :options="cmOptions"
                      @ready="onLinesCmReady"
                      @input="changeLines"
                      style="width: 190px; height: 300px"
                      name="jsCode"
                    ></codemirror>
                  </ht-form-item>
                  <ht-form-item label="背景图" label-width="100px">
                    <el-upload
                      action="string"
                      accept=".png,.PNG,.jpg,.JPG"
                      :http-request="uploadFlylineBgImg"
                      :before-upload="beforeAvatarUpload"
                      :show-file-list="false"
                    >
                      <el-tooltip
                        class="item"
                        effect="light"
                        content="图片格式：png、jpg "
                        placement="right"
                      >
                        <el-button
                          size="small"
                          icon="el-icon-plus"
                          round
                          class="screen_primary_btn"
                          >上传</el-button
                        >
                      </el-tooltip>
                    </el-upload>
                    <el-tag
                      v-if="selectField.options.config.bgImgFileId"
                      @close="handleFlylineBgImgClose()"
                      closable
                      type="success"
                      class="file-upload-name"
                      >
                        <span> {{ selectField.options.config.bgImgFileName }}</span>
                      
                     </el-tag
                    >
                  </ht-form-item>
                  <div class="divider-title"><i></i>文本配置项</div>
                  <ht-form-item label="文字大小">
                    <el-tooltip effect="dark" content="文字大小" slot="label">
                      <span>文字大小</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.text.fontSize"
                      type="number"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="文本颜色"
                    label-width="100px"
                    style="width: 100%"
                  >
                    <el-tooltip effect="dark" content="文本颜色" slot="label">
                      <span>文本颜色</span>
                    </el-tooltip>
                    <el-color-picker
                      v-model="selectField.options.config.text.color"
                      size="medium"
                    ></el-color-picker>
                  </ht-form-item>
                  <div class="divider-title"><i></i>光晕环配置项</div>
                  <ht-form-item label="显示光晕环" label-width="90px">
                    <el-tooltip effect="dark" content="显示光晕环" slot="label">
                      <span>显示光晕环</span>
                    </el-tooltip>
                    <el-radio-group
                      v-model="selectField.options.config.halo.show"
                    >
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                  <ht-form-item
                    v-if="selectField.options.config.halo.show"
                    label="动画时长"
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="动画时长" slot="label">
                      <span>动画时长</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.halo.duration"
                      type="number"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    v-if="selectField.options.config.halo.show"
                    label="光晕颜色"
                    label-width="100px"
                    style="width: 100%"
                  >
                    <el-tooltip effect="dark" content="光晕颜色" slot="label">
                      <span>光晕颜色</span>
                    </el-tooltip>
                    <el-color-picker
                      v-model="selectField.options.config.halo.color"
                      size="medium"
                    ></el-color-picker>
                  </ht-form-item>
                  <ht-form-item
                    v-if="selectField.options.config.halo.show"
                    label="最大半径"
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="最大半径" slot="label">
                      <span>最大半径</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.halo.radius"
                      type="number"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <div
                    class="divider-title"
                    v-if="selectField.alias == 'flyline-chart'"
                  >
                    <i></i>中心点图片配置
                  </div>
                  <ht-form-item
                    label="图片宽度"
                    v-if="selectField.alias == 'flyline-chart'"
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="图片宽度" slot="label">
                      <span>图片宽度</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.centerPointImg.width"
                      type="number"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="图片高度"
                    v-if="selectField.alias == 'flyline-chart'"
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="图片高度" slot="label">
                      <span>图片高度</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.centerPointImg.height"
                      type="number"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="图片"
                    v-if="selectField.alias == 'flyline-chart'"
                    label-width="100px"
                  >
                    <el-upload
                      action="string"
                      accept=".png,.PNG,.jpg,.JPG"
                      :http-request="uploadFlylineCenterPointImg"
                      :before-upload="beforeAvatarUpload"
                      :show-file-list="false"
                    >
                      <el-tooltip
                        class="item"
                        effect="light"
                        content="图片格式：png、jpg "
                        placement="right"
                      >
                        <el-button
                          size="small"
                          icon="el-icon-plus"
                          round
                          class="screen_primary_btn"
                          >上传</el-button
                        >
                      </el-tooltip>
                    </el-upload>
                    <el-tag
                      v-if="
                        selectField.alias == 'flyline-chart' &&
                          selectField.options.config.centerPointImg.fileId
                      "
                      @close="handleFlylineCenterPointImgClose()"
                      closable
                      type="success"
                      class="file-upload-name"
                      >
                        <span>
                      {{
                        selectField.options.config.centerPointImg.fileName
                      }}
                      
                       </span>
                      </el-tag
                    >
                  </ht-form-item>
                  <div
                    class="divider-title"
                    v-if="selectField.alias == 'flyline-chart'"
                  >
                    <i></i>飞线点图片配置
                  </div>
                  <ht-form-item
                    label="图片宽度"
                    v-if="selectField.alias == 'flyline-chart'"
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="图片宽度" slot="label">
                      <span>图片宽度</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.pointsImg.width"
                      type="number"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="图片高度"
                    v-if="selectField.alias == 'flyline-chart'"
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="图片高度" slot="label">
                      <span>图片高度</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.pointsImg.height"
                      type="number"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="图片"
                    v-if="selectField.alias == 'flyline-chart'"
                    label-width="100px"
                  >
                    <el-upload
                      action="string"
                      accept=".png,.PNG,.jpg,.JPG"
                      :http-request="uploadFlylinePointsImg"
                      :before-upload="beforeAvatarUpload"
                      :show-file-list="false"
                    >
                      <el-tooltip
                        class="item"
                        effect="light"
                        content="图片格式：png、jpg "
                        placement="right"
                      >
                        <el-button
                          size="small"
                          icon="el-icon-plus"
                          round
                          class="screen_primary_btn"
                          >上传</el-button
                        >
                      </el-tooltip>
                    </el-upload>
                    <el-tag
                      v-if="
                        selectField.alias == 'flyline-chart' &&
                          selectField.options.config.pointsImg.fileId
                      "
                      @close="handleFlylinePointsClose()"
                      closable
                      class="file-upload-name  "
                      type="success"
                    >
                      <span>
                        {{ selectField.options.config.pointsImg.fileName }}
                      </span>
                    </el-tag>
                  </ht-form-item>
                  <div
                    class="divider-title"
                    v-if="selectField.alias == 'flyline-chart-enhanced'"
                  >
                    <i></i>全局图标配置
                  </div>
                  <ht-form-item
                    v-if="selectField.alias == 'flyline-chart-enhanced'"
                    label="显示点图标"
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="显示点图标" slot="label">
                      <span>显示点图标</span>
                    </el-tooltip>
                    <el-radio-group
                      v-model="selectField.options.config.icon.show"
                    >
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                  <ht-form-item
                    label="图片宽度"
                    v-if="
                      selectField.alias == 'flyline-chart-enhanced' &&
                        selectField.options.config.icon.show
                    "
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="图片宽度" slot="label">
                      <span>图片宽度</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.icon.width"
                      type="number"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="图片高度"
                    v-if="
                      selectField.alias == 'flyline-chart-enhanced' &&
                        selectField.options.config.icon.show
                    "
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="图片高度" slot="label">
                      <span>图片高度</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.icon.height"
                      type="number"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="图标图片"
                    v-if="
                      selectField.alias == 'flyline-chart-enhanced' &&
                        selectField.options.config.icon.show
                    "
                    label-width="100px"
                  >
                    <el-tooltip effect="dark" content="图标图片" slot="label">
                      <span>图标图片</span>
                    </el-tooltip>
                    <el-upload
                      action="string"
                      accept=".png,.PNG,.jpg,.JPG"
                      :http-request="uploadFlylineIconImg"
                      :before-upload="beforeAvatarUpload"
                      :show-file-list="false"
                    >
                      <el-tooltip
                        class="item"
                        effect="light"
                        content="图片格式：png、jpg "
                        placement="right"
                      >
                        <el-button
                          size="small"
                          icon="el-icon-plus"
                          round
                          class="screen_primary_btn"
                          >上传</el-button
                        >
                      </el-tooltip>
                    </el-upload>
                    <el-tag
                      v-if="
                        selectField.alias == 'flyline-chart-enhanced' &&
                          selectField.options.config.icon.fileId &&
                          selectField.options.config.icon &&
                          selectField.options.config.icon.show
                      "
                      @close="handleFlylineIconClose()"
                      closable
                      class="file-upload-name"
                      type="success"
                      >{{ selectField.options.config.icon.fileName }}}</el-tag
                    >
                  </ht-form-item>
                </template>
                <template v-if="selectField.alias == 'localtime'">
                  <ht-form-item label="自定义样式" label-width="90px">
                    <el-tooltip effect="dark" content="自定义样式" slot="label">
                      <span>自定义样式</span>
                    </el-tooltip>
                    <el-radio-group
                      v-model="selectField.options.config.isDiyStyle"
                    >
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                  <ht-form-item
                    label="字体大小"
                    v-if="!selectField.options.config.isDiyStyle"
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="字体大小" slot="label">
                      <span>字体大小</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.text.fontSize"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="字体颜色"
                    v-if="!selectField.options.config.isDiyStyle"
                    label-width="100px"
                    style="width: 100%"
                  >
                    <el-tooltip effect="dark" content="字体颜色" slot="label">
                      <span>字体颜色</span>
                    </el-tooltip>
                    <el-color-picker
                      v-model="selectField.options.config.text.color"
                      size="medium"
                    ></el-color-picker>
                  </ht-form-item>
                  <ht-form-item
                    label="字体粗细"
                    v-if="!selectField.options.config.isDiyStyle"
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="字体粗细" slot="label">
                      <span>字体粗细</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.text.fontWeight"
                      type="number"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="自定义样式代码"
                    v-if="selectField.options.config.isDiyStyle"
                  >
                    <el-tooltip
                      effect="dark"
                      content="自定义样式代码"
                      slot="label"
                    >
                      <span>自定义样式代码</span>
                    </el-tooltip>
                    <codemirror
                      ref="linestText"
                      v-model="selectField.options.config.diyStyle"
                      :options="cmOptions"
                      @ready="onTextStyleCmReady"
                      style="width: 190px; height: 300px"
                      name="jsCode"
                    ></codemirror>
                  </ht-form-item>
                  <ht-form-item label="位置" label-width="90px">
                    <el-radio-group
                      v-model="selectField.options.config.text.textAlign"
                    >
                      <el-radio-button label="left">居左</el-radio-button>
                      <el-radio-button label="center">居中</el-radio-button>
                      <el-radio-button label="right">居右</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                  <ht-form-item label="显示日期" label-width="90px">
                    <el-radio-group
                      v-model="selectField.options.config.showYear"
                    >
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                  <ht-form-item label="显示星期" label-width="90px">
                    <el-radio-group
                      v-model="selectField.options.config.showWeek"
                    >
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                  <ht-form-item label="显示时间" label-width="90px">
                    <el-radio-group
                      v-model="selectField.options.config.showDay"
                    >
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                  <ht-form-item
                    label="日期格式"
                    v-if="selectField.options.config.showYear"
                  >
                    <ht-input
                      v-model="selectField.options.config.formatYear"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="时间格式"
                    v-if="selectField.options.config.showDay"
                  >
                    <ht-input
                      v-model="selectField.options.config.formatDay"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                </template>
                <template
                  v-if="
                    selectField.alias == 'display-text' ||
                      selectField.alias == 'decoration7' ||
                      selectField.alias == 'decoration9' ||
                      selectField.alias == 'decoration11'
                  "
                >
                  <ht-form-item label-width="100px">
                    <el-tooltip effect="dark" content="文本内容" slot="label">
                      <span>文本内容</span>
                    </el-tooltip>
                    <ht-input
                      type="textarea"
                      :rows="6"
                      v-model="selectField.options.config.text.content"
                      autocomplete="off"
                      placeholder="请输入文本内容"
                      :showWordLimit="true"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="文本格式化"
                    v-if="
                      selectField.alias == 'decoration7' ||
                        selectField.alias == 'decoration9' ||
                        selectField.alias == 'decoration11'
                    "
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="文本格式化" slot="label">
                      <span>文本格式化</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.text.formatter"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="自定义样式" label-width="90px">
                    <el-radio-group
                      v-model="selectField.options.config.isDiyStyle"
                    >
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                  <ht-form-item
                    label="字体大小"
                    v-if="!selectField.options.config.isDiyStyle"
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="字体大小" slot="label">
                      <span>字体大小</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.text.fontSize"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="字体颜色"
                    v-if="!selectField.options.config.isDiyStyle"
                    label-width="100px"
                    style="width: 100%"
                  >
                    <el-tooltip effect="dark" content="字体颜色" slot="label">
                      <span>字体颜色</span>
                    </el-tooltip>
                    <el-color-picker
                      v-model="selectField.options.config.text.color"
                      size="medium"
                    ></el-color-picker>
                  </ht-form-item>
                  <ht-form-item
                    label="字体粗细"
                    v-if="!selectField.options.config.isDiyStyle"
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="字体粗细" slot="label">
                      <span>字体粗细</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.text.fontWeight"
                      type="number"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="自定义样式代码"
                    v-if="selectField.options.config.isDiyStyle"
                  >
                    <el-tooltip
                      effect="dark"
                      content="自定义样式代码"
                      slot="label"
                    >
                      <span>自定义样式代码</span>
                    </el-tooltip>
                    <codemirror
                      ref="linestText"
                      v-model="selectField.options.config.diyStyle"
                      :options="cmOptions"
                      @ready="onTextStyleCmReady"
                      style="width: 190px; height: 300px"
                      name="jsCode"
                    ></codemirror>
                  </ht-form-item>
                  <ht-form-item
                    v-if="selectField.alias == 'display-text'"
                    label="位置"
                    label-width="90px"
                  >
                    <el-radio-group
                      v-model="selectField.options.config.text.textAlign"
                    >
                      <el-radio-button label="left">居左</el-radio-button>
                      <el-radio-button label="center">居中</el-radio-button>
                      <el-radio-button label="right">居右</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                </template>
                <template v-if="selectField.alias == 'decoration1'">
                  <ht-form-item label="自定义颜色">
                    <el-tooltip effect="dark" content="自定义颜色" slot="label">
                      <span>自定义颜色</span>
                    </el-tooltip>
                    <ht-input
                      v-model="selectField.options.config.colorStr"
                      @change="changeColor"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                </template>
                <template
                  v-if="
                    selectField.alias == 'decoration2' ||
                      selectField.alias == 'decoration4' ||
                      selectField.alias == 'decoration5' ||
                      selectField.alias == 'decoration8' ||
                      selectField.alias == 'decoration9'
                  "
                >
                  <ht-form-item
                    label="画时长(秒)"
                    v-if="selectField.alias != 'decoration8'"
                    label-width="90px"
                  >
                    <el-tooltip effect="dark" content="画时长(秒)" slot="label">
                      <span>画时长(秒)</span>
                    </el-tooltip>
                    <ht-input
                      type="number"
                      v-model="selectField.options.config.dur"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="翻转"
                    v-if="
                      selectField.alias == 'decoration2' ||
                        selectField.alias == 'decoration4' ||
                        selectField.alias == 'decoration8'
                    "
                    label-width="90px"
                  >
                    <el-radio-group
                      class="ht form-item-two"
                      v-model="selectField.options.config.reverse"
                    >
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                </template>
                <template v-if="selectField.alias == 'decoration12'">
                  <ht-form-item>
                    <el-tooltip
                      effect="dark"
                      content="扫描动画时长(秒)"
                      slot="label"
                    >
                      <span>扫描动画时长(秒)</span>
                    </el-tooltip>
                    <ht-input
                      type="number"
                      v-model="selectField.options.config.scanDur"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item>
                    <el-tooltip
                      effect="dark"
                      content="光晕动画时长(秒)"
                      slot="label"
                    >
                      <span>光晕动画时长(秒)</span>
                    </el-tooltip>
                    <ht-input
                      type="number"
                      v-model="selectField.options.config.haloDur"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                </template>
                <template v-if="selectField.type == 'border'">
                  <ht-form-item label="自定义颜色" label-width="110px">
                    <el-tooltip effect="dark" content="自定义颜色" slot="label">
                      <span>自定义颜色</span>
                    </el-tooltip>
                    <el-radio-group
                      class="ht form-item-two"
                      v-model="selectField.options.config.color.apply"
                    >
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                  <ht-form-item
                    label="主色"
                    v-if="selectField.options.config.color.apply"
                    style="width: 100%"
                    label-width="110px"
                  >
                    <el-color-picker
                      v-model="selectField.options.config.color.first"
                      size="medium"
                    ></el-color-picker>
                  </ht-form-item>
                  <ht-form-item
                    label="副色"
                    v-if="selectField.options.config.color.apply"
                    style="width: 100%"
                    label-width="110px"
                  >
                    <el-color-picker
                      v-model="selectField.options.config.color.second"
                      size="medium"
                    ></el-color-picker>
                  </ht-form-item>
                  <ht-form-item label="背景色" label-width="110px">
                    <el-color-picker
                      v-model="selectField.options.config.color.background"
                      size="medium"
                    ></el-color-picker>
                  </ht-form-item>
                  <ht-form-item
                    label="翻转"
                    v-if="
                      selectField.alias == 'dv-border-box-4' ||
                        selectField.alias == 'dv-border-box-5' ||
                        selectField.alias == 'dv-border-box-8'
                    "
                    label-width="90px"
                  >
                    <el-radio-group
                      class="ht form-item-two"
                      v-model="selectField.options.config.reverse"
                    >
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                  <ht-form-item
                    label="动画时长(秒)"
                    v-if="selectField.alias == 'dv-border-box-8'"
                    label-width="110px"
                  >
                    <ht-input
                      type="number"
                      v-model="selectField.options.config.dur"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="标题内容"
                    v-if="selectField.alias == 'dv-border-box-11'"
                  >
                    <ht-input
                      v-model="selectField.options.config.title"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item
                    label="标题宽度(px)"
                    v-if="selectField.alias == 'dv-border-box-11'"
                    label-width="110px"
                  >
                    <ht-input
                      type="number"
                      v-model="selectField.options.config.titleWidth"
                      class="ht form-item-two"
                      autocomplete="off"
                    ></ht-input>
                  </ht-form-item>
                </template>
              </el-collapse-item>
              <div class="color-line"></div>
              <el-collapse-item
                v-if="
                  selectField.type == 'chart' ||
                    (selectField.type == 'datav' &&
                      !(
                        selectField.alias == 'flyline-chart' ||
                        selectField.alias == 'flyline-chart-enhanced'
                      )) ||
                    selectField.alias == 'decoration7' ||
                    selectField.alias == 'decoration9' ||
                    selectField.alias == 'decoration11'
                "
                title="数据"
                name="dataModel"
              >
                <ht-form-item label="数据模型">
                  <ht-load-data
                    url="/form/customQuery/v1/list"
                    requestMethod="post"
                    context="form"
                    ref="htLoadData"
                    @after-load-data="afterCustomQueryLoadData"
                  ></ht-load-data>
                  <div class="flex-line">
                    <ht-select
                      clearable
                      filterable
                      class=""
                      placeholder="请选择数据模型"
                      @change="setSelectQuery"
                      v-model="selectField.options.dataAlias"
                      :options="customQuerys"
                      style="width: 180px"
                      :props="{key: 'alias', value: 'name'}"
                    />
                    <el-button
                      class="screen_plus_btn"
                      @click="addCustomDialog()"
                      icon="el-icon-plus"
                    ></el-button>
                  </div>
                </ht-form-item>
                <ht-form-item
                  v-if="
                    (selectField.type == 'chart' &&
                      selectField.alias != 'gauge') ||
                      selectField.alias == 'ring-chart' ||
                      selectField.alias == 'capsule-chart' ||
                      selectField.alias == 'conical-column-chart' ||
                      selectField.alias == 'scroll-ranking-board' ||
                      selectField.alias == 'decoration7' ||
                      selectField.alias == 'decoration9' ||
                      selectField.alias == 'decoration11'
                  "
                  :label="
                    selectField.type == 'datav'
                      ? '名称字段'
                      : selectField.alias.indexOf('decoration') == 0
                      ? '值字段'
                      : 'X轴'
                  "
                >
                  <ht-select
                    clearable
                    filterable
                    class=""
                    @change="setSelectXField"
                    v-model="selectField.options.xField.alias"
                    :options="getYFieldOptions()"
                    :props="{key: 'field', value: 'comment'}"
                  />
                </ht-form-item>
                <ht-form-item
                  v-if="
                    selectField.alias == 'pie' ||
                      (selectField.type == 'datav' &&
                        selectField.alias != 'scroll-board')
                  "
                  label="值字段"
                >
                  <el-select
                    v-model="selectField.options.yField.alias"
                    clearable
                    filterable
                    @change="setSelectYField"
                  >
                    <el-option
                      v-for="option in getYFieldOptions()"
                      :key="option.field"
                      :label="option.comment"
                      :value="option.field"
                    ></el-option>
                  </el-select>
                </ht-form-item>
                <ht-form-item
                  v-if="
                    selectField.alias == 'line' ||
                      selectField.alias == 'bar' ||
                      selectField.alias == 'radar' ||
                      selectField.alias == 'gauge' ||
                      selectField.alias == 'scroll-board'
                  "
                  :label="
                    selectField.alias == 'scroll-board' ? '列表字段' : 'Y轴'
                  "
                >
                  <table
                    class="form-table choiceType-table"
                    cellspacing="0"
                    cellpadding="0"
                    border="0"
                  >
                    <tbody>
                      <tr class="linkageTable-tr">
                        <td>选项配置</td>
                        <td style="width: 40px">
                          <el-button
                            class="screen-plus-mini-btn"
                            icon="el-icon-plus"
                            @click="
                              selectField.options.yField.push({
                                alias: '',
                                desc: '',
                                dbType: 'varchar'
                              })
                            "
                          ></el-button>
                        </td>
                      </tr>
                      <tr
                        v-for="(item, index) in field.options.yField"
                        :key="index"
                      >
                        <td>
                          <ht-select
                            clearable
                            filterable
                            @change="setSelectYFields(item.alias, index)"
                            v-model="item.alias"
                            :options="getYFieldOptions()"
                            :props="{key: 'field', value: 'comment'}"
                          />
                        </td>
                        <td style="text-align: center">
                          <i
                            class="el-icon-delete table-delete-btn"
                            @click="selectField.options.yField.remove(item)"
                          ></i>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </ht-form-item>
                <ht-form-item
                  v-if="selectField.type == 'chart'"
                  label="提示框格式"
                >
                  <el-tooltip
                    effect="dark"
                    content="自定义的提示框格式，不配置会使用默认的。例如：描述1：{b} <br/>描述2：{c}"
                    slot="label"
                  >
                    <span>自定义提示框格式</span>
                  </el-tooltip>

                  <ht-input
                    v-model="selectField.options.tipFormatter"
                    autocomplete="off"
                    placeholder="自定义的提示框格式"
                    :maxlength="200"
                    :showWordLimit="true"
                  ></ht-input>
                </ht-form-item>
                <ht-form-item label="应用数据" style="width: 100%">
                  <el-radio-group
                    @change="changDesignApply"
                    v-model="selectField.options.designApply"
                  >
                    <el-radio-button :label="true">是</el-radio-button>
                    <el-radio-button :label="false">否</el-radio-button>
                  </el-radio-group>
                </ht-form-item>
                <ht-form-item
                  label="定时刷新"
                  v-if="selectField.options && selectField.options.refresh"
                >
                  <div class="flex-line">
                    <el-checkbox v-model="selectField.options.refresh.on" />
                    <el-input
                      v-if="selectField.options.refresh.on"
                      v-model="selectField.options.refresh.rate"
                      class="form-item-two"
                      type="number"
                      :min="1"
                      :max="
                        selectField.options.refresh.rule == 'hour' ? 24 : 60
                      "
                      @change="handleChange"
                    >
                      <el-select
                        v-if="selectField.options.refresh.on"
                        slot="append"
                        style="width: 60px"
                        v-model="selectField.options.refresh.rule"
                        placeholder="请选择表单类型"
                      >
                        <el-option label="秒" value="second"></el-option>
                        <el-option label="分" value="minute"></el-option>
                        <el-option label="时" value="hour"></el-option>
                      </el-select>
                    </el-input>
                  </div>
                </ht-form-item>

                <ht-form-item
                  v-if="selectField.type == 'chart'"
                  label="编辑配置项"
                >
                  <el-button type="primary" @click="openEditDialog(selectField)"
                    >编辑</el-button
                  >
                </ht-form-item>
              </el-collapse-item>
            </el-collapse>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane class="datav-tab-pane" label="大屏信息" name="datavInfo">
          <el-scrollbar class="fullheight">
            <el-form
              v-model="layoutObj"
              data-vv-scope="datavMessage"
              v-form="{formItemAlign: labelPosition}"
              class="form-content"
            >
              <div class="divider-title"><i></i>基本信息</div>
              <ht-form-item
                :label="layoutObj.type == 'unit' ? '组件名称' : '大屏名称'"
                prop="name"
              >
                <el-tooltip
                  effect="dark"
                  :content="layoutObj.type == 'unit' ? '组件名称' : '大屏名称'"
                  slot="label"
                >
                  <span>{{
                    layoutObj.type == 'unit' ? '组件名称' : '大屏名称'
                  }}</span>
                </el-tooltip>
                <ht-input
                  v-model="layoutObj.name"
                  autocomplete="off"
                  :validate="{required: true}"
                  placeholder="请输入名称"
                  :maxlength="50"
                  :showWordLimit="true"
                ></ht-input>
              </ht-form-item>
              <ht-form-item
                :label="layoutObj.type == 'unit' ? '组件别名' : '大屏别名'"
                prop="name"
              >
                <el-tooltip
                  effect="dark"
                  :content="layoutObj.type == 'unit' ? '组件别名' : '大屏别名'"
                  slot="label"
                >
                  <span>{{
                    layoutObj.type == 'unit' ? '组件别名' : '大屏别名'
                  }}</span>
                </el-tooltip>
                <ht-input
                  v-model="layoutObj.alias"
                  :disabled="true"
                  autocomplete="off"
                  :validate="{
                    required: true,
                    regex: {
                      exp: '^[a-zA-Z][a-zA-Z0-9_]*$',
                      message: '只能输入字母、数字、下划线，且以字母开头'
                    }
                  }"
                  :maxlength="50"
                  :showWordLimit="true"
                  placeholder="请输入别名"
                ></ht-input>
              </ht-form-item>
              <ht-form-item label="状态">
                <el-radio-group v-model="layoutObj.enable">
                  <el-radio-button :label="1">启用</el-radio-button>
                  <el-radio-button :label="0">禁用</el-radio-button>
                </el-radio-group>
              </ht-form-item>
              <!-- <ht-form-item label="布局类型" v-if="layoutObj.type != 'unit'">
                <el-radio-group v-model="layoutObj.layoutType">
                  <el-radio-button :label="0">管理端</el-radio-button>
                  <el-radio-button :label="2">应用端</el-radio-button>
                  <el-radio-button :label="1">移动端</el-radio-button>
                </el-radio-group>
              </ht-form-item> -->
              <ht-form-item
                :label="layoutObj.type == 'unit' ? '组件描述' : '大屏描述'"
                prop="memo"
              >
                <el-tooltip
                  effect="dark"
                  :content="layoutObj.type == 'unit' ? '组件描述' : '大屏描述'"
                  slot="label"
                >
                  <span>{{
                    layoutObj.type == 'unit' ? '组件描述' : '大屏描述'
                  }}</span>
                </el-tooltip>
                <ht-input
                  type="textarea"
                  :rows="3"
                  v-model="layoutObj.memo"
                  autocomplete="off"
                  placeholder="请输入描述信息"
                  :maxlength="200"
                  :showWordLimit="true"
                ></ht-input>
              </ht-form-item>
              <!-- <ht-form-item label="优先级" v-if="layoutObj.isDef!=1 && layoutObj.type!='unit'" prop="rank">
              <ht-input
                type="number"
                v-model="layoutObj.rank"
                :min="1"
                :max="10000"
                autocomplete="off"
                placeholder="优先级（数字递增优先级递减）"
              ></ht-input>
            </ht-form-item> -->
              <div class="divider-title"><i></i>大屏尺寸</div>
              <ht-form-item label="宽度">
                <el-input
                  type="number"
                  :readonly="true"
                  v-model="widgetForm.config.width"
                  style="width: 180px"
                >
                  <template slot="append">px</template>
                </el-input>
              </ht-form-item>
              <ht-form-item label="高度">
                <el-input
                  type="number"
                  :readonly="true"
                  v-model="widgetForm.config.height"
                  style="width: 180px"
                >
                  <template slot="append">px</template>
                </el-input>
              </ht-form-item>
              <template v-if="layoutObj.type != 'unit'">
                <div class="divider-title"><i></i>大屏背景</div>
                <!-- <ht-form-item label="背景类型" label-width="100px"> -->
                <el-radio-group
                  v-model="widgetForm.config.backgroundType"
                  style="margin-bottom: 15px"
                >
                  <el-radio-button label="color">背景颜色</el-radio-button>
                  <el-radio-button label="image">选择背景图片</el-radio-button>
                  <el-radio-button label="file">上传背景图片</el-radio-button>
                </el-radio-group>
                <!-- </ht-form-item> -->
                <ht-form-item label="背景透明度" label-width="100px">
                  <el-tooltip effect="dark" content="背景透明度" slot="label">
                    <span>背景透明度</span>
                  </el-tooltip>
                  <el-input-number
                    v-model="backgroundOpacity"
                    :precision="1"
                    :step="0.1"
                    :min="0.1"
                    :max="1"
                  ></el-input-number>
                </ht-form-item>
                <ht-form-item
                  v-if="widgetForm.config.backgroundType == 'color'"
                  label="背景颜色"
                  label-width="100px"
                >
                  <el-color-picker
                    v-model="widgetForm.config.backgroundColor"
                    size="medium"
                  ></el-color-picker>
                </ht-form-item>
                <ht-form-item
                  v-if="widgetForm.config.backgroundType == 'image'"
                >
                  <template slot="label">
                    <el-tooltip content="选择背景图片">
                      <i class="property-tip icon-question" />
                    </el-tooltip>
                    <span>选择背景图片</span>
                  </template>
                  <ht-select
                    v-model="widgetForm.config.backgroundImage"
                    :options="backgroundImages"
                    :props="{key: 'alias', value: 'desc'}"
                  />
                </ht-form-item>
                <ht-form-item v-if="widgetForm.config.backgroundType == 'file'">
                  <template slot="label">
                    <el-tooltip content="上传背景图片">
                      <i class="property-tip icon-question" />
                    </el-tooltip>
                    <span>上传背景图片</span>
                  </template>
                  <el-upload
                    action="string"
                    accept=".png,.PNG,.jpg,.JPG"
                    :http-request="uploadDatavBackground"
                    :before-upload="beforeAvatarUpload"
                    :show-file-list="false"
                  >
                    <el-tooltip
                      class="item"
                      effect="light"
                      content="图片格式：png、jpg 图片尺寸不小于：1920*1080"
                      placement="right"
                    >
                      <el-button
                        size="small"
                        icon="el-icon-plus"
                        round
                        class="screen_primary_btn"
                        >上传</el-button
                      >
                    </el-tooltip>
                  </el-upload>
                  <el-tag
                    v-if="
                      widgetForm.config.backgroundFile &&
                        widgetForm.config.backgroundFile.id
                    "
                    @close="handleBackgroundImgClose()"
                    closable
                    type="success"
                    class="file-upload-name"
                    ><span>{{
                      widgetForm.config.backgroundFile.name
                    }}</span></el-tag
                  >
                  <!-- <el-image
                    v-bind:src="backgroundPicSrc"
                    v-if="backgroundPicShow"
                    style="width:335px;height:190px;"
                    /> -->
                </ht-form-item>
              </template>
            </el-form>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <!-- 关联查询新增、编辑 -->
    <custom-query-dialog
      ref="customQueryDialog"
      @afterSaveCustomDialog="customQueryDialogClose"
    />

    <el-dialog
      title="编辑图表配置"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      top="8vh"
      :append-to-body="true"
      class="chart-json_edit"
      :close-on-click-modal="false"
      width="70%"
    >
      <div class="tip-message">
        编辑图表的配置项，可用对象:_this,data,option。_this:当前vue对象，data:后台返回的数据，option:当前图表的配置Json。
        <br />例:&nbsp;option.title.text
        ='1111'，&nbsp;修改图表的标题。例:&nbsp;option.title.textStyle.color='#ff4a40'，修改标题字体颜色。其他更多配置请参考echart官网。
      </div>
      <HtMonacoEditor height="600px" v-model="curConfig" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onconfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {Message} from 'element-ui'
import utils from '@/hotent-ui-util.js'
import {datavToolMap} from '@/api/datavConfig.js'
import DatavChartsBuild from '@/utils/DatavChartsBuild.js'
import CustomQuery from '@/views/form/customquery/CustomQuery.js'
import req from '@/request.js'
import TemplateAddToMenu from '../form/dataTemplate/TemplateAddToMenu.vue'
import 'codemirror/theme/base16-dark.css'
const CustomQueryDialog = () =>
  import('@/views/form/customquery/CustomQueryDialog.vue')
export default {
  components: {
    TemplateAddToMenu,
    CustomQueryDialog
  },
  props: {
    data: Object,
    field: {
      type: Object,
      default() {
        return {alias: ''}
      }
    },
    widgetForm: {
      type: Object,
      default() {
        return {}
      }
    },
    layoutObj: {
      type: Object,
      default() {
        return {name: '', memo: ''}
      }
    },
    selectWidgetMap: {
      type: Object,
      default() {
        return {}
      }
    },
    opacity: {
      type: Number,
      default() {
        return 0.9
      }
    }
  },
  data() {
    return {
      selectField: this.field,
      activeName: 'datavInfo',
      avtiveCollapseName: 'styleModel',
      customQuerys: [],
      chartTypes: JSON.parse(JSON.stringify(datavToolMap.chart.items)),
      chartTypeMap: {},
      elementsTypes: JSON.parse(JSON.stringify(datavToolMap.elements.items)),
      elementsTypeMap: {},
      queryResultFieldMap: {},
      backgroundImages: [
        {alias: 'bg1', desc: '背景一'},
        {alias: 'bg2', desc: '背景二'},
        {alias: 'bg3', desc: '背景三'}
      ],
      currentEleCanDeyploy: false, //当前组件是否允许发布为模板
      backgroundPicShow: false,
      backgroundPicSrc: '',
      validator: {
        type: null,
        required: null,
        pattern: null,
        range: null,
        length: null
      },
      animationCurveArray: [
        {alias: 'linear'},
        {alias: 'easeInSine'},
        {alias: 'easeOutSine'},
        {alias: 'easeInOutSine'},
        {alias: 'easeInQuad'},
        {alias: 'easeOutQuad'},
        {alias: 'easeInOutQuad'},
        {alias: 'easeInCubic'},
        {alias: 'easeOutCubic'},
        {alias: 'easeInOutCubic'},
        {alias: 'easeInQuart'},
        {alias: 'easeOutQuart'},
        {alias: 'easeInOutQuart'},
        {alias: 'easeInQuint'},
        {alias: 'easeOutQuint'},
        {alias: 'easeInOutQuint'},
        {alias: 'easeInBack'},
        {alias: 'easeOutBack'},
        {alias: 'easeInOutBack'},
        {alias: 'easeInElastic'},
        {alias: 'easeOutElastic'},
        {alias: 'easeInOutElastic'},
        {alias: 'easeInBounce'},
        {alias: 'easeOutBounce'},
        {alias: 'easeInOutBounce'}
      ],
      cmOptions: {
        value: '',
        mode: 'javascript',
        readOnly: false,
        smartIndent: true,
        tabSize: 1,
        theme: 'base16-dark',
        lineNumbers: true,
        line: true,
        lineWiseCopyCut: true,
        showCursorWhenSelecting: true
      },
      labelPosition: 'left',
      dialogVisible: false,
      curConfig: '',
      curRow: {}
    }
  },
  computed: {
    show() {
      if (this.data && Object.keys(this.data).length > 0) {
        return true
      }
      return false
    },
    backgroundOpacity: {
      get() {
        return this.opacity
      },
      set(value) {
        this.$emit('update:opacity', value)
      }
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
    if (this.chartTypes && this.chartTypes.length > 0) {
      this.chartTypes.forEach(item => {
        this.chartTypeMap[item.alias] = item
      })
    }
    if (this.elementsTypes && this.elementsTypes.length > 0) {
      this.elementsTypes.forEach(item => {
        this.elementsTypeMap[item.alias] = item
      })
    }
  },
  methods: {
    onconfirm() {
      if (!this.curConfig) {
        this.$message.error('自定义配置不能为空')
        return
      }
      this.curRow.options.customOptions = this.curConfig
      this.dialogVisible = false
    },
    openEditDialog(row) {
      this.curConfig = row.options.customOptions
      this.curRow = row
      this.dialogVisible = true
    },
    valiateData() {
      return new Promise((resolve, reject) => {
        this.$root.$validator
          .validateAll('field')
          .then(res => {
            if (!res) {
              let arr = this.$root.$validator.errors.items
              resolve({status: false, errorItem: arr, message: '组件属性'})
            }
          })
          .then(() => {
            this.$root.$validator.validateAll('datavMessage').then(res => {
              if (!res) {
                let arr = this.$root.$validator.errors.items
                resolve({status: false, errorItem: arr, message: '大屏信息'})
              } else {
                resolve({status: true})
              }
            })
          })
      })
    },
    checkValue(value) {
      let Zpatt = new RegExp(
        '^([1-9]|[1-9][0-9]|[1-9]{1}[0-9]{2}|[1-9]{1}[0-9]{3}|10000)$'
      )
      let patt = new RegExp(
        '^([1-9]|[1-9][0-9]|[1-9][0-9][0-9]|1[0-9]{3}|2000)$'
      )
      if (!Zpatt.test(this.selectField.zIndex)) {
        this.$set(this.selectField, 'zIndex', 1)
        this.$message.warning('层级只能输入1-10000的正整数！')
        return
      } else if (!patt.test(this.selectField.x)) {
        this.$set(this.selectField, 'x', 1)
        this.$message.warning('尺寸只能输入1-2000的正整数！')
        return
      } else if (!patt.test(this.selectField.y)) {
        this.$set(this.selectField, 'y', 1)
        this.$message.warning('尺寸只能输入1-2000的正整数！')
        return
      } else if (!patt.test(this.selectField.width)) {
        this.$set(this.selectField, 'width', 1)
        this.$message.warning('位置只能输入1-2000的正整数！')
        return
      } else if (!patt.test(this.selectField.height)) {
        this.$set(this.selectField, 'height', 1)
        this.$message.warning('位置只能输入1-2000的正整数！')
        return
      }
    },
    handleChange(value) {
      let rule = this.selectField.options.refresh.rule
      if (rule == 'hour') {
        let patt = new RegExp('^([1-9]|1[0-9]|20|21|22|23|24)$')
        if (!patt.test(value)) {
          this.$set(this.selectField.options.refresh, 'rate', 1)
          this.$message.warning('定时刷新只能输入1-24的正整数！')
          return
        }
      } else {
        let patt = new RegExp('^([1-9]|[1-5]{1}[0-9]{1}|60)$')
        if (!patt.test(value)) {
          this.$set(this.selectField.options.refresh, 'rate', 1)
          this.$message.warning('定时刷新只能输入1-60的正整数！')
          return
        }
      }
    },
    afterCustomQueryLoadData(data) {
      this.customQuerys = data.rows
      if (this.customQuerys && this.customQuerys.length > 0) {
        this.customQuerys.forEach(item => {
          this.$set(
            this.queryResultFieldMap,
            item.alias,
            JSON.parse(item.resultfield)
          )
        })
      }
    },
    //选择下拉框控件并绑定关联查询
    setSelectQuery() {
      this.$set(this.selectField.options, 'xField', {
        alias: '',
        desc: '',
        dbType: 'varchar'
      })
      if (this.selectField.options.yField instanceof Array) {
        this.$set(this.selectField.options, 'yField', [])
      } else {
        this.$set(this.selectField.options, 'yField', {
          alias: '',
          desc: '',
          dbType: 'number'
        })
      }
    },
    addCustomDialog() {
      this.$refs.customQueryDialog.showDialog('add')
    },
    customQueryDialogClose(data) {
      this.$refs.htLoadData.getData()
      if (!this.selectField.options.dataAlias) {
        this.selectField.options.dataAlias = data.alias
      }
    },
    changeTitleText() {
      if (!this.selectField.options.option.title.text) {
        this.selectField.options.option.title.subtext = ''
      }
    },
    setSelectXField(arg) {
      let _this = this
      this.queryResultFieldMap[this.selectField.options.dataAlias].forEach(
        item => {
          if (item.field == arg) {
            _this.$set(this.selectField.options.xField, 'desc', item.comment)
            _this.$set(
              this.selectField.options.xField,
              'dbType',
              item.columnType
            )
            return
          }
        }
      )
    },
    setSelectYField(arg) {
      let _this = this
      this.queryResultFieldMap[this.selectField.options.dataAlias].forEach(
        item => {
          if (item.field === arg) {
            _this.$set(this.selectField.options, 'yField', {alias: item.field})
            _this.$set(this.selectField.options.yField, 'desc', item.comment)
            _this.$set(
              this.selectField.options.yField,
              'dbType',
              item.columnType
            )
          }
        }
      )
    },
    setSelectYFields(arg, index) {
      let _this = this
      this.queryResultFieldMap[this.selectField.options.dataAlias].forEach(
        item => {
          if (item.field == arg) {
            _this.$set(
              this.selectField.options.yField[index],
              'desc',
              item.comment
            )
            _this.$set(
              this.selectField.options.yField[index],
              'dbType',
              item.columnType
            )
            return
          }
        }
      )
    },
    onChangeChart(arg) {
      if (this.chartTypeMap[arg]) {
        this.$set(
          this.selectField.options,
          'option',
          JSON.parse(JSON.stringify(this.chartTypeMap[arg].options.option))
        )
      } else if (this.elementsTypeMap[arg]) {
        this.selectField.options = _.cloneDeep(
          this.elementsTypeMap[arg].options
        )
      }
      this.$forceUpdate()
    },
    getYFieldOptions() {
      let selectMap = {}
      if (
        this.selectField.options.yField &&
        this.selectField.options.yField.length > 0
      ) {
        this.selectField.options.yField.forEach(item => {
          selectMap[item.alias] = true
        })
      }
      let _this = this
      if (this.queryResultFieldMap[this.selectField.options.dataAlias]) {
        return this.queryResultFieldMap[this.selectField.options.dataAlias]
        // return this.queryResultFieldMap[this.selectField.options.dataAlias].filter(function (value, index, array) {
        //   return (value.field != _this.selectField.options.xField.alias && !selectMap[value.field]);
        // });
      } else {
        return []
      }
    },
    changDesignApply(arg) {
      if (arg) {
        let mesg = '请完善数据模型配置: 值字段。'
        if (this.selectField.alias.indexOf('decoration') == 0) {
          if (!this.selectField.options.xField.alias) {
            this.selectField.options.designApply = false
            this.$message.warning(mesg)
            return
          }
        }
        if (
          this.selectField.alias == 'pie' ||
          (this.selectField.type == 'datav' &&
            this.selectField.alias != 'scroll-board')
        ) {
          if (!this.selectField.options.yField.alias) {
            this.selectField.options.designApply = false
            this.$message.warning(mesg)
            return
          }
        }
        this.resetChartOpinions()
      } else {
        if (this.selectField.type == 'datav') {
          if (this.selectField.options.config.hasOwnProperty('data')) {
            this.$set(
              this.selectField.options.config,
              'data',
              JSON.parse(
                JSON.stringify(
                  this.elementsTypeMap[this.selectField.alias].options.config
                    .data
                )
              )
            )
          } else if (this.selectField.options.config.hasOwnProperty('value')) {
            this.$set(
              this.selectField.options.config,
              'value',
              this.elementsTypeMap[this.selectField.alias].options.config.data
                .value
            )
          } else if (this.selectField.options.config.hasOwnProperty('number')) {
            this.$set(
              this.selectField.options.config,
              'number',
              this.elementsTypeMap[this.selectField.alias].options.config.number
            )
          } else {
            this.$set(
              this.selectField.options.config,
              'data',
              JSON.parse(
                JSON.stringify(
                  this.elementsTypeMap[this.selectField.alias].options.config
                )
              )
            )
          }
        } else {
          this.$set(
            this.selectField.options,
            'option',
            JSON.parse(
              JSON.stringify(
                this.chartTypeMap[this.selectField.alias].options.option
              )
            )
          )
        }
        this.refreshSelectFieldEle()
      }
    },
    uploadDatavBackground(param) {
      const formData = new FormData()
      formData.append('files', param.file)
      let _this = this
      req
        .post(window.context.portal + '/system/file/v1/fileUpload', formData)
        .then(response => {
          _this.$set(_this.widgetForm.config, 'backgroundFile', {
            id: response.data.fileId,
            name: response.data.fileName
          })
          // _this.$message.success("上传成功");
          return response.data
        })
        .then(function(res) {})
    },
    handleBackgroundImgClose() {
      this.$set(this.widgetForm.config, 'backgroundFile', {id: '', name: ''})
    },
    beforeAvatarUpload(file) {
      var FileExt = file.name.replace(/.+\./, '')
      if (['png', 'jpg'].indexOf(FileExt.toLowerCase()) === -1) {
        this.$message({
          type: 'warning',
          message: '请上传后缀名为png、jpg类型的图片'
        })
        return false
      }
    },
    releaseTemplate() {
      let params = {
        key: this.selectField.key,
        name: this.selectField.name,
        type: this.selectField.type,
        eleAlias: this.selectField.eleAlias,
        desc: this.selectField.desc,
        config: JSON.stringify(this.selectField)
      }
      req
        .post(
          window.context.portal + '/portal/datavItemTemplate/v1/save',
          params
        )
        .then(response => {
          if (response.data.state) {
            this.currentEleCanDeyploy = false
            this.$message.success(response.data.message)
          } else {
            this.$message.error(response.data.message)
          }
        })
        .finally()
    },
    resetChartOpinions() {
      // 一些复杂图表，可以不用后台数据。客户自己写js。
      if (
        !this.selectField.options.dataAlias &&
        this.selectField.options.needNotData
      ) {
        const options = DatavChartsBuild.buildChart(this.selectField, [], this)
        if (options != null) {
          this.$set(this.selectField, 'options', options)
          this.refreshSelectFieldEle()
        }
        return
      }

      if (!this.selectField.options.dataAlias) {
        this.selectField.options.designApply = false
        this.$message.warning('请选择数据模型！')
        return
      }
      CustomQuery.load(this.selectField.options.dataAlias, {})
        .then(data => {
          for (var key in data) {
            for (var item in data[key]) {
              //返回的不是大写的属性
              if (item != item.toUpperCase()) {
                data[key][item.toUpperCase()] = data[key][item]
                delete data[key][item]
              }
            }
          }
          const options = DatavChartsBuild.buildChart(
            this.selectField,
            data,
            this
          )
          if (options != null) {
            this.$set(this.selectField, 'options', options)
            this.refreshSelectFieldEle()
          }
        })
        .catch(e => {
          this.selectField.options.designApply = false
          this.$message.error(e)
        })
        .finally({})
    },
    refreshSelectFieldEle() {
      this.$set(this.selectField, 'state', 2)
      let _this = this
      setTimeout(function() {
        _this.$set(_this.selectField, 'state', 1)
      }, 10)
    },
    changeShowHeader() {
      if (this.selectField.alias == 'scroll-board') {
        if (
          this.selectField.options.config.showHeader &&
          this.selectField.options.config.headerJson
        ) {
          this.selectField.options.config.header = JSON.parse(
            this.selectField.options.config.headerJson
          )
        } else {
          this.selectField.options.config.header = []
        }
      }
    },
    changeCenterPoint() {
      this.selectField.options.config.centerPoint = eval(
        this.selectField.options.config.centerPointStr
      )
    },
    changeCenterDuration() {
      this.selectField.options.config.duration = eval(
        this.selectField.options.config.durationStr
      )
    },
    changeCenterLineDuration() {
      this.selectField.options.config.line.duration = eval(
        this.selectField.options.config.line.durationStr
      )
    },
    changeColor() {
      this.selectField.options.config.color = eval(
        this.selectField.options.config.colorStr
      )
    },
    onPointsCmReady(cm) {
      if (
        !this.selectField.options.config.pointsStr &&
        this.selectField.options.config.points
      ) {
        this.selectField.options.config.pointsStr = JSON.stringify(
          this.selectField.options.config.points,
          null,
          2
        )
      }
    },
    changePoints() {
      let points = []
      if (this.selectField.options.config.pointsStr) {
        points = JSON.parse(this.selectField.options.config.pointsStr)
      } else {
        points = this.selectField.options.config.points
      }
      this.selectField.options.config.points = points
    },
    onLinesCmReady(cm) {
      if (
        !this.selectField.options.config.linesStr &&
        this.selectField.options.config.lines
      ) {
        this.selectField.options.config.linesStr = JSON.stringify(
          this.selectField.options.config.lines,
          null,
          2
        )
      }
    },
    onTextStyleCmReady(cm) {
      if (this.selectField.options.config.diyStyle) {
        this.selectField.options.config.diyStyle = JSON.stringify(
          JSON.parse(this.selectField.options.config.diyStyle),
          null,
          2
        )
      }
    },
    changeLines() {
      let lines = []
      if (this.selectField.options.config.linesStr) {
        try {
          lines = JSON.parse(this.selectField.options.config.linesStr)
        } catch (error) {
          lines = this.selectField.options.config.lines
        }
      }
      this.selectField.options.config.lines = lines
    },
    uploadFlylineBgImg(param) {
      const formData = new FormData()
      formData.append('files', param.file)
      let _this = this
      req
        .post(window.context.portal + '/system/file/v1/fileUpload', formData)
        .then(response => {
          _this.$set(
            _this.selectField.options.config,
            'bgImgFileId',
            response.data.fileId
          )
          _this.$set(
            _this.selectField.options.config,
            'bgImgFileName',
            response.data.fileName
          )
          return response.data
        })
        .then(function(res) {})
    },
    uploadFlylineCenterPointImg(param) {
      const formData = new FormData()
      formData.append('files', param.file)
      let _this = this
      req
        .post(window.context.portal + '/system/file/v1/fileUpload', formData)
        .then(response => {
          _this.$set(
            _this.selectField.options.config.centerPointImg,
            'fileId',
            response.data.fileId
          )
          _this.$set(
            _this.selectField.options.config.centerPointImg,
            'fileName',
            response.data.fileName
          )
          return response.data
        })
        .then(function(res) {})
    },
    uploadFlylinePointsImg(param) {
      const formData = new FormData()
      formData.append('files', param.file)
      let _this = this
      req
        .post(window.context.portal + '/system/file/v1/fileUpload', formData)
        .then(response => {
          _this.$set(
            _this.selectField.options.config.pointsImg,
            'fileId',
            response.data.fileId
          )
          _this.$set(
            _this.selectField.options.config.pointsImg,
            'fileName',
            response.data.fileName
          )
          return response.data
        })
        .then(function(res) {})
    },
    uploadFlylineIconImg(param) {
      const formData = new FormData()
      formData.append('files', param.file)
      let _this = this
      req
        .post(window.context.portal + '/system/file/v1/fileUpload', formData)
        .then(response => {
          _this.$set(
            _this.selectField.options.config.icon,
            'fileId',
            response.data.fileId
          )
          _this.$set(
            _this.selectField.options.config.icon,
            'fileName',
            response.data.fileName
          )
          return response.data
        })
        .then(function(res) {})
    },
    handleFlylineBgImgClose() {
      this.$set(this.selectField.options.config, 'bgImgFileId', '')
      this.$set(this.selectField.options.config, 'bgImgFileName', '')
    },
    handleFlylineCenterPointImgClose() {
      this.$set(this.selectField.options.config.centerPointImg, 'fileId', '')
      this.$set(this.selectField.options.config.centerPointImg, 'fileName', '')
    },
    handleFlylinePointsClose() {
      this.$set(this.selectField.options.config.pointsImg, 'fileId', '')
      this.$set(this.selectField.options.config.pointsImg, 'fileName', '')
    },
    handleFlylineIconClose() {
      this.$set(this.selectField.options.config.icon, 'fileId', '')
      this.$set(this.selectField.options.config.icon, 'fileName', '')
    },
    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()
    },
    generateRule() {
      this.data.rules = []
      Object.keys(this.validator).forEach(key => {
        if (this.validator[key]) {
          this.data.rules.push(this.validator[key])
        }
      })
    },
    handleClick(tab, event) {}
  },
  watch: {
    'layoutObj.name': function(newVal, oldVal) {
      this.$emit('update:layoutObj', this.layoutObj)
    },
    'layoutObj.memo': function(newVal, oldVal) {
      this.$emit('update:layoutObj', this.layoutObj)
    },
    '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)
      }
    },
    'selectField.key': function(newVal) {
      this.activeName = newVal ? 'eleInfo' : 'datavInfo'
      this.avtiveCollapseName = 'styleModel'
    },
    'selectField.options.config': {
      handler(nval) {
        this.refreshSelectFieldEle()
      },
      deep: true
    },
    'selectField.options.config.bgImgFileId': {
      handler(nval) {
        if (
          this.selectField.alias == 'flyline-chart' ||
          this.selectField.alias == 'flyline-chart-enhanced'
        ) {
          if (nval) {
            let _this = this
            req
              .get(
                window.context.portal +
                  '/system/file/v1/preview?fileId=' +
                  nval,
                'blob'
              )
              .then(
                response => {
                  if (response.data.size > 0) {
                    var blob = response.data
                    var reader = new FileReader()
                    reader.readAsDataURL(blob)
                    reader.onload = function(e) {
                      if (_this.selectField.alias == 'flyline-chart-enhanced') {
                        _this.selectField.options.config.bgImgSrc =
                          e.target.result
                      } else {
                        _this.selectField.options.config.bgImgUrl =
                          e.target.result
                      }
                    }
                  }
                },
                function errorCallback() {
                  _this.$message.success('获取背景图片失败。')
                }
              )
          } else {
            if (this.selectField.alias == 'flyline-chart-enhanced') {
              this.selectField.options.config.bgImgSrc = require('@/assets/img/flylineChart/map.jpg')
            } else {
              this.selectField.options.config.bgImgUrl = require('@/assets/img/flylineChart/map.jpg')
            }
          }
        }
      }
    },
    'selectField.options.config.centerPointImg.fileId': {
      handler(nval) {
        if (this.selectField.alias == 'flyline-chart') {
          if (nval) {
            let _this = this
            req
              .get(
                window.context.portal +
                  '/system/file/v1/preview?fileId=' +
                  nval,
                'blob'
              )
              .then(
                response => {
                  if (response.data.size > 0) {
                    var blob = response.data
                    var reader = new FileReader()
                    reader.readAsDataURL(blob)
                    reader.onload = function(e) {
                      _this.selectField.options.config.centerPointImg.url =
                        e.target.result
                    }
                  }
                },
                function errorCallback() {
                  _this.$message.success('获取图片失败。')
                }
              )
          } else {
            this.selectField.options.config.centerPointImg.url = require('@/assets/img/flylineChart/mapCenterPoint.png')
          }
        }
      }
    },
    'selectField.options.config.pointsImg.fileId': {
      handler(nval) {
        if (this.selectField.alias == 'flyline-chart') {
          if (nval) {
            let _this = this
            req
              .get(
                window.context.portal +
                  '/system/file/v1/preview?fileId=' +
                  nval,
                'blob'
              )
              .then(
                response => {
                  if (response.data.size > 0) {
                    var blob = response.data
                    var reader = new FileReader()
                    reader.readAsDataURL(blob)
                    reader.onload = function(e) {
                      _this.selectField.options.config.pointsImg.url =
                        e.target.result
                    }
                  }
                },
                function errorCallback() {
                  _this.$message.success('获取图片失败。')
                }
              )
          } else {
            this.selectField.options.config.pointsImg.url = require('@/assets/img/flylineChart/mapPoint.png')
          }
        }
      }
    },
    'selectField.options.config.icon.fileId': {
      handler(nval) {
        if (this.selectField.alias == 'flyline-chart-enhanced') {
          if (nval) {
            let _this = this
            req
              .get(
                window.context.portal +
                  '/system/file/v1/preview?fileId=' +
                  nval,
                'blob'
              )
              .then(
                response => {
                  if (response.data.size > 0) {
                    var blob = response.data
                    var reader = new FileReader()
                    reader.readAsDataURL(blob)
                    reader.onload = function(e) {
                      _this.selectField.options.config.icon.src =
                        e.target.result
                    }
                  }
                },
                function errorCallback() {
                  _this.$message.success('获取图片失败。')
                }
              )
          } else {
            this.selectField.options.config.icon.src = require('@/assets/img/flylineChart/mapPoint.png')
          }
        }
      }
    },
    field: {
      handler(val) {
        if (val) {
          this.selectField = val
        } else {
          this.activeName = 'datavInfo'
        }
      },
      deep: true
    },
    selectField: {
      handler(val) {
        this.$emit('update:field', val)
      },
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
@import '@/assets/css/form-editor.scss';
.el-header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.field-empty {
  text-align: center;
  width: 100%;
  margin-top: 150px;
  font-size: 16px;
  color: #ccc;
}

.datav-info {
  overflow: hidden;
  .form {
    height: 100%;
    .field__tabs {
      height: 100%;
      overflow: hidden;
      width: 320px;
      display: flex;
      flex-direction: column;
      /deep/ .el-tabs__nav-wrap::after {
        background: #44464b;
      }
      /deep/ .el-tabs__nav-scroll {
        padding: 10px 0 0 10px;
      }
      /deep/ .el-tabs__content {
        flex: 1;
      }
      /deep/ .el-tab-pane {
        height: 100%;
        .form-content {
          width: 320px;
          // overflow-y: hidden;
          padding: 10px;
          box-sizing: border-box;
        }
        .divider-title {
          color: #7786a1;
          font-size: 14px;
          margin-bottom: 10px;
          > i {
            display: inline-block;
            width: 14px;
            height: 12px;
            background-image: url('../../assets/img/arrow.svg');
            background-size: 100% 100%;
            margin-right: 5px;
          }
        }
      }
      /deep/ .el-collapse-item__header:hover {
        color: $--color-primary;
      }
      /deep/ .el-collapse-item__content {
        padding: 0 10px 10px;
      }
      /deep/ .el-tabs__item {
        color: #81888f;
        font-size: 14px;
        &:hover,
        &.is-active {
          color: $--color-primary;
        }
      }
    }
    /deep/ .el-form-item {
      display: flex;
      margin-bottom: 15px;
      margin-right: 0;
      .el-form-item__label {
        width: 85px !important;
        color: #cbd3db;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: right;
        margin-right: 10px;
        padding: 0;
        font-size: 13px;
      }
      .el-form-item__content {
        margin-left: 0px !important;
        flex: 1;
        .flex-line {
          display: flex;
          .inputs {
            flex: 1;
            margin-right: 10px;
          }
        }
      }
      // 消除如果是必填时 label对不齐的问题
      &::before {
        margin-right: 0;
      }
    }
    /deep/ .el-dialog__body {
      padding: 5px !important;
      color: #606266;
      font-size: 14px;
      word-break: break-all;
    }
    /deep/ .el-dialog__footer {
      padding: 10px !important;
      text-align: right;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    .form-editor-dialog >>> .el-dialog__body {
      padding: 0;
      height: 100%;
    }
    .el-collapse-item__header {
      background: #fcfcfc;
    }
    .form-table {
      // width: 300px;
      background: #25272b;
      border-color: #414448;
      color: #cbd3db;
      td {
        border-color: #414448;
        padding: 6px;
        text-align: center;
        .table-delete-btn {
          cursor: pointer;
          color: #409eff;
        }
      }
    }
    >>> .el-input-group__prepend {
      padding: 0 10px;
    }
    >>> .el-input-group__append {
      padding: 0 10px;
    }
    // >>> .el-collapse-item{
    //   max-height: 650px;
    //   overflow-y: auto;
    //   overflow-x: hidden;
    // }
  }
  // 修改element-ui样式
  /deep/ .el-form {
    .el-input__inner,
    .el-textarea__inner {
      color: #fff;
      background: #121416;
      border-color: #414448;
    }
    .el-input .el-input__count .el-input__count-inner,
    .el-textarea .el-input__count {
      background: #121416;
    }
    .el-radio-button:first-child .el-radio-button__inner {
      border-radius: 13px 0 0 13px;
      border-color: #414448;
    }
    .el-radio-button__inner {
      background: #121416;
      color: #7786a1;
      border-color: #414448;
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background: $--color-primary;
      color: #fff;
    }
    .el-radio-button:last-child .el-radio-button__inner {
      border-radius: 0 13px 13px 0;
      border-color: #414448;
    }
    .el-radio-button--small .el-radio-button__inner {
      padding: 9px 11px;
    }
    .el-input-number__increase,
    .el-input-number__decrease {
      background: #25272b;
      border-color: #414448;
      color: #cbd3db;
    }
    .el-input-number__increase.is-disabled,
    .el-input-number__decrease.is-disabled {
      color: #7786a1;
    }
    .el-input-group__append,
    .el-input-group__prepend {
      background-color: #25272b;
      border-color: #414448;
      color: #cbd3db;
    }
    .el-collapse {
      border: none;
      .el-collapse-item__header {
        font-weight: bold;
        color: #7786a1;
        padding-left: 10px;
        background: transparent;
        border: none;
      }
      .el-collapse-item__wrap {
        background: transparent;
        border: none;
      }
    }
    .el-input-group__append button.el-button,
    .el-input-group__append div.el-select .el-input__inner,
    .el-input-group__append div.el-select:hover .el-input__inner,
    .el-input-group__prepend button.el-button,
    .el-input-group__prepend div.el-select .el-input__inner,
    .el-input-group__prepend div.el-select:hover .el-input__inner {
      border-color: transparent;
      background-color: transparent;
      color: inherit;
    }
    .el-color-picker__trigger {
      background: #25272b;
      border-color: #414448;
    }
  }
  .screen_primary_btn {
    border: 1px solid #409eff;
    background: linear-gradient(140deg, #3e97f2 27%, #4171f9 73%);
    color: #fff;
    font-size: 12px;
    border-radius: 13px;
  }
  .screen_plus_btn {
    width: 24px;
    height: 30px;
    border: 1px solid #409eff;
    background: linear-gradient(140deg, #3e97f2 27%, #4171f9 73%);
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .screen-plus-mini-btn {
    width: 26px;
    height: 24px;
    color: #409eff;
    border: 1px solid #409eff;
    background: linear-gradient(-90deg, #25272b 0%, #1a3857 50%, #25272b 96%);
    border-radius: 3px;
    padding: 0;
  }
  .color-line {
    height: 1px;
    background: linear-gradient(
      -90deg,
      #44464b 0%,
      #3956b3 30%,
      #406dff 46%,
      #3956b3 67%,
      #44464b 100%
    );
  }
}
// .datav-info .el-form-item {
//     display: inline-block;
//     margin-right: 10px;
//     vertical-align: top;
// }
.el-form-item--small .el-form-item__label {
  line-height: 32px;
}
// .datav-info >>> .el-form-item__label {
//     float: none;
//     display: inline-block;
//     width: 100px;
// }
.el-form--label-left .el-form-item__label {
  text-align: left;
}
.form-item-two {
  width: 115px;
  margin-left: 5px;
}
// . {
//   width: 200px;
// }

/deep/ .el-scrollbar__wrap {
  overflow-y: auto;
  overflow-x: hidden;
}
.chart-json_edit /deep/ .el-dialog__body {
  padding: 0 20px 10px 20px !important;
}

.tip-message {
  height: 40px;
  color: #ffae44;
  font-size: 14px;
  padding-left: 16px;
  margin-bottom: 12px;
  background: rgba(255, 174, 68, 0.1);
}
.select-field-type {
  ::v-deep {
    .el-select {
      width: 220px !important;
    }
  }
}
.file-upload-name {
  margin-top: 8px;
  display: flex;
  align-items: center;
  span {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
  }
}
</style>
