visualization-design/src/views/components/PenProps.vue

<template>
  <div class="props">
    <t-tabs v-model="data.tab">
      <t-tab-panel :value="1" :label="$t('外观')">
        <t-space direction="vertical" class="py-16 w-full">
          <!-- <div class="form-item px-12">
            <label style="width: 50px">ID</label>
            <t-input
              class="w-full"
              placeholder="ID"
              :value="data.pen.id"
              @change="changeID($event)"
            />
          </div> -->
          <div class="form-item px-12" style="margin-top: -12px">
            <label style="width: 50px">{{$t('名称')}}</label>
            <t-input
              v-if="data.input"
              class="w-full"
              v-model.number="data.pen.description"
              @change="changeValue('description')"
              @blur="data.input = false"
            />
            <div v-else @click="data.input = true" style="padding-left: 8px; line-height: 30px">
              {{data.pen.description || data.pen.name }}
            </div>
          </div>
          <div class="form-item px-12" style="margin-top: -12px">
            <label style="width: 50px">{{$t('分组')}}</label>
            <t-select-input v-model:inputValue="data.inputTag" :value="data.pen.tags" allow-input multiple @tag-change="onChangeInputTag" @focus="data.tagPopupVisible = true" @blur="data.tagPopupVisible = false" :tag-input-props="{ excessTagsDisplayType: 'break-line' }" :placeholder="$t('请输入或选择分组')">
              <template #panel>
                <ul style="padding: 8px 12px">
                  <li
                    v-for="item in data.groups"
                    :key="item"
                    @click="onSelectTag(item)"
                  >
                    {{ item }}
                  </li>
                </ul>
              </template>
            </t-select-input>
          </div>
          <div v-if="isDom" class="form-item px-12" style="margin-top: -12px">
            <label style="width: 50px">z-index</label>
            <t-input-number
              v-model="data.pen.zIndex"
              theme="column"
              :min="0"
              :placeholder="$t('默认5')"
              @change="changeValue('zIndex')"
            />
          </div>
          <!-- <div v-else class="form-item px-12" style="margin-top: -12px">
            <label style="width: 50px">{{$t('画布层')}}</label>
            <t-select v-model="data.pen.canvasLayer" @change="changeValue('canvasLayer')">
              <t-option :key="4" :disabled="data.pen.name!=='image'" :value="4" :label="$t('上层图片层')"> {{$t('上层图片层')}} </t-option>
              <t-option :key="3" :value="3" :label="$t('主画布层')"> {{$t('主画布层')}} </t-option>
              <t-option :key="2" :disabled="data.pen.name!=='image'" :value="2" :label="$t('下层图片层')"> {{$t('下层图片层')}} </t-option>
              <t-option :key="1" :value="1" :label="$t('模板层')"> {{$t('模板层')}} </t-option>
            </t-select>
          </div> -->
          <t-divider style="margin: -8px 0"></t-divider>
          <div style="margin: 0 16px 16px 16px">
            <t-space direction="vertical" size="small" class="w-full">
              <div style="color: var(--color); margin-bottom: 2px">
                {{$t('大屏对齐')}}
              </div>
              <div class="icons">
                <t-tooltip
                  v-for="item in aligns"
                  :content="item.label"
                  placement="top"
                >
                  <svg
                    class="l-icon btn"
                    aria-hidden="true"
                    @click="align(item.value)"
                  >
                    <use :xlink:href="item.icon"></use>
                  </svg>
                </t-tooltip>
              </div>
            </t-space>
          </div>
          <t-divider style="margin: -8px 0" />
          <div class="form-item" style="margin-top: -12px">
            <t-input
              class="ml-4"
              label="X"
              placeholder="X"
              v-model.number="data.rect.x"
              style="width: 80px"
              :format="decimalPlaces"
              @change="changeRectValue('x')"
            />
            <link-icon  class="hidden ml-4"/>
            <!-- <t-icon name="link" class="hidden ml-4" /> -->
            <t-input
              class="ml-4"
              label="Y"
              placeholder="Y"
              v-model.number="data.rect.y"
              style="width: 80px"
              :format="decimalPlaces"
              @change="changeRectValue('y')"
            />
            <t-input
              class="ml-16"
              v-model.number="data.pen.rotate"
              :placeholder="$t('旋转')"
              style="width: 80px"
              :format="decimalRound"
              @change="changeValue('rotate')"
            >
              <template #prefix-icon>
                <svg class="l-icon" aria-hidden="true">
                  <use xlink:href="#l-rotate"></use>
                </svg>
              </template>
            </t-input>
          </div>
          <div class="form-item hover-icons" style="margin-top: -12px">
            <t-input class="ml-4" label="W" v-model.number="data.rect.width" min="1" style="width: 80px" :format="decimalPlaces" @change="changeRectValue('width')" :placeholder="$t('宽')"></t-input>
            <t-tooltip v-if="data.pen.ratio" placement="top" :content="$t('固定比例')">
              <link-icon class="ml-4 hover" @click="data.pen.ratio = !data.pen.ratio"></link-icon>
              <!-- <t-icon
                name="link"
                class="ml-4 hover"
                @click="data.pen.ratio = !data.pen.ratio"
              /> -->
            </t-tooltip>
            <t-tooltip v-else placement="top" :content="$t('不固定比例')">
              <link-unlink-icon class="ml-4 hover icon" @click="data.pen.ratio = !data.pen.ratio"></link-unlink-icon>
              <!-- <t-icon
                name="link-unlink"
                class="ml-4 hover icon"
                @click="data.pen.ratio = !data.pen.ratio"
              /> -->
            </t-tooltip>

            <t-input class="ml-4" label="H" v-model.number="data.rect.height" min="1" style="width: 80px" :format="decimalPlaces" @change="changeRectValue('height')" :placeholder="$t('高')"></t-input>

            <t-input class="ml-16" v-model.number="data.pen.borderRadius" style="width: 80px" @change="changeValue('borderRadius')" :placeholder="$t('圆角')">
              <template #prefix-icon>
                <svg class="l-icon" aria-hidden="true">
                  <use xlink:href="#l-border-radius"></use>
                </svg>
              </template>
            </t-input>
          </div>

          <t-divider style="margin: -8px 0" />
          <div class="form-item px-16" style="margin-top: -12px">
            <label>{{$t('透明度')}}</label>
            <t-slider v-model="data.pen.globalAlpha" :min="0" :max="1" :step="0.01" @change="changeValue('globalAlpha')"></t-slider>
            <span class="ml-16" style="width: 50px; line-height: 30px">
              {{ data.pen.globalAlpha }}
            </span>
          </div>
          <template
            v-if="
              data.pen.name === 'combine' && data.pen.showChild !== undefined
            "
          >
            <t-divider style="margin: -8px 0" />
            <div>
              <div class="form-item px-16" style="margin-top: -12px">
                <label>{{$t('状态')}}</label>
                <t-select v-model="data.pen.showChild" @change="changeValue('showChild')" style="width: 150px" :placeholder="$t('状态')">
                  <t-option v-for="(a, index) in data.pen.children" :key="index" :value="index" :label="$t('状态')+(index + 1)">
                  {{$t('状态')}}{{ index + 1 }}</t-option>
                </t-select>
              </div>
              <div v-if="data.childPen.image" class="px-16 py-8">
                <t-upload
                  ref="childUploadRef"
                  v-model="data.childImages"
                  action="/api/image/upload"
                  theme="image"
                  accept="image/*"
                  :headers="headers"
                  :data="updataData"
                  :before-upload="beforeUpload"
                  draggable
                  @success="fileChildSuccessed"
                >
                  <template #fileListDisplay>
                    <div style="z-index: 20">
                      <a class="mr-4" @click="childUpload"> {{$t('点击上传')}} </a>
                      / {{$t('拖拽图片到此区域')}}
                    </div>
                  </template>
                </t-upload>
              </div>
              <div v-if="data.childPen.image" class="form-item px-16">
                <label style="width: 30px; color: var(--color)">Url：</label>
                <t-input class="w-full" v-model.number="data.childPen.image" @change="changeChildValue('image')" :placeholder="$t('图片地址')"></t-input>
              </div>
            </div>
          </template>
          <t-collapse :defaultValue="['1', '2', '3', '4', '5']" expandIconPlacement="right" :borderless="true">
            <t-collapse-panel v-if="data.pen.props.custom" value="5" :header="$t('属性')">
              <Custom :pen="data.pen"></Custom>
            </t-collapse-panel>
            <t-collapse-panel v-if="data.pen.props.look !== false" value="1" :header="$t('外观')">
              <t-space direction="vertical" size="small" class="w-full">
                <div class="form-item">
                  <t-color-picker class="simple mt-8 mr-4" format="CSS" :enable-alpha="true" :recent-colors="null" :swatch-colors="defaultPureColor" :color-modes="['monochrome']" :show-primary-color-preview="false" :clearable="true" v-model="data.pen.color" @change="changeValue('color')"></t-color-picker>
                  <label style="width: 64px">{{$t('前景颜色')}}</label>

                  <t-color-picker class="simple mt-8 mr-4" format="CSS" :enable-alpha="true" :recent-colors="null" :swatch-colors="defaultPureColor" :color-modes="['monochrome']" :show-primary-color-preview="false" v-model="data.pen.hoverColor" @change="changeValue('hoverColor')"></t-color-picker>
                  <label style="width: 64px">{{$t('悬停颜色')}}</label>

                  <t-color-picker class="simple mt-8 mr-4" format="CSS" :enable-alpha="true" :recent-colors="null" :swatch-colors="defaultPureColor" :color-modes="['monochrome']" :show-primary-color-preview="false" v-model="data.pen.activeColor" @change="changeValue('activeColor')"></t-color-picker>
                  <label style="width: 64px">{{$t('选中颜色')}}</label>
                </div>

                <div class="form-item">
                  <label style="width: 32px">{{$t('线条')}} </label>
                  <t-select v-model="data.pen.dash" @change="changeValue('dash')" style="width: 80px" :placeholder="$t('线条样式')">
                    <template #valueDisplay="{ value }">
                      <div v-if="value === -1">{{$t( '无' )}}</div>
                      <svg
                        v-else
                        xmlns="http://www.w3.org/2000/svg"
                        version="1.1"
                        style="width: 100%; height: 20px"
                      >
                        <g fill="none" stroke="var(--color)" stroke-width="1">
                          <path v-if="value === 0" d="M0 9 l85 0" />
                          <path
                            v-else-if="value === 1"
                            stroke-dasharray="5 5"
                            d="M0 9 l85 0"
                          />
                          <path
                            v-else-if="value === 2"
                            stroke-dasharray="10 10"
                            d="M0 9 l85 0"
                          />
                          <path
                            v-else-if="value === 3"
                            stroke-dasharray="10 10 2 10"
                            d="M0 9 l85 0"
                          />
                        </g>
                      </svg>
                    </template>
                    <t-option :key="-1" :value="-1" label="A">
                      <div class="flex" style=" align-items:center;">
                        <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
                          <path d="M113.777778 0h796.444444a113.777778 113.777778 0 0 1 113.777778 113.777778v796.444444a113.777778 113.777778 0 0 1-113.777778 113.777778H113.777778a113.777778 113.777778 0 0 1-113.777778-113.777778V113.777778a113.777778 113.777778 0 0 1 113.777778-113.777778z m0 85.333333a28.444444 28.444444 0 0 0-28.444445 28.444445v796.444444a28.444444 28.444444 0 0 0 28.444445 28.444445h796.444444a28.444444 28.444444 0 0 0 28.444445-28.444445V113.777778a28.444444 28.444444 0 0 0-28.444445-28.444445H113.777778z" fill="#e3e8f4" p-id="37532"></path>
                          <path d="M897.706667 75.662222L105.813333 894.748444a42.666667 42.666667 0 0 0 61.326223 59.278223l791.893333-819.143111a42.666667 42.666667 0 1 0-61.383111-59.335112z" fill="#ff4000" p-id="37533"></path>
                        </svg>
                        <p style="margin-left:8px;">{{$t('无')}}</p>
                      </div>
                    </t-option>
                    <t-option :key="0" :value="0" label="B">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        version="1.1"
                        style="width: 80px; height: 14px"
                      >
                        <g fill="none" stroke="var(--color)" stroke-width="1">
                          <path d="M0 9 l85 0" />
                        </g>
                      </svg>
                    </t-option>
                    <t-option :key="1" :value="1" label="C">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        version="1.1"
                        style="width: 80px; height: 14px"
                      >
                        <g fill="none" stroke="var(--color)" stroke-width="1">
                          <path stroke-dasharray="5 5" d="M0 9 l85 0" />
                        </g>
                      </svg>
                    </t-option>
                    <t-option :key="2" :value="2" label="D">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        version="1.1"
                        style="width: 80px; height: 14px"
                      >
                        <g fill="none" stroke="var(--color)" stroke-width="1">
                          <path stroke-dasharray="10 10" d="M0 9 l85 0" />
                        </g>
                      </svg>
                    </t-option>
                    <t-option :key="3" :value="3" label="E">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        version="1.1"
                        style="width: 80px; height: 14px"
                      >
                        <g fill="none" stroke="var(--color)" stroke-width="1">
                          <path stroke-dasharray="10 10 2 10" d="M0 9 l85 0" />
                        </g>
                      </svg>
                    </t-option>
                  </t-select>
                  <t-input-number
                    theme="normal"
                    :placeholder="$t('线条宽度')"
                    v-model="data.pen.lineWidth"
                    :min="0"
                    :decimalPlaces="0"
                    @change="changeValue('lineWidth')"
                    class="ml-4"
                    style="width: 40px"
                  />
                  <t-tooltip
                    v-if="['polyline','line'].includes(data.pen.lineName)"
                    :content="$t('平滑度')"
                    placement="top"
                  >
                    <t-input-number
                      theme="normal"
                      placeholder="1-3"
                      v-model="data.pen.lineSmooth"
                      :min="0"
                      :decimalPlaces="0"
                      @change="changeValue('lineSmooth')"
                      class="ml-4"
                      style="width: 44px"
                    />
                  </t-tooltip>
                  <t-tooltip placement="top" :content="$t('线条渐变')">
                    <div class="flex middle ml-8">
                      <t-checkbox
                        v-model="data.pen.strokeType"
                        @change="changeValue('strokeType')"
                        style="width: 22px"
                      />

                      <t-color-picker
                        v-if="data.pen.strokeType"
                        class="simple mr-4"
                        format="CSS"
                        :swatch-colors="defaultGradientColor"
                        :color-modes="['linear-gradient']"
                        :show-primary-color-preview="false"
                        :recent-colors="null"
                        :enableAlpha="true"
                        v-model="data.pen.lineGradientColors"
                        @change="changeValue('lineGradientColors')"
                        :placeholder="$t('无')"
                      />
                    </div>
                  </t-tooltip>
                </div>
                <div v-if="data.pen.type" class="form-item">
                  <label style="width: 52px">{{$t('边框宽度')}} </label>
                  <t-input-number
                    theme="normal"
                    placeholder="边框宽度"
                    v-model="data.pen.borderWidth"
                    :min="0"
                    :decimalPlaces="0"
                    @change="changeValue('borderWidth')"
                    style="width: 73px"
                  />
                  <label style="width: 52px;" class="ml-8">{{$t('边框颜色')}} </label>
                  <t-color-picker
                    class="simple mt-8 ml-8"
                    format="CSS"
                    :enable-alpha="true"
                    :recent-colors="null"
                    :swatch-colors="defaultPureColor"
                    :color-modes="['monochrome']"
                    :show-primary-color-preview="false"
                    :clearable="true"
                    v-model="data.pen.borderColor"
                    @change="changeValue('borderColor')"
                  />
                </div>
                <div class="form-item">
                  <label style="width: 52px">{{$t('起点箭头')}} </label>
                  <t-select
                    v-model="data.pen.fromArrow"
                    :placeholder="$t('线条样式')"
                    @change="changeValue('fromArrow')"
                    style="width: 80px"
                  >
                    <template #valueDisplay="{ value }">
                      <svg v-if="value" class="l-icon" aria-hidden="true">
                        <use :xlink:href="fromArrows.find(item=>item.value===value).icon"></use>
                      </svg>
                    </template>
                    <t-option v-for="item in fromArrows" :key="item.value" :label="item.icon"  :value="item.value">
                      <svg class="l-icon" aria-hidden="true">
                        <use :xlink:href="item.icon"></use>
                      </svg>
                    </t-option>
                  </t-select>
                  <label style="width: 52px" class="ml-4">{{$t('终点箭头')}} </label>
                  <t-select v-model="data.pen.toArrow" @change="changeValue('toArrow')" style="width: 80px" :placeholder="$t('线条样式')">
                    <template #valueDisplay="{ value }">
                      <svg v-if="value" class="l-icon" aria-hidden="true">
                        <use :xlink:href="toArrows.find(item=>item.value===value).icon"></use>
                      </svg>
                    </template>
                    <t-option v-for="item in toArrows" :key="item.value" :label="item.icon" :value="item.value">
                      <svg class="l-icon" aria-hidden="true">
                        <use :xlink:href="item.icon"></use>
                      </svg>
                    </t-option>
                  </t-select>
                </div>
                <div class="form-item">
                  <label style="width: 76px">{{$t('起始箭头大小')}} </label>
                  <t-input-number
                    style="width:54px"
                    theme="column"
                    v-model="data.pen.fromArrowSize"
                    :min="0"
                    @change="changeValue('fromArrowSize')"
                  />
                  <label style="width: 76px"  class="ml-4">{{$t('终点箭头大小')}} </label>
                  <t-input-number
                    style="width:54px"
                    theme="column"
                    v-model="data.pen.toArrowSize"
                    :min="0"
                    @change="changeValue('toArrowSize')"
                  />
                </div>
                <div class="form-item">
                  <label style="width: 76px">{{$t('起始箭头颜色')}} </label>
                  <t-color-picker
                    class="simple mt-8 ml-8"
                    format="CSS"
                    :enable-alpha="true"
                    :recent-colors="null"
                    :swatch-colors="defaultPureColor"
                    :color-modes="['monochrome']"
                    :show-primary-color-preview="false"
                    :clearable="true"
                    v-model="data.pen.fromArrowColor"
                    @change="changeValue('fromArrowColor')"
                  />
                  <label style="width: 76px;margin-left:36px">{{$t('终点箭头颜色')}} </label>
                  <t-color-picker
                    class="simple mt-8 ml-8"
                    format="CSS"
                    :enable-alpha="true"
                    :recent-colors="null"
                    :swatch-colors="defaultPureColor"
                    :color-modes="['monochrome']"
                    :show-primary-color-preview="false"
                    :clearable="true"
                    v-model="data.pen.toArrowColor"
                    @change="changeValue('toArrowColor')"
                  />
                </div>
                <div class="flex" style="margin-left: 40px">
                  <div class="flex column middle">
                    <t-radio-group
                      size="small"
                      v-model="data.pen.lineCap"
                      default-value="butt"
                      @change="changeValue('lineCap')"
                    >
                      <t-radio-button value="butt">
                        <t-tooltip placement="top" :content="$t('默认')">
                          <svg class="l-icon" aria-hidden="true">
                            <use xlink:href="#l-duandian1"></use>
                          </svg>
                        </t-tooltip>
                      </t-radio-button>
                      <t-radio-button value="round">
                        <t-tooltip placement="top" :content="$t('圆形')">
                          <svg class="l-icon" aria-hidden="true">
                            <use xlink:href="#l-duandian2"></use>
                          </svg>
                        </t-tooltip>
                      </t-radio-button>
                      <t-radio-button value="square">
                        <t-tooltip placement="top" :content="$t('方形')">
                          <svg class="l-icon" aria-hidden="true">
                            <use xlink:href="#l-duandian3"></use>
                          </svg>
                        </t-tooltip>
                      </t-radio-button>
                    </t-radio-group>
                    <div class="mt-4" style="font-size: 12px">{{$t('末端样式')}}</div>
                  </div>
                  <div class="flex column middle ml-16">
                    <t-radio-group
                      size="small"
                      v-model="data.pen.lineJoin"
                      default-value="miter"
                      @change="changeValue('lineJoin')"
                    >
                      <t-radio-button value="miter">
                        <t-tooltip placement="top" :content="$t('默认')">
                          <svg class="l-icon" aria-hidden="true">
                            <use xlink:href="#l-jiedian1"></use>
                          </svg>
                        </t-tooltip>
                      </t-radio-button>
                      <t-radio-button value="round">
                        <t-tooltip placement="top" :content="$t('圆形')">
                          <svg class="l-icon" aria-hidden="true">
                            <use xlink:href="#l-jiedian2"></use>
                          </svg>
                        </t-tooltip>
                      </t-radio-button>
                      <t-radio-button value="bevel">
                        <t-tooltip placement="top" :content="$t('斜角')">
                          <svg class="l-icon" aria-hidden="true">
                            <use xlink:href="#l-jiedian3"></use>
                          </svg>
                        </t-tooltip>
                      </t-radio-button>
                    </t-radio-group>
                    <div class="mt-4" style="font-size: 12px">{{$t('连接样式')}}</div>
                  </div>
                </div>
                <div class="form-item" v-if="!data.pen.type||(data.pen.type&&data.pen.close)">
                  <label style="width: 32px">{{$t('背景')}}</label>
                  <div class="ml-8">
                    <t-radio-group size="small" v-model="data.pen.bkType" :default-value="0" @change="changeValue('bkType')">
                      <t-radio-button :value="0"> {{$t('纯色')}} </t-radio-button>
                      <t-radio-button :value="1"> {{$t('线性渐变')}} </t-radio-button>
                      <t-radio-button :value="2"> {{$t('径向渐变')}} </t-radio-button>
                    </t-radio-group>
                    <div v-if="data.pen.bkType === 0" class="mt-8 -ml-8">
                      <t-color-picker
                        class="w-full"
                        style="width: 180px;"
                        format="CSS"
                        :swatch-colors="defaultPureColor"
                        :color-modes="['monochrome']"
                        :recent-colors="null"
                        :enable-alpha="true"
                        :show-primary-color-preview="false"
                        v-model="data.pen.background"
                        @change="changeValue('background')"
                      />
                    </div>
                    <div
                      v-else-if="data.pen.bkType === 1"
                      class="mt-8 -ml-8"
                    >
                      <t-color-picker
                        class="w-full"
                        style="width: 180px;"
                        format="CSS"
                        :enable-alpha="true"
                        :recent-colors="null"
                        :swatch-colors="defaultGradientColor"
                        :color-modes="['linear-gradient']"
                        :show-primary-color-preview="false"
                        v-model="data.pen.gradientColors"
                        @change="changeValue('gradientColors')"
                      />
                    </div>
                    <div
                      v-else-if="data.pen.bkType === 2"
                      class="mt-8 flex middle"
                    >
                      <t-color-picker
                        class="simple"
                        style="max-width: 180px;"
                        format="CSS"
                        :enable-alpha="true"
                        :recent-colors="null"
                        :swatch-colors="defaultGradientColor"
                        :color-modes="['linear-gradient']"
                        :show-primary-color-preview="false"
                        v-model="data.pen.gradientColors"
                        @change="changeValue('gradientColors')"
                      />

                      <t-input-number
                        theme="column"
                        :placeholder="$t('渐变半径')"
                        v-model="data.pen.gradientRadius"
                        :min="0"
                        :max="1"
                        :step="0.1"
                        @change="changeValue('gradientRadius')"
                        class="ml-8"
                        style="width: 100px"
                      />
                    </div>
                  </div>
                  <t-tooltip content="悬停背景" placement="top">
                    <t-color-picker
                      class="simple w-full mt-8 ml-8"
                      clearable
                      format="CSS"
                      :swatch-colors="defaultPureColor"
                      :color-modes="['monochrome']"
                      :recent-colors="null"
                      :enable-alpha="true"
                      :show-primary-color-preview="false"
                      v-model="data.pen.hoverBackground"
                      @change="changeValue('hoverBackground')"
                    />
                  </t-tooltip>
                  <t-tooltip content="选中背景" placement="top">
                    <t-color-picker
                      class="simple w-full mt-8  ml-8"
                      format="CSS"
                      clearable
                      :swatch-colors="defaultPureColor"
                      :color-modes="['monochrome']"
                      :recent-colors="null"
                      :enable-alpha="true"
                      :show-primary-color-preview="false"
                      v-model="data.pen.activeBackground"
                      @change="changeValue('activeBackground')"
                    />  
                  </t-tooltip>
                </div>
                <div v-if="data.pen.switch" class="form-item">
                    <label style="width: 32px">{{$t('选中')}} </label>
                    <div v-if="data.pen.bkType === 0">
                      <t-color-picker
                        class="w-full"
                        format="CSS"
                        :swatch-colors="defaultPureColor"
                        :color-modes="['monochrome']"
                        :recent-colors="null"
                        :enable-alpha="true"
                        :show-primary-color-preview="false"
                        v-model="data.pen.onBackground"
                        @change="changeValue('onBackground')"
                      />
                    </div>
                    <div
                      v-else-if="data.pen.bkType === 1"
                      style="width: 200px"
                    >
                      <t-color-picker
                        class="w-full"
                        format="CSS"
                        :enable-alpha="true"
                        :recent-colors="null"
                        :swatch-colors="defaultGradientColor"
                        :color-modes="['linear-gradient']"
                        :show-primary-color-preview="false"
                        v-model="data.pen.onGradientColors"
                        @change="changeValue('onGradientColors')"
                      />
                    </div>
                    <div
                      v-else-if="data.pen.bkType === 2"
                      style="width: 200px" class="mt-8 ml-8"
                    >
                      <t-color-picker
                        class="simple"
                        format="CSS"
                        :enable-alpha="true"
                        :recent-colors="null"
                        :swatch-colors="defaultGradientColor"
                        :color-modes="['linear-gradient']"
                        :show-primary-color-preview="false"
                        v-model="data.pen.onGradientColors"
                        @change="changeValue('onGradientColors')"
                      />
                    </div>
                </div>
                <div class="form-item">
                  <label style="width: 32px">{{$t('阴影')}} </label>
                  <div class="flex middle ml-8">
                    <t-checkbox
                      v-model="data.pen.shadow"
                      @change="changeValue('shadow')"
                      style="width: 22px"
                    />
                    <t-color-picker
                      v-if="data.pen.shadow"
                      class="simple"
                      format="CSS"
                      :enable-alpha="true"
                      :recent-colors="null"
                      :swatch-colors="defaultPureColor"
                      :color-modes="['monochrome']"
                      :show-primary-color-preview="false"
                      v-model="data.pen.shadowColor"
                      @change="changeValue('shadowColor')"
                    />
                  </div>
                  <label v-if="data.pen.shadow" style="width: 50px; margin-left: 25px">{{$t('文字阴影')}}
                  </label>
                  <div v-if="data.pen.shadow" class="flex middle ml-8">
                    <t-checkbox
                      v-model="data.pen.textHasShadow"
                      @change="changeValue('textHasShadow')"
                      style="width: 22px"
                    />
                  </div>
                </div>
                <div class="form-item" v-if="data.pen.shadow">
                  <label style="width: 28px"></label>
                  <div class="flex" style="margin-top: -8px">
                    <t-input class="ml-4" label="X" placeholder="0" v-model.number="data.pen.shadowOffsetX" style="width: 60px" @change="changeValue('shadowOffsetX')" :title="$t('X偏移')"></t-input>
                    <t-input class="ml-4" label="Y" placeholder="0" v-model.number="data.pen.shadowOffsetY" style="width: 60px" @change="changeValue('shadowOffsetY')" :title="$t('Y偏移')"></t-input>
                    <t-input class="ml-4" placeholder="0" v-model.number="data.pen.shadowBlur" style="width: 64px" @change="changeValue('shadowBlur')" :label="$t('模糊')" :title="$t('模糊大小')"></t-input>
                  </div>
                </div>

                <div class="form-item">
                  <label style="width: 52px">滤镜 </label>
                  <t-input
                      theme="normal"
                      placeholder="css滤镜参数"
                      v-model="data.pen.filter"
                      @change="changeValue('filter')"
                  />
                </div>
              </t-space>
            </t-collapse-panel>

            <t-collapse-panel v-if="data.pen.props.text" value="2" :header="$t('文字')">
              <t-space direction="vertical" size="small" class="w-full">
                <div class="form-item">
                  <div class="flex middle" style="margin-left: -10px">
                    <t-select-input
                      :value="data.pen.fontFamily"
                      :popup-visible="data.fontFamilyPopupVisible"
                      :placeholder="$t('字体名')"
                      allow-input
                      style="width: 170px"
                      @change="changeValue('fontFamily')"
                      @enter="changeValue('fontFamily')"
                      @blur="changeValue('fontFamily')"
                      @popup-visible-change="onFontPopupVisible"
                      :popup-props="{
                        overlayInnerStyle: { width: 'auto' },
                      }"
                    >
                      <template #panel>
                        <ul style="padding: 12px">
                          <li
                            v-for="item in fonts"
                            :key="item"
                            @click="onFontFamily(item)"
                          >
                            {{ item }}
                          </li>
                        </ul>
                      </template>
                      <template #suffixIcon>
                        <chevron-down-icon />
                        <!-- <t-icon name="chevron-down" /> -->
                      </template>
                    </t-select-input>

                    <t-input
                      class="ml-8"
                      :placeholder="$t('字体大小')"
                      v-model.number="data.pen.fontSize"
                      style="width: 80px"
                      :format="decimalRound"
                      @change="changeValue('fontSize')"
                    />
                  </div>
                </div>
                <div class="flex middle">
                  <t-radio-group
                    size="small"
                    v-model="data.pen.textAlign"
                    default-value="center"
                    @change="changeValue('textAlign')"
                  >
                    <t-radio-button value="left">
                      <t-tooltip :content="$t('居左')" placement="top">
                        <format-vertical-align-left-icon />
                        <!-- <t-icon name="format-vertical-align-left" /> -->
                      </t-tooltip>
                    </t-radio-button>
                    <t-radio-button value="center">
                      <t-tooltip placement="top" :content="$t('水平居中')">
                        <format-vertical-align-center-icon></format-vertical-align-center-icon>
                        <!-- <t-icon name="format-vertical-align-center" /> -->
                      </t-tooltip>
                    </t-radio-button>
                    <t-radio-button value="right">
                      <t-tooltip placement="top" :content="$t('居右')">
                        <format-vertical-align-right-icon></format-vertical-align-right-icon>
                        <!-- <t-icon name="format-vertical-align-right" /> -->
                      </t-tooltip>
                    </t-radio-button>
                  </t-radio-group>
                  <t-radio-group
                    class="ml-8"
                    size="small"
                    v-model="data.pen.textBaseline"
                    default-value="top"
                    @change="changeValue('textBaseline')"
                  >
                    <t-radio-button value="top">
                      <t-tooltip placement="top" :content="$t('顶部对齐')">
                        <format-horizontal-align-top-icon></format-horizontal-align-top-icon>
                        <!-- <t-icon name="format-horizontal-align-top" /> -->
                      </t-tooltip>
                    </t-radio-button>
                    <t-radio-button value="middle">
                      <t-tooltip placement="top" :content="$t('垂直居中')">
                        <format-horizontal-align-center-icon></format-horizontal-align-center-icon>
                        <!-- <t-icon name="format-horizontal-align-center" /> -->
                      </t-tooltip>
                    </t-radio-button>
                    <t-radio-button value="bottom">
                      <t-tooltip placement="top" :content="$t('底部对齐')">
                        <format-horizontal-align-bottom-icon></format-horizontal-align-bottom-icon>
                        <!-- <t-icon name="format-horizontal-align-bottom" /> -->
                      </t-tooltip>
                    </t-radio-button>
                  </t-radio-group>

                  <t-button
                    :class="{ active: data.pen.fontWeight === 'bold' }"
                    class="ml-8 icon"
                    shape="rectangle"
                    variant="text"
                    @click="
                      data.pen.fontWeight === 'bold'
                        ? (data.pen.fontWeight = 'normal')
                        : (data.pen.fontWeight = 'bold');
                      changeValue('fontWeight');
                    ">
                    B
                  </t-button>

                  <t-button
                    :class="{ active: data.pen.fontStyle === 'italic' }"
                    class="ml-4 icon"
                    shape="rectangle"
                    variant="text"
                    @click="
                      data.pen.fontStyle === 'italic'
                        ? (data.pen.fontStyle = 'normal')
                        : (data.pen.fontStyle = 'italic');
                      changeValue('fontStyle');
                    "
                    style="font-style: italic; font-family: serif"
                    >I</t-button
                  >
                </div>
                <div class="form-item">
                  <!-- <t-color-picker
                    class="simple mt-8 mr-4"
                    format="CSS"
                    :enable-alpha="true"
                    :recent-colors="null"
                    :swatch-colors="defaultPureColor"
                    :color-modes="['monochrome']"
                    :show-primary-color-preview="false"
                    v-model="data.pen.textColor"
                    @change="changeValue('textColor')"
                  />
                  <label style="width: 44px">前景</label> -->
                  <t-color-picker
                    class="simple mt-8 mr-4"
                    format="CSS"
                    :enable-alpha="true"
                    :recent-colors="null"
                    :swatch-colors="defaultPureColor"
                    :color-modes="['monochrome']"
                    :show-primary-color-preview="false"
                    v-model="data.pen.textBackground"
                    @change="changeValue('textBackground')"
                  />
                  <label style="width: 64px">{{$t( '背景' )}}</label>

                  <t-color-picker class="simple mt-8 mr-4" format="CSS" :enable-alpha="true" :recent-colors="null" :swatch-colors="defaultPureColor" :color-modes="['monochrome']" :show-primary-color-preview="false" v-model="data.pen.hoverTextColor" @change="changeValue('hoverTextColor')"></t-color-picker>
                  <label style="width: 64px">{{$t('悬停')}}</label>

                  <t-color-picker class="simple mt-8 mr-4" format="CSS" :enable-alpha="true" :recent-colors="null" :swatch-colors="defaultPureColor" :color-modes="['monochrome']" :show-primary-color-preview="false" v-model="data.pen.activeTextColor" @change="changeValue('activeTextColor')"></t-color-picker>
                  <label style="width: 64px">{{$t('选中')}}</label>
                </div>
                <div class="form-item">
                  <label style="width: 32px">{{$t('前景')}}</label>
                  <div class="ml-8">
                    <t-radio-group size="small" v-model="data.pen.textType" :default-value="0" @change="changeValue('textType')">
                      <t-radio-button :value="0"> {{$t('纯色')}} </t-radio-button>
                      <t-radio-button :value="1"> {{$t('线性渐变')}} </t-radio-button>
                      <t-radio-button :value="2"> {{$t('径向渐变')}} </t-radio-button>
                    </t-radio-group>
                    <div v-if="data.pen.textType === 0" class="mt-8 -ml-8">
                      <t-color-picker
                        class="w-full"
                        format="CSS"
                        :swatch-colors="defaultPureColor"
                        :color-modes="['monochrome']"
                        :recent-colors="null"
                        :enable-alpha="true"
                        :show-primary-color-preview="false"
                        v-model="data.pen.textColor"
                        @change="changeValue('textColor')"
                      />
                    </div>
                    <div v-else-if="data.pen.textType === 1" class="mt-8 -ml-8" style="width: 200px">
                      <t-color-picker class="w-full" format="CSS" :enable-alpha="true" :recent-colors="null" :swatch-colors="defaultGradientColor" :color-modes="['linear-gradient']" :show-primary-color-preview="false" v-model="data.pen.textGradientColors" @change="changeValue('textGradientColors')"></t-color-picker>
                    </div>
                    <div v-else-if="data.pen.textType === 2" class="mt-8 -ml-8" style="width: 200px">
                      <t-color-picker class="w-full" format="CSS" :enable-alpha="true" :recent-colors="null" :swatch-colors="defaultGradientColor" :color-modes="['linear-gradient']" :show-primary-color-preview="false" v-model="data.pen.textGradientColors" @change="changeValue('textGradientColors')"></t-color-picker>
                    </div>
                  </div>
                </div>
                <div class="form-item">
                  <t-checkbox :checked="data.pen.whiteSpace != 'nowrap' ? true : false" @change="changeValue('whiteSpace')" style="width: 64px">
                    {{$t('换行')}}
                  </t-checkbox>
                  <t-checkbox v-model="data.pen.ellipsis" @change="changeValue('ellipsis')" style="width: 68px">
                    {{$t('省略号')}}
                  </t-checkbox>
                  <t-tooltip :content="$t('行高')">
                    <t-input v-model.number="data.pen.lineHeight" style="width: 40px" @change="changeValue('lineHeight')" :placeholder="$t('行高')"></t-input>
                  </t-tooltip>
                  <t-tooltip :content="$t('显示时保留小数位数')">
                    <t-input class="ml-4" v-model.number="data.pen.keepDecimal" style="width: 60px" @change="changeValue('keepDecimal')" :placeholder="$t('小数')"></t-input>
                  </t-tooltip>
                </div>
                <div class="form-item" style="margin-top: -4px">
                  <t-tooltip :content="$t('水平偏移')">
                    <t-input placeholder="X" v-model.number="data.pen.textLeft" style="width: 60px; margin-left: -8px" @change="changeValue('textLeft')"></t-input>
                  </t-tooltip>
                  <t-tooltip :content="$t('垂直偏移')">
                    <t-input class="ml-4" placeholder="Y" v-model.number="data.pen.textTop" style="width: 60px" @change="changeValue('textTop')"></t-input>
                  </t-tooltip>
                  <t-tooltip :content="$t('宽')">
                    <t-input class="ml-4" v-model.number="data.pen.textWidth" style="width: 60px" @change="changeValue('textWidth')" :placeholder="$t('宽')"></t-input>
                  </t-tooltip>
                  <t-tooltip :content="$t('高')">
                    <t-input class="ml-4" v-model.number="data.pen.textHeight" style="width: 60px" @change="changeValue('textHeight')" :placeholder="$t('高')"></t-input>
                  </t-tooltip>
                </div>
                <div class="flex middle">
                  <t-checkbox v-model="data.pen.disableInput" @change="changeValue('disableInput')" style="width: 64px">
                    {{$t('只读')}}
                  </t-checkbox>

                  <t-checkbox v-model="data.pen.hiddenText" @change="changeValue('hiddenText')" style="width: 90px">
                    {{$t('隐藏文字')}}
                  </t-checkbox>
                  <t-checkbox v-model="data.pen.textAutoAdjust" @change="changeValue('textAutoAdjust')" style="width: 90px">
                    {{$t('自动调整')}}
                  </t-checkbox>
                </div>
                <div class="form-item">
                  <label style="width: 64px">{{$t('文本内容')}} </label>
                  <t-textarea class="w-full" v-model="data.pen.text" @change="changeValue('text')" :placeholder="$t('文本内容')"></t-textarea>
                </div>
              </t-space>
            </t-collapse-panel>
            <t-collapse-panel v-if="data.pen.props.image" value="3" :header="$t('图片')">
              <t-space direction="vertical" size="small" class="w-full">
                <div>
                  <t-upload
                    ref="uploadRef"
                    v-model="data.images"
                    action="/api/image/upload"
                    theme="image"
                    accept="image/*"
                    :headers="headers"
                    :data="updataData"
                    :before-upload="beforeUpload"
                    draggable
                    @success="fileSuccessed"
                    @remove="fileRemoved"
                  >
                    <template #fileListDisplay>
                      <div style="z-index: 20">
                        <a class="mr-4" @click="upload"> {{$t('点击上传')}} </a>
                        / {{$t('拖拽图片到此区域')}}
                      </div>
                    </template>
                  </t-upload>
                </div>
                <div class="form-item hover-icons" style="margin-left: -12px">
                  <t-input
                    class="ml-4"
                    label="W"
                    v-model.number="data.pen.iconWidth"
                    :placeholder="$t('自适应')"
                    min="1"
                    style="width: 80px"
                    :format="decimalPlaces"
                    @change="changeValue('iconWidth')"
                  />
                  <t-tooltip
                    v-if="data.pen.imageRatio"
                    :content="$t('固定比例')"
                    placement="top"
                  >
                    <link-icon class="ml-4 hover"
                      @click="data.pen.imageRatio = !data.pen.imageRatio"/>
                    <!-- <t-icon
                      name="link"
                      class="ml-4 hover"
                      @click="data.pen.imageRatio = !data.pen.imageRatio"
                    /> -->
                  </t-tooltip>
                  <t-tooltip v-else placement="top" :content="$t('不固定比例')">
                    <link-unlink-icon class="ml-4 hover icon" @click="data.pen.imageRatio = !data.pen.imageRatio"></link-unlink-icon>
                    <!-- <t-icon
                      name="link-unlink"
                      class="ml-4 hover icon"
                      @click="data.pen.imageRatio = !data.pen.imageRatio"
                    /> -->
                  </t-tooltip>

                  <t-input
                    class="ml-4"
                    label="H"
                    :placeholder="$t('自适应')"
                    v-model.number="data.pen.iconHeight"
                    min="1"
                    style="width: 80px"
                    :format="decimalPlaces"
                    @change="changeValue('iconHeight')"
                  />

                  <t-checkbox class="ml-8" v-model="data.pen.toGif" @change="changeValue('toGif')">
                    {{$t('转动图')}}
                  </t-checkbox>
                </div>
                <div class="form-item">
                  <label style="width: 30px; color: var(--color)">Url：</label>
                  <!-- {{ data.pen.image }} -->
                  <t-input class="w-full" v-model.number="data.pen.image" @change="changeValue('image')" :placeholder="$t('图片地址')"></t-input>
                </div>
              </t-space>
            </t-collapse-panel>
            <t-collapse-panel v-if="data.pen.props.icon" value="4" :header="$t('图标')">
              <t-space direction="vertical" size="small" class="w-full">
                <div class="form-item">
                  <label style="width: 32px">{{$t('图标')}} </label>
                  <i class="ml-8" :class="data.pen.iconFamily" style="line-height: 30px; height: 30px; color: var(--color)">
                    {{ data.pen.icon }}
                  </i>
                  <a class="ml-12 mt-4" @click="iconsDrawer.show = true">
                    {{$t('选择')}}
                  </a>
                  <t-drawer v-model:visible="iconsDrawer.show" :footer="null" :header="$t('选择图标')">
                    <Iconfonts :urls="data.iconUrls" @change="onChangeIcon"></Iconfonts>
                  </t-drawer>
                </div>
              </t-space>
            </t-collapse-panel>
            <!-- <t-collapse-panel
              v-if="data.pen.props.custom"
              value="5"
              header="属性"
            >
              <t-space direction="vertical" size="small" class="w-full">
                <div v-for="item in data.pen.props.custom" class="form-item">
                  <label :title="item.label">{{ item.label }}</label>
                  <t-checkbox
                    class="ml-8"
                    v-if="item.type === 'bool'"
                    v-model="data.pen[item.key]"
                    @change="changeValue(item.key)"
                  />
                  <t-input-number
                    class="w-full"
                    v-else-if="item.type === 'number'"
                    v-model.number="data.pen[item.key]"
                    theme="column"
                    :max="item.max"
                    :min="item.min"
                    @change="changeValue(item.key)"
                    :placeholder="item.placeholder"
                  />
                  <t-color-picker
                    class="w-full"
                    v-else-if="item.type === 'color'"
                    :enable-alpha="true"
                    :recent-colors="null"
                    format="CSS"
                    :swatch-colors="defaultPureColor"
                    :color-modes="['monochrome']"
                    :show-primary-color-preview="false"
                    v-model="data.pen[item.key]"
                    @change="changeValue(item.key)"
                    :placeholder="item.placeholder"
                  />
                  <t-select
                    class="w-full"
                    v-else-if="item.type === 'select'"
                    size="small"
                    :options="item.options"
                    v-model="data.pen[item.key]"
                    @change="changeValue(item.key)"
                    :placeholder="item.placeholder"
                  />
                  <t-button
                    v-else-if="item.type === 'code'"
                    shape="square"
                    variant="outline"
                    style="width: 24px"
                    @click="showPropsEdit(item)"
                  >
                    <t-icon name="ellipsis" slot="icon"
                  /></t-button>
                  <t-slider
                    v-else-if="item.type === 'slider'"
                    v-model="data.pen[item.key]"
                    :min="0"
                    :max="1"
                    :step="0.01"
                    @change="changeValue(item.key)"
                  />
                  <t-switch
                    v-else-if="item.type === 'switch'"
                    v-model="data.pen[item.key]"
                    @change="changeValue(item.key)"
                  />
                  <t-input
                    class="w-full"
                    v-else
                    v-model="data.pen[item.key]"
                    @change="changeValue(item.key)"
                    :placeholder="item.placeholder"
                  />
                </div>
              </t-space>
            </t-collapse-panel> -->
          </t-collapse>
          <template v-if="!data.pen.externElement && data.pen.name !== 'image'&& data.pen.name !== 'gif'">
            <t-divider style="margin: -8px 0" />

            <div class="form-item px-16">
              <label class="form-title">{{$t( '进度' )}} </label>
              <t-slider
                v-model="data.pen.progress"
                :min="0"
                :max="1"
                :step="0.01"
                @change="changeValue('progress')"
              />
              <span class="ml-16" style="width: 50px; line-height: 30px">
                {{ data.pen.progress }}
              </span>
            </div>
            <div class="form-item" style="padding-left: 17px">
              <t-color-picker
                class="simple mr-25"
                format="CSS"
                :enable-alpha="true"
                :recent-colors="null"
                :swatch-colors="defaultPureColor"
                :color-modes="['monochrome']"
                :show-primary-color-preview="false"
                v-model="data.pen.progressColor"
                @change="changeValue('progressColor')"
              />

              <t-tooltip placement="top" :content="$t('垂直进度')">
                <t-checkbox class="mr-25" v-model="data.pen.verticalProgress" @change="changeValue('verticalProgress')" style="width: 22px"></t-checkbox>
              </t-tooltip>
              <t-tooltip placement="top" :content="$t('反向进度')">
                <t-checkbox class="mr-25" v-model="data.pen.reverseProgress" @change="changeValue('reverseProgress')" style="width: 22px"></t-checkbox>
              </t-tooltip>
              <t-tooltip placement="top" :content="$t('进度渐变')">
                <t-checkbox class="mr-25" v-model="data.pen.temProgressFlag" @change="changetemProgressFlag(data.pen)" style="width: 22px"></t-checkbox>
              </t-tooltip>
              <t-color-picker v-if="data.pen.temProgressFlag" class="simple" format="CSS" :swatch-colors="defaultGradientColor" :color-modes="['linear-gradient']" :show-primary-color-preview="false" :recent-colors="null" :enableAlpha="true" v-model="data.pen.progressGradientColors" @change="changeValue('progressGradientColors')" :placeholder="$t('无')"></t-color-picker>
            </div>
          </template>
          <t-divider style="margin: -8px 0" />
          <div class="form-item px-16" style="margin-top: -12px">
            <t-checkbox v-model="data.pen.flipX" @change="changeValue('flipX')" style="width: 90px">
              {{$t('水平翻转')}}
            </t-checkbox>
            <t-checkbox v-model="data.pen.flipY" @change="changeValue('flipY')" style="width: 90px">
              {{$t('垂直翻转')}}
            </t-checkbox>

            <label style="width: 50px">{{$t('锚点半径')}}</label>
            <input class="ml-4" v-model.number="data.pen.anchorRadius" style="width: 20px" @change="changeValue('anchorRadius')" placeholder="4">
          </div>
          <t-divider style="margin: -8px 0" />
          <div class="form-item px-16" style="margin-top: -12px;margin-bottom: -8px;">
            <label class="form-title" style="width: 90px">{{$t('禁止')}} </label>
            <t-checkbox v-model="data.pen.disabled" @change="changeValue('disabled')" style="width: 90px">
              {{$t('禁用')}}
            </t-checkbox>
          </div>
          <div class="form-item px-16">
            <t-color-picker class="simple mt-8 mr-4" format="CSS" :enable-alpha="true" :recent-colors="null" :swatch-colors="defaultPureColor" :color-modes="['monochrome']" :show-primary-color-preview="false" :clearable="true" v-model="data.pen.disabledBackground" @change="changeValue('disabledBackground')"></t-color-picker>
            <label style="width: 64px">{{$t('禁用背景')}}</label>
            <t-color-picker class="simple mt-8 mr-4" format="CSS" :enable-alpha="true" :recent-colors="null" :swatch-colors="defaultPureColor" :color-modes="['monochrome']" :show-primary-color-preview="false" v-model="data.pen.disabledColor" :clearable="true" @change="changeValue('disabledColor')"></t-color-picker>
            <label style="width: 64px">{{$t('禁用颜色')}}</label>

            <t-color-picker class="simple mt-8 mr-4" format="CSS" :enable-alpha="true" :recent-colors="null" :swatch-colors="defaultPureColor" :color-modes="['monochrome']" :show-primary-color-preview="false" v-model="data.pen.disabledTextColor" :clearable="true" @change="changeValue('disabledTextColor')"></t-color-picker>
            <label style="width: 164px">{{$t('禁用文字颜色')}}</label>
          </div>
          <div class="form-item px-16" style="margin-top: -12px">
            <t-checkbox v-model="data.pen.disableRotate" @change="changeValue('disableRotate')" style="width: 84px">
              {{$t('禁止旋转')}}
            </t-checkbox>
            <t-checkbox v-model="data.pen.disableSize" @change="changeValue('disableSize')" style="width: 84px">
              {{$t('禁止缩放')}}
            </t-checkbox>
            <t-checkbox v-model="data.pen.disableAnchor" @change="changeValue('disableAnchor')" style="width: 84px">
              {{$t('禁用锚点')}}
            </t-checkbox>
          </div>
          <t-divider style="margin: -8px 0" />
          <div class="form-item px-16" style="margin-top: -12px">
            <label style="width: 60px">{{$t('鼠标提示')}}</label>
            <t-button shape="square" variant="outline" style="width: 24px" @click="showTooltip">
              <ellipsis-icon slot="icon"></ellipsis-icon>
              <!-- <t-icon name="ellipsis" slot="icon" /> -->
           </t-button>
          </div>

          <t-dialog v-if="tooltipDialog.show" :visible="true" @confirm="onOkTooltip" @close="tooltipDialog.show = false" :width="700" :header="$t('鼠标提示')">
            <t-radio-group v-model="tooltipDialog.type">
              <t-radio value="1">{{$t('文字')}}</t-radio>
              <t-radio value="2">{{$t('函数')}}</t-radio>
            </t-radio-group>

            <div class="py-8">
              <CodeEditor
                v-show="tooltipDialog.type == 1"
                v-model="tooltipDialog.title"
                style="height: 300px"
              />
              <div v-show="tooltipDialog.type == 2">
                <div>function tooltip(pen) {</div>
                <CodeEditor
                  v-model="tooltipDialog.titleFnJs"
                  class="mt-4"
                  style="height: 248px"
                />
                <div class="mt-4">}</div>
              </div>
            </div>
            <div class="gray" style="font-size: 12px">{{$t('支持')}}Markdown{{$t('格式')}}</div>
          </t-dialog>
          <t-dialog
            v-if="propsDialog.show"
            :visible="true"
            :header="propsDialog.header"
            @confirm="onOkPropsEdit"
            @close="propsDialog.show = false"
            :width="700"
          >
            <div class="py-8">
              <CodeEditor
                :json="true"
                :language="'json'"
                v-model="propsDialog.value"
                style="height: 300px"
              />
            </div>
            <div class="gray" style="font-size: 12px">
              {{ propsDialog.placeholder }}
            </div>
          </t-dialog>
          <t-space />
        </t-space>
      </t-tab-panel>
      <t-tab-panel :value="2" :label="$t('动画')">
        <PenAnimates :pen="data.pen"></PenAnimates>
      </t-tab-panel>
      <t-tab-panel :value="3" :label="$t('数据')">
        <PenDatas :pen="data.pen" @tabchange="tabChange"></PenDatas>
      </t-tab-panel>
      <t-tab-panel :value="5" :label="$t('状态')">
        <PenStatus :pen="data.pen" ref="status"></PenStatus>
      </t-tab-panel>
      <t-tab-panel :value="4" :label="$t('交互')">
        <PenEvents :key="data.key" :pen="data.pen"></PenEvents>
      </t-tab-panel>
      <!-- <t-tab-panel :value="5" label="结构">
        <ElementTree />
      </t-tab-panel> -->
    </t-tabs>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, onUnmounted, reactive, ref, watch, computed, getCurrentInstance } from 'vue';

import CodeEditor from './common/CodeEditor.vue';
import Iconfonts from './common/Iconfonts.vue';
import PenAnimates from './PenAnimates.vue';
import PenDatas from './PenDatas.vue';
import PenEvents from './PenEvents.vue';
import PenStatus from './PenStatus.vue';
import Custom from './Custom.vue';
// import ElementTree from './ElementTree.vue';

// import { getCookie } from '@/services/cookie';
import { useSelection } from '@/services/selections';
import { autoSave, fonts, inTreePanel } from '@/services/common';
import { updatePen } from './pen';
import { MessagePlugin } from 'tdesign-vue-next';
import { useUser } from '@/services/user';
import { getter, queryURLParams, isDomShapes } from '@meta2d/core';
import { defaultGradientColor, defaultPureColor, fromArrows, toArrows } from '@/services/defaults';
import { getLe5le3d, getLe5leV, getLe5le2d } from '@/services/api';
import { s8 } from '@/services/random';
import { EllipsisIcon, LinkIcon, LinkUnlinkIcon, ChevronDownIcon, FormatVerticalAlignLeftIcon, FormatHorizontalAlignCenterIcon, FormatVerticalAlignCenterIcon, FormatVerticalAlignRightIcon, FormatHorizontalAlignTopIcon, FormatHorizontalAlignBottomIcon  } from 'tdesign-icons-vue-next';
import { getToken  } from '@le5le/auth-token';

const { user } = useUser();
const headers = {
  Authorization: 'Bearer ' + (getToken() || ''),
};
const updataData = { 
  directory: '/大屏/图片/默认' ,
  conflict:'new'
};
const { proxy } = getCurrentInstance();
const $t = proxy.$t

const uploadRef = ref();
const childUploadRef = ref();

const data = reactive<any>({
  tab: 1,
  pen: {},
  rect: {},
  key: s8(),
  childPen: {},
});

const { selections } = useSelection();

const tooltipDialog = reactive<any>({
  show: false,
});

const propsDialog = reactive<any>({
  show: false,
});

const iconsDrawer = reactive<any>({
  show: false,
});

const aligns = [
  {
    value: 'left',
    label: $t('左对齐'),
    icon: '#l-align-left',
  },
  {
    value: 'center',
    label: $t('垂直居中对齐'),
    icon: '#l-align-center',
  },
  {
    value: 'right',
    label: $t('右对齐'),
    icon: '#l-align-right',
  },
  {
    value: 'top',
    label: $t('顶部对齐'),
    icon: '#l-align-top',
  },
  {
    value: 'middle',
    label: $t('水平居中对齐'),
    icon: '#l-align-middle',
  },
  {
    value: 'bottom',
    label: $t('底部对齐'),
    icon: '#l-align-bottom',
  },
];

const align = (align: string) => {
  meta2d.alignNodesV(align, meta2d.store.active);
  getRect();
  meta2d.render();
};

onBeforeMount(() => {
  if (inTreePanel.value) {
    // data.tab = 5;
  }
  const d = meta2d.store.data as any;
  if (!d.groups) {
    d.groups = [];
  }
  if (!d.iconUrls) {
    d.iconUrls = [];
  }
  data.iconUrls = d.iconUrls;
  data.groups = d.groups;
  initPenData();

  meta2d.on('translatePens', getRect);
  meta2d.on('resizePens',detailResizePens);
  meta2d.on('rotatePens', getRect);
});

function initPenData() {
  data.key = s8(); //触发更新
  data.pen = selections.pen;
  if (!data.pen.props) {
    data.pen.props = {};
  }
  if (!data.pen.globalAlpha && data.pen.globalAlpha !== 0) {
    data.pen.globalAlpha = 1;
  }
  if (!data.pen.dash) {
    data.pen.dash = 0;
  }
  if(data.pen.props?.custom?.length && !data.pen.props?.look){
    data.pen.props.look = false;
  }
  if (!data.pen.props.text) {
    if (data.pen.text || data.pen.name === 'text') {
      data.pen.props.text = true;
    }
  }
  if(['tablePlus','notification','menuDom','radio','checkbox','thermometer','thermometer1','rectangle','tab'].includes(data.pen.name)){
    data.pen.props.look = true;
    data.pen.props.text = true;
  }
  if(['indicatorLight','battery'].includes(data.pen.name)||data.pen.name.endsWith('Switch')){
    data.pen.props.look = true;
  }
  if(data.pen.name === 'combine'){
    if(!data.pen.props){
      data.pen.props = {};
    }
    if(!data.pen.props.custom){
      data.pen.props.custom = [];
    }
  }
  if (!data.pen.props.image) {
    if (data.pen.image) {
      data.pen.props.image = true;
    }
  }
  if (!data.pen.props.icon) {
    if (data.pen.icon) {
      data.pen.props.icon = true;
    }
  }

  if (data.pen.image) {
    data.images = [
      {
        url: data.pen.image,
      },
    ];
  }
  if (!data.pen.tags) {
    data.pen.tags = [];
  }
  if (data.pen.bkType == undefined) {
    data.pen.bkType = 0;
  }
  if (data.pen.textType == undefined) {
    data.pen.textType = 0;
  }
  if (!data.pen.animations) {
    data.pen.animations = [];
  }
  if (!data.pen.whiteSpace) {
    data.pen.whiteSpace = 'break-all';
  }
  if (data.pen.ellipsis == undefined) {
    data.pen.ellipsis = false;
  }
  data.pen.shadow = !!data.pen.shadowColor;

  getRect();
  if(data.pen.name === 'combine' && data.pen.showChild !== undefined){
    data.childPen = meta2d.store.pens[data.pen.children[data.pen.showChild]];
    data.childImages = [
      {
        url: data.childPen.image,
      },
    ];
  }
}

const watcher = watch(() => selections.pen.id, initPenData);

const getRect = () => {
  if(data.pen.parentId){
    const origin = meta2d.store.data.origin;
    const scale = meta2d.store.data.scale;
    data.rect = {
      x: (data.pen.calculative.worldRect.x - origin.x) / scale,
      y: (data.pen.calculative.worldRect.y - origin.y) / scale,
      width: data.pen.calculative.worldRect.width / scale,
      height: data.pen.calculative.worldRect.height / scale
    }
    return;
  }
  data.rect = meta2d.getPenRect(data.pen);
};
const detailResizePens = () => {
  getRect();
}
const decimalPlaces = (val: number) => {
  if (!val) {
    return 0;
  }
  return Math.round(+val * 100) / 100;
};

const decimalRound = (val: number) => {
  return Math.round(+val || 0);
};

const changeValue = (prop: string) => {
  if(prop.indexOf('radient')!==-1){
    let collect = document.querySelectorAll('[class^="t-color-picker"]')
    collect.forEach((i:HTMLElement)=> {
      if(!i.dataset.meta2dIgnore){
        i.dataset.meta2dIgnore = 'true';
      }
    })
  }
  if(prop === 'toGif'){
    if(data.pen.toGif){
      meta2d.setValue({id:data.pen.id,name:'gif'});
    }else{
      meta2d.setValue({id:data.pen.id,name:'image'});
    }
    return;
  }
  if(prop === 'showChild'){
    data.childPen = meta2d.store.pens[data.pen.children[data.pen.showChild]];
    data.childImages = [
      {
        url: data.childPen.image,
      },
    ];
  }
  updatePen(data.pen, prop);
  selections.pen[prop] = getter(data.pen, prop);
  if (prop === 'iframe') {
    getThumbImg();
  }
  if(prop === 'image'){
    data.images = [
      {
        url: data.pen.image,
      },
    ];
  }
};

const getThumbImg = async () => {
  //改iframe地址后
  let arr = data.pen.iframe.split('?');
  let id = queryURLParams(arr[1]).id;
  if (!id) {
    return;
  }
  let projection = 'image,id,name';
  let res: any;
  if (arr[0].indexOf('2d.le5le') !== -1) {
    res = await getLe5le2d(id, projection);
  } else if (arr[0].indexOf('v.le5le') !== -1) {
    res = await getLe5leV(id, projection);
  } else if (arr[0].indexOf('3d.le5le') !== -1) {
    res = await getLe5le3d(id, projection);
  }
  if (res) {
    data.pen.thumbImg = res.image;
  }
  data.pen.onRenderPenRaw?.(data.pen);
};

const changeID = (value: any) => {
  if (!value) {
    initPenData();
    MessagePlugin.error($t('id 不能为空'));
    return;
  }
  const oldID: string = data.pen.id;
  try {
    meta2d.changePenId(oldID, value);
    initPenData();
  } catch (error) {
    console.warn(error.message);
    MessagePlugin.error($t('id 修改失败，请检查 id 是否重复'));
    return;
  }
};

const changeRectValue = (prop: string) => {
  if(['width','height'].includes(prop)){
    data.rect[prop] = data.rect[prop]||1;
  }
  if(data.pen.parentId){
    if(['x','y','width','height'].includes(prop)){
      const scale = meta2d.store.data.scale;
      const origin = meta2d.store.data.origin;
      let rect = {
        x:data.rect.x*scale+origin.x,
        y:data.rect.y*scale+origin.y,
        width:data.rect.width*scale,
        height:data.rect.height*scale,
      }
      meta2d.updateRectbyChild(rect,data.pen,meta2d.store.pens[data.pen.parentId]);
      return;
    }
  }
  data.rect.id = data.pen.id;
  data.rect.ratio = data.pen.ratio;
  updatePen(data.rect, prop);
};

const onFontPopupVisible = (val: boolean) => {
  data.fontFamilyPopupVisible = val;
};

const onFontFamily = (fontFamily: string) => {
  data.pen.fontFamily = fontFamily;
  data.fontFamilyPopupVisible = false;
  changeValue('fontFamily');
};

const beforeUpload = (file: any) => {
  // if (file.size > 5 * 1024 * 1024) {
  //   MessagePlugin.warning($t('上传的图片不能大于5M'));
  //   return false;
  // }
  if (!(user && user.id)) {
    MessagePlugin.warning($t('请先登录！'));
    return false;
  }
  return true;
};

const fileSuccessed = async (content: any) => {
  // meta2d.store.patchFlagsBackground = true;
  // meta2d.setBackgroundImage(content.response.url);
  // meta2d.store.patchFlagsBackground = true;
  data.pen.image = content.response.url || `/file${content.response.filename}`;
  updatePen(data.pen, 'image');
  meta2d.canvas.canvasImage.init();
  meta2d.canvas.canvasImageBottom.init();
  meta2d.render();
};

const fileRemoved = () => {
  // meta2d.setBackgroundImage('');
  // meta2d.store.patchFlagsBackground = true;
  data.pen.image = '';
  updatePen(data.pen, 'image');
  meta2d.render();
  // data.background = [];
};

const fileChildSuccessed = async (content: any) => {
  data.childPen.image = content.response.url || `/file${content.response.filename}`;
  updatePen(data.childPen, 'image');
  meta2d.canvas.canvasImage.init();
  meta2d.canvas.canvasImageBottom.init();
  meta2d.render();
};

const childUpload = () => {
  childUploadRef.value.triggerUpload();
};

const changeChildValue = (prop: string) => {
  updatePen(data.childPen, prop);
  if(prop === 'image'){
    data.childImages = [
      {
        url: data.childPen.image,
      },
    ];
  }
};

const upload = () => {
  uploadRef.value.triggerUpload();
};

const onSelectTag = (tag: string) => {
  data.tagPopupVisible = false;
  if (data.pen.tags.includes(tag)) {
    return;
  }
  data.pen.tags.push(tag);
  changeValue('tags');
};

const onChangeInputTag = (currentTags: any, context: any) => {
  const { trigger, index, item } = context;
  if (['tag-remove', 'backspace'].includes(trigger)) {
    data.pen.tags.splice(index, 1);
  }
  if (trigger === 'enter') {
    onSelectTag(item);
    const d = meta2d.store.data as any;
    if (!d.groups.includes(item)) {
      d.groups.push(item);
      data.groups = d.groups;
    }
    data.inputTag = '';
  }
  data.tagPopupVisible = false;
};

const showTooltip = () => {
  tooltipDialog.title = data.pen.title || '';
  tooltipDialog.titleFnJs =
    data.pen.titleFnJs || '// 例如：return `${pen.name}<br/>${pen.text}`;';
  tooltipDialog.type = data.pen.titleFnJs ? '2' : '1';

  tooltipDialog.show = true;
};

const onOkTooltip = () => {
  data.pen.titleFn = null;
  if (tooltipDialog.type === '1') {
    data.pen.title = tooltipDialog.title;
    data.pen.titleFnJs = '';
  } else {
    data.pen.title = '';
    data.pen.titleFnJs = tooltipDialog.titleFnJs;
  }
  tooltipDialog.show = false;
};

const showPropsEdit = (item: any) => {
  propsDialog.key = item.key;
  propsDialog.header = `${item.label}(${item.key})`;
  propsDialog.value = data.pen[item.key];
  propsDialog.placeholder = item.placeholder;
  propsDialog.show = true;
};

const onOkPropsEdit = () => {
  if (!propsDialog.value) {
    MessagePlugin.error($t('数据不满足json格式'));
    return;
  }
  data.pen[propsDialog.key] = propsDialog.value;
  updatePen(data.pen, propsDialog.key);
  propsDialog.show = false;
};

const onChangeIcon = (params: any) => {
  Object.assign(data.pen, params);
  meta2d.setValue({
    id: data.pen.id,
    icon: params.icon,
    iconFamily: params.iconFamily,
  });
  autoSave(true);
};

const changetemProgressFlag = (pen: any) => {
  if (pen.temProgressFlag) {
  } else {
    pen.progressGradientColors = undefined;
    changeValue('progressGradientColors');
  }
};

const isDom = computed(() => {
  return isDomShapes.includes(data.pen.name) ||
    data.pen.name.endsWith('Dom') ||
    meta2d.store.options.domShapes.includes(data.pen.name)
});

const status = ref<any>(null);
const tabChange = (index: number) => {
  data.tab = 5;
  setTimeout(()=>{
    status.value.editLast(index);
  },1000);
};

onUnmounted(() => {
  watcher();
  meta2d.off('translatePens', getRect);
  meta2d.off('resizePens', detailResizePens);
  meta2d.off('rotatePens', getRect);
});
</script>
<style lang="postcss" scoped>
.props {
  .icons {
    display: flex;

    svg:hover {
      cursor: pointer;
      color: var(--color-primary);
    }

    .btn {
      font-size: 16px;
      margin-right: 16px;
      color: var(--color);
    }
  }

  .form-title{
      font-size: 13px;
      font-weight: 700;
      color: var(--color-title);
  }

  .t-upload__dragger-btns{
    display: none !important;
  }

  .t-textarea{
    :deep(.t-textarea__inner){
      font-size: 12px;
      height: 80px;
    }
  }
  :deep(.t-input-number){
     .t-input{
      padding-right: 0px !important;
    }
  }
}
</style>