<template>
  <div>
    <el-drawer
      title="设置"
      direction="ltr"
      :width="600"
      :visible="settingVisible"
      :modal-append-to-body="false"
      @close="close"
    >
      <el-form :form="settingForm" label-width="80px">
        <el-divider orientation="left">连线</el-divider>
        <el-form-item label="类型">
          <el-select v-model="settingForm.linkType" @change="setFlowType">
            <el-option value="Bezier" label="贝塞尔曲线"></el-option>
            <el-option value="Straight" label="直线"></el-option>
            <el-option value="Flowchart" label="流程图线"></el-option>
            <el-option value="StateMachine" label="状态线"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker
            v-model="settingForm.linkType"
            @change="setLinkColor"
          ></el-color-picker>
        </el-form-item>
        <el-form-item label="粗细">
          <el-slider
            :min="1"
            :max="10"
            v-model="settingForm.linkThickness"
            @change="setStrokeWidth"
          />
        </el-form-item>

        <el-divider orientation="left">默认样式</el-divider>
        <el-form-item label="辅助线">
          <el-switch
            :checked="isOpenAuxiliaryLine"
            v-model="settingForm.isOpenAuxiliaryLine"
            checkedChildren="开"
            unCheckedChildren="关"
            @change="toggleOpenAuxiliaryLine"
          />
        </el-form-item>
        <!-- <el-form-item label="自动对齐水平间距">
          <el-slider
            :min="10"
            :max="800"
            :step="5"
            @change="setAlignLevelDistance"
            v-model="settingForm.alignLevelDistance"
          />
        </el-form-item> -->
        <!-- <el-form-item label="自动对齐垂直间距">
          <el-slider
            :min="10"
            :max="800"
            :step="5"
            @change="setAlignVerticalDistance"
            v-model="settingForm.alignVerticalDistance"
          />
        </el-form-item>
        <el-form-item label="微移距离">
          <el-slider
            :min="1"
            @change="setMovePx"
            v-model="settingForm.movePx"
          />
        </el-form-item> -->
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { flowConfig } from "../config/args-config.js";

export default {
  data() {
    return {
      settingVisible: false,
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 15 },
      },
      initFlag: false,
      settingForm: {
        movePx: flowConfig.defaultStyle.movePx,
        linkType: flowConfig.jsPlumbInsConfig.Connector[0],
        linkThickness: flowConfig.jsPlumbInsConfig.PaintStyle.strokeWidth,
        alignLevelDistance: flowConfig.defaultStyle.alignSpacing.level,
        alignVerticalDistance: flowConfig.defaultStyle.alignSpacing.vertical,
        containerOnceNarrow: flowConfig.defaultStyle.containerScale.onceNarrow,
        containerOnceEnlarge:
          flowConfig.defaultStyle.containerScale.onceEnlarge,
      },
      isOpenAuxiliaryLine: flowConfig.defaultStyle.isOpenAuxiliaryLine,
      linkColor: flowConfig.jsPlumbInsConfig.PaintStyle.stroke,
    };
  },
  methods: {
    open() {
      this.settingVisible = true;
    },
    close() {
      this.settingVisible = false;
    },
    setFlowType(v) {
      flowConfig.jsPlumbInsConfig.Connector[0] = v;
    },
    toggleOpenAuxiliaryLine(flag) {
      this.isOpenAuxiliaryLine = flag;
      flowConfig.defaultStyle.isOpenAuxiliaryLine = flag;
    },
    setMovePx(v) {
      flowConfig.defaultStyle.movePx = v;
    },
    setLinkColor(v) {
      this.linkColor = v;
      flowConfig.jsPlumbInsConfig.PaintStyle.stroke = v;
    },
    setStrokeWidth(v) {
      flowConfig.jsPlumbInsConfig.PaintStyle.strokeWidth = v;
    },
    setAlignLevelDistance(v) {
      flowConfig.defaultStyle.alignSpacing.level = v;
    },
    setAlignVerticalDistance(v) {
      flowConfig.defaultStyle.alignSpacing.vertical = v;
    },
    formatterContainerOnceNarrow(v) {
      return `${v * 100}%`;
    },
    setContainerOnceNarrow(v) {
      flowConfig.defaultStyle.containerScale.onceNarrow = v;
    },
    formatterContainerOnceEnlarge(v) {
      return `${v * 100}%`;
    },
    setContainerOnceEnlarge(v) {
      flowConfig.defaultStyle.containerScale.onceEnlarge = v;
    },
  },
};
</script>

<style>
.m-colorPicker .box {
  z-index: 9999 !important;
  width: 220px !important;
}

.ant-divider-horizontal.ant-divider-with-text,
.ant-divider-horizontal.ant-divider-with-text-left,
.ant-divider-horizontal.ant-divider-with-text-right {
  font-weight: 800;
  margin: 24px 0 4px;
}
</style>