<template>
    <div class="page_container">
        <div class="bg-breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> 开发管理 </el-breadcrumb-item>
                <el-breadcrumb-item > 系统账号管理 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
         <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"><bg-icon class="step_icon" icon="#bg-ic-file"></bg-icon></span> 基本信息  <bg-icon style="font-size: 14px" class="step_icon" icon="#bg-ic-arrow-right"></bg-icon> </div>
               <bg-info v-if="selectTreeDataType === 1" :data="baseInfo"></bg-info>
               <bg-info 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 class="register_btn" 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 class="register_btn" @click="deleteBatch">
                          批量删除
                      </el-button>
                      <el-button class="register_btn" @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" :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"></bg-switch>
                    </template>
                    <template v-slot:action="{ row }">
                      <bg-table-btn @click="editAccount(row)" class="can_click_text">
                        编辑
                      </bg-table-btn>
                      <bg-table-btn @click="editPsdAccount(row)" class="can_click_text">
                        修改密码
                      </bg-table-btn>
                      <bg-table-btn @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 { reactive, toRefs, ref } from '@vue/reactivity'
import { getCurrentInstance, nextTick } from 'vue'
import { computed, onBeforeMount } 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'

  const { proxy } = getCurrentInstance()
  const { $axios,$message } = proxy
  
  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",
          width: 150
        },
        {
          label: "角色",
          prop: "system_role",
          width: 150
        },
        {
          label: "创建时间",
          prop: "created_time",
          width: 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 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) {
            $message.success(res.data.msg)
            orgTree.value.getOrgTree(res.data.data.id);
          }else {
            $message.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) {
            $message.success(res.data.msg)
            orgTree.value.getOrgTree(actionTreeData.value.id);
          }else {
            $message.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) {
            $message.success(res.data.msg)
            orgTree.value.getOrgTree(res.data.data.id);
          }else {
            $message.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) {
            $message.success(res.data.msg)
            orgTree.value.getOrgTree(actionTreeData.value.id);
          }else {
            $message.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) {
            $message.success(res.data.msg)
            orgTree.value.getOrgTree(actionTreeData.value.id === selectTreeData.value.id ? null : selectTreeData.value.id);
          }else {
            $message.error(res.data.data)
          }
          handleCloseDelNode()
        })
  }

  const moveOrg = (params) => {
     $axios.put(`/apaas/system/v5/org/sort`,params)
        .then((res) => {
          if (res.data.code == 200) {
            $message.success(res.data.msg)
            orgTree.value.getOrgTree(selectTreeData.value.id);
          }else {
            $message.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;
            });
            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 {
            $message.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) => {
    const state = row.state.toString(); 
      $axios.post(
          `/apaas/system/v5/user/state/${row.id}/${state}`,
        )
        .then((res) => {
          if (res.data.code == 200) {
            getTableRows()
          }else {
            $message.error(res.data.data)
          }
        })
  }

  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) {
             $message.success(res.data.msg)
          }else {
            $message.error(res.data.data)
          }
          handleCloseEdit();
        })
        
      } 
    })
  }

  const deleteAccount = (data) => {
    if(data.state === 0) {
      selectedRow.value = data;
      deleteRowFlag.value = true;
    }else {
      $message.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) {
             $message.success(res.data.msg)
             getTableRows()
          }else {
            $message.error(res.data.data)
          }
          handleCloseRowDelete();
        })
  }

  const editAccount = (data) => {
    if(selectTreeDataType.value === 1) {
       router.push({
        path: "/system/organization/org-user",
        query: {
          id: data.id
        }
      })
    } else { router.push({
        path: "/system/organization/platform-user",
        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) {
             $message.success(res.data.msg)
             getTableRows()
          }else {
            $message.error(res.data.data)
          }
          handleCloseDelete();
        })
  }

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

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

  const resetPsd = () => {
    if(selectedName.value.length > 0){
       resetFlag.value = true;
    }else {
       $message.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) {
             $message.success(res.data.msg)
             getTableRows()
          }else {
            $message.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.clearSelection();
  }

  

  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: 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;
}
.icon_box {
    background-color: rgb(42, 74, 167);
    color: rgb(255, 255, 255);
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 14px;
}
.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>