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

<template>
  <div class="props">
    <div v-for="(a, index) in data.actions" class="mb-12">
      <div class="flex middle between" style="position:relative;">
        <div class="flex middle">
{{$t('          动作')}}{{ index + 1 }}
          <t-tooltip :content="$t('单位ms,默认不延迟执行')">
          <t-input-number class="input-none" style="position:absolute;left:76px" v-model="a.timeout" theme="normal" :min="1" :placeholder="$t('延迟')"></t-input-number>
        </t-tooltip>
        </div>
        
        <close-icon class="hover" @click="data.actions.splice(index, 1)"></close-icon>
      </div>
      <div class="py-4">
        <div class="form-item mt-4">
          <label>{{$t('动作类型')}}</label>
          <t-select v-model="a.action" @change="onChangeAction(a)" :placeholder="$t('请选择')">
            <t-option v-for="option in actionOptions" :key="option.value" :value="option.value" :label="option.label"></t-option>
          </t-select>
        </div>
        <template v-if="a.action == 0">
          <div class="form-item mt-8">
            <label>{{$t('链接地址')}}</label>
            <t-input v-model="a.value" placeholder="URL"></t-input>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('打开方式')}}</label>
            <t-radio-group v-model="a.params">
              <t-radio value="_blank">{{$t('新页面')}}</t-radio>
              <t-radio value="_self">{{$t('当前页面')}}</t-radio>
            </t-radio-group>
          </div>
        </template>
        <template v-else-if="a.action == 13">
          <div class="form-item mt-8">
            <label>{{$t('视图')}}</label>
            <t-input v-model="a.value" placeholder="ID"></t-input>
          </div>
        </template>
        <template v-else-if="a.action == 2 || a.action == 3 || a.action == 4">
          <div class="form-item mt-8">
            <label>{{$t('对象类型')}}</label>
            <t-radio-group v-model="a.targetType" @change="a.value = ''">
              <t-radio value="id">{{$t('图元')}}</t-radio>
              <t-radio value="tag">{{$t('组')}}</t-radio>
            </t-radio-group>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('播放对象')}}</label>
            <t-tree-select v-if="a.targetType === 'id'" v-model="a.value" :data="penTree" filterable @change="getAnimations(a.value)" :placeholder="$t('默认自己')"></t-tree-select>
            <t-select v-else v-model="a.value" :options="groups" @change="getAnimations(a.value)" :placeholder="$t('组')"></t-select>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('动画名称')}}</label>
            <t-select-input
              v-model:inputValue="a.params"
              :value="a.params"
              v-model:popupVisible="a.popupVisible"
              allow-input
              clearable
              @clear="a.params = undefined"
              @focus="a.popupVisible = true"
              @blur="a.popupVisible = false"
              :placeholder="$t('缺省第一个动画')"
            >
              <template #panel>
                <ul style="padding: 8px 12px">
                  <li v-for="item in animations" :key="item" @click="a.params = item;a.popupVisible = false;">
                    {{ item }}
                  </li>
                </ul>
              </template>
            </t-select-input>
          </div>
        </template>
        <template v-else-if="a.action == 1">
          <div class="form-item mt-8">
            <label>{{$t('对象类型')}}</label>
            <t-radio-group v-model="a.targetType" @change="a.params = ''">
              <t-radio value="id">{{$t('图元')}}</t-radio>
              <t-radio value="tag">{{$t('组')}}</t-radio>
            </t-radio-group>
          </div>
          <div class="form-item mt-8">
            <label>{{$t( '更改对象' )}}</label>
            <t-tree-select
              v-if="a.targetType === 'id'"
              v-model="a.params"
              :data="penTree"
              filterable
              placeholder="默认自己"
              @change="getProps(a)"
            />
            <t-select
              v-else
              v-model="a.params"
              :options="groups"
              placeholder="组"
            />
          </div>
          <div class="form-item mt-8">
            <label>{{$t('属性数据')}}</label>
            <div class="w-full">
              <div class="prop-grid head">
                <div>{{$t('属性名')}}</div>
                <div>{{$t('属性值')}}</div>
                <div class="right">
                  <t-dropdown
                    :min-column-width="160"
                    @click="onAddValue(a, $event)"
                  >
                    <add-circle-icon class="hover"/>
                    <!-- <t-icon name="add-circle" class="hover" /> -->
                    <t-dropdown-menu>
                      <t-dropdown-item
                        key="custom"
                        value="custom"
                        disabled="true"
                        divider="true"
                        class="input"
                      >
                        <t-input
                          v-model="a.input"
                          style="pointer-events: auto;"
                          :placeholder="$t('自定义')"
                          @enter="
                            onAddValue(a, { key: a.input });
                            a.input = '';
                          "
                        />
                      </t-dropdown-item>
                      <t-dropdown-item
                        v-for="prop in cprops"
                        :key="prop.value"
                        :value="prop.value"
                      >
                        {{ prop.label }}
                      </t-dropdown-item>
                    </t-dropdown-menu>
                  </t-dropdown>
                </div>
              </div>
              <template
                v-if="Object.keys(a.value).length"
                class="center gray mt-8"
              >
                <div class="prop-grid mt-8" v-for="(value, key) in a.value">
                  <div class="ml-8 value-label">
                    <t-tooltip :content="key">
                      {{ getPropDesc(a, key) }}
                    </t-tooltip>
                  </div>
                  <div class="value-input">
                    <t-input
                      :title="a.value[key]"
                      v-model="a.value[key]"
                      @change="valueChange($event,a.value,key)"
                      :placeholder="$t('值')"
                    />
                  </div>
                  <div class="right px-8" style="line-height: 20px">
                    <!-- <t-icon
                      name="delete"
                      class="hover"
                      @click="delete a.value[key]"
                    /> -->
                    <delete-icon  class="hover"
                      @click="delete a.value[key]"/>
                  </div>
                </div>
              </template>
              <div v-else class="center gray mt-8">{{$t('暂无数据')}}</div>
            </div>
          </div>
        </template>
        <template v-else-if="a.action == 14">
          <div class="form-item mt-8">
            <label>{{$t('窗口标题')}}</label>
            <t-input v-model="a.value" :placeholder="$t('弹框标题')"></t-input>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('画面')}}URL</label>
            <t-input v-model="a.params" :placeholder="$t('窗口画面URL')"></t-input>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('弹框位置')}}</label>
            <t-input class="ml-4" label="X" placeholder="X" v-model.number="a.extend.x" style="width: 80px" :format="decimalPlaces"></t-input>
            <t-input class="ml-4" label="Y" placeholder="Y" v-model.number="a.extend.y" style="width: 80px" :format="decimalPlaces"></t-input>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('弹框大小')}}</label>
            <t-input class="ml-4" label="W" v-model.number="a.extend.width" min="1" style="width: 80px" :format="decimalPlaces" :placeholder="$t('宽')"></t-input>
            <t-input class="ml-4" label="H" v-model.number="a.extend.height" min="1" style="width: 80px" :format="decimalPlaces" :placeholder="$t('高')"></t-input>
          </div>
        </template>
        <template v-else-if="a.action == 7">
          <div class="form-item mt-8">
            <label>{{$t('消息名称')}}</label>
            <t-input v-model="a.value" :placeholder="$t('名称')"></t-input>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('消息参数')}}</label>
            <t-input v-model="a.params" :placeholder="$t('参数')"></t-input>
          </div>
        </template>
        <template v-else-if="a.action == 15">
          <Network v-model="a.network" mode="1" />
          <div class="flex middle mt-16">
            <t-tooltip content="json格式">
              <div class="flex middle mr-8" style="font-size:12px;color:var(--color)">数据</div>
            </t-tooltip>
            <add-circle-icon @click="addSendData(a)" class="hover"/>
          </div>
          <template v-for="(d,idx) in a.data">
            <div class="flex middle actions-data mt-16" style="position:relative" >
              <t-tooltip :content="d.prop?(d._label+'('+d.prop+')'):''">
              <!-- <t-input class="actions-prop" style="width: 70px;" v-model="d.prop" /> -->
              <div class="actions-prop"> {{ d.label||'请编辑'  }}</div>
              </t-tooltip>
              <Edit1Icon style="position:absolute;left:56px;height: 32px;" class="hover" @click="selectDeviceProps(d)"/>
              <!-- <t-input style="width: 100px;" v-model="item.value" /> -->
              ：
              <t-tree-select
                placeholder="固定值"
                style="width: 90px;"
                v-model="d.id"
                :data="propTree"
                filterable
                @change="getAProps(d)"
              />
              <t-select-input
                v-if="d.id&&d.id!=='固定值'"
                placeholder="可自定义输入"
                v-model:inputValue="d.key"
                :value="d.keyLabel"
                v-model:popupVisible="d.keyPopupVisible"
                allow-input
                clearable
                @clear="d.keyLabel = undefined"
                @focus="d.keyPopupVisible = true"
                @blur="d.keyPopupVisible = false"
                @input-change="onKeyInput(d)"
                class="shrink-0 actions-key"
                style="width: 82px"
              >
                <template #panel>
                  <ul style="padding: 8px 12px">                  
                    <li
                      v-for="item in dprops"
                      :key="item.value"
                      @click="
                        d.key = item.value;
                        d.keyLabel = item.label;
                        d.keyPopupVisible = false;
                      "
                    >
                      {{ item.label }}
                    </li>
                    <t-divider style="border-top: 1px solid var(--color-border-input);"/> 
                    <li @click="getKeyMore(d)">
                      更多 
                    </li>
                  </ul>
                </template>
              </t-select-input>
              <template v-else>
                <t-switch
                  size="small"
                  class="actions-value"
                  v-if="['switch','bool','boolean'].includes(d.type)"
                  v-model="d.value"
                />
                <t-input-number
                  class="actions-value"
                  v-else-if="['integer','number','int','enum','double'].includes(d.type)"
                  v-model.number="d.value"
                  theme="column"
                />
                <t-button
                  class="actions-value"
                  v-else-if="['code','struct','array','object'].includes(d.type)"
                  shape="square"
                  variant="outline"
                  style="width: 24px"
                  @click="showCode(d)"
                >
                  <ellipsis-icon slot="icon" />
                </t-button>
                <t-input v-else class="actions-value"  placeholder="输入值" style="width: 82px;" v-model="d.value" @change="valueDChange($event,d)" />
              </template>
              <close-icon style="position:absolute;right:2px" class="hover" @click="delSendData(a.data,idx)"/>
            </div>
          </template>
          <template v-for="(item,idx) in a.list">
          <div class="flex middle between mt-16">
            <div class="flex middle" style="font-size:12px">{{$t('数据')}}{{ idx+1 }}</div>
            <close-icon class="hover" @click="a.list.splice(index, 1)"></close-icon>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('数据对象')}}</label>
            <t-tree-select v-model="item.params" :data="penTree" filterable @change="getProps(item)" :placeholder="$t('默认自己')"></t-tree-select>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('属性数据')}}</label>
            <div class="w-full">
              <div class="prop-grid head">
                <div>{{$t('属性名')}}</div>
                <div>{{$t('属性值')}}</div>
                <div class="right">
                  <t-dropdown :min-column-width="160" @click="onAddValue(item, $event)">
                    <add-circle-icon class="hover"></add-circle-icon>
                    <!-- <t-icon name="add-circle" class="hover" /> -->
                    <t-dropdown-menu>
                      <t-dropdown-item key="custom" value="custom" disabled="true" divider="true" class="input">
                        <t-input v-model="item.input" style="pointer-events: auto;" @enter="
                            onAddValue(item, { key: item.input });
                            item.input = '';
                          " :placeholder="$t('自定义')"></t-input>
                      </t-dropdown-item>
                      <t-dropdown-item v-for="prop in cprops" :key="prop.value" :value="prop.value">
                        {{ prop.label }}
                      </t-dropdown-item>
                    </t-dropdown-menu>
                  </t-dropdown>
                </div>
              </div>
              <template
                v-if="Object.keys(item.value).length"
                class="center gray mt-8"
              >
                <div class="prop-grid mt-8" v-for="(value, key) in item.value">
                  <div class="ml-8">
                    <t-tooltip :content="key">
                      {{ getPropDesc(item, key) }}
                    </t-tooltip>
                  </div>
                  <div class="value-input">
                    <t-input v-model="item.value[key]" @change="valueChange($event,item.value,key)" :placeholder="$t('值')"></t-input>
                  </div>
                  <div class="right px-8" style="line-height: 20px">
                    <delete-icon class="hover" @click="delete item.value[key]"></delete-icon>
                    <!-- <t-icon
                      name="delete"
                      class="hover"
                      @click="delete a.value[key]"
                    /> -->
                  </div>
                </div>
              </template>
              <div v-else class="center gray mt-8">{{$t('暂无数据')}}</div>
            </div>
          </div>
          
          </template>
          <!-- <div class="form-item mt-8">
            <label></label>
            <t-button style="width:150px" @click="addData(a)">
              {{$t('添加数据')}}
            </t-button>
          </div> -->
          <div class="form-item mt-8" v-if="a.network&&a.network.protocol==='http'">
            <label>{{$t('回调')}}</label>
            <CodeEditor v-model="a.callback" class="mt-4" style="height: 50px"></CodeEditor>
          </div>
          <div class="form-item mt-8 desc" v-if="a.network&&a.network.protocol==='http'">
            <label></label>
            <div>
              {{$t('可获取')}}pen、data{{$t('和')}}context{{$t('参数')}},{{$t('参考')}}：<a target="_blank" href="https://doc.le5le.com/document/22">{{$t('发送指令')}}</a>
            </div>
          </div>
        </template>
        <template v-else-if="a.action == 8 || a.action == 9 || a.action == 10">
          <div class="form-item mt-8">
            <label>{{$t('对象类型')}}</label>
            <t-radio-group v-model="a.targetType" @change="a.value = ''">
              <t-radio value="id">{{$t('图元')}}</t-radio>
              <t-radio value="tag">{{$t('组')}}</t-radio>
            </t-radio-group>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('播放对象')}}</label>
            <t-tree-select v-if="a.targetType === 'id'" v-model="a.value" :data="penTree" filterable :placeholder="$t('默认自己')"></t-tree-select>
            <t-select v-else v-model="a.value" :options="groups" :placeholder="$t('组')"></t-select>
          </div>
        </template>
        <template v-else-if="a.action == 5">
          <div class="form-item mt-8">
            <!-- <label>函数</label> -->
            <div class="w-full">
              <div>function javascriptFn(pen) {</div>
              <CodeEditor v-model="a.value" class="mt-4" @change="codeChange($event,a)" style="height: 200px"></CodeEditor>
              <div class="mt-4">}</div>
            </div>
          </div>
        </template>
        <template v-else-if="a.action == 6">
          <div class="form-item mt-8">
            <label>{{$t('函数名称')}}</label>
            <t-input v-model="a.value" :placeholder="$t('函数名称')"></t-input>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('函数参数')}}</label>
            <t-input v-model="a.params" :placeholder="$t('函数参数')"></t-input>
          </div>
        </template>
        <template v-else-if="a.action == 16">
          <div class="form-item mt-8">
            <label>{{$t('场景对象')}}</label>
            <!-- <t-input v-model="a.params" placeholder="画笔id/tag" /> -->
            <t-tree-select v-model="a.params" :data="iframeTree" filterable :placeholder="$t('必填')"></t-tree-select>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('消息名')}}</label>
            <t-input v-model="a.value" :placeholder="$t('消息名')"></t-input>
          </div>
          <template v-for="(item,idx) in a.list">
          <div class="flex middle between mt-16">
            <div class="flex middle" style="font-size:12px">{{$t('消息数据')}}{{ idx+1 }}</div>
            <close-icon class="hover" @click="a.list.splice(index, 1)"></close-icon>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('消息对象')}}</label>
            <t-tree-select v-model="item.params" :data="penTree" filterable @change="getProps(item)" :placeholder="$t('默认自己')"></t-tree-select>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('消息数据')}}</label>
            <div class="w-full">
              <div class="prop-grid head">
                <div>{{$t('属性名')}}</div>
                <div>{{$t('属性值')}}</div>
                <div class="right">
                  <t-dropdown :min-column-width="160" @click="onAddValue(item, $event)">
                    <add-circle-icon class="hover"></add-circle-icon>
                    <t-dropdown-menu>
                      <t-dropdown-item
                        key="custom"
                        value="custom"
                        disabled="true"
                        divider="true"
                        class="input"
                      >
                        <t-input
                          v-model="item.input"
                          style="pointer-events: auto;"
                          :placeholder="$t('自定义')"
                          @enter="
                            onAddValue(item, { key: item.input });
                            item.input = '';
                          "
                        />
                      </t-dropdown-item>
                      <t-dropdown-item
                        v-for="prop in cprops"
                        :key="prop.value"
                        :value="prop.value"
                      >
                        {{ prop.label }}
                      </t-dropdown-item>
                    </t-dropdown-menu>
                  </t-dropdown>
                </div>
              </div>
              <template
                v-if="Object.keys(item.value).length"
                class="center gray mt-8"
              >
                <div class="prop-grid mt-8" v-for="(value, key) in item.value">
                  <div class="ml-8">
                    <t-tooltip :content="key">
                      {{ getPropDesc(item, key) }}
                    </t-tooltip>
                  </div>
                  <div class="value-input">
                    <t-input v-model="item.value[key]" @change="valueChange($event,item.value,key)" :placeholder="$t('值')"></t-input>
                  </div>
                  <div class="right px-8" style="line-height: 20px">
                    <delete-icon  class="hover"
                      @click="delete item.value[key]"/>
                  </div>
                </div>
              </template>
              <div v-else class="center gray mt-8">{{$t('暂无数据')}}</div>
            </div>
          </div>
          
          </template>
          <div class="form-item mt-8">
            <label></label>
            <t-button style="width:150px" @click="addData(a)">
              {{$t('添加消息数据')}}
            </t-button>
          </div>
        </template>
        <template v-else-if="a.action == 17">
          <div class="form-item mt-8">
            <label>{{$t('消息名')}}</label>
            <t-input v-model="a.value" :placeholder="$t('消息名')"></t-input>
          </div>
          <template v-for="(item,idx) in a.list">
          <div class="flex middle between mt-16">
            <div class="flex middle" style="font-size:12px">{{$t('消息数据')}}{{ idx+1 }}</div>
            <close-icon class="hover" @click="a.list.splice(index, 1)"></close-icon>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('消息对象')}}</label>
            <t-tree-select v-model="item.params" :data="penTree" filterable @change="getProps(item)" :placeholder="$t('默认自己')"></t-tree-select>
          </div>
          <div class="form-item mt-8">
            <label>{{$t('消息数据')}}</label>
            <div class="w-full">
              <div class="prop-grid head">
                <div>{{$t('属性名')}}</div>
                <div>{{$t('属性值')}}</div>
                <div class="right">
                  <t-dropdown :min-column-width="160" @click="onAddValue(item, $event)">
                    <add-circle-icon class="hover"></add-circle-icon>
                    <t-dropdown-menu>
                      <t-dropdown-item
                        key="custom"
                        value="custom"
                        disabled="true"
                        divider="true"
                        class="input"
                      >
                        <t-input
                          v-model="item.input"
                          style="pointer-events: auto;"
                          :placeholder="$t('自定义')"
                          @enter="
                            onAddValue(item, { key: item.input });
                            item.input = '';
                          "
                        />
                      </t-dropdown-item>
                      <t-dropdown-item
                        v-for="prop in cprops"
                        :key="prop.value"
                        :value="prop.value"
                      >
                        {{ prop.label }}
                      </t-dropdown-item>
                    </t-dropdown-menu>
                  </t-dropdown>
                </div>
              </div>
              <template
                v-if="Object.keys(item.value).length"
                class="center gray mt-8"
              >
                <div class="prop-grid mt-8" v-for="(value, key) in item.value">
                  <div class="ml-8">
                    <t-tooltip :content="key">
                      {{ getPropDesc(item, key) }}
                    </t-tooltip>
                  </div>
                  <div class="value-input">
                    <t-input v-model="item.value[key]" @change="valueChange($event,item.value,key)" :placeholder="$t('值')"></t-input>
                  </div>
                  <div class="right px-8" style="line-height: 20px">
                    <delete-icon  class="hover"
                      @click="delete item.value[key]"/>
                  </div>
                </div>
              </template>
              <div v-else class="center gray mt-8">{{$t('暂无数据')}}</div>
            </div>
          </div>
          
          </template>
          <div class="form-item mt-8">
            <label></label>
            <t-button style="width:150px" @click="addData(a)">
              {{$t('添加消息数据')}}
            </t-button>
          </div>
        </template>
        <template v-else-if="a.action == 18">
          <div class="form-item mt-8">
            <label>消息类型</label>
            <t-select
              v-model="a.params"
              placeholder="请选择"
            >
              <t-option
                v-for="option in themeOptions"
                :key="option.value"
                :value="option.value"
                :label="option.label"
              />
            </t-select>
          </div>
          <div class="form-item mt-8">
            <label>消息内容</label>
            <t-input v-model="a.value" placeholder="消息内容" />
          </div>
        </template> 
      </div>
    </div>
    <div class="mt-8">
      <a @click="data.actions.push({})"> + {{$t('添加动作')}} </a>
    </div>
  </div>
  <PropModal v-model:visible="propModal.visible" @change="getProp" />
  <MoreModal v-model:visible="more.visible" @change="getMProp" />
  <t-dialog
    v-if="codeDialog.show"
    :visible="true"
    header="下发数据"
    @confirm="codeDialog.show = false"
    @close="codeDialog.show = false"
    :width="800"
  >
    <CodeEditor v-model="codeDialog.data.value" style="height: 300px" />
  </t-dialog>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref, reactive, getCurrentInstance } from 'vue';
import PropModal from '@/views/components/common/PropModal.vue';
import MoreModal from '@/views/components/common/MoreModal.vue';
import CodeEditor from '@/views/components/common/CodeEditor.vue';
import Network from './Network.vue';
import { CloseIcon, AddCircleIcon, DeleteIcon, CheckIcon, Edit1Icon, LinkIcon, EllipsisIcon} from 'tdesign-icons-vue-next';
import { getPenAnimations, getPenTree ,changeType, getIframeTree} from '@/services/common';
import { deepClone } from '@meta2d/core';

const { proxy } = getCurrentInstance();
const $t = proxy.$t

const { data } = defineProps<{
  data: any;
}>();

const actionOptions = [
  {
    label: $t('打开链接'),
    value: 0,
  },
  {
    label: $t('打开视图'),
    value: 13,
  },
  {
    label: $t('播放动画'),
    value: 2,
  },
  {
    label: $t('暂停动画'),
    value: 3,
  },
  {
    label: $t('停止动画'),
    value: 4,
  },
  {
    label: $t('更改属性'),
    value: 1,
  },
  {
    label: $t('打开弹框'),
    value: 14,
  },
  {
    label: $t('发送消息'),
    value: 7,
  },
  {
    label: $t('发送数据'),
    value: 15,
  },
  {
    label: $t('播放视频'),
    value: 8,
  },
  {
    label: $t('暂停视频'),
    value: 9,
  },
  {
    label: $t('停止视频'),
    value: 10,
  },
  {
    label: $t('自定义函数'),
    value: 5,
  }, 
  {
    label: $t('全局函数'),
    value: 6,
  },
  {
    label: $t('向场景发送消息'),
    value: 16,
  },
  {
    label: $t('向父窗口发送消息'),
    value: 17,
  },
  {
    label: '全局消息',
    value: 18,
  },
];

const penTree: any = ref([]);
const groups: any = ref([]);
const animations: any = ref([]);
const iframeTree:any = ref([]);

onBeforeMount(() => {
  if (!data.actions) {
    data.actions = [];
  }
  data.actions.forEach((action: any) => {
    if(action.action === 14){
      if(!action.extend){
        action.extend = {};
      }
    }
  });

  penTree.value = getPenTree();
  propTree.value = deepClone(penTree.value);
  propTree.value.unshift({
    label:"固定值",
    value:"固定值"
  })
  iframeTree.value = getIframeTree();
  groups.value = [];
  const d = meta2d.store.data as any;
  if (d.groups) {
    for (const item of d.groups) {
      groups.value.push({ label: item, value: item });
    }
  }

  animations.value = getPenAnimations();
});

const getAnimations = (idOrTag: string) => {
  animations.value = getPenAnimations(idOrTag);
};

const onChangeAction = (action: any) => {
  switch (action.action) {
    case 0:
      action.value = '';
      action.params = '_blank';
      break;
    case 1:
      action.params = '';
      action.value = {};
      action.targetType = 'id';
      getProps(action);
      break;
    case 2:
    case 3:
    case 4:
      action.value = '';
      action.targetType = 'id';
      break;
    case 14:
      if(!action.extend){
        action.extend = {};
      }
      break;
    case 15:
      action.network = {}// {type: 'publish',protocol: 'mqtt', options: {}};
      // action.params = '';
      // action.value = {};
      action.targetType = 'id';
      // action.list = [
      //   {params:undefined,value:{}}
      // ];
      getProps(action);
      break;
    default:
      action.value = '';
      action.params = '';
      break;
  }
};

let cprops = [
  {
    value: 'x',
    label: 'X',
  },
  {
    value: 'y',
    label: 'Y',
  },
  {
    value: 'width',
    label: $t('宽'),
  },
  {
    value: 'height',
    label: $t('高'),
  },
  {
    value: 'visible',
    label: $t('显示'),
  },
  {
    value: 'text',
    label: $t('文字'),
  },
  {
    value: 'color',
    label: $t('颜色'),
  },
  {
    value: 'background',
    label: $t('背景颜色'),
  },
  {
    value: 'progress',
    label: $t('进度'),
  },
  {
    value: 'progressColor',
    label: $t('进度颜色'),
  },
  {
    value: 'showChild',
    label: $t('状态'),
  },
  {
    value: 'checked',
    label:  $t('选中'),
  },
  {
    value: 'rotate',
    label: $t('旋转'),
  },
  {
    value: 'disabled',
    label: $t('禁用'),
  },
  {
    value: 'selectedKey',
    label: $t('单选选中值'),
  },
  {
    value: 'iframe',
    label: $t('网页地址'),
  },
  {
    value: 'animateReverse',
    label: $t('连线动画反向'),
  }
];

const getProps = (c: any) => {
  // c.props = [
  //   {
  //     value: 'x',
  //     label: 'X',
  //   },
  //   {
  //     value: 'y',
  //     label: 'Y',
  //   },
  //   {
  //     value: 'width',
  //     label: $t('宽'),
  //   },
  //   {
  //     value: 'height',
  //     label: $t('高'),
  //   },
  //   {
  //     value: 'visible',
  //     label: $t('显示'),
  //   },
  //   {
  //     value: 'text',
  //     label: $t('文字'),
  //   },
  //   {
  //     value: 'progress',
  //     label: $t('进度'),
  //   },
  //   {
  //     value: 'showChild',
  //     label: $t('状态'),
  //   },
  //   {
  //     value: 'rotate',
  //     label: $t('旋转'),
  //   },
  // ];

  let target: any;
  if (c.params) {
    target = meta2d.findOne(c.params);
  } else if (meta2d.store.active) {
    target = meta2d.store.active[0];
  }
  if (target?.realTimes) {
    for (const item of target.realTimes) {
      const found = cprops.findIndex((elem: any) => elem.value === item.key);
      if (found < 0) {
        cprops.push({
          value: item.key,
          label: item.label,
        });
      }
    }
  }
};

const getPropDesc = (a: any, key: any) => {
  const found = cprops.find((elem: any) => elem.value === key);
  if (found) {
    return found.label;
  }

  return key;
};

const onAddValue = (action: any, data: any) => {
  if (!action.value[data.key]) {
    action.value[data.key] = "";
  }
};

const valueChange = (e,aValue:any,key:any)=>{
  aValue[key] = changeType(e)??"";
}

const codeChange = (e:any,a:any)=>{
  a.fn = null;
}

const decimalPlaces = (val: number) => {
  if (!val) {
    return undefined;
  }
  return Math.round(+val * 100) / 100;
};

const addData = (a:any)=>{
  if(!a.list){
    a.list = [];
  }
  a.list.push({params:undefined,value:{}})
}

const addSendData = (a:any)=>{
  if(!a.data){
    a.data = [];
  }
  a.data.push({
    key:'',
    value:''
  });
}

const delSendData = (data:any[] ,i:number)=>{
  data.splice(i,1);
}

let dprops = ref<any>([{
    value: 'text',
    label: '文字',
  },
  {
    value: 'visible',
    label: '显示',
  },
  {
    value: 'progress',
    label: '进度',
  },
  {
    value: 'showChild',
    label: '状态',
  },
  {
    value: 'checked',
    label: '选中',
  },
  {
    value: 'selectedKey',
    label: '单选选中值',
  }]);

const propTree = ref([]);
const getAProps = (a)=>{
  let props = [{
    value: 'text',
    label: '文字',
  },
  {
    value: 'visible',
    label: '显示',
  },
  {
    value: 'progress',
    label: '进度',
  },
  {
    value: 'showChild',
    label: '状态',
  },
  {
    value: 'checked',
    label: '选中',
  },
  {
    value: 'selectedKey',
    label: '单选选中值',
  },]
  let target: any;
  if (a.id && a.id!=='固定值') {
    target = meta2d.findOne(a.id);
  } else {
    return;
  }
  if (target?.realTimes) {
    for (const item of target.realTimes) {
      const found = props.findIndex((elem: any) => elem.value === item.key);
      if (found < 0) {
        props.push({
          value: item.key,
          label: item.label,
        });
      }
    }
  }
  dprops.value = props;
}

const propModal = reactive({
  visible:false,
  data:null
})

const selectDeviceProps = (i)=>{
  propModal.visible = true;
  propModal.data = i;
}

const getProp = (e)=>{
  propModal.data.prop = e.value;
  propModal.data.label = e.label;
  propModal.data._label = e._label
  propModal.data.type = e.type;
  propModal.data.class = e.class;
  propModal.data.token = e.token;
  propModal.visible = false;
}

const codeDialog = reactive({
  show:false,
  data:null
});

const showCode = (d)=>{
  codeDialog.data = d;
  codeDialog.show = true;
}

const more = ref({
  visible:false,
  data:null,
});

const getKeyMore = (d)=>{
  more.value.data = d;
  more.value.visible = true;
}

const getMProp = (e)=>{
  let d = deepClone(e);
  more.value.data.key = d.value;
  more.value.data.keyLabel = d.label;
  more.value.data.keyPopupVisible = false;
  more.value.visible = false;
}

const valueDChange = (e,c:any)=>{
  c.value= changeType(e);
}

const onKeyInput = (item: any) => {
  item.keyLabel = item.key;
};

const themeOptions = [
  {
    label: '普通消息',
    value: 'info',
  },
  {
    label: '成功',
    value: 'success',
  },
  {
    label: '警告',
    value: 'warning',
  },
  {
    label: '错误',
    value: 'error',
  },
  {
    label:'问题',
    value:'question'
  }
];

</script>
<style lang="postcss" scoped>
.props {
  .prop-grid {
    display: grid;
    grid-template-columns: 2fr 3fr 32px;
    line-height: 30px;

    &.head {
      background: var(--color-background-input);
      padding: 0 8px;
    }
  }

  .input-none{
    :deep(.t-input){
      border: none;
    }
  }
  .actions-data{
    :deep(.t-input){
      border-color:transparent;
      &:hover {
        border-color: var(--color-primary);
      }
    }
    .actions-prop{
      /* :deep(.t-input){
        width: 70px;
      } */
      width: 70px;
      min-width: 70px;
      white-space:nowrap; 
      overflow:hidden; 
      text-overflow:ellipsis;
    }
    .actions-key{
      :deep(.t-input){
        width: 82px;
      }
    }
    .actions-value{
      :deep(.t-input){
        width: 82px;
      }
    }
    .t-input-number.t-is-controls-right{
      width: 82px;
    }
  }
}
</style>