<template>
  <div>
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="外观">
        <div class="div-scoll">
          <a-page-header
            style="border: 1px solid rgb(235, 237, 240); margin-top: 10px"
            title="位置和大小"
          />
          <a-form :layout="'vertical'">
            <a-row :gutter="24" style="margin-left: 0px; margin-right: 0px">
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="X (px)">
                  <a-input-number
                    v-model="node.rect.x"
                    @change="updateNode"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="Y (px)">
                  <a-input-number
                    v-model="node.rect.y"
                    @change="updateNode"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="宽 (px)">
                  <a-input-number
                    v-model="node.rect.width"
                    @change="updateNode"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="高 (px)">
                  <a-input-number
                    v-model="node.rect.height"
                    @change="updateNode"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="圆角">
                  <a-input-number
                    v-model.number="node.borderRadius"
                    @change="updateNode"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="旋转 °">
                  <a-input-number
                    v-model.number="node.rotate"
                    @change="updateNode"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="内边距-左">
                  <a-input-number
                    v-model.number="node.paddingLeft"
                    @change="updateNode"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="内边距-右">
                  <a-input-number
                    v-model.number="node.paddingRight"
                    @change="updateNode"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="内边距-上">
                  <a-input-number
                    v-model.number="node.paddingTop"
                    @change="updateNode"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="内边距-下">
                  <a-input-number
                    v-model.number="node.paddingBottom"
                    @change="updateNode"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>

          <a-page-header
            style="border: 1px solid rgb(235, 237, 240); margin-top: 10px"
            title="样式"
          />
          <a-form :layout="'vertical'">
            <a-row :gutter="24" style="margin-left: 0px; margin-right: 0px">
              <a-col :span="24" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="线条">
                  <!-- <a-input v-model="node.dash" /> -->
                  <a-select v-model="node.dash" @change="updateNode">
                    <a-select-option
                      v-for="item of lineOther"
                      :key="item.type"
                      :value="item.type"
                    >
                      <i style="font-size: 7vh" :class="`${item.name}`"></i>
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="线条颜色">
                  <el-color-picker
                    v-model="node.strokeStyle"
                    @change="updateNode"
                  ></el-color-picker>
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="线条宽度 (px)">
                  <a-input-number
                    v-model.number="node.lineWidth"
                    @change="updateNode"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="24" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="背景">
                  <a-select v-model="node.bkType" @change="updateNode">
                    <a-select-option :value="0">纯色背景</a-select-option>
                    <a-select-option :value="1">线性渐变</a-select-option>
                    <a-select-option :value="2">径向渐变</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <div v-if="node.bkType === 0">
                <a-col :span="24" style="padding-left: 2px; padding-right: 2px">
                  <a-form-item label="背景颜色">
                    <el-color-picker
                      v-model="node.fillStyle"
                      @change="updateNode"
                    ></el-color-picker>
                  </a-form-item>
                </a-col>
              </div>
              <div v-if="node.bkType === 1">
                <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                  <a-form-item label="开始颜色">
                    <el-color-picker
                      v-model="node.gradientFromColor"
                      @change="updateNode"
                    ></el-color-picker>
                  </a-form-item>
                </a-col>
                <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                  <a-form-item label="结束颜色">
                    <el-color-picker
                      v-model="node.gradientToColor"
                      @change="updateNode"
                    ></el-color-picker>
                  </a-form-item>
                </a-col>
                <a-col :span="24" style="padding-left: 2px; padding-right: 2px">
                  <a-form-item label="角度">
                    <a-input-number
                      v-model.number="node.gradientAngle"
                      @change="updateNode"
                    >
                    </a-input-number>
                  </a-form-item>
                </a-col>
              </div>
              <div v-if="node.bkType === 2">
                <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                  <a-form-item label="开始颜色">
                    <!-- <a-input type="text" v-model="node.gradientFromColor">
                      <colorPicker
                        slot="addonBefore"
                        v-model="node.gradientFromColor"
                        @change="updateNode"
                      />
                    </a-input> -->
                    <el-color-picker
                      v-model="node.gradientFromColor"
                      @change="updateNode"
                    ></el-color-picker>
                  </a-form-item>
                </a-col>
                <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                  <a-form-item label="结束颜色">
                    <!-- <a-input type="text" v-model="node.gradientToColor">
                      <colorPicker
                        slot="addonBefore"
                        v-model="node.gradientToColor"
                        @change="updateNode"
                      />
                    </a-input> -->
                    <el-color-picker
                      v-model="node.gradientToColor"
                      @change="updateNode"
                    ></el-color-picker>
                  </a-form-item>
                </a-col>
                <a-col :span="24" style="padding-left: 2px; padding-right: 2px">
                  <a-form-item label="半径">
                    <a-input-number
                      v-model.number="node.gradientRadius"
                      @change="updateNode"
                    />
                  </a-form-item>
                </a-col>
              </div>
              <a-col :span="24" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="透明度(0 - 1)">
                  <a-input-number
                    v-model.number="node.globalAlpha"
                    @change="updateNode"
                    style="width:100%;"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>

          <a-page-header
            style="border: 1px solid rgb(235, 237, 240); margin-top: 10px"
            title="文字"
          />
          <a-form :layout="'vertical'">
            <a-row :gutter="24" style="margin-left: 0px; margin-right: 0px">
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="大小">
                  <a-input-number
                    v-model.number="node.fontSize"
                    @change="updateNode"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="倾斜">
                  <a-select v-model="node.fontStyle" @change="updateNode">
                    <a-select-option :value="'normal'">正常</a-select-option>
                    <a-select-option :value="'italic'">倾斜</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="颜色">
                  <el-color-picker
                    v-model="node.fontColor"
                    @change="updateNode"
                  ></el-color-picker>
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="背景">
                  <el-color-picker
                    v-model="node.textBackground"
                    @change="updateNode"
                  ></el-color-picker>
                </a-form-item>
              </a-col>

              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="加粗">
                  <a-select v-model="node.fontWeight" @change="updateNode">
                    <a-select-option :value="'normal'">正常</a-select-option>
                    <a-select-option :value="'bold'">加粗</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="水平对齐">
                  <a-select v-model="node.textAlign" @change="updateNode">
                    <a-select-option :value="'left'">左对齐</a-select-option>
                    <a-select-option :value="'center'">居中</a-select-option>
                    <a-select-option :value="'right'">右对齐</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="垂直对齐">
                  <a-select v-model="node.textBaseline" @change="updateNode">
                    <a-select-option :value="'top'">顶部对齐</a-select-option>
                    <a-select-option :value="'middle'">居中</a-select-option>
                    <a-select-option :value="'bottom'"
                      >底部对齐</a-select-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="行高">
                  <a-input-number
                    v-model.number="node.lineHeight"
                    @change="updateNode"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="最大行数">
                  <a-input-number
                    v-model.number="node.textMaxLine"
                    @change="updateNode"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="水平偏移（px）">
                  <a-input-number
                    v-model.number="node.textOffsetX"
                    @change="updateNode"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="垂直偏移（px）">
                  <a-input-number
                    v-model.number="node.textOffsetY"
                    @change="updateNode"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="24" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="内容">
                  <a-input
                    type="textarea"
                    v-model="node.text"
                    @change="updateNode"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>

          <a-page-header
            style="border: 1px solid rgb(235, 237, 240); margin-top: 10px"
            title="图片"
          >
            <template slot="extra">
              <a-tooltip>
                <template slot="title">图片、图标同时存在时，图片优先</template>
                <a-icon type="question-circle" style="margin-top: 1vh" />
              </a-tooltip>
            </template>
          </a-page-header>
          <a-form :layout="'horizontal'">
            <a-form-item
              label="图片"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <img
                v-if="node.image"
                style="width: 25px; height: 25px"
                v-bind:src="node.image"
              />
              <el-button
                type="danger"
                @click="removeImage"
                size="mini"
                style="margin-left: 5px"
                v-if="node.image"
                icon="el-icon-delete"
                circle
              ></el-button>
              <el-button
                type="primary"
                @click="addImage"
                size="mini"
                style="margin-left: 5px"
                v-if="!node.image"
                icon="el-icon-folder-add"
                circle
              ></el-button>
            </a-form-item>
            <a-form-item
              label="图片地址"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input v-model="node.image" @change="updateNode" />
            </a-form-item>
            <a-form-item
              label="宽度"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input-number
                v-model.number="node.imageWidth"
                @change="updateNode"
              />
            </a-form-item>
            <a-form-item
              label="高度"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input-number
                v-model.number="node.imageHeight"
                @change="updateNode"
              />
            </a-form-item>
            <a-form-item
              label="保存比例"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-switch
                v-model="node.imageRatio"
                default-checked
                @change="updateNodeIconSize"
              />
            </a-form-item>
            <a-form-item
              label="对齐方式"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-select v-model="node.imageAlign">
                <a-select-option
                  v-for="(item, index) of iconAlineType"
                  :key="index"
                  :value="item.type"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </a-form-item>
            <!-- </a-col>
            </a-row> -->
          </a-form>

          <a-page-header
            style="border: 1px solid rgb(235, 237, 240); margin-top: 10px"
            title="图标"
          >
            <template slot="extra">
              <a-tooltip>
                <template slot="title">图片、图标同时存在时，图片优先</template>
                <a-icon type="question-circle" style="margin-top: 1vh" />
              </a-tooltip>
            </template>
          </a-page-header>
          <a-form :layout="'horizontal'">
            <a-form-item
              label="图标"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <i
                :class="`${node.iconFamily}`"
                style="width: 25px; height: 25px"
                >{{ node.icon }}</i
              >
              <el-button
                type="danger"
                @click="removeIcon"
                size="mini"
                v-if="!!node.icon"
                style="margin-left: 5px"
                icon="el-icon-delete"
                circle
              ></el-button>
              <el-button
                type="primary"
                @click="addIcon"
                size="mini"
                v-if="!node.icon"
                style="margin-left: 5px"
                icon="el-icon-folder-add"
                circle
              ></el-button>
              <IconSelect ref="iconSelect" @selected="selected" />
            </a-form-item>
            <a-form-item
              label="图标大小"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input-number
                v-model.number="iconSize"
                @change="updateNodeIconSize"
              />
            </a-form-item>
            <a-form-item
              label="图标颜色"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <el-color-picker
                v-model="node.iconColor"
                @change="updateNode"
              ></el-color-picker>
            </a-form-item>
            <a-form-item
              label="对齐方式"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-select v-model="node.imageAlign">
                <a-select-option
                  v-for="(item, index) of iconAlineType"
                  :key="index"
                  :value="item.type"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="事件">
        <div class="div-scoll">
          <a-tabs default-active-key="1" size="small">
            <a-tab-pane key="1" tab="事件">
              <a-button
                type="primary"
                @click="addEvent"
                style="width: 90%; margin: 5px 5%"
                >添加事件</a-button
              >
              <add-event ref="addEvent" @ok="saveEvent"></add-event>
              <a-collapse v-model="activeKey">
                <a-collapse-panel
                  v-for="(item, index) of node.events"
                  :key="String(index)"
                  :header="'事件' + (index + 1)"
                >
                  <a-tooltip slot="extra" placement="topLeft" title="删除">
                    <a-icon
                      type="delete"
                      @click="remove(index)"
                      style="font-size: 2vh"
                    />
                  </a-tooltip>
                  <a-row :gutter="24">
                    <a-col :span="24" style="padding: 0px 6%"
                      ><span style="float: left">事件类型：</span
                      ><a-input :value="getEventType(item.type)" disabled
                    /></a-col>
                    <a-col :span="24" style="padding: 0px 6%"
                      ><span style="float: left">事件行为：</span
                      ><a-input :value="getEventAction(item.action)" disabled
                    /></a-col>
                    <a-col :span="24" style="padding: 0px 6%"
                      ><span style="float: left">事件动作：</span
                      ><a-textarea :value="item.value" :rows="6" disabled
                    /></a-col>
                    <a-col :span="24" style="padding: 0px 6%"
                      ><span style="float: left">事件标签：</span
                      ><a-input :value="item.params" disabled
                    /></a-col>
                  </a-row>
                </a-collapse-panel>
              </a-collapse>
            </a-tab-pane>
            <a-tab-pane key="2" tab="条件触发器">
              <a-button
                type="primary"
                @click="addWheres"
                style="width: 90%; margin: 5px 5%"
                >添加触发器</a-button
              >
              <add-wheres ref="addWheres" @ok="saveWheres"></add-wheres>
              <a-collapse v-model="activeWheresKey">
                <a-collapse-panel
                  v-for="(item, index) of node.wheres"
                  :key="String(index)"
                  :header="'触发器' + (index + 1)"
                >
                  <a-tooltip slot="extra" placement="topLeft" title="删除">
                    <a-icon
                      type="delete"
                      @click="removeWhere(index)"
                      style="font-size: 2vh"
                    />
                  </a-tooltip>
                  <a-row :gutter="24">
                    <a-col :span="24" style="padding: 0px 6%"
                      ><span style="float: left">属性名：</span
                      ><a-input :value="item.key" disabled
                    /></a-col>
                    <a-col :span="24" style="padding: 0px 6%"
                      ><span style="float: left">条件：</span
                      ><a-input :value="item.comparison" disabled
                    /></a-col>
                    <a-col :span="24" style="padding: 0px 6%"
                      ><span style="float: left">属性值：</span
                      ><a-input :value="item.value" disabled
                    /></a-col>
                    <a-col :span="24" style="padding: 0px 6%"
                      ><span style="float: left">JavaScript：</span
                      ><a-textarea :value="item.fn" :rows="6" disabled
                    /></a-col>
                  </a-row>
                  <a-collapse v-model="activeWheresKeyActions">
                    <a-collapse-panel
                      v-for="(it, ind) of item.actions"
                      :key="String(ind)"
                      :header="'事件' + (ind + 1)"
                    >
                      <a-row :gutter="24">
                        <a-col :span="24" style="padding: 0px 6%"
                          ><span style="float: left">事件行为：</span
                          ><a-input :value="getEventAction(it.action)" disabled
                        /></a-col>
                        <a-col :span="24" style="padding: 0px 6%"
                          ><span style="float: left">事件动作：</span
                          ><a-textarea :value="it.value" :rows="6" disabled
                        /></a-col>
                        <a-col :span="24" style="padding: 0px 6%"
                          ><span style="float: left">事件标签：</span
                          ><a-input :value="it.params" disabled
                        /></a-col>
                      </a-row>
                    </a-collapse-panel>
                  </a-collapse>
                </a-collapse-panel>
              </a-collapse>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-tab-pane>
      <a-tab-pane key="3" tab="动效">
        <!-- type=0 表示图标 type=1表示线 -->
        <div class="div-scoll" style="text-align: left">
          <!-- <a-page-header
            style="border: 1px solid rgb(235, 237, 240);margin-top:10px;"
            title="重绘"
          />
          <a-form :layout="'horizontal'">
            <a-form-item
              label="三方dom重绘"
              :label-col="{ span: 11 }"
              :wrapper-col="{ span: 10 }"
            >
              <a-switch v-model="node.elementRendered"/>
            </a-form-item>
          </a-form>
           -->
          <a-page-header
            style="border: 1px solid rgb(235, 237, 240); margin-top: 10px"
            title="动画"
          />
          <a-form :layout="'horizontal'">
            <a-form-item
              label="自动播放"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-switch v-model="node.animatePlay" />
            </a-form-item>
            <a-form-item
              label="时长"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input v-model="node.animateDuration" :disabled="true" />
            </a-form-item>
            <a-form-item
              label="特效"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-select v-model="node.animateType" @change="animateTypeShow">
                <a-select-option
                  v-for="(item, index) of animateType"
                  :key="index"
                  :value="item.type"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              label="循环次数"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input
                v-model="node.animateCycle"
                placeholder="<1无限循环"
                @change="updateNode"
              />
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 18, offset: 3 }">
              <a-button
                type="primary"
                icon="caret-right"
                v-show="play"
                @click="nodeStartPlay"
                style="margin: 2%"
                >播放</a-button
              >
              <a-button
                type="danger"
                icon="pause-circle"
                v-show="!play"
                @click="nodePausePlay"
                style="margin: 2%"
                >暂停</a-button
              >
              <a-button type="primary" icon="close-circle" @click="nodeStopPlay"
                >停止</a-button
              >
            </a-form-item>
          </a-form>

          <a-page-header
            style="border: 1px solid rgb(235, 237, 240); margin-top: 10px"
            title="音频"
          />
          <a-form :layout="'horizontal'">
            <a-form-item
              label="音频/视频"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input v-model="node.audio" />
            </a-form-item>
            <a-form-item
              label="播放方式"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-select v-model="node.playType" @change="updateNode">
                <a-select-option key="0" :value="0">手动播放</a-select-option>
                <a-select-option key="1" :value="1">自动播放</a-select-option>
                <a-select-option key="2" :value="2">跟随动画</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              label="是否循环"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-switch v-model="node.playLoop"></a-switch>
            </a-form-item>
          </a-form>

          <a-page-header
            style="border: 1px solid rgb(235, 237, 240); margin-top: 10px"
            title="外部网页"
          />
          <a-form :layout="'horizontal'">
            <a-form-item
              label="网页URL"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input v-model="node.iframe" />
            </a-form-item>
          </a-form>

          <a-page-header
            style="border: 1px solid rgb(235, 237, 240); margin-top: 10px"
            title="鼠标提示"
          />
          <a-form :layout="'vertical'">
            <a-form-item label="Markdown/html">
              <a-input type="textarea" v-model="node.markdown" />
            </a-form-item>
            <a-form-item label="原生title">
              <a-input type="textarea" v-model="node.title" />
            </a-form-item>
            <a-form-item label="HTMLElement ID">
              <a-input v-model="node.tipId" />
            </a-form-item>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane key="4" tab="数据">
        <div class="div-scoll">
          <a-form :layout="'horizontal'">
            <a-form-item
              label="id"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input
                v-model="node.id"
                :disabled="true"
                @change="updateNode"
              />
            </a-form-item>

            <a-form-item
              label="标签"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input
                v-model="tag"
                placeholder="回车即可添加"
                @keyup.enter.native="enterTage"
              />
            </a-form-item>
            <div style="text-align: left">
              <a-tag
                style="margin: 5px 5px"
                color="#2db7f5"
                v-for="(item, index) of node.tags"
                :key="index"
                closable
                @close="tagClose(item, index)"
              >
                {{ item }}
              </a-tag>
            </div>
          </a-form>

          <a-form :layout="'vertical'">
            <a-form-item label="数值">
              <a-input v-model="node.value" @change="updateNode" />
            </a-form-item>
          </a-form>

          <a-form :layout="'vertical'">
            <a-form-item label="node数据">
              <a-input type="textarea" v-model="data" @change="updateData" />
            </a-form-item>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane key="5" tab="结构">
        <div class="div-scoll">
          <a-directory-tree
            v-if="node instanceof Object" default-expand-all multiple style="text-align: left">
            <a-tree-node
              key="0-0"
              :title="'[节点]' + '-' + node.name + '-' + node.text"
            >
            </a-tree-node>
          </a-directory-tree>
          <a-directory-tree
            v-if="node instanceof Array" default-expand-all multiple style="text-align: left"
          >
            <a-tree-node key="0-0" title="parent 0">
              <a-tree-node key="0-0-0" title="leaf 0-0" is-leaf />
              <a-tree-node key="0-0-1" title="leaf 0-1" is-leaf />
            </a-tree-node>
          </a-directory-tree>
        </div>
      </a-tab-pane>
    </a-tabs>
    <images ref="images" @ok="backImages"></images>
  </div>
</template>
<script>
import AddEvent from "./modules/AddEvent.vue";
import AddWheres from "./modules/AddWheres.vue";
import Images from "./modules/Images.vue";
import IconSelect from "@/components/topology/IconSelect.vue";
import { lineOther } from "@/utils/topology/topologysetting.js";
import {
  animateType,
  setAnimate,
  iconAlineType,
} from "@/utils/topology/nodesettings.js";
export default {
  props: {
    node: {
      type: Object,
    },
  },
  watch: {
    // node:{
    //   deep: true,
    //   handler(n,v){
        
    //   }
    // },
    data: {
      handler(n, v) {
        if (n.data) {
          this.data = n.data;
        }
      },
      deep: true,
    },
  },
  components: {
    AddEvent,
    AddWheres,
    Images,
    IconSelect,
  },
  data() {
    return {
      activeKey: ["0"],
      activeName: "1",
      activeWheresKey: ["0"],
      activeWheresKeyActions: ["0"],
      lineOther,
      datas: {},
      tag: "",
      animateType,
      iconAlineType,
      data: this.node.data ? JSON.stringify(this.node.data) : "",
      iconSize: this.node.iconSize ? this.node.iconSize : 0,
      iconColor: this.node.iconColor ? this.node.iconColor : "#fff",
      play: true,
    };
    // \uea68|ltys
  },
  methods: {
    selected(item) {
      this.$set(this.node, "icon", item.data.icon);
      this.$set(this.node, "iconFamily", item.data.iconFamily);
      this.$set(this.node, "iconColor", item.data.iconColor);
      this.updateNode("");
    },
    backImages(url) {
      this.$set(this.node, "image", url);
      this.updateNode(url);
    },
    addImage() {
      this.$refs.images.init();
    },
    addIcon() {
      this.$refs.iconSelect.init();
    },
    removeImage() {
      this.$set(this.node, "image", "");
      this.updateNode("");
    },
    removeIcon() {
      this.node.icon = "";
      this.updateNode("");
    },
    remove(index) {
      this.$delete(this.node.events, index);
    },
    toJson(val) {
      if (!!val) {
        return JSON.stringify(val);
      }
      return "";
    },
    removeWhere(index) {
      this.$delete(this.node.wheres, index);
    },
    getEventType(type) {
      switch (type) {
        case 0:
          return "单击";
        case 1:
          return "双击";
        case 2:
          return "Websocket事件";
        case 3:
          return "MQTT";
      }
    },
    getEventAction(action) {
      switch (action) {
        case 0:
          return "打开链接";
        case 1:
          return "执行动画";
        case 5:
          return "暂停动画";
        case 6:
          return "停止动画";
        case 2:
          return "执行JavaScript";
        case 3:
          return "执行window函数";
        case 7:
          return "自定义消息";
      }
    },
    tagClose(val, index) {
      this.$delete(this.node.tags, index);
    },
    enterTage() {
      this.node.tags.push(this.tag);
      this.tag=""
    },
    nodeStartPlay() {
      this.node.initAnimate();
      this.node.startAnimate();
      this.play = false;
    },
    nodePausePlay() {
      this.node.initAnimate();
      this.node.pauseAnimate();
      this.play = true;
    },
    nodeStopPlay() {
      this.node.initAnimate();
      this.node.stopAnimate();
      this.play = true;
    },
    animateTypeShow() {
      this.node.animateFrames = [];
      setAnimate(this.node);
    },
    addEvent() {
      this.$refs.addEvent.add();
    },
    addWheres() {
      this.$refs.addWheres.add();
    },
    saveEvent(data) {
      this.node.events.push(data);
    },
    saveWheres(data) {
      if (!!this.node.wheres) {
        this.node.wheres.push(data);
      } else {
        let params = [];
        params.push(data);
        this.$nextTick(() => {
          this.$set(this.node, "wheres", params);
          // this.$set(this.node.wheres,"actios",data.actions);
        });
      }
    },
    updateData(val) {
      this.node.data = JSON.stringify(val);
      this.updateNode(val);
    },
    updateNodeIconSize(val) {
      this.node.iconSize = val;
      this.updateNode(val);
    },
    updateNode(val) {
      this.$emit("ok", this.node);
    },
  },
};
</script>
<style lang="scss">
.ant-form-vertical {
  .ant-form-item {
    padding-bottom: 1px;
    margin: 2px 6px;
  }
}
.ant-page-header {
  padding: 0px 10px;
}
.ant-page-header-heading-title {
  font-size: 13px;
}
.a-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 1px;
}
.a-tabs__item {
  padding: 0px 8px;
  height: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: hsl(220deg 3% 19%);
  position: relative;
}
.a-tabs__nav {
  white-space: nowrap;
  position: relative;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  float: left;
  z-index: 2;
  margin: 0 7%;
}
.ant-tabs-nav .ant-tabs-tab{
  margin: 0 0 0 0;
  padding: 10px 9px;
}
</style>