<template>
  <div class="app" style="height: 100vh">
    <vue-flow-editor
      ref="editor"
      modelWidth="30%"
      :data="state.data"
      :grid="showGrid"
      :miniMap="showMiniMap"
      :onRef="onRef"
      :multipleSelect="true"
      :loading="state.editorLoading"
      :beforeDelete="handleBeforeDelete"
      :afterDelete="handleAfterDelete"
      :beforeAdd="handleBeforeAdd"
      :afterAdd="handleAfterAdd"
      @dblclick-node="onDblclickNode"
      @dblclick-edge="onDblClickEdge"
      :activityConfig="state.activityConfig"
    >
      <template v-slot:menu>
        <vue-flow-edit-menu-group label="活动节点" value>
          <vue-flow-edit-menu
            v-for="(value, key) in state.activityConfig"
            :key="key"
            :model="{ activity: key, text: value.text, desc: value.desc }"
          >
            <template v-slot:content>
              <div class="activity-menu">
                <img :src="value.img" />
                <span>{{ value.text }}</span>
              </div>
            </template>
          </vue-flow-edit-menu>
        </vue-flow-edit-menu-group>
        <vue-flow-edit-menu-group
          v-for="(group, groupIndex) in state.menuData"
          :label="group.label"
          :key="groupIndex"
          value
        >
          <vue-flow-edit-menu
            v-for="(menu, menuIndex) in group.menus"
            :key="menuIndex"
            :model="menu"
          />
        </vue-flow-edit-menu-group>
      </template>

      <template v-slot:model>
        <el-form
          v-if="!!state.detailModel"
          ref="form"
          :model="state.detailModel"
          label-position="top"
          label-width="100px"
        >
          <template v-if="state.detailModel.activity === undefined">
            <el-tabs
              v-model="state.activeName"
              class=""
              @tab-change="handleActiveChange"
              stretch
            >
              <el-tab-pane label="节点属性" name="node" style="padding: 0 1rem">
                <el-form-item prop="label">
                  <div slot="label">
                    节点名称 <span style="color: red;">*</span>
                  </div>
                  <el-input v-model="state.detailModel.label" />
                </el-form-item>
                <el-form-item prop="attr">
                  <el-radio-group
                    v-model="state.attr_radio"
                    size="large"
                    class="attr-radio-group"
                  >
                    <el-radio-button label="基础属性" />
                    <el-radio-button label="更多属性" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item v-if="state.attr_radio === '基础属性'" prop="">
                  <div slot="label">
                    字段权限 <span style="color: red;">*</span>
                  </div>
                  <el-row
                    style="width: 100%; background-color: #f0f1f4; padding-left: 10px;"
                  >
                    <el-col :span="12">字段</el-col>
                    <el-col :span="6">可见</el-col>
                    <el-col :span="6">可编辑</el-col>
                  </el-row>
                  <el-row style="width: 100%; padding-left: 10px;">
                    <el-col :span="12" style="color: #409eff;">全选</el-col>
                    <el-col :span="6" style="padding-left: 5px;"
                      ><el-checkbox
                        @change="onAuthAllChange"
                        v-model="state.auth_all_checked"
                        label=""
                        size="large"
                    /></el-col>
                    <el-col :span="6" style="padding-left: 5px;"
                      ><el-checkbox
                        @change="onAuthAllEditChange"
                        v-model="state.auth_all_edit"
                        label=""
                        size="large"
                    /></el-col>
                  </el-row>
                  <el-row
                    v-for="(field, index) in state.field_auths"
                    :key="index"
                    style="width: 100%; padding-left: 10px;"
                  >
                    <el-col :span="12" style="">{{ field.name }}</el-col>
                    <el-col :span="6" style="padding-left: 5px;"
                      ><el-checkbox
                        v-model="field.visible.checked"
                        :disabled="field.visible.disabled"
                        label=""
                        size="large"
                    /></el-col>
                    <el-col :span="6" style="padding-left: 5px;"
                      ><el-checkbox
                        v-model="field.editable.checked"
                        :disabled="field.editable.disabled"
                        label=""
                        size="large"
                    /></el-col>
                  </el-row>
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="流程属性" name="flow" style="padding: 0 1rem">
                <el-form-item prop="label">
                  <div slot="label">
                    测试属性 <span style="color: red;">*</span>
                  </div>
                  <el-input v-model="state.detailModel.data.test" />
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
            <!-- <template v-if="state.detailModel.type !== 'edge'">
              <el-form-item label="节点背景色" prop="style.fill">
                <el-color-picker v-model="state.detailModel.style.fill" />
              </el-form-item>
              <el-form-item label="节点边框色" prop="style.stroke">
                <el-color-picker v-model="state.detailModel.style.stroke" />
              </el-form-item>
              <el-form-item label="节点文字色" prop="labelCfg.style.stroke">
                <el-color-picker
                  v-model="state.detailModel.labelCfg.style.fill"
                />
              </el-form-item>
            </template> -->
            <div style="margin-left: 20px;">
              <el-button
                type="primary"
                @click="state.dialogUserFormVisible = true"
              >
                设置人员配置
              </el-button>
            </div>
          </template>
          <template v-else>
            <el-form-item label="活动标题">
              <el-input v-model="state.detailModel.text" />
            </el-form-item>
            <el-form-item label="活动副标题">
              <el-input v-model="state.detailModel.desc" />
            </el-form-item>
            <el-form-item label="活动类型">
              <el-select v-model="state.detailModel.activity">
                <el-option
                  v-for="(value, key) in state.activityConfig"
                  :key="key"
                  :label="value.text"
                  :value="key"
                />
              </el-select>
            </el-form-item>
          </template>
        </el-form>
      </template>

      <template v-slot:toolbar>
        <el-tooltip content="测试工具栏插槽">
          <div class="vue-flow-editor-toolbar-item" @click="logData">
            <i class="el-icon-search" />
          </div>
        </el-tooltip>
      </template>

      <template v-slot:foot>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </template>
    </vue-flow-editor>
  </div>

  <el-dialog v-model="state.dialogUserFormVisible" title="成员列表">
    <div style="border: 1px dashed #DCDFE6; padding: 10px;">
      <el-tag
        v-for="tag in state.userTags"
        :key="tag.name"
        class=""
        style="margin-left: 0.25rem; margin-right: 0.25rem;"
        closable
        @close="handleTagClose(tag)"
      >
        {{ tag.name }}
      </el-tag>
    </div>
    <div style="border: 1px solid #DCDFE6; padding: 10px; margin-top: 10px;">
      <div style="height: 40px">
        <div style="padding: 0; position: relative; margin: 0 0 15px;">
          <div v-if="!state.is_active_search">
            <div class="flow-tabs__nav-wrap">
              <div class="flow-tabs__nav-scroll">
                <div class="flow-tabs__nav is-top">
                  <div
                    ref_key="barRef"
                    class="flow-tabs__active-bar"
                    :style="{
                      width: state.tabTextWidth,
                      transform: 'translateX' + '(' + state.tabOffset + ')'
                    }"
                  ></div>
                  <div
                    v-for="(item, index) in state.userTabs"
                    :key="index"
                    :class="[
                      'flow-tabs__item',
                      'is-top',
                      item.id === state.activeTabId ? 'is-active' : ''
                    ]"
                    :id="item.id"
                    @click="handleTabClick(item, $event, index)"
                  >
                    {{ item.label }}
                  </div>
                </div>
              </div>
            </div>
            <div
              class="flow-tab-search"
              @click="state.is_active_search = !state.is_active_search"
            >
              <el-icon :size="15"><Search /></el-icon> &nbsp;搜索框
            </div>
          </div>
          <div v-else>
            <el-input
              v-model="state.search_input"
              class="w-50 m-2"
              placeholder="请输入关键字"
            >
              <template #prefix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
              <template #append>
                <el-button
                  @click="state.is_active_search = !state.is_active_search"
                  >取消</el-button
                >
              </template>
            </el-input>
          </div>
        </div>
      </div>
      <!-- 未激活搜索框 -->
      <div v-if="!state.is_active_search">
        <div v-for="(item, index) in state.userTabs" :key="index">
          <div v-if="item.id === state.activeTabId && item.type === 'tree'">
            <el-row>
              <el-col :span="8">
                <el-tree
                  :data="item.data"
                  :props="state.defaultProps"
                  empty-text="暂无数据"
                  @node-click="handleNodeClick"
                />
              </el-col>
              <el-col :span="16">
                <div
                  style="border-left: 2px solid #e4e7ed; width: 2px; height: 100%; padding-left: 10px;"
                >
                  <el-checkbox-group
                    class="flow-checkbox-group"
                    v-model="state.checkedUserList"
                  >
                    <el-checkbox
                      v-for="(user, idx) in state.userList"
                      :key="idx"
                      :label="user.id"
                      :disabled="user.disabled"
                      >{{ user.label }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
              </el-col>
            </el-row>
          </div>
          <div v-if="item.id === state.activeTabId && item.type === 'list'">
            <el-tabs
              tab-position="left"
              style=""
              class="demo-tabs"
              v-model="activeTabContent"
              @tab-click="handleTabContentClick"
            >
              <el-tab-pane v-for="(role, idx) in item.data" :key="idx" :label="role.label">
                <el-checkbox-group
                    class="flow-checkbox-group"
                    v-model="state.checkedUserList"
                  >
                    <el-checkbox
                      v-for="(user, idx) in state.userList"
                      :key="idx"
                      :label="user.id"
                      :disabled="user.disabled"
                      >{{ user.label }}</el-checkbox
                    >
                  </el-checkbox-group>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <!-- 激活搜索框 -->
      <div v-else>
        <el-checkbox-group
          class="flow-checkbox-group"
          style="padding-left: 10px;"
          v-model="state.searchUserList"
        >
          <el-checkbox label="1">选项 A</el-checkbox>
          <el-checkbox label="2">选项 B</el-checkbox>
          <el-checkbox label="3">选项 C</el-checkbox>
          <el-checkbox label="4" disabled>禁用</el-checkbox>
          <el-checkbox label="5" disabled>选中和禁用</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeUserForm">取消</el-button>
        <el-button type="primary" @click="confirmUserForm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { reactive, onMounted, watch, nextTick } from "vue";
import { AppData } from "./data.js";
import { staticPath } from "./utils";
import { ElNotification } from "element-plus";
import axios from "./axios";
import $ from "jquery";
import { Calendar, Search } from "@element-plus/icons-vue";

const G6 = (window as any).G6.default as any;

function delay(time) {
  return new Promise(resolve => setTimeout(resolve, time));
}

export default {
  setup(props, context) {
    const state = reactive({
      data: AppData,
      detailModel: null,
      editorLoading: false,
      selectOptions: [
        { label: "待确认", value: "0" },
        { label: "填写表单", value: "1" },
        { label: "部门负责人审批", value: "2" },
        { label: "总经理审批", value: "3" }
      ],
      menuData: [
        {
          label: "流程节点",
          menus: [
            { label: "开始", shape: "ellipse", id: "start-node" },
            { label: "结束", shape: "ellipse", id: "end-node" },
            { label: "审批节点", busType: "123" },
            { label: "判断节点", shape: "diamond" }
          ]
        },
        {
          label: "其他形状节点",
          menus: [
            { label: "矩形节点", shape: "rect" },
            { label: "圆形节点", shape: "circle" },
            { label: "椭圆节点", shape: "ellipse" },
            { label: "菱形节点", shape: "diamond" },
            { label: "三角形节点", shape: "triangle" },
            { label: "星形节点", shape: "star" }
          ]
        }
      ],
      activityConfig: {
        advertisement: {
          text: "广告宣传1",
          desc: "通过广告宣传新品",
          color: "#9283ed",
          img: "https://cdn.ipadbiz.cn/oa/advertisement-node.svg"
        },
        coupon: {
          text: "优惠券",
          desc: "发放奖励优惠券",
          color: "#ed8383",
          img: "https://cdn.ipadbiz.cn/oa/coupon-node.svg"
        },
        crowd: {
          text: "用户反馈",
          desc: "收集用户反馈信息",
          color: "#92dba8",
          img: "https://cdn.ipadbiz.cn/oa/crowd-node.svg"
        }
      },
      dialogUserFormVisible: true,
      activeName: "node",
      attr_radio: "基础属性",
      auth_all_checked: false,
      auth_all_edit: false,
      field_auths: [
        {
          name: "字段1",
          visible: {
            checked: true,
            disabled: false
          },
          editable: {
            checked: false,
            disabled: true
          }
        },
        {
          name: "字段2",
          visible: {
            checked: true,
            disabled: false
          },
          editable: {
            checked: false,
            disabled: false
          }
        },
        {
          name: "字段3",
          visible: {
            checked: true,
            disabled: false
          },
          editable: {
            checked: false,
            disabled: false
          }
        }
      ],
      userTags: [
        { name: "成员1", id: "1" },
        { name: "成员2", id: "2" },
        { name: "成员3", id: "3" },
        { name: "成员4", id: "4" }
      ],
      activeTabId: "tab-1", // TODO: 需要获取默认第一个ID
      userTabs: [
        {
          id: "tab-1",
          label: "组织架构",
          type: "tree",
          data: [
            {
              id: "dept-1",
              label: "上级部门 1",
              children: [
                {
                  id: "dept-1-1",
                  label: "部门名称 1-1",
                  children: [],
                  list: [
                    {
                      id: "user-1-1",
                      label: "用户1-1",
                      checked: true,
                      disabled: false
                    },
                    {
                      id: "user-1-2",
                      label: "用户1-2",
                      checked: false,
                      disabled: false
                    },
                    {
                      id: "user-1-3",
                      label: "用户1-3",
                      checked: false,
                      disabled: true
                    }
                  ]
                }
              ]
            },
            {
              id: "dept-2",
              label: "上级部门 2",
              children: [
                {
                  id: "dept-2-1",
                  label: "部门名称 2-1",
                  children: [],
                  list: [
                    {
                      id: "user-2-1",
                      label: "用户2-1",
                      checked: false,
                      disabled: false
                    },
                    {
                      id: "user-2-2",
                      label: "用户2-2",
                      checked: false,
                      disabled: false
                    },
                    {
                      id: "user-2-3",
                      label: "用户2-3",
                      checked: false,
                      disabled: true
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          id: "tab-2",
          label: "角色",
          type: "list",
          data: [
            {
              id: "role-1-1",
              label: "流程发起人",
              children: [],
              list: [
                {
                  id: "role-1-2",
                  label: "选项 A",
                  checked: true,
                  disabled: false
                },
                {
                  id: "role-1-3",
                  label: "选项 B",
                  checked: false,
                  disabled: false
                },
                {
                  id: "role-1-4",
                  label: "选项 C",
                  checked: false,
                  disabled: true
                }
              ]
            }, {
              id: "role-1-2",
              label: "成员字段",
              children: [],
              list: [],
            }, {
              id: "role-1-3",
              label: "部门字段",
              children: [],
              list: [],
            }, {
              id: "role-1-4",
              label: "主管",
              children: [],
              list: [],
            }
          ]
        }
      ],
      tabSelectData: [],
      userTabType: "tree",
      tabOffset: "0px",
      tabTextWidth: "76px", // 文字宽度需要打开弹框时重新计算
      is_active_search: false,
      search_input: "",
      userList: [],
      checkedUserList: [],
      checkedDeptUserList: [], // 选中部门用户ID
      deptUserList: [
        {
          id: "dept-1",
          label: "部门1",
          checked: false,
          disabled: false
        },
        {
          id: "dept-2",
          label: "部门2",
          checked: false,
          disabled: false
        },
        {
          id: "dept-3",
          label: "部门3",
          checked: false,
          disabled: true
        }
      ], // 组织架构框 选中 用户ID
      checkedRoleUserList: [], // 选中角色用户ID
      roleUserList: [], // 角色框 选中 用户ID
      searchUserList: [], // 搜索框 选中 用户ID
      userGroup: [], // 待选用户列表
      tree_data: [
        {
          label: "上级部门 1",
          children: [
            {
              label: "部门名称 1-1",
              children: []
            }
          ]
        },
        {
          label: "上级部门 2",
          children: [
            {
              label: "部门名称 2-1",
              children: []
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    });

    function handleActiveChange(name) {
      console.warn(name);
    }

    const onAuthAllChange = val => {
      // 全选可见按钮回调
      if (val) {
        // 全部选中
        state.field_auths.forEach(ele => {
          ele.visible.checked = true;
        });
      } else {
        // 全部取消选中
        state.field_auths.forEach(ele => {
          ele.visible.checked = false;
        });
      }
    };
    const onAuthAllEditChange = val => {
      // 全选可编辑按钮回调
      console.warn(val);
    };

    const handleTabClick = (tab, event, idx) => {
      // 点击Tab切换回调
      state.tabSelectData = tab.data; // tab选中数据提供给list类型使用
      state.userList = []; // 清空用户列表
      state.checkedUserList = []; // 清空选中用户列表
      console.log(tab, event);
      // 设置当前激活的tab
      state.userTabType = tab.type;
      state.activeTabId = tab.id;
      // 子容器相对于父容器的相对x轴位移, 第一项为0
      if (idx) {
        state.tabOffset = $("#" + tab.id).position().left + 20 + "px";
      } else {
        state.tabOffset = "0px";
      }
      // 文字宽度
      state.tabTextWidth = $("#" + tab.id).width() + "px";
      // 检查列表第一项是否有值
      if (tab?.data[0]?.list) {
        let list = tab.data[0].list;
        state.userList = list;
        state.checkedUserList = list.filter(ele => {
          return ele.checked;
        }).map(ele => {
          return ele.id;
        });
      }
    };

    const handleTabContentClick = (tab, event) => { // 侧边栏Tab点击回调
      // console.log(event);
      state.tabSelectData.forEach(ele => {
        if (ele.label === tab.props.label) {
          state.userList = ele.list;
          state.checkedUserList = ele.list.filter(ele => {
            return ele.checked;
          }).map(ele => {
            return ele.id;
          });
        }
      })
    };

    const handleNodeClick = data => {
      console.log(data);
      if (data.list) {
        state.userList = data.list;
        state.checkedUserList = data.list.filter(ele => {
          return ele.checked;
        }).map(ele => {
          return ele.id;
        });
        console.warn(state.checkedUserList);
      }
    };

    const handleTagClose = tag => {
      // 移除成员标签回调
      state.userTags.splice(state.userTags.indexOf(tag), 1);
      console.log(tag);
    };

    const closeUserForm = () => {
      // 关闭用户列表表单回调
      state.dialogUserFormVisible = false;
    };
    const confirmUserForm = () => {
      // 确认用户列表表单回调
      state.dialogUserFormVisible = false;
      console.log(state.userTags);
    };

    onMounted(() => {
      // // 显示提示框的标志位
      // var showConfirmation = true;
      // // 监听 beforeunload 事件
      // window.addEventListener('beforeunload', function (event) {
      //   if (showConfirmation) {
      //     // 取消事件的默认行为（弹出确认对话框）
      //     event.preventDefault();
      //     // Chrome 和 Firefox 需要返回一个值以显示确认对话框
      //     event.returnValue = '';
      //     // 显示自定义的提示信息
      //     var confirmationMessage = '确定要离开此页面吗？';
      //     (event || window.event).returnValue = confirmationMessage;  // 兼容旧版浏览器
      //     return confirmationMessage;
      //   }
      // });
      // // 监听 unload 事件
      // window.addEventListener('unload', function () {
      //   // 设置标志位为 false，避免在刷新页面时再次显示提示框
      //   showConfirmation = false;
      // });
      // axios.get('/srv/?a=query_form_all_field')
      // .then(res => {
      //   console.warn(res.data);
      // });
      // $('.el-tabs__nav')
    });

    watch(
      () => state.dialogUserFormVisible,
      val => {
        if (val) {
          nextTick(() => {
            state.tabTextWidth = $("#" + state.activeTabId).width() + "px";
          });
        }
      }
    );

    let editor;

    function onDblclickNode(e) {
      const model = G6.Util.clone(e.item.get("model"));
      model.style = model.style || {};
      model.labelCfg = model.labelCfg || { style: {} };

      state.detailModel = model;
      editor.openModel();
    }

    function onDblClickEdge(e) {
      const { source, target, style, labelCfg, label } = e.item.get("model");
      const model = {
        label,
        source,
        target,
        style: style || {},
        labelCfg: labelCfg || { style: {} },
        type: null,
        id: null
      };
      model.type = e.item.get("type");
      model.id = e.item.get("id");

      state.detailModel = model;
      editor.openModel();
    }

    function cancel() {
      editor.closeModel();
    }

    function save() {
      editor.updateModel(state.detailModel);
      editor.closeModel();
    }

    async function handleBeforeDelete(model, type) {
      if (type === "node") {
        if (model.label === "开始") {
          state.editorLoading = true;
          await delay(1000);
          state.editorLoading = false;
          ElNotification.error("不可以删除【开始】节点");
          return Promise.reject("reject");
        }
      }
    }

    function handleAfterDelete(model, type) {
      if (type === "edge") {
        console.log("delete edge");
      } else {
        console.log("after delete", model.label, { ...model });
      }
    }

    function handleBeforeAdd(model, type) {
      if (type === "edge") {
        if (model.source === "end-node") {
          ElNotification.error("结束节点不能输出连线其他节点");
          return Promise.reject("reject");
        }
      }
      if (type === "node") {
        if (model.id === "start-node" || model.id === "end-node") {
          const data = editor.editorState.graph.save();
          for (let i = 0; i < data.nodes.length; i++) {
            const node = data.nodes[i];
            if (node.id === model.id) {
              ElNotification.error(
                `只能有一个${model.id === "start-node" ? "开始" : "结束"}节点`
              );
              return Promise.reject("reject");
            }
          }
        }
      }
    }

    function handleAfterAdd(model, type) {
      if (type === "edge") {
        console.log(`新增连接线`);
      }
    }

    function logData() {
      let { nodes, edges } = editor.editorState.graph.save();
      nodes = nodes.map(
        ({ data, id, label, shape, x, y, text, desc, img }) => ({
          data,
          id,
          label,
          shape,
          x,
          y,
          text,
          desc,
          img
        })
      );
      edges = edges.map(({ source, sourceAnchor, target, targetAnchor }) => ({
        source,
        sourceAnchor,
        target,
        targetAnchor
      }));
      console.log(JSON.stringify({ nodes, edges }, null, 2));
    }

    return {
      state,

      showGrid: true,
      showMiniMap: true,

      onDblclickNode,
      onDblClickEdge,
      cancel,
      save,
      handleBeforeDelete,
      handleAfterDelete,
      handleBeforeAdd,
      handleAfterAdd,
      handleActiveChange,
      onAuthAllChange,
      onAuthAllEditChange,
      handleTabClick,
      handleTabContentClick,
      handleNodeClick,
      handleTagClose,
      closeUserForm,
      confirmUserForm,

      logData,

      onRef: e => (editor = e),
      staticPath
    };
  }
};
</script>

<style lang="scss">
html,
body {
  padding: 0;
  margin: 0;

  .activity-menu {
    display: flex;
    align-items: center;

    img {
      margin-right: 1em;
      width: 30px;
      height: 30px;
    }
  }
}

.attr-radio-group {
  width: 100% !important;
  .el-radio-button.el-radio-button--large {
    width: 50% !important;
    span {
      width: 100% !important;
    }
  }
}

.demo-tabs > .el-tabs__content {
  /* padding: 32px; */
}

.flow-tabs__nav-wrap {
  overflow: hidden;
  margin-bottom: -1px;
  position: relative;
}
.flow-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #e4e7ed;
  /* z-index: 1; */
}

.flow-tabs__nav-scroll {
  /* overflow: hidden; */
  overflow: scroll;
}

.flow-tabs__active-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: #409eff;
  z-index: 1;
  transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
    transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  list-style: none;
}

.flow-tabs__nav {
  display: flex;
  white-space: nowrap;
  position: relative;
  transition: transformX(0px);
  float: left;
  .flow-tabs__item {
    padding: 0 20px;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    position: relative;
    &:hover {
      color: #409eff;
      cursor: pointer;
    }
    &.is-active {
      color: #409eff;
    }
    &.is-top:nth-child(2) {
      padding-left: 0;
    }
  }
}

.flow-tab-search {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  display: flex;
  align-items: center;
  background-color: #e4e7ed;
  padding: 5px 5px 5px 15px;
  border-radius: 15px;
  color: #b1b3b8;
  &:hover {
    cursor: pointer;
  }
}

.flow-checkbox-group {
  .el-checkbox {
    display: flex !important;
  }
}
</style>