<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="24" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="起点x,y">
                  <a-row :gutter="24">
                    <a-col :span="12"
                      ><a-input-number
                        v-model.number="line.from.x"
                        @change="uploadLine"
                    /></a-col>
                    <a-col :span="12"
                      ><a-input-number
                        v-model.number="line.from.y"
                        @change="uploadLine"
                    /></a-col>
                  </a-row>
                </a-form-item>
              </a-col>
              <a-col :span="24" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="终点x,y">
                  <a-row :gutter="24">
                    <a-col :span="12"
                      ><a-input-number
                        v-model.number="line.to.x"
                        @change="uploadLine"
                    /></a-col>
                    <a-col :span="12"
                      ><a-input-number
                        v-model.number="line.to.y"
                        @change="uploadLine"
                    /></a-col>
                  </a-row>
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="起点箭头">
                  <a-select v-model="line.fromArrow" @change="uploadLine">
                    <a-select-option
                      v-for="item of arrowTypes"
                      :key="item"
                      :value="item"
                    >
                      <i
                        style="font-size: 7vh"
                        :class="`t-icon t-to-${item}`"
                      ></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="终点箭头">
                  <a-select v-model="line.toArrow" @change="uploadLine">
                    <a-select-option
                      v-for="item of arrowTypes"
                      :key="item"
                      :value="item"
                    >
                      <i
                        style="font-size: 7vh"
                        :class="`t-icon t-to-${item}`"
                      ></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="起点箭头颜色">
                  <!-- <a-input type="text" v-model="line.fromArrowColor">
                    <colorPicker
                      slot="addonBefore"
                      @change="handleFromArrowColor"
                      v-model="fromArrowColor"
                    />
                  </a-input> -->
                  <el-color-picker
                    v-model="line.fromArrowColor"
                    @change="uploadLine"
                  ></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="line.toArrowColor">
                    <colorPicker
                      slot="addonBefore"
                      @change="handleToArrowColor"
                      v-model="toArrowColor"
                    />
                  </a-input> -->
                  <el-color-picker
                    v-model="line.toArrowColor"
                    @change="uploadLine"
                  ></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-number
                    v-model.number="line.fromArrowSize"
                    @change="uploadLine"
                  />
                </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="line.toArrowSize"
                    @change="uploadLine"
                  />
                </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">
              <a-col :span="12">
                <a-form-item label="线条样式">
                  <a-select v-model="line.dash" @change="uploadLine">
                    <a-select-option
                      v-for="item of lineOther"
                      :key="item.type"
                      :value="item.type"
                    >
                      <i style="font-size: 5vh" :class="`${item.name}`"></i>
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="连线类型">
                  <a-select v-model="line.name" @change="uploadLine">
                    <a-select-option
                      v-for="item of lineList"
                      :key="item.type"
                      :value="item.type"
                    >
                      <i
                        style="font-size: 5vh"
                        :class="`t-icon t-${item.type}`"
                      ></i>
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item label="线条宽度">
                  <a-input v-model.number="line.lineWidth" @change="uploadLine">
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="边线宽度">
                  <a-input
                    v-model.number="line.borderWidth"
                    @change="uploadLine"
                  >
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="线条颜色">
                  <el-color-picker
                    v-model="line.strokeStyle"
                    @change="uploadLine"
                  ></el-color-picker>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="边线颜色">
                  <el-color-picker
                    v-model="line.borderColor"
                    @change="uploadLine"
                  ></el-color-picker>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="透明度">
                  <a-input
                    v-model.number="line.globalAlpha"
                    @change="uploadLine"
                  >
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="控制点">
                  <a-select v-model="line.manualCps" @change="uploadLine">
                    <a-select-option :value="0">自动计算</a-select-option>
                    <a-select-option :value="1">禁止自动计算</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col
                :span="24"
                v-for="(item, index) of line.controlPoints"
                :key="index"
              >
                <a-form-item :label="'控制点' + (index+1)">
                  x
                  <a-input-number
                    v-model.number="item.x"
                    @change="uploadLine"
                  />
                  y
                  <a-input-number
                    v-model.number="item.y"
                    @change="uploadLine"
                  />
                </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-number
                    v-model.number="line.fontSize"
                    @change="uploadLine"
                  />
                </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="line.fontColor">
                    <colorPicker
                      slot="addonBefore"
                      v-model="line.fontColor"
                      @change="uploadLine"
                    />
                  </a-input> -->
                  <el-color-picker
                    v-model="line.fontColor"
                    @change="uploadLine"
                  ></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="line.textBackground">
                    <colorPicker
                      slot="addonBefore"
                      v-model="line.textBackground"
                      @change="uploadLine"
                    />
                  </a-input> -->
                  <el-color-picker
                    v-model="line.textBackground"
                    @change="uploadLine"
                  ></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="line.fontStyle" @change="uploadLine">
                    <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="加粗">
                  <a-select v-model="line.fontWeight" @change="uploadLine">
                    <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="line.textAlign" @change="uploadLine">
                    <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="line.textBaseline" @change="uploadLine">
                    <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="line.lineHeight"
                    @change="uploadLine"
                  />
                </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="line.textMaxLine"
                    @change="uploadLine"
                  />
                </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="line.textOffsetX"
                    @change="uploadLine"
                  />
                </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="line.textOffsetY"
                    @change="uploadLine"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="24" style="padding-left: 2px; padding-right: 2px">
                <a-form-item label="内容">
                  <a-textarea v-model="text" @change="textChange" />
                </a-form-item>
              </a-col>
            </a-row>
          </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 line.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 line.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="自动播放"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-switch v-model="line.animatePlay" />
            </a-form-item>
            <a-form-item
              label="反向流动"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-switch v-model="line.animateReverse" />
            </a-form-item>
            <a-form-item
              label="动画类型"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-select v-model="line.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 type="text" v-model="line.animateColor">
                <colorPicker slot="addonBefore" v-model="line.animateColor" />
              </a-input> -->
              <el-color-picker
                v-model="line.animateColor"
                @change="uploadLine"
              ></el-color-picker>
            </a-form-item>
            <a-form-item
              label="快慢"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-slider v-model="line.animateSpan" :min="1" :max="5" />
            </a-form-item>
            <a-form-item
              label="圆点大小"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input
                type="number"
                v-model.number="line.animateDotSize"
              ></a-input>
            </a-form-item>
            <a-form-item
              label="循环次数"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input v-model="line.animateCycle" placeholder="<1无限循环" />
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 18, offset: 3 }">
              <a-button
                type="primary"
                icon="caret-right"
                v-show="play"
                @click="lineStartPlay"
                style="margin: 2%"
                >播放</a-button
              >
              <a-button
                type="danger"
                icon="pause-circle"
                v-show="!play"
                @click="linePausePlay"
                style="margin: 2%"
                >暂停</a-button
              >
              <a-button type="primary" icon="close-circle" @click="lineStopPlay"
                >停止</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="line.audio" />
            </a-form-item>
            <a-form-item
              label="播放方式"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-select v-model="line.playType">
                <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="line.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="line.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="line.markdown" />
            </a-form-item>
            <a-form-item label="原生title">
              <a-input type="textarea" v-model="line.title" />
            </a-form-item>
            <a-form-item label="HTMLElement ID">
              <a-input v-model="line.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="line.id" :disabled="true" />
            </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 line.tags"
                :key="index"
                closable
                @close="tagClose(item, index)"
              >
                {{ item }}
              </a-tag>
            </div>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane key="5" tab="结构">
        <div class="div-scoll">
          <a-directory-tree
            multiple
            default-expand-all
            style="text-align: left"
          >
            <a-tree-node key="0-0" :title="'[连线]' + '-' + line.name">
            </a-tree-node>
          </a-directory-tree>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import AddEvent from "@/components/topology/modules/AddEvent";
import AddWheres from "@/components/topology/modules/AddWheres";
import { lineOther } from "@/utils/topology/topologysetting.js";
import { animateType } from "@/utils/topology/linesettings.js";
import { setAnimate } from "@/utils/topology/linesettings.js";
import { lineList, arrowTypes } from "@/utils/topology/topologysetting.js";
export default {
  props: {
    line: {
      type: Object,
    },
  },
  components: {
    AddEvent,
    AddWheres,
  },
  data() {
    return {
      activeName: "1",
      activeKey: ["0"],
      activeWheresKey: ["0"],
      activeWheresKeyActions: ["0"],
      lineOther,
      datas: {},
      lineList,
      arrowTypes,
      fromArrowColor: this.line.fromArrowColor
        ? this.line.fromArrowColor
        : "#000",
      toArrowColor: this.line.toArrowColor ? this.line.toArrowColor : "#000",
      strokeStyle: this.line.strokeStyle ? this.line.strokeStyle : "#000",
      borderColor: this.line.borderColor ? this.line.borderColor : "#000",
      text: this.line.text ? this.line.text : "",
      animateColor: this.line.animateColor ? this.line.animateColor : "#fff",
      tag: "",
      animateType,
      play: true,
    };
  },
  methods: {
    handleFromArrowColor(val) {
      this.line.fromArrowColor = val;
      this.uploadLine(val);
    },
    handleAnimateColor(val) {
      this.line.animateColor = val;
      this.uploadLine(val);
    },
    handleToArrowColor(val) {
      this.line.toArrowColor = val;
      this.uploadLine(val);
    },
    handleBorderColor(val) {
      this.line.borderColor = val;
    },
    handleStrokeStyle(val) {
      this.line.strokeStyle = val;
      this.uploadLine(val);
    },
    textChange(val) {
      this.line.text = this.text;
      this.uploadLine(val);
    },
    remove(index) {
      this.$delete(this.line.events, index);
    },
    removeWhere(index) {
      this.$delete(this.line.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.line.tags, index);
    },
    enterTage() {
      this.line.tags.push(this.tag);
      this.tag=""
    },
    lineStartPlay() {
      this.line.initAnimate();
      this.line.startAnimate();
      this.play = false;
    },
    linePausePlay() {
      this.line.initAnimate();
      this.line.pauseAnimate();
      this.play = true;
    },
    lineStopPlay() {
      this.line.initAnimate();
      this.line.stopAnimate();
      this.play = true;
    },
    animateTypeShow() {
      this.line.animateFrames = [];
      setAnimate(this.line);
    },
    addEvent() {
      this.$refs.addEvent.add();
    },
    saveEvent(data) {
      this.line.events.push(data);
    },
    addWheres() {
      this.$refs.addWheres.add();
    },
    saveWheres(data) {
      if (!!this.line.wheres) {
        this.line.wheres.push(data);
      } else {
        let params = [];
        params.push(data);
        this.$nextTick(() => {
          this.$set(this.line, "wheres", params);
        });
      }
    },
    uploadLine(val) {
      this.$emit("ok", this.line);
    },
  },
};
</script>
<style lang="scss">
.ant-tabs-nav .ant-tabs-tab{
  margin: 0 0 0 0;
  padding: 10px 9px;
}
.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;
}
.el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 1px;
}
.el-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;
}
.el-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%;
}
</style>