<template>
  <div class="toolbar-container">
    <div class="left-toolbar">
      <el-button
        type="text"
        :disabled="undoDisabled"
        :title="i18nt('designer.toolbar.undoHint')"
        @click="undoHistory"
      >
        <svg-icon icon-class="undo" />
      </el-button>
      <el-button
        type="text"
        :disabled="redoDisabled"
        :title="i18nt('designer.toolbar.redoHint')"
        @click="redoHistory"
      >
        <svg-icon icon-class="redo" />
      </el-button>
      <el-button-group v-if="$store.getters.loginAccount === 'dev_徐凯'">
        <el-button
          :type="layoutType === 'PC' ? 'info' : ''"
          @click="changeLayoutType('PC')"
          size="mini"
        >
          {{ i18nt("designer.toolbar.pcLayout") }}
        </el-button>
        <!--         <el-button :type="layoutType === 'Pad' ? 'info' : ''" @click="changeLayoutType('Pad')">{{ i18nt('designer.toolbar.padLayout') }}</el-button>-->
        <el-button
          :type="layoutType === 'H5' ? 'info' : ''"
          @click="changeLayoutType('H5')"
          size="mini"
        >
          {{ i18nt("designer.toolbar.mobileLayout") }}
        </el-button>
      </el-button-group>
      <!--       <el-button type="" style="margin-left: 20px" :title="i18nt('designer.toolbar.nodeTreeHint')" @click="showNodeTreeDrawer"><svg-icon icon-class="node-tree" /></el-button>-->
    </div>

    <el-drawer
      :title="i18nt('designer.toolbar.nodeTreeTitle')"
      direction="ltr"
      :visible.sync="showNodeTreeDrawerFlag"
      :modal="false"
      :size="280"
      :destroy-on-close="true"
      class="node-tree-drawer"
    >
      <el-tree
        ref="nodeTree"
        :data="nodeTreeData"
        node-key="id"
        default-expand-all
        highlight-current
        class="node-tree"
        icon-class="el-icon-arrow-right"
        @node-click="onNodeTreeClick"
      ></el-tree>
    </el-drawer>

    <div class="right-toolbar" :style="{ width: 'auto' }">
      <div class="right-toolbar-con">
        <!--        <el-button type="text" @click="showFormConfigDialog=true">
                  <i class="iconfont icon-liebiaoshezhi-list-setting"/>
                  表单/列表设置
                </el-button>-->
        <el-button
          type="primary"
          @click="saveReportTemplate()"
          plain
          v-if="
            designer.vueInstance.isDev &&
            designer.vueInstance.menuKindAuth.editAuth === 1 &&
            !readonly
          "
        >
          <i class="el-icon-check" />
          保存
        </el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button
          v-if="showToolButton('clearDesignerButton') && !readonly"
          type="text"
          @click="clearFormWidget"
        >
          <i class="el-icon-delete" />
          {{ i18nt("designer.toolbar.clear") }}
        </el-button>
        <el-button
          v-if="showToolButton('previewFormButton')"
          type="text"
          @click="previewForm"
        >
          <i class="el-icon-view" />
          {{ i18nt("designer.toolbar.preview") }}
        </el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button
          v-if="showToolButton('importJsonButton') && !readonly"
          type="text"
          @click="importJson"
        >
          {{ i18nt("designer.toolbar.importJson") }}
        </el-button>
        <el-button
          v-if="showToolButton('exportJsonButton')"
          type="text"
          @click="exportJson"
        >
          {{ i18nt("designer.toolbar.exportJson") }}
        </el-button>
        <!--<el-button v-if="showToolButton('exportCodeButton')" type="text" @click="exportCode">{{ i18nt('designer.toolbar.exportCode') }}</el-button>
         <el-button v-if="showToolButton('generateSFCButton')" type="text" @click="generateSFC">
          <svg-icon icon-class="vue-sfc" />
          {{ i18nt('designer.toolbar.generateSFC') }}
        </el-button> -->
        <template v-for="(idx, slotName) in $slots">
          <slot :name="slotName"></slot>
        </template>
      </div>
    </div>

    <el-dialog
      :title="i18nt('designer.toolbar.preview')"
      :visible.sync="showPreviewDialogFlag"
      v-if="showPreviewDialogFlag"
      :show-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
      v-dialog-drag
      :destroy-on-close="true"
      :append-to-body="true"
      :modal-append-to-body="true"
      class="small-padding-dialog preview-dialog"
      width="75%"
      :fullscreen="true"
      @close="showPreviewDialogFlag = false"
    >
      <div>
        <div
          class="form-render-wrapper"
          id="containt"
          :class="[
            layoutType === 'H5'
              ? 'h5-layout'
              : layoutType === 'Pad'
              ? 'pad-layout'
              : '',
          ]"
        >
          <VFormRender
            ref="preForm"
            :form-json="formJson"
            :form-data="testFormData"
            :preview-state="true"
            :option-data="testOptionData"
            @appendButtonClick="testOnAppendButtonClick"
            @buttonClick="testOnButtonClick"
            @formChange="handleFormChange"
            :reportTemplate.sync="reportTemplate"
            v-if="showRender"
            visible-key="showRender"
            :parent-target="_self"
            @reload="$reloadHandle"
          >
            <!--
            <div slot="testSlot">aaaa</div>
            -->
          </VFormRender>
        </div>
      </div>
      <!--      <el-tabs v-model="activeName" class="tab-box">
              <el-tab-pane label="常规" name="first">
                <div>
                  <div class="form-render-wrapper" id="containt"
                       :class="[layoutType === 'H5' ? 'h5-layout' : layoutType === 'Pad' ? 'pad-layout' : '']">
                    <VFormRender
                      ref="preForm"
                      :form-json="formJson"
                      :form-data="testFormData"
                      :preview-state="true"
                      :option-data="testOptionData"
                      @appendButtonClick="testOnAppendButtonClick"
                      @buttonClick="testOnButtonClick"
                      @formChange="handleFormChange"
                      :reportTemplate.sync="reportTemplate"
                      v-if="showRender" visible-key="showRender" :parent-target="_self" @reload="$reloadHandle"
                    >
                      &lt;!&ndash;
                      <div slot="testSlot">aaaa</div>
                      &ndash;&gt;
                    </VFormRender>
                  </div>
                </div>
                <code-editor v-model="testFunc" style="display: none"></code-editor>
              </el-tab-pane>
              <el-tab-pane label="列表" name="second">
                <template v-if="false">
                  <div class="grid-height">
                    <vxe-grid ref="table-m1" v-bind="vxeOption" @resizable-change="$vxeTableUtil.onColumnWitchChange"
                              @custom="$vxeTableUtil.customHandle">
                      <template #form>
                        <div class="clearfix screen-btns">
                          <div class="fl">
                            <vxe-button status="primary" class="button-sty" icon="el-icon-plus">新增
                            </vxe-button>
                          </div>
                          <div class="fr">
                            <vxe-button icon="el-icon-brush" class="button-sty" type="text" status="primary" plain
                                        @click="formData={}">重置
                            </vxe-button>
                            <vxe-button status="warning" icon="el-icon-search" class="button-sty">搜索
                            </vxe-button>
                          </div>
                        </div>
                        <template v-if="searchFields.length>0">
                          <vxe-form ref="form" class="screen-box" title-width="92px" title-align="right" :data="formData">
                            <vxe-form-item v-for="(item,index) in searchFields"
                                           :key="index" :title="item.label+':'">
                              <template v-slot>
                                <el-input v-model="formData[item.prop]" size="small" clearable/>
                              </template>
                            </vxe-form-item>
                          </vxe-form>
                        </template>
                      </template>
                    </vxe-grid>
                  </div>
                </template>
                <template v-else>
                  <div id="containt">
                    <div class="tree-box fl">
                      <div class="tit"><b>机构分类</b></div>
                      <el-tree
                        :props="treeOption.defaultProps"
                        :load="loadNode"
                        node-key="id"
                        ref="tree"
                        highlight-current
                        lazy
                        :expand-on-click-node="false"
                        @node-click="handleNodeClick"
                        class="tree-list"
                        icon-class="el-icon-arrow-down"
                      ></el-tree>
                    </div>
                    <label id="labBtn">
                      <div class="icon">
                        <i class="el-icon-more"></i>
                        <i class="el-icon-more"></i>
                      </div>
                    </label>
                    <div class="main-right fr" style="padding-left:6px;">
                      <div class="grid-height">
                        <vxe-grid ref="table-m1" v-bind="vxeOption" @resizable-change="$vxeTableUtil.onColumnWitchChange"
                                  @custom="$vxeTableUtil.customHandle">
                          <template #form>
                            <div class="clearfix screen-btns">
                              <div class="fl">
                                <vxe-button status="primary" class="button-sty" icon="el-icon-plus">新增
                                </vxe-button>
                              </div>
                              <div class="fr">
                                <vxe-button icon="el-icon-brush" class="button-sty" type="text" status="primary" plain
                                            @click="formData={}">重置
                                </vxe-button>
                                <vxe-button status="warning" icon="el-icon-search" class="button-sty">搜索
                                </vxe-button>
                              </div>
                            </div>
                            <template v-if="searchFields.length>0">
                              <vxe-form ref="form" class="screen-box" title-width="92px" title-align="right" :data="formData">
                                <vxe-form-item v-for="(item,index) in searchFields"
                                               :key="index" :title="item.label+':'">
                                  <template v-slot>
                                    <el-input v-model="formData[item.prop]" size="small" clearable/>
                                  </template>
                                </vxe-form-item>
                              </vxe-form>
                            </template>
                          </template>
                        </vxe-grid>
                      </div>
                    </div>
                  </div>
                </template>
              </el-tab-pane>
            </el-tabs>-->
      <div slot="footer" class="dialog-footer" v-if="false">
        <!-- <el-button type="primary" @click="getFormData" class="button-sty">{{ i18nt('designer.hint.getFormData') }}</el-button>
        <el-button type="primary" @click="resetForm" class="button-sty">{{ i18nt('designer.hint.resetForm') }}</el-button>
        <el-button type="primary" @click="setFormDisabled" class="button-sty">{{ i18nt('designer.hint.disableForm') }}</el-button>
        <el-button type="primary" @click="setFormEnabled" class="button-sty">{{ i18nt('designer.hint.enableForm') }}</el-button>
        <el-button type="" @click="showPreviewDialogFlag = false" class="button-sty">{{ i18nt('designer.hint.closePreview') }}</el-button> -->
        <el-button v-if="false" @click="printFormJson" class="button-sty"
          >PrintFormJson</el-button
        >
        <el-button v-if="false" @click="testValidate" class="button-sty"
          >TestValidate</el-button
        >
        <el-button v-if="false" @click="testSetFormData" class="button-sty"
          >TestSF</el-button
        >
        <el-button @click="$refs['preForm'].saveForm()" class="button-sty"
          >测试保存</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :title="i18nt('designer.toolbar.importJson')"
      :visible.sync="showImportJsonDialogFlag"
      v-if="showImportJsonDialogFlag"
      :show-close="true"
      class="small-padding-dialog preview-dialog"
      center
      v-dialog-drag
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :append-to-body="true"
      :modal-append-to-body="true"
    >
      <el-alert
        type="info"
        :title="i18nt('designer.hint.importJsonHint')"
        show-icon
        class="alert-padding"
      ></el-alert>
      <code-editor
        :mode="'json'"
        :readonly="false"
        v-model="importTemplate"
      ></code-editor>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doJsonImport" class="button-sty"
          >{{ i18nt("designer.hint.import") }}
        </el-button>
        <el-button @click="showImportJsonDialogFlag = false" class="button-sty"
          >{{ i18nt("designer.hint.cancel") }}
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="i18nt('designer.toolbar.exportJson')"
      :visible.sync="showExportJsonDialogFlag"
      v-if="showExportJsonDialogFlag"
      :show-close="true"
      class="small-padding-dialog preview-dialog"
      center
      v-dialog-drag
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :append-to-body="true"
      :modal-append-to-body="true"
    >
      <code-editor
        :mode="'json'"
        :readonly="true"
        v-model="jsonContent"
      ></code-editor>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="copy-json-btn button-sty"
          :data-clipboard-text="jsonRawContent"
          @click="copyFormJson"
          >{{ i18nt("designer.hint.copyJson") }}
        </el-button>
        <el-button @click="saveFormJson" class="button-sty">{{
          i18nt("designer.hint.saveFormJson")
        }}</el-button>
        <el-button
          type=""
          @click="showExportJsonDialogFlag = false"
          class="button-sty"
        >
          {{ i18nt("designer.hint.closePreview") }}
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="i18nt('designer.toolbar.exportCode')"
      :visible.sync="showExportCodeDialogFlag"
      v-if="showExportCodeDialogFlag"
      :show-close="true"
      class="small-padding-dialog preview-dialog"
      center
      v-dialog-drag
      width="65%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :append-to-body="true"
      :modal-append-to-body="true"
    >
      <el-tabs
        type="border-card"
        class="no-box-shadow no-padding"
        v-model="activeCodeTab"
      >
        <el-tab-pane label="Vue" name="vue">
          <code-editor
            :mode="'html'"
            :readonly="true"
            v-model="vueCode"
            :user-worker="false"
          ></code-editor>
        </el-tab-pane>
        <el-tab-pane label="HTML" name="html">
          <code-editor
            :mode="'html'"
            :readonly="true"
            v-model="htmlCode"
            :user-worker="false"
          ></code-editor>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="copy-vue-btn button-sty"
          :data-clipboard-text="vueCode"
          @click="copyVueCode"
        >
          {{ i18nt("designer.hint.copyVueCode") }}
        </el-button>
        <el-button
          type="primary"
          class="copy-html-btn button-sty"
          :data-clipboard-text="htmlCode"
          @click="copyHtmlCode"
          >{{ i18nt("designer.hint.copyHtmlCode") }}
        </el-button>
        <el-button @click="saveVueCode" class="button-sty">{{
          i18nt("designer.hint.saveVueCode")
        }}</el-button>
        <el-button @click="saveHtmlCode" class="button-sty">{{
          i18nt("designer.hint.saveHtmlCode")
        }}</el-button>
        <el-button
          type=""
          @click="showExportCodeDialogFlag = false"
          class="button-sty"
        >
          {{ i18nt("designer.hint.closePreview") }}
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="i18nt('designer.hint.exportFormData')"
      :visible.sync="showFormDataDialogFlag"
      v-if="showFormDataDialogFlag"
      :show-close="true"
      class="dialog-title-light-bg preview-dialog"
      center
      v-dialog-drag
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :append-to-body="true"
      :modal-append-to-body="true"
    >
      <div style="border: 1px solid #dcdfe6">
        <code-editor
          :mode="'json'"
          :readonly="true"
          v-model="formDataJson"
        ></code-editor>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="copy-form-data-json-btn button-sty"
          :data-clipboard-text="formDataRawJson"
          @click="copyFormDataJson"
        >
          {{ i18nt("designer.hint.copyFormData") }}
        </el-button>
        <el-button @click="saveFormData" class="button-sty">{{
          i18nt("designer.hint.saveFormData")
        }}</el-button>
        <el-button
          type=""
          @click="showFormDataDialogFlag = false"
          class="button-sty"
        >
          {{ i18nt("designer.hint.closePreview") }}
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="i18nt('designer.toolbar.generateSFC')"
      :visible.sync="showExportSFCDialogFlag"
      v-if="showExportSFCDialogFlag"
      :show-close="true"
      class="small-padding-dialog preview-dialog"
      center
      v-dialog-drag
      width="65%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :append-to-body="true"
      :modal-append-to-body="true"
    >
      <el-tabs
        type="border-card"
        class="no-box-shadow no-padding"
        v-model="activeSFCTab"
      >
        <el-tab-pane label="Vue2" name="vue2">
          <code-editor
            :mode="'html'"
            :readonly="true"
            v-model="sfcCode"
            :user-worker="false"
          ></code-editor>
        </el-tab-pane>
        <el-tab-pane label="Vue3" name="vue3">
          <code-editor
            :mode="'html'"
            :readonly="true"
            v-model="sfcCodeV3"
            :user-worker="false"
          ></code-editor>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="copy-vue2-sfc-btn button-sty"
          :data-clipboard-text="sfcCode"
          @click="copyV2SFC"
          >{{ i18nt("designer.hint.copyVue2SFC") }}
        </el-button>
        <el-button
          type="primary"
          class="copy-vue3-sfc-btn button-sty"
          :data-clipboard-text="sfcCodeV3"
          @click="copyV3SFC"
          >{{ i18nt("designer.hint.copyVue3SFC") }}
        </el-button>
        <el-button @click="saveV2SFC" class="button-sty">{{
          i18nt("designer.hint.saveVue2SFC")
        }}</el-button>
        <el-button @click="saveV3SFC" class="button-sty">{{
          i18nt("designer.hint.saveVue3SFC")
        }}</el-button>
        <el-button
          type=""
          @click="showExportSFCDialogFlag = false"
          class="button-sty"
        >
          {{ i18nt("designer.hint.closePreview") }}
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="i18nt('表单编辑')"
      v-if="showFormConfigDialog"
      :visible.sync="showFormConfigDialog"
      :modal="false"
      :show-close="!0"
      custom-class="dialog-style list-dialog"
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      v-el-drag-dialog
      v-el-dialog-center
    >
      <div class="cont" style="height: auto; max-height: 500px">
        <el-scrollbar class="setting-scrollbar">
          <form-setting
            :designer="designer"
            :form-config="designer.formConfig"
          ></form-setting>
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VFormRender from "../../../../components/xform/form-render/index";
import indexMixin from "./indexMixin.js";
import FormSetting from "../../../../components/xform/form-designer/setting-panel/form-setting";

export default {
  name: "ToolbarPanel",
  components: {
    VFormRender,
    FormSetting,
  },
  inject: ["readonly"],
  mixins: [indexMixin],
  data() {
    return {
      defaultProps: {
        label: "name", //这里是树结构中需显示的数据（即接口返回的需展示在页面上的参数）
        children: [],
        isLeaf: "leaf",
      },
      treeOption: {
        title: "机构分类",
        defaultProps: {
          label: "name",
          children: [],
          isLeaf: "leaf",
        },
        url1: "/user/sale_org/getAllList",
        url2: "/user/sale_org/getChildren",
        formRewriteMap: {
          saleOrgId: "id",
          saleOrgName: "name",
        },
        preHadnleData(row) {
          row.leaf = !row.hasChild;
        },
        treeNodeParam(row) {
          return {
            parent: row.id,
            enabled: true,
          };
        },
      },
    };
  },
  methods: {
    handleNodeClick(data, node, v) {
      let treeOption = this.treeOption;
      let formRewriteMap = treeOption.formRewriteMap || {};
      let formData = {};
      Object.keys(formRewriteMap).forEach((key) => {
        // this.$set(this.formData, key, data[formRewriteMap[key]]);
        formData[key] = data[formRewriteMap[key]];
      });

      this.$forceUpdate();
      /*
      this.searchEvent();*/
    },
    // 异步树叶子节点懒加载逻辑
    loadNode(node, resolve) {
      let treeOption = this.treeOption;
      let id = node && node.data && node.data.id ? node.data.id || "" : "";
      let param = (treeOption.treeNodeParam
        ? treeOption.treeNodeParam(node?.data || {})
        : null) || {
        parent: id,
        enabled: true,
      };
      let url = !id ? treeOption.url1 : treeOption.url2;
      this.$http({
        url: url,
        method: "post",
        data: param,
        success: (res) => {
          res.objx.forEach((value) => {
            treeOption.preHadnleData(value);
          });
          resolve(res.objx);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
div.toolbar-container {
  //min-width: 728px;  /* 解决工具按钮栏换行的问题 */
  /* 上一行css有问题，当窗口宽度不足时会把按钮挤出到右边的属性设置区，弃之！ */
}

.left-toolbar {
  float: left;
  font-size: 16px;
}

.right-toolbar {
  float: right;
  //width: 420px;
  text-align: right;
  overflow: hidden;

  .right-toolbar-con {
    text-align: right;

    .el-button {
      margin-left: 15px;
      margin-right: 15px;
      font-size: 14px;
      vertical-align: middle;

      &.el-button--primary {
        padding: 7px 14px;
      }
    }
  }
}

.el-button i {
  margin-right: 3px;
}

.small-padding-dialog {
  ::v-deep .el-dialog__header {
    //padding-top: 3px;
    //padding-bottom: 3px;
    background: #f1f2f3;
  }

  ::v-deep .el-dialog__body {
    //padding: 12px 15px 12px 15px;
    padding: 0;

    .el-alert.alert-padding {
      padding: 0 10px;
    }
  }

  ::v-deep .ace-container {
    border: 1px solid #dcdfe6;
  }
}

.dialog-title-light-bg {
  ::v-deep .el-dialog__header {
    background: #f1f2f3;
  }
}

.no-box-shadow {
  box-shadow: none;
}

.no-padding.el-tabs--border-card {
  ::v-deep .el-tabs__content {
    padding: 0;
  }
}

.form-render-wrapper {
  //height: calc(100vh - 142px);
  //all: revert !important; /* 防止表单继承el-dialog等外部样式，未生效，原因不明？？ */
}

.form-render-wrapper.h5-layout {
  margin: 0 auto;
  width: 420px;
  border-radius: 15px;
  //border-width: 10px;
  box-shadow: 0 0 1px 10px #495060;
  height: calc(100vh - 142px);
  overflow-y: auto;
  overflow-x: hidden;
}

.form-render-wrapper.pad-layout {
  margin: 0 auto;
  width: 960px;
  border-radius: 15px;
  //border-width: 10px;
  box-shadow: 0 0 1px 10px #495060;
  height: calc(100vh - 125px);
  overflow-y: auto;
  overflow-x: hidden;
}

.node-tree-drawer ::v-deep {
  .el-drawer {
    padding: 10px;
    overflow: auto;
  }

  .el-drawer__header {
    margin-bottom: 12px;
    padding: 5px 5px 0;
  }

  .el-drawer__body {
    padding-left: 5px;
  }
}

/*.node-tree-scroll-bar {*/
/*  height: 100%;*/
/*  overflow: auto;*/
/*}*/

.node-tree ::v-deep {
  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node {
    position: relative;
    padding-left: 12px;
  }

  .el-tree-node__content {
    padding-left: 0 !important;
  }

  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }

  .el-tree-node__children {
    padding-left: 12px;
    overflow: visible !important; /* 加入此行让el-tree宽度自动撑开，超出宽度el-draw自动出现水平滚动条！ */
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -10px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 16px;
  }

  .el-tree-node.is-current > .el-tree-node__content {
    background: #c2d6ea !important;
  }

  .el-tree-node__expand-icon {
    margin-left: -3px;
    padding: 6px 6px 6px 0px;
    font-size: 16px;
  }
}
</style>
