<script setup>
import { Plus } from '@element-plus/icons-vue'
import DepartmentAddEdit from './components/DepartmentAddEdit.vue'
import ManageDepartment from './components/ManageDepartment.vue'
import SetPermission from './components/SetPermission.vue'
import { area_list, org_delete, org_list, org_member_list, org_tree_list, user_list } from './api'
import PrevIcon from '@/components/EpPagination/PrevIcon.vue'
import NextIcon from '@/components/EpPagination/NextIcon.vue'
const ruleForm = ref({
  department: '',
})

const dept_id = ref('')
const uo_id_0 = ref('')
const uo_id_1 = ref('')
const dept_type = ref('')
const dept_level = ref(0)
const current_name = ref('')
const departmentData = ref([])
const uom_type = ref('')
const defaultProps = {
  children: 'children',
  label: 'label',
}

initDeptData()
async function initDeptData() {
  const res = await org_tree_list()
  if (res.code == 1)
    departmentData.value = res.data.list_tree
}

const handleNodeClick = (node) => {
  dept_id.value = node.id
  const arr = node.uo_path.split(',')
  uo_id_0.value = arr[1] || ''
  uo_id_1.value = arr.length > 2 ? arr[arr.length - 1] : ''
  dept_level.value = arr.length - 1 || 0
  current_name.value = node.label
  initData()
}

const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogType = ref('')
const userId = ref('')

const handleClose = (type) => {
  dialogVisible.value = false
  dialogTitle.value = ''
  dialogType.value = ''
  // dept_id.value = "";
  dept_type.value = ''
  userId.value = ''
  uom_type.value = ''

  if (type == 1)
    initDeptData()
}

const handleAdd = (data) => {
  dialogVisible.value = true
  dialogTitle.value = '新增部门'
  dialogType.value = 1
  dept_type.value = 1
  dept_id.value = data?.id || ''
}

const handleEdit = (data) => {
  dialogVisible.value = true
  dialogTitle.value = '编辑部门'
  dialogType.value = 1
  dept_type.value = 2
  dept_id.value = data.id
}

const handleRemove = (data) => {
  ElMessageBox.confirm('确定要删除该部门吗？', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    center: true,
    buttonSize: 'large',
    customClass: '_',
  })
    .then(async () => {
      await org_delete({ uo_id: data })
      ElMessage.success('删除成功！')
      initDeptData()
    })
    .catch(() => { })
}

const searchKey = ref('')
const initSearchKey = (val) => {
  searchKey.value = val
  initData()
}

const columnData = ref([
  {
    name: '部门',
    key: 'uo_name_1',
  },
  {
    name: '职位',
    key: 'uom_zw',
  },
  {
    name: 'ID',
    key: 'uom_user_id',
  },
  {
    name: '姓名',
    key: 'ue_user_realname',
  },
  {
    name: '账号',
    key: 'ue_user_name',
  },
  {
    name: '电话',
    key: 'ue_user_phone',
  },
  {
    name: '邮箱',
    key: 'ue_user_email',
  },
  {
    name: '临时权限',
    key: 'short',
  },
  {
    name: '操作',
    key: 'operateColumn',
  },
])
const tableData = ref([])
const total = ref(0)
const limit = ref(10)
const currentPage = ref(1)
initData()
async function initData() {
  const obj = {
    keyword: searchKey.value,
    limit: limit.value,
    page: currentPage.value,
    uo_id_0: uo_id_0.value,
    uo_id_1: uo_id_1.value,
  }
  const res = await org_member_list(obj)
  if (res.code == 1) {
    tableData.value = res.data.page_data
    total.value = parseInt(res.data.total_rows)
  }
}
function handleCurrentChange(val) {
  currentPage.value = val
  initData()
}

const handleAddUser = () => {
  console.log('新增')
}

const handleManage = (row) => {
  dialogVisible.value = true
  dialogTitle.value = '设置管理部门'
  dialogType.value = 2
  userId.value = row.uom_user_id
}

const handlePermission = (row, type) => {
  dialogVisible.value = true
  dialogTitle.value = '设置权限'
  dialogType.value = 3
  uom_type.value = type
  if (row) {
    userId.value = row.uom_user_id
    dept_id.value = row.uo_id_1
  }
}

const areaData = ref([])
const sydwData = ref([])
initKeyData()
async function initKeyData() {
  const res1 = await area_list({ pid: '2615' })
  if (res1.code == 1)
    areaData.value = res1.data.area

  const res3 = await org_list({ uo_pid: '0', limit: '100' })
  if (res3.code == 1)
    sydwData.value = res3.data.page_data
}
</script>

<template>
  <div class="qxglContent flex h-full">
    <el-scrollbar class="card">
      <div class="leftContent ">
        <el-tree :data="departmentData" node-key="id" :props="defaultProps" default-expand-all :expand-on-click-node="false" highlight-current @node-click="handleNodeClick">
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span style="flex: 1;">{{ node.label }}</span>
              <span class="operateDiv flex item-center space-x-2">
                <el-icon color="#00A3FF" size="18" @click="handleAdd(data)">
                  <Plus />
                </el-icon>
                <img class="cursor-pointer" src="/images/edit.png" alt="" srcset="" @click="handleEdit(data)">
                <img class="cursor-pointer" src="/images/delete.png" alt="" srcset="" @click="handleRemove(data.id)">
              </span>
            </span>
          </template>
        </el-tree>

        <el-button class="_ mt-5 mb-8" type="primary" :icon="Plus" @click="handleAdd()">
          添加一级分类
        </el-button>
      </div>
    </el-scrollbar>

    <el-scrollbar class="card flex-1 mx-8">
      <div class="rightContent">
        <div class="flex justify-between items-center mt-10px mb-20px">
          <div>
            {{ current_name }}
            <!-- <el-button class="_" type="primary">
              批量导入
            </el-button>
            <el-button class="_" type="primary" @click="handleAddUser">
              新增
            </el-button> -->
          </div>
          <div class="flex items-center space-x-4">
            <el-button v-if="dept_level == 2" type="text" @click="handlePermission(undefined, '1')">
              设置操作权限
            </el-button>
            <search-keys @init="initSearchKey" />
            <!-- <el-button class="_" type="danger">
              删除
            </el-button> -->
          </div>
        </div>

        <table-column :column-data="columnData" :table-data="tableData" :operate="false">
          <template #short="{ data }">
            <el-button class="text1" text type="primary" @click="handlePermission(data, '2')">
              添加
            </el-button>
          </template>
          <template #operateColumn="{ data }">
            <el-dropdown>
              <div class="cursor-pointer w-24px">
                <img class="m-auto" src="/images/dots.png">
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <!-- <el-dropdown-item>
                    <el-button class="text1" text type="primary" @click="handleManage(data)">
                      设置管理部门
                    </el-button>
                  </el-dropdown-item> -->
                  <el-dropdown-item>
                    <el-button class="text1" text type="primary" @click="handlePermission(data, '1')">
                      设置权限
                    </el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </table-column>

        <div class="flex_center mt-6 pb-12">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="limit" layout="total, prev, pager, next, jumper" :total="total" :prev-icon="PrevIcon" :next-icon="NextIcon" @current-change="handleCurrentChange" />
        </div>
      </div>
    </el-scrollbar>

    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="680px" class="_" :close-on-click-modal="false" @close="handleClose">
      <DepartmentAddEdit v-if="dialogType == 1" :dept-id="dept_id" :dept-type="dept_type" :dept-level="dept_level" :current-name="current_name" @close="handleClose" />
      <ManageDepartment v-if="dialogType == 2" :user-id="userId" :area-data="areaData" :sydw-data="sydwData" @close="handleClose" />
      <SetPermission v-if="dialogType == 3" :dept-id="dept_id" :user-id="userId" :current-name="current_name" :uom_type="uom_type" @close="handleClose" />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
@use "~/styles/button.scss";
@use "~/styles/dialog.scss";
@use "~/styles/message-box.scss";
@use "~/styles/pagination.scss";
.qxglContent {
  .leftContent {
    width: 280px;
    :deep(.el-tree) {
      // padding-right: 15px;
      .el-tree-node__content {
        .el-tree-node__label {
          flex: 1;
        }
        .custom-tree-node {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;
          padding-right: 8px;
          .operateDiv {
            display: none;
            // white-space: nowrap;
            img {
              width: 18px;
            }
          }
          &:hover {
            .operateDiv {
              display: flex;
            }
          }
        }
      }
    }
  }
  .rightContent {
  }
  :deep(.addAndEdit .el-form--label-top) {
    .el-form-item__label {
      font-size: 14px;
      color: #3f3f44;
      font-weight: 600;
      margin-bottom: 5px;
    }
    .el-form-item__content {
      .el-select {
        width: 100%;
      }
      .el-input,
      .el-input__wrapper,
      .el-textarea__inner {
        width: 100%;
        box-shadow: none;
        border-radius: 8px;
        background: #f7f7f7;
      }
    }
  }
}
:deep(.el-button.is-text.text1) {
  padding: 0;
  height: auto;
  margin: auto;
}
:deep(.el-dropdown-menu__item) {
  text-align: center;
  padding: 10px 16px;
}
</style>
