<script setup lang="ts">
import { ref } from 'vue';
import request from '~/utils/request';



const activeName = ref("-ROUTES-QXSZ")

type Tree = {
  id: string
  label: string
  children?: Tree[]
}

const zzjgTree_Data = ref<Tree[]>([])
const zzjgcyTable_Data = ref<[]>([])
const qxszTree_Data = ref<Tree[]>([])

// 组织
function queryOrg() {
  request({
    url: '/user/org/list_tree',
  }).then(res => {
    zzjgTree_Data.value = res.data.one_info
  })
}
queryOrg()


const total = ref(0)
const limit = ref(10)

const currentPage = ref(1)
function handleCurrentChange() {
  queryUser()
}

// 用户
function queryUser() {
  request({
    url: '/user/main/index',
    data: {
      dept_id: null,
      all: null,
      page: currentPage.value,
      limit: limit.value
    }
  }).then(response => {
    const { data } = response
    total.value = parseInt(data.total_rows)
    zzjgcyTable_Data.value = data.page_data
  })
}
queryUser()

function handleTableColBtn_user_delete(row:unknown) {

}

type Type_LeftRouteItem = {
  name: string,
  title: string,
  children?: Type_LeftRouteItem[]
}

type Type_LeftRouteItemPermission = {
  name: string,
  title: string,
  children?: Type_LeftRouteItemPermission[],
  permission: {
    show: boolean,
    add?: boolean,
    edit?: boolean,
    delete?: boolean,
  }
}
// 权限
function _handleItem(item: Type_LeftRouteItem): Type_LeftRouteItemPermission {
  const returnObj: Type_LeftRouteItemPermission = {
    name: item.name,
    title: item.title,
    permission: {
      show: false,
      add: false,
      edit: false,
      delete: false,
    }
  }
  if (Array.isArray(item.children)) {
    returnObj.children = item.children.map((child) => _handleItem(child))
  }
  return returnObj
}
function queryPermission() {
  request({
    url: '/user/org_menu/setting',
    data: {
      cpm_id: window.cpm_id
    }
  }).then(async res => {
    const qxszTree_Data_temp = res.data.menu_left
    if (qxszTree_Data_temp === null) {
      const { data: { menu_left } } = (await request({
        url: '/user/org_menu/left',
        data: {
          cpm_id: window.cpm_id
        }
      }))

      qxszTree_Data.value = menu_left.map((child: Type_LeftRouteItem) => _handleItem(child))
    } else {
      qxszTree_Data.value = qxszTree_Data_temp
    }

    console.log('qxszTree_Data :>> ', qxszTree_Data.value);
  })
}
queryPermission()

</script>

<template>
  <div class="flex h-full">
    <div class="w-400px flex-none h-full flex flex-col">
      <div class="flex justify-between items-center flex-none mb-4">
        <div class="text-xl font-bold">组织机构</div>
        <el-button type="success">新建</el-button>
      </div>
      <div class="flex-auto overflow-hidden">
        <el-scrollbar>
          <el-tree :data="zzjgTree_Data" node-key="id" default-expand-all :expand-on-click-node="false" highlight-current>
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span>{{ node.label }}</span>
                <span>

                </span>
              </span>
            </template>
          </el-tree>
        </el-scrollbar>

      </div>
    </div>

    <div className="divider_y flex-none" />

    <div class="flex-auto">
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织机构成员" name="-ROUTES-ZZJGCY">
          <el-table :data="zzjgcyTable_Data" row-key="name" max-height="830px">
            <el-table-column type="selection" width="55" />
            <el-table-column label="编号" prop="user_id" width="120">
            </el-table-column>
            <el-table-column label="成员姓名" prop="user_realname" width="auto">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="200">
              <template #default="{ row }">
                <el-link @click="handleTableColBtn_user_delete(row)" type="primary" :underline="false">删除</el-link>
              </template>
            </el-table-column>
          </el-table>


          <div class="flex justify-end mt-10 py-4">
            <el-pagination :page-size="limit" v-model:current-page="currentPage" @current-change="handleCurrentChange"
              background layout="total, prev, pager, next" :total="total" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="权限设置" name="-ROUTES-QXSZ">
          <el-table :data="qxszTree_Data" row-key="name" default-expand-all max-height="830px">
            <el-table-column label="功能菜单" prop="title" width="200"> </el-table-column>
            <el-table-column label="勾选权限">
              <template #default="{ row }">
                <el-checkbox v-model="row.permission['show']" label="查看界面" />
                <el-checkbox v-model="row.permission['add']" label="创建" />
                <el-checkbox v-model="row.permission['edit']" label="编辑" />
                <el-checkbox v-model="row.permission['delete']" label="删除" />
              </template>

            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
