<template>
  <div class="page_container">
    <bg-breadcrumb></bg-breadcrumb>
    <div class="flex_row">
      <div class="flex_left bgc_white">
        <div class="tree_header">政务组织</div>
        <div class="tree_content">
          <div class="search">
            <el-input v-model="search" placeholder="请输入组织名称搜索" :prefix-icon="Search" @input="searchChange" />
          </div>
          <div class="tree">
            <tree ref="orgTree" @action="treeAction" @select="treeSelect"></tree>
          </div>
        </div>
      </div>
      <div class="flex_right">
        <div class="info_container bgc_white">
          <div class="title">
            <span class="icon_box">
              <span class="step_icon">
                <bg-icon icon="#bg-ic-file"></bg-icon>
              </span>
              <span> 基本信息 </span>
            </span>
            <span class="can_click_text detail_btn" v-if="selectTreeDataType === 1" @click="toOrgDetail">
              查看详情
              <bg-icon style="font-size: 8px; color: #95a3ca; vertical-align: middle" icon="#bg-ic-arrow-right" />
            </span>
          </div>
          <bg-info class="info_box" v-if="selectTreeDataType === 1" :data="baseInfo"></bg-info>
          <bg-info class="info_box" v-if="selectTreeDataType === 2" :data="baseInfo2"></bg-info>
        </div>
        <div class="main_container bgc_white">
          <bg-filter-group @search="changeSearch" v-model="filter.key_word" placeholder="请输入关键字">
            <template v-slot:left_action>
              <div class="apaas_button">
                <el-button type="primary" @click="addAccount">
                  <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
                  {{ selectTreeDataType === 1 ? "新增组织管理员" : "新增平台用户" }}
                </el-button>
                <el-button @click="deleteBatch"> 批量删除 </el-button>
                <el-button @click="resetPsd"> 重置密码 </el-button>
                <span class="header_info"
                  >已选择<span style="color: #202531; font-weight: bold">{{ selected.length }}</span
                  >项</span
                >
                <span class="header_info can_click_text" @click="clearSelected">清空</span>
              </div>
            </template>
            <template v-slot:filter_group>
              <div class="left-filter filter_list">
                <div class="filter_item">
                  <span class="filter_title">启用状态</span>
                  <el-select v-model="filter.state" placeholder="请选择" style="width: 300px">
                    <el-option
                      v-for="(item, index) in stateOptions"
                      :key="'pushOptions' + index"
                      :label="item.name"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="right-action apaas_button">
                <el-button type="primary" @click="filterAction"> 查询 </el-button>
                <el-button type="default" @click="filterClear"> 重置 </el-button>
              </div>
            </template>
          </bg-filter-group>
          <div class="table_container apaas_scroll">
            <bg-table
              ref="dataTable"
              :headers="headers"
              :rows="tableRows"
              :isIndex="true"
              canEdit
              canEditFlag="canSelect"
              :stripe="true"
              :select="true"
              @selectAc="selectRows">
              <template v-slot:system_account="{ row }">
                <span @click="goDetail(row)" class="can_click_text">
                  {{ row.system_account }}
                </span>
              </template>
              <template v-slot:state="{ row }">
                <bg-switch
                  @click="stateChange(row)"
                  :labels="['否', '是']"
                  :values="[0, 1]"
                  v-model="row.state"
                  :disabled="row.is_admin == 4"></bg-switch>
              </template>
              <template v-slot:action="{ row }">
                <bg-table-btn :disabled="row.is_admin == 4" @click="editAccount(row)" class="can_click_text">
                  编辑
                </bg-table-btn>
                <bg-table-btn
                  :disabled="row.is_admin == 4 && userInfo.is_admin !== 4"
                  @click="editPsdAccount(row)"
                  class="can_click_text">
                  修改密码
                </bg-table-btn>
                <bg-table-btn :disabled="row.is_admin == 4" @click="deleteAccount(row)" class="can_click_text">
                  删除
                </bg-table-btn>
              </template>
            </bg-table>
            <div class="pagination_box">
              <bg-pagination
                :page="filter.page"
                :size="filter.limit"
                :total="tableTotal"
                @change-page="changePage"
                @change-size="changeSize">
              </bg-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="dialogDirectory"
      :title="action === 'create' ? '新增目录' : '编辑目录'"
      width="758px"
      :before-close="handleCloseDirectory"
      destroy-on-close>
      <div class="dialog_form">
        <directoryForm
          ref="directoryFormRef"
          :form-type="directoryFormType"
          @action="getDirectoryFromData"></directoryForm>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseDirectory">取消</el-button>
          <el-button type="primary" @click="saveDirectory">保存</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="dialogOrg"
      :title="action === 'create' ? '新增组织' : '编辑组织'"
      width="758px"
      :before-close="handleCloseOrg"
      destroy-on-close>
      <div class="dialog_form">
        <orgForm ref="orgFormRef" :form-type="orgFormType" @action="getOrgFormData"></orgForm>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseOrg">取消</el-button>
          <el-button type="primary" @click="saveOrg">保存</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogDelNode" title="删除" width="520px" :before-close="handleCloseDelNode">
      <div class="dialog_form">确认删除吗？</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseDelNode">取消</el-button>
          <el-button type="primary" @click="confirmDelNode">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="deleteRowFlag" title="删除" width="520px" :before-close="handleCloseRowDelete">
      <div class="warning_info">
        <bg-icon
          style="font-size: 12px; color: #a9b1c7; margin-right: 8px; vertical-align: baseline"
          icon="#bg-ic-circle-tips"></bg-icon>
        您正在对 <span class="danger_info">{{ selectedRow.system_account }}</span
        >做删除操作。
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseRowDelete">取消</el-button>
          <el-button type="primary" @click="deleteRowConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="editFlag" title="修改密码" width="520px" :before-close="handleCloseEdit">
      <div class="warning_info">
        <bg-icon
          style="font-size: 12px; color: #a9b1c7; margin-right: 8px; vertical-align: baseline"
          icon="#bg-ic-circle-tips"></bg-icon>
        您正在对 <span class="danger_info">{{ selectedRow.system_account }}</span
        >做修改密码操作，修改后旧密码将无法登录。
      </div>
      <div>
        <el-form
          :label-position="'right'"
          label-width="120px"
          :model="passwordForm"
          :rules="passwordFormRules"
          ref="passwordRef"
          style="max-width: 80%">
          <el-form-item label="新密码" prop="password">
            <el-input
              v-model="passwordForm.password"
              :type="password_eye ? 'text' : 'password'"
              placeholder="请输入密码">
              <template #suffix>
                <bg-icon @click="password_eye = !password_eye" class="icon_eye" icon="#bg-ic-eye"></bg-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="confirm_password">
            <el-input
              v-model="passwordForm.confirm_password"
              :type="confirm_eye ? 'text' : 'password'"
              placeholder="请确认新密码">
              <template #suffix>
                <bg-icon @click="confirm_eye = !confirm_eye" class="icon_eye" icon="#bg-ic-eye"></bg-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseEdit">取消</el-button>
          <el-button type="primary" @click="editConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="deleteFlag" title="删除" width="520px" :before-close="handleCloseDelete">
      <div class="warning_info">
        <bg-icon
          style="font-size: 12px; color: #a9b1c7; mdeleteconfirmargin-right: 8px; vertical-align: baseline"
          icon="#bg-ic-circle-tips"></bg-icon>
        您正在对 <span class="danger_info">{{ selectedName.join("、") }}</span
        >做删除操作。
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseDelete">取消</el-button>
          <el-button type="primary" @click="deleteConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="resetFlag" title="重置密码" width="520px" :before-close="handleCloseReset">
      <div class="warning_info">
        <bg-icon
          style="font-size: 12px; color: #a9b1c7; margin-right: 8px; vertical-align: baseline"
          icon="#bg-ic-circle-tips"></bg-icon>
        您正在对 <span class="danger_info">{{ selectedName.join("、") }}</span
        >做重置密码操作。
      </div>
      <div>重置密码为123456，是否继续？</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseReset">取消</el-button>
          <el-button type="primary" @click="resetConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import { computed, onBeforeMount, nextTick, reactive, ref, toRefs } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import tree from "./tree.vue";
import directoryForm from "./directory-form.vue";
import orgForm from "./org-form.vue";
import CryptoJS from "crypto-js";
import { downloadFileFormatNew } from "@/services/helper";
import store from "@/store";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";

const dataTable = ref(null);
const toOrgDetail = () => {
  router.push({
    path: "/system/organization/org-detail",
    query: {
      id: selectOrgNode.value.organization_id,
    },
  });
};
const baseInfo = reactive([
  {
    name: "组织类型",
    value: "",
    nameWidth: 130,
  },
  {
    name: "组织代码",
    value: "",
    nameWidth: 130,
  },
  {
    name: "组织名称",
    value: "",
    callback: toOrgDetail,
    nameWidth: 130,
  },
  {
    name: "创建时间",
    value: "",
    nameWidth: 130,
  },
  {
    name: "组织管理员数量",
    value: "",
    nameWidth: 130,
  },
  {
    name: "业务系统数量",
    value: "",
    nameWidth: 130,
  },
]);
const baseInfo2 = reactive([
  {
    name: "组织名称",
    value: "",
    nameWidth: 130,
  },
  {
    name: "组织代码",
    value: "",
    nameWidth: 130,
  },
  {
    name: "用户数",
    value: "",
    nameWidth: 130,
    full: true,
  },
]);
const headers = reactive([
  {
    label: "账号",
    prop: "system_account",
    minWidth: 150,
  },
  {
    label: "手机号",
    prop: "contact_phone",
    minWidth: 150,
  },
  {
    label: "角色",
    prop: "system_role",
    minWidth: 150,
  },
  {
    label: "创建时间",
    prop: "created_time",
    minWidth: 200,
  },
  {
    label: "是否启用",
    prop: "state",
    width: 80,
  },
  {
    label: "操作",
    prop: "action",
    width: 220,
    fixed: "right",
  },
]);
const stateOptions = ref([
  {
    name: "全部",
    value: "",
  },
  {
    name: "启用",
    value: "1",
  },
  {
    name: "禁用",
    value: "0",
  },
]);
const tableRows = ref([]);
const tableTotal = ref(0);
const orgTree = ref(null);
const selectTreeData = ref(null);
const actionTreeData = ref(null);
const selectTreeDataType = ref(2);
const selectOrgNode = ref(null);
const dialogDelNode = ref(false);
const router = useRouter();
const filter = reactive({
  state: "",
  key_word: "",
  page: 1,
  limit: 10,
});
const deleteFlag = ref(false);
const deleteRowFlag = ref(false);
const resetFlag = ref(false);
const selectedRow = ref({});
const selected = ref([]);
const selectedName = ref([]);
const editFlag = ref(false);
const password_eye = ref(false);
const confirm_eye = ref(false);
const passwordRef = ref(null);
const passwordForm = reactive({
  password: "",
  confirm_password: "",
});
const search = ref("");
const userInfo = computed(() => {
  return store.state.userInfo;
});
const validatePass = (rule, value, callback) => {
  if (value !== passwordForm.password) {
    callback(new Error("密码输入不一致"));
  } else {
    callback();
  }
};

const passwordFormRules = reactive({
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 8, message: "密码长度不得低于8位", trigger: "blur" },
  ],
  confirm_password: [
    { required: true, message: "请确认密码", trigger: "blur" },
    { validator: validatePass, trigger: "blur" },
  ],
});

const addAccount = () => {
  if (selectTreeDataType.value === 1) {
    router.push({
      path: "/system/organization/org-user",
      query: {
        orgId: selectOrgNode.value.organization_id,
      },
    });
  } else {
    router.push({
      path: "/system/organization/platform-user",
    });
  }
};

const changeSize = (size) => {
  filter.limit = size;
  changePage(1);
};

const changePage = (page) => {
  filter.page = page;
  getTableRows();
};

const changeSearch = (val) => {
  filter.key_word = val;
  changePage(1);
}; // 表格关键字筛选

const filterAction = () => {
  changePage(1);
}; // 查询按钮

const filterClear = () => {
  filter.state = "";
  filter.key_word = "";
  filter.limit = 10;
  filter.page = 1;
  changePage(1);
}; // 重置筛选项

const dialogDirectory = ref(false);
const directoryFormType = ref("create");
const orgFormType = ref("create");
const handleCloseDirectory = () => {
  dialogDirectory.value = false;
};

const directoryFormRef = ref(null);
const saveDirectory = () => {
  directoryFormRef.value.submitForm();
};

//新增/编剧目录
const getDirectoryFromData = (data) => {
  if (directoryFormType.value === "create") {
    const params = {
      p_organization_id: data.level ? "" : data.p_organization_id,
      name: data.name,
      data_type: 0,
    };
    axios.post(`/apaas/system/v5/org/add`, params).then((res) => {
      if (res.data.code == 200) {
        ElMessage.success(res.data.msg);
        orgTree.value.getOrgTree(res.data.data.id);
      } else {
        ElMessage.error(res.data.data);
      }
      handleCloseDirectory();
    });
  } else if (directoryFormType.value === "edit") {
    const params = {
      name: data.name,
      data_type: 0,
    };
    axios.put(`/apaas/system/v5/org/${actionTreeData.value.id}`, params).then((res) => {
      if (res.data.code == 200) {
        ElMessage.success(res.data.msg);
        orgTree.value.getOrgTree(actionTreeData.value.id);
      } else {
        ElMessage.error(res.data.data);
      }
      handleCloseDirectory();
    });
  }
};

const dialogOrg = ref(false);
const handleCloseOrg = () => {
  dialogOrg.value = false;
};

const orgFormRef = ref(null);
const saveOrg = () => {
  orgFormRef.value.submitForm();
};

//新增/编辑组织
const getOrgFormData = (data) => {
  if (orgFormType.value === "create") {
    const params = {
      p_organization_id: data.level ? "" : data.p_organization_id,
      name: data.name,
      organization_code: data.organization_code,
      description: data.description,
      attachment:
        data.attachment && data.attachment.length > 0 ? data.attachment.map((item) => item.url).join(",") : "",
      data_type: 1,
    };
    axios.post(`/apaas/system/v5/org/add`, params).then((res) => {
      if (res.data.code == 200) {
        ElMessage.success(res.data.msg);
        orgTree.value.getOrgTree(res.data.data.id);
      } else {
        ElMessage.error(res.data.data);
      }
      handleCloseOrg();
    });
  } else if (orgFormType.value === "edit") {
    const params = {
      // p_organization_id: data.level ? "" : data.p_organization_id,
      name: data.name,
      organization_code: data.organization_code,
      description: data.description,
      attachment:
        data.attachment && data.attachment.length > 0 ? data.attachment.map((item) => item.url).join(",") : "",
      data_type: 1,
    };
    axios.put(`/apaas/system/v5/org/${actionTreeData.value.id}`, params).then((res) => {
      if (res.data.code == 200) {
        ElMessage.success(res.data.msg);
        orgTree.value.getOrgTree(actionTreeData.value.id);
      } else {
        ElMessage.error(res.data.data);
      }
      handleCloseOrg();
    });
  }
};

const handleCloseDelNode = () => {
  dialogDelNode.value = false;
};

//删除目录/组织
const confirmDelNode = () => {
  axios.delete(`/apaas/system/v5/org/${actionTreeData.value.id}`).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
      orgTree.value.getOrgTree(actionTreeData.value.id === selectTreeData.value.id ? null : selectTreeData.value.id);
    } else {
      ElMessage.error(res.data.data);
    }
    handleCloseDelNode();
  });
};

const moveOrg = (params) => {
  axios.put(`/apaas/system/v5/org/sort`, params).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
      orgTree.value.getOrgTree(selectTreeData.value.id);
    } else {
      ElMessage.error(res.data.data);
    }
  });
};

const action = ref("create");
const treeAction = (data) => {
  action.value = data.action;
  if (data.action === "create" || data.action === "edit") {
    if (data.type === "org") {
      orgFormType.value = data.action;
      dialogOrg.value = true;
      nextTick(() => {
        if (data.data) {
          if (data.action === "edit") {
            orgFormRef.value.setForm({
              name: data.data.value.name,
              p_organization_id: data.data.value.p_organization_id,
              level: data.data.value.p_organization_id ? false : true,
              organization_code: data.data.value.organization_code,
              description: data.data.value.description,
              attachment: data.data.value.attachment.split(",").map((i) => {
                return { name: downloadFileFormatNew(i), url: i };
              }),
            });
          } else if (data.action === "create") {
            orgFormRef.value.setForm({ p_organization_id: data.data.value.organization_id });
          }
        }
      });
    } else {
      directoryFormType.value = data.action;
      dialogDirectory.value = true;
      nextTick(() => {
        if (data.data) {
          if (data.action === "edit") {
            directoryFormRef.value.setForm({ name: data.data.value.name });
          } else if (data.action === "create") {
            directoryFormRef.value.setForm({ p_organization_id: data.data.value.organization_id });
          }
        }
      });
    }
  } else if (data.action === "delete") {
    dialogDelNode.value = true;
  } else if (data.action === "mvup" || data.action === "mvdown") {
    moveOrg(data.data);
  }
};

const treeSelect = (data) => {
  if (data.type === "action") {
    actionTreeData.value = data.data.value;
  } else {
    selectTreeData.value = data.data.value;
  }

  if (data.type === "click" && (data.data.value.data_type === 1 || data.data.value.data_type === 2)) {
    selectTreeDataType.value = data.data.value.data_type;
    selectOrgNode.value = data.data.value;
    getTableRows();
  }
};

const getTableRows = () => {
  let params = {
    ...filter,
    organization_id: selectTreeData.value.organization_id,
    data_type: selectTreeData.value.data_type,
  };
  axios
    .get(`/apaas/system/v5/org/detail`, {
      params,
    })
    .then((res) => {
      if (res.data.code == 200) {
        tableRows.value = (res.data.data.org_users.data || []).map((item) => {
          item.system_role = item.system_role ? item.system_role.join("、") : "-";
          return item;
        });
        tableRows.value.forEach((e) => {
          if (e.is_admin == 4 && userInfo.value.is_admin != 4) {
            e.canSelect = 1;
          } else {
            e.canSelect = 0;
          }
        });
        tableTotal.value = res.data.data.org_users.total;
        if (params.data_type === 1) {
          baseInfo[0].value = res.data.data.org_info.organization_type;
          baseInfo[1].value = res.data.data.org_info.organization_code;
          baseInfo[2].value = res.data.data.org_info.name;
          baseInfo[3].value = res.data.data.org_info.created_time;
          baseInfo[4].value = res.data.data.org_info.org_admin_number;
          baseInfo[5].value = res.data.data.org_info.business_system_number;
        } else {
          baseInfo2[0].value = res.data.data.org_info.name;
          baseInfo2[1].value = res.data.data.org_info.organization_code;
          baseInfo2[2].value = res.data.data.org_info.platform_users_number;
        }
        console.log(baseInfo);
      } else {
        ElMessage.error(res.data.data);
      }
    });
};

const searchChange = (val) => {
  orgTree.value.filterTree(val);
};

const goDetail = (params) => {
  router.push({
    path: "/system/organization/user-detail",
    query: {
      id: params.id,
    },
  });
};

const stateChange = (row) => {
  if (row.is_admin == 4) {
    return;
  }
  const state = row.state.toString();
  axios.post(`/apaas/system/v5/user/state/${row.id}/${state}`).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
      getTableRows();
    } else {
      ElMessage.error(res.data.data);
      row.state = row.state == 0 ? 1 : 0;
    }
  });
};

const editPsdAccount = (data) => {
  selectedRow.value = data;
  editFlag.value = true;
};

const handleCloseEdit = () => {
  if (!passwordRef) return;
  passwordRef.value.resetFields();
  editFlag.value = false;
};
const editConfirm = () => {
  if (!passwordRef) return;
  passwordRef.value.validate((valid, fields) => {
    if (valid) {
      axios
        .post(`/apaas/system/v5/user/editpwd`, {
          id: selectedRow.value.id,
          password: CryptoJS.AES.encrypt(passwordForm.password, "swuE9cmCZQwrkYRV").toString(),
        })
        .then((res) => {
          if (res.data.code == 200) {
            ElMessage.success(res.data.msg);
          } else {
            ElMessage.error(res.data.data);
          }
          handleCloseEdit();
        });
    }
  });
};

const deleteAccount = (data) => {
  if (data.state === 0) {
    selectedRow.value = data;
    deleteRowFlag.value = true;
  } else {
    ElMessage.error("当前状态已启用，不可删除！");
  }
};

const handleCloseRowDelete = () => {
  deleteRowFlag.value = false;
};

const deleteRowConfirm = () => {
  axios.delete(`/apaas/system/v5/user/delete`, { data: { ids: [selectedRow.value.id] } }).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
      getTableRows();
    } else {
      ElMessage.error(res.data.data);
    }
    handleCloseRowDelete();
  });
};

const editAccount = (data) => {
  if (selectTreeDataType.value === 1) {
    router.push({
      path: "/system/organization/org-user/edit",
      query: {
        id: data.id,
        orgId: selectOrgNode.value.organization_id,
      },
    });
  } else {
    router.push({
      path: "/system/organization/platform-user/edit",
      query: {
        id: data.id,
      },
    });
  }
};

const handleCloseDelete = () => {
  deleteFlag.value = false;
};

const deleteConfirm = () => {
  const ids = selected.value.map((item) => item.id);
  axios.delete(`/apaas/system/v5/user/delete`, { data: { ids: ids } }).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
      getTableRows();
    } else {
      ElMessage.error(res.data.data);
    }
    handleCloseDelete();
  });
};

const deleteBatch = () => {
  if (selectedName.value.length > 0) {
    deleteFlag.value = true;
  } else {
    ElMessage.error("请先选择需要操作的数据!");
  }
};

const handleCloseReset = () => {
  resetFlag.value = false;
};

const resetPsd = () => {
  if (selectedName.value.length > 0) {
    resetFlag.value = true;
  } else {
    ElMessage.error("请先选择需要操作的数据!");
  }
};

const resetConfirm = () => {
  const ids = selected.value.map((item) => item.id);
  axios.post(`/apaas/system/v5/user/resetpwd`, { ids: ids }).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
      getTableRows();
    } else {
      ElMessage.error(res.data.data);
    }
    handleCloseReset();
  });
};

const selectRows = (data) => {
  selected.value = data.selection;
  selectedName.value = data.selection.map((item) => item.system_account);
};

const clearSelected = () => {
  dataTable.value.clearTable();
};

onBeforeMount(() => {});
</script>

<style scoped>
.tree_header {
  height: 40px;
  line-height: 40px;
  background-color: #f7f7f9;
  border-radius: 6px 6px 0px 0px;
  font-size: 16px;
  letter-spacing: 0px;
  color: #202531;
  padding-left: 16px;
}
.tree_content {
  overflow: hidden;
  height: calc(100% - 45px);
}
.search {
  padding: 16px;
}
.tree {
  overflow: hidden auto;
  height: calc(100% - 65px);
  /* padding: 5px; */
}
.tree :deep() .el-tree-node > .el-tree-node__children {
  overflow: unset;
}
.flex_right {
  display: flex;
  flex-direction: column;
}
.info_container {
  padding: 15px;
  margin-bottom: 10px;
}
.title {
  font-size: 18px;
  color: #202531;
  font-weight: bold;
  margin-bottom: 10px;
  max-width: 960px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detail_btn {
  font-size: 14px;
  font-weight: normal;
}
.icon_box {
  display: flex;
  align-items: center;
}
.step_icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background-color: #2a4aa7;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  margin-right: 8px;
}
.info_box {
  max-width: 960px;
}
.main_container {
  flex: 1;
  overflow: hidden;
}
.filter-group .left-filter {
  flex: 1;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.filter-group .right-action {
  width: 144px;
  padding-bottom: 16px;
}
.filter-group .right-action .el-button {
  width: 64px;
}

.table_container {
  height: calc(100% - 20px);
  overflow: auto;
  padding: 0 16px;
}

.bg-pagination {
  bottom: unset;
}
.dialog_form {
  padding: 24px 8px 6px;
}
</style>
