<template>
  <div>
    <a-tabs default-active-key="1" size="small" style="text-align: left">
      <a-tab-pane key="1" tab="外观">
        <div class="div-scoll">
          <a-page-header
            style="border: 1px solid rgb(235, 237, 240)"
            title="对齐"
          />
          <a-row :gutter="24" style="margin: 0 5%">
            <a-col :span="3">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>左对齐</span>
                </template>
                <i
                  class="t-align-left t-icon"
                  @click="clickAlignment('left')"
                ></i>
              </a-tooltip>
            </a-col>
            <a-col :span="3">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>右对齐</span>
                </template>
                <i
                  class="t-align-right t-icon"
                  @click="clickAlignment('right')"
                ></i>
              </a-tooltip>
            </a-col>
            <a-col :span="3">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>顶部对齐</span>
                </template>
                <i
                  class="t-align-top t-icon"
                  @click="clickAlignment('top')"
                ></i>
              </a-tooltip>
            </a-col>
            <a-col :span="3">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>底部对齐</span>
                </template>
                <i
                  class="t-align-bottom t-icon"
                  @click="clickAlignment('bottom')"
                ></i>
              </a-tooltip>
            </a-col>
            <a-col :span="3">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>垂直居中</span>
                </template>
                <i
                  class="t-align-center t-icon"
                  @click="clickAlignment('center')"
                ></i>
              </a-tooltip>
            </a-col>
            <a-col :span="3">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>水平居中</span>
                </template>
                <i
                  class="t-align-middle t-icon"
                  @click="clickAlignment('middle')"
                ></i>
              </a-tooltip>
            </a-col>
            <a-col :span="3">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>等距分布，两端对齐，节点之间的间隔都相等</span>
                </template>
                <i class="t-icon t-horizontal-between"
                @click="clickSpaceBetween(50)"
                ></i>
              </a-tooltip>
            </a-col>
          </a-row>
          <a-divider></a-divider>
          <a-page-header
            style="border: 1px solid rgb(235, 237, 240)"
            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('dash',node.dash)">
                    <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('strokeStyle',node.strokeStyle)"
                  ></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('lineWidth',node.lineWidth)"
                  />
                </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('bkType',node.bkType)">
                    <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('fillStyle',node.fillStyle)"
                    ></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('gradientFromColor',node.gradientFromColor)"
                    ></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('gradientToColor',node.gradientToColor)"
                    ></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('gradientAngle',node.gradientAngle)"
                    >
                    </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('gradientFromColor',node.gradientFromColor)"
                    ></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('gradientToColor',node.gradientToColor)"
                    ></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('gradientRadius',node.gradientRadius)"
                    />
                  </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('globalAlpha',node.globalAlpha)"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <a-page-header
            style="border: 1px solid rgb(235, 237, 240)"
            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('fontSize',node.fontSize)"
                  />
                </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('fontStyle',node.fontStyle)">
                    <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('fontColor',node.fontColor)"
                  ></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('textBackground',node.textBackground)"
                  ></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('fontWeight',node.fontWeight)">
                    <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('textAlign',node.textAlign)">
                    <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('textBaseline',node.textBaseline)">
                    <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('lineHeight',node.lineHeight)"
                  />
                </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('textMaxLine',node.textMaxLine)"
                  />
                </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('textOffsetX',node.textOffsetX)"
                  />
                </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('textOffsetY',node.textOffsetY)"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="布局">
        <a-page-header
            style="border: 1px solid rgb(235, 237, 240)"
            title="排版"
          />
          <a-form :layout="'horizontal'">
            <a-form-item
              label="最大宽度"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input-number v-model.number="params.maxWidth" />
            </a-form-item>
            <a-form-item
              label="节点宽度"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input-number v-model.number="params.nodeWidth" />
            </a-form-item>
            <a-form-item
              label="节点高度"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input-number v-model.number="params.nodeHeight" />
            </a-form-item>
            <a-form-item
              label="水平个数"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input-number v-model.number="params.maxCount" />
            </a-form-item>
            <a-form-item
              label="水平间距"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input-number v-model.number="params.spaceWidth" />
            </a-form-item>
            <a-form-item
              label="垂直间距"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input-number v-model.number="params.spaceHeight" />
            </a-form-item>
            <a-form-item style="text-align: center">
              <a-button type="primary" @click="typeSetting">开始排版</a-button>
            </a-form-item>
          </a-form>
          
      </a-tab-pane>
      <a-tab-pane key="3" tab="结构">
        <div class="div-scoll">
          <a-directory-tree
            multiple
            default-expand-all
            style="text-align: left"
          >
            <a-tree-node
              v-for="(item, index) of pens"
              :key="index"
              :title="getTitle(item)"
            >
            </a-tree-node>
          </a-directory-tree>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import { getRect } from '@topology/core';
import { lineOther } from "@/utils/topology/topologysetting.js";
export default {
  props: {
    pens: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {
      params: {
        maxWidth: 1000,
        nodeWidth: 0,
        nodeHeight: 0,
        maxCount: 0,
        spaceWidth: 30,
        spaceHeight: 30,
      },
      lineOther,
      node:{
        dash:0,
        strokeStyle:"",
        lineWidth:1,
        bkType:0,
        fillStyle:"",
        gradientFromColor:"",
        gradientToColor:"",
        gradientAngle:0,
        gradientRadius:0,
        globalAlpha:0,
        fontSize:12,
        fontStyle:"normal",
        fontColor:"",
        textBackground:"",
        fontWeight:"normal",
        textAlign:"center",
        textBaseline:"middle",
        lineHeight:0,
        textMaxLine:0,
        textOffsetX:0,
        textOffsetY:0

      }
    };
  },
  methods: {
    getTitle(item) {
      if (item.type === 0) {
        return "[节点]" + " - " + item.name;
      }
      if (item.type === 1) {
        return "[连线]" + " - " + item.name;
      }
      return "";
    },
    clickAlignment(type) {
        let rect=getRect(this.pens);
      this.$emit("no",rect,type);
    },
    typeSetting() {
        this.$emit("ok",this.params)
    },
    clickSpaceBetween(){
        this.$emit("spaceB",this.params)
    },
    updateNode(name,val){
      this.$emit("updateSub",name,val)
    }
  },
};
</script>
<style lang="scss">
</style>