<template>
  <div class="container">
    <div class="container-header">
      <div class="container-header-title">
        <span>全部资源</span>
      </div>
      <div class="container-header-btn">
        <el-button type="primary" @click="addMemberDialog = true">新增团队</el-button>
      </div>
    </div>
    <el-table v-loading="loading" :data="data_list">
      <el-table-column label="名称" align="center" prop="name" />
      <el-table-column label="创建者" align="center" prop="creator.name">
        <template #default="scope">
          <div style="display: flex; align-items: center; justify-content: center">
            <el-image :src="scope.row.creator.avatar" style="width: 30px; height: 30px; border-radius: 50%; margin-right: 10px"></el-image>
            <span>{{ scope.row.creator.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="管理者" align="center" prop="managers">
        <template #default="scope">
          <div style="display: flex">
            <template v-for="i in scope.row.manages">
              <div style="display: flex; align-items: center; justify-content: center; margin-right: 5px">
                <el-image :src="i.avatar" fit="contain" style="width: 20px; height: 20px; border-radius: 50%; margin-right: 10px"></el-image>
                <span>{{ i.name }}</span>
              </div>
            </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <div style="display: flex">
            <el-button @click="goRec(scope.row)">资源管理</el-button>
            <el-button @click="groupMember(scope.row)">成员管理</el-button>
            <el-popover placement="top-start" width="100px" trigger="hover">
              <div class="popover-btn-box">
                <div class="popover-btn" @click="claSelect(scope.row, 'category')">分类管理</div>
                <!-- <div class="popover-btn" @click="claSelect(scope.row, 'label')">标签管理</div> -->
              </div>
              <template #reference>
                <el-button>管理</el-button>
              </template>
            </el-popover>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="params.page" v-model:limit="params.limit" @pagination="getGroupList" />
  </div>
</template>
<script setup>
import useUserStore from '@/store/modules/user';
import { getGroupInfoById } from '@/api/zhihui/index.js';
const { proxy } = getCurrentInstance();
const belong = ref(useUserStore().zhFirmId);
const params = ref({
  company: belong,
  filter: {},
  limit: 10,
  page: 1,
});
const loading = ref(false);
const total = ref(0);
const data_list = ref([]);
const isLast = ref(false);

const groupMember = async row => {
  proxy.$router.push({ path: '/zhihui/firm/groupMembers', query: { id: belong.value, groupId: row.id, groupName: row.name } });
};
const goRec = row => {
  proxy.$router.push({ path: '/zh/admin/resource', query: { teamId: row.id } });
};
const getGroupList = async () => {
  if (isLast.value || loading.value) {
    return;
  }
  loading.value = true;
  let data = await getGroupInfoById(params.value);
  if (data.statusCode == 200) {
    let list = [];
    data.data.map(item => {
      list.push({
        id: item._id,
        name: item.name,
        creator: item.creator,
        manages: item.manages,
      });
    });
    if (params.value.page == 1) {
      data_list.value = list;
    } else {
      data_list.value = data_list.value.concat(list);
    }
    if (data.data.length < params.value.limit) {
      isLast.value = true;
    }
    params.value.page++;
    total.value = data.pagination.total;
    loading.value = false;
  }
};
const claSelect = (row, type) => {
  proxy.$router.push({ path: '/zh/admin/group-cate/manage/' + row.id, query: { type, from: 'group' } });
};
const resetform = () => {
  params.value = { company: belong, filter: {}, limit: 10, page: 1 };
};
getGroupList();
</script>
<style scoped lang="scss">
.container {
  padding: 30px;
  .container-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .container-header-title {
      margin-bottom: 0;
      font-size: 24px;
      font-weight: 700;
      display: flex;
      align-items: center;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 2px;
        width: 105%;
        height: 6px;
        border-radius: 3px;
        background: rgba(170, 163, 245, 0.6);
      }
    }
  }
}
.popover-btn-box {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .popover-btn {
    border-radius: 8px;
    width: 80px;
    padding: 8px;
    color: #33383e;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    text-align: center;
    &:hover {
      background-color: #f4f3ff;
    }
  }
}
</style>
