<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"
                  />
               </div>
               <div class="tree">
                  <tree @create="treeCreate"></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 :data="baseInfo"></bg-info>
             </div>
             <div class="main_container bgc_white">
              <div class="apaas_button">
                <el-button type="primary" @click="addAccount(0)">新建</el-button><el-button @click="addAccount(1)">编辑</el-button>
              </div>
                <div class="table_container apaas_scroll">
                  <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
                    <template v-slot:account="{ row }">
                      <span @click="goDetail(row)" class="name_btn">
                        {{ row.account }}
                      </span>
                    </template>
                    <template v-slot:action="{ row }">
                      <bg-table-btn class="btn">
                        编辑
                      </bg-table-btn>
                      <bg-table-btn class="btn">
                        修改密码
                      </bg-table-btn>
                      <bg-table-btn class="btn">
                        删除
                      </bg-table-btn>
                    </template>
                  </bg-table>
                  <div class="pagination_box">
                     <bg-pagination
                    :page="1"
                    :size="10"
                    :total="100"
                    @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="handleCloseDirectoryDirectory"
        >
          <div class="dialog_form">
            <directoryForm ref="directoryFormRef" @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"
        >
          <div class="dialog_form">
            <orgForm ref="orgFormRef" @action="getOrgFromData"></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>
    </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';
  
  const baseInfo = reactive(
    [
    {
      name: "机构类型",
      value: "政务机构",
      nameWidth: 130
    },
    {
      name: "组织机构代码",
      value: "0000001",
      nameWidth: 130
    },
    {
      name: "机构名称",
      value: "科技局",
      nameWidth: 130
    },
    {
      name: "创建时间",
      value: "2022-10-10 10:10:10",
      nameWidth: 130
    },
    {
      name: "组织管理员数量",
      value: "10",
      nameWidth: 130
    },
    {
      name: "业务系统数量",
      value: "22",
      nameWidth: 130
    },
  ]
  )
  const headers = reactive([
        {
          label: "账号",
          prop: "account",
          width: 180
        },
        {
          label: "手机号",
          prop: "phone",
          minWidth: 180
        },
        {
          label: "角色",
          prop: "role",
          width: 150
        },
        {
          label: "创建时间",
          prop: "create_time",
          width: 150
        },
        {
          label: "是否启用",
          prop: "is_use",
          width: 80
        },
        {
          label: "操作",
          prop: "action",
          width: 220,
          fixed: "right",
        },
      ])
 
  const tableRows = reactive([
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
  ])
  const search=ref("");

  const router = useRouter();
  
  const addAccount = (params) => {
    router.push({
        path: "/system/organization/system-user",
        query: {
          type: params
        }
      })
  }
  const treeSelected = ref(null);
  const handleNodeClick = (data) => {
    treeSelected.value = data.dept
    console.log(treeSelected.value)
  }


  const changeSize = (size) => {

  }

  const changePage = (size) => {

  }

  const dialogDirectory = ref(false) 
  const handleCloseDirectory = () => {
    dialogDirectory.value = false;
  }

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

  const getDirectoryFromData = (data) => {
    console.log(111111)
    console.log(data)
  }

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

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

  const getOrgFromData = (data) => {
    console.log(111111)
    console.log(data)
  }
  const action = ref('create')
  const treeCreate = (data) => {
    action.value = data.action
    if(data.action === 'create' || data.action === 'edit') {
      if(data.type === 'org') {
        dialogOrg.value = true;
        
        if(data.data.value) {
          orgFormRef.value.setForm({parent: data.data.value.dept});
        }

      }else {
        dialogDirectory.value = true;
        nextTick(()=> {
          if(data.data.value) {
          directoryFormRef.value.setForm({parent: data.data.value.dept});
        }
        })
      }
    }else {
      console.log(data.action)
    }
  }

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

  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 {
  padding: 15px;
  flex: 1;
  overflow: hidden;
}
.table_container {
  height: calc(100% - 20px);
  overflow: auto;
}

.bg-pagination {
  bottom: unset
}
.dialog_form {
  padding: 16px;
}

</style>