<template lang="">
  <div>
    <div class="common-layout">
      <el-container>
        <el-aside width="240px">
          <div class="el-aside_div">
            <el-input
              v-model="categoryName"
              style="width: 200px"
              placeholder="搜索"
            >
              <template #suffix>
                <el-icon class="el-input__icon" @click="searchCategory"
                  ><search
                /></el-icon>
              </template>
            </el-input>
            <el-button
              class="el-button_one"
              :icon="Plus"
              @click="addCategoryHandle(1)"
              >新建分类</el-button
            >
            <el-tree
              class="my-el-tree"
              ref="tree"
              style="max-width: 240px"
              :data="treeData"
              :props="defaultProps"
              @node-click="handleNodeClick"
            >
              <template #default="{ node, data }">
                <div class="custom-tree-node">
                  <span>{{ node.label }}</span>

                  <el-dropdown class="edit-tree-dropdown">
                    <span>
                      <a class="showEllipsis"> ... </a>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                          ><span @click.stop="addCategoryHandle(2, data)"
                            >添加子分类</span
                          ></el-dropdown-item
                        >
                        <el-dropdown-item
                          @click.stop="addCategoryHandle(3, data)"
                          >编辑分类</el-dropdown-item
                        >
                        <el-dropdown-item
                          :disabled="data.sort == 1"
                          @click.stop="moveCategory(node, 1)"
                          >上移</el-dropdown-item
                        >
                        <el-dropdown-item
                          :disabled="data.sort == data.maxSort"
                          @click.stop="moveCategory(node, 2)"
                          >下移</el-dropdown-item
                        >
                        <el-dropdown-item @click.stop="delCategory(data)"
                          >删除</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </template>
            </el-tree>
          </div>
        </el-aside>
        <el-divider direction="vertical" />
        <el-main>
          <text style="font-weight: bolder">{{ title }}</text>
          <span
            style="margin-left: 10px; font-size: 16px; display: inline-block"
          >
            资产数 {{ totalNum }}</span
          >
          <div class="el-main_div" style="margin-top: 10px">
            <div>
              <el-input
                v-model="listQuery.assetsNo"
                style="width: 200px"
                placeholder="请搜索资产编号"
              >
                <template #suffix>
                  <el-icon class="el-input__icon" @click="geAssetsListData"
                    ><search
                  /></el-icon>
                </template>
              </el-input>
              <!-- <el-button style="margin-left: 10px" :icon="Edit" /> -->
            </div>
            <div style="margin-right: 10px">
              <el-button plain type="warning">批量删除</el-button>
              <el-button plain>变更分类</el-button>
              <el-button plain>批量导入/导出</el-button>
              <el-button :icon="Plus" type="primary" @click="addMemberHandle"
                >添加</el-button
              >
            </div>
          </div>
          <div class="el-main_table">
            <el-table
              ref="multipleTableRef"
              :data="tableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column
                property="assetsNo"
                label="资产编号"
                width="120"
              />
              <el-table-column property="categoryName" label="资产分类" />
              <el-table-column property="assetsName" label="资产名称" />
              <el-table-column property="locationName" label="位置" />

              <el-table-column label="操作" fixed="right">
                <!-- <template #default="scope">
                  <el-button
                    plain
                    type="primary"
                    size="mini"
                    text
                    @click="detailHandle(scope.row)"
                    >详情</el-button
                  >
                  <el-button plain type="primary" size="mini" text
                    ><el-icon><MoreFilled /></el-icon
                  ></el-button>
                </template> -->
              </el-table-column>
            </el-table>
          </div>
          <div style="display: flex; justify-content: flex-end">
            <!-- <el-pagination
              v-model:current-page="currentPage1"
              :page-size="10"
              :size="size"
              :disabled="disabled"
              :background="background"
              layout="total, prev, pager, next"
              :total="100"
            /> -->
            <myPagination
              v-model:currentPage="currentPage"
              v-model:total="total"
              v-model:pageSize="pageSize"
              :pageSizes="[10, 20, 30, 50]"
              @change="getCategoryList"
            />
          </div>
        </el-main>
      </el-container>
      <el-drawer v-model="detailVisible" :show-close="false">
        <template #header>
          <div class="header-title">
            <div>成员详情</div>
            <el-icon @click="closeDetailDrawer"><Close /></el-icon>
          </div>
        </template>
        <template #default>
          <div>
            <div class="depart">
              <img :src="detailInfo.headImg" alt="" class="depart-img" />
              <span class="depart_name">{{ detailInfo.name }}</span>
            </div>
            <div class="detail_item">
              <div class="name">姓名</div>
              <div class="username">{{ detailInfo.name }}</div>
            </div>
            <div class="detail_item">
              <div class="name">别名</div>
              <div class="username">-</div>
            </div>
            <div class="detail_item">
              <div class="name">用户ID</div>
              <div class="username">{{ detailInfo.userNo }}</div>
            </div>
            <div class="detail_item">
              <div class="name">手机号码</div>
              <div class="username">{{ detailInfo.userTel }}</div>
            </div>
            <div class="detail_item">
              <div class="name">联系邮箱</div>
              <div class="username">{{ detailInfo.email }}</div>
            </div>
            <div class="detail_item">
              <div class="name">部门</div>
              <div class="username">{{ detailInfo.departmentName }}</div>
            </div>
            <div class="detail_item">
              <div class="name">性别</div>
              <div class="username">
                {{ detailInfo.sex == 1 ? '男' : '女' }}
              </div>
            </div>
          </div>
        </template>
        <template #footer>
          <div style="text-align: left">
            <el-button type="primary" @click="editInfo" size="small"
              >编辑基本信息</el-button
            >
            <el-button @click="changeDepHandle" size="small"
              >变更部门</el-button
            >
            <el-button @click="transferHandle" size="small">权限转移</el-button>
            <el-button type="warning" plain @click="deleteInfo" size="small"
              >操作离职</el-button
            >
          </div>
        </template>
      </el-drawer>
      <addCategory ref="addCategoryRef" :getCategoryList="getCategoryList" />
      <AddMember ref="addMemberRef" />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, getCurrentInstance } from 'vue'
import { Search, Plus, Edit } from '@element-plus/icons-vue'
import { getList, updateSort, deleteCategory } from '@/api/category'
import { geAssetsList } from '@/api/assets'
import myPagination from '@/components/Paginations.vue'
import addCategory from './addCategory.vue'
import AddMember from '@/components/orgChart/addMember.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance()
onMounted(() => {
  getCategoryList()
})

//分页
const currentPage = ref(1)
const pageSize = ref(10)
const totalNum = ref('')
const tableData = ref([])
const treeData = ref([])

const title = ref('')
const defaultProps = {
  children: 'childList',
  label: 'categoryName',
}
const listQuery = ref({
  pageNo: currentPage.value,
  pageSize: pageSize.value,
  assetsNo: '',
  categoryId: '',
})

//查询分类列表
const getCategoryList = data => {
  getList({ categoryName: data }).then(res => {
    if (res.data.code == 200) {
      treeData.value = res.data.data
      if (res.data.data.length > 0) {
        handleNodeClick()
      }
    }
  })
}

//点击分类树
const handleNodeClick = function (event) {
  console.log(event)
  if (event != null) {
    title.value = event.categoryName
    listQuery.value.categoryId = event.id
  }
  geAssetsListData()
}

//获取资产
const geAssetsListData = function () {
  geAssetsList(listQuery.value).then(res => {
    if (res.data.code == 200) {
      console.log(res.data.data)
      totalNum.value = res.data.data.total
      tableData.value = res.data.data.records
      // tableData.value = res.data.data.user.records
    }
  })
}

//移动
const moveCategory = function (node, type) {
  console.log(node)
  updateSort({ id: node.data.id, type: type }).then(res => {
    if (res.data.code == 200) {
      ElMessage({
        message: '操作成功',
        type: 'success',
      })
      getCategoryList()
    } else {
      ElMessage({
        message: res.data.msg,
        type: 'error',
      })
    }
  })
}
//删除分类
const delCategory = function (data) {
  ElMessageBox.confirm('是否确认删除?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      deleteCategory({ id: data.id }).then(res => {
        if (res.data.code == 200) {
          ElMessage({
            message: '删除成功',
            type: 'success',
          })
          getCategoryList()
        } else {
          ElMessage({
            message: res.data.msg,
            type: 'error',
          })
        }
      })
    })
    .catch(() => {})
}

const handleSelectionChange = () => {
  console.log(111)
}
//新建分类
const addCategoryRef = ref({ type: '', data: '' })
const addCategoryHandle = (type, data) => {
  console.log(type, data)
  if (type == 1) {
    //新增新的
    addCategoryRef.value.addChildHandle(type, null)
  }
  if (type == 2) {
    //新增子分类
    addCategoryRef.value.addChildHandle(type, data)
  }
  if (type == 3) {
    //修改分类
    addCategoryRef.value.addChildHandle(type, data)
  }
}
//搜索分类
const categoryName = ref('')
const searchCategory = () => {
  getCategoryList(categoryName.value)
}

//搜索人员名称
const searchState = ref('')
const searchOptions = ref([
  {
    value: 'name',
    label: '姓名',
  },
  {
    value: 'userNo',
    label: '编号',
  },
])

//添加人员
const addMemberRef = ref(null)
const addMemberHandle = () => {
  if (addMemberRef.value) {
    addMemberRef.value.addChildHandle()
  }
}

//详情查看
const detailVisible = ref(false)
const detailInfo = ref(null)
const detailHandle = row => {
  console.log('Row clicked:', row)
  detailInfo.value = row
  detailVisible.value = true
}
const closeDetailDrawer = () => {
  detailVisible.value = false
}
</script>

<style lang="scss" scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.common-layout {
  .el-aside {
    height: 100%;
    .el-aside_div {
      display: flex;
      flex-direction: column;
      .el-button_one {
        width: 240px;
        margin-top: 10px;
        height: 30px;
        color: black;
        line-height: 40px;
        margin-bottom: 10px;
      }
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
      }
    }
  }
  .el-main {
    padding: 0;
    height: 700px;
    overflow: hidden;
    .el-main_div {
      display: flex;
      justify-content: space-between;
    }
    .el-main_table {
      height: 600px;
    }
  }
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0;
  .header-left {
    display: flex;
    align-items: center;
  }
  .header-right {
    display: flex;
    align-items: center;
  }
}
.header-title {
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: bold;
  font-size: 18px;
  color: #1f2329;
  display: flex;
  align-items: self-start;
  justify-content: space-between;
  border-bottom: 1px solid #ebeef5;
  height: 40px;
}
:deep(.el-drawer__header) {
  margin-bottom: 0 !important;
}
.depart {
  display: flex;
  align-items: center;
}
.depart-img {
  width: 54px;
  height: 54px;
  margin-right: 10px;
  border-radius: 50%;
}
.depart_name {
  font-size: 18px;
  color: #202328;
  font-weight: bold;
}
.detail_item {
  height: 48px;
  margin: 30px 0 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .name {
    font-size: 14px;
    color: #656b73;
  }
  .username {
    font-size: 14px;
    color: #1f2329;
    font-weight: 500;
  }
}
.label {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #1f2329;
  .red {
    color: #ff3535;
  }
}
.my-el-tree .el-tree-node__content {
  height: 40px;
}
</style>
