<template>
  <div class="container" :style="{ height: innerHeight - 50 + 'px' }">
    <div class="content">
      <div class="header">
        <div><h1 class="title">我的团队</h1></div>
        <div class="header-btn">
          <el-button type="primary" @click="groupInfoDialog = true" v-hasPermi="['zh:group:create']">创建团队</el-button>
        </div>
      </div>
      <el-scrollbar style="margin-top: 20px" :style="{ height: innerHeight - 240 + 'px' }">
        <div class="content-list-item" v-for="item in teams_list" :key="item.id">
          <div class="content-list-item-name">{{ item.name }}</div>
          <div class="content-list-item-time">{{ dayjs(item.createdAt).format('YYYY-MM-DD HH:MM:DD') }}</div>
          <div class="content-list-item-btns">
            <el-button type="primary" round @click="updateInfo(item)" v-hasPermi="['zh:group:set']">设置</el-button>
            <el-button type="primary" round @click="goMembers(item)" v-hasPermi="['zh:group:view']">查看成员</el-button>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <el-dialog v-model="groupInfoDialog" title="团队信息设置" append-to-body @submit.native.prevent>
      <el-form :modal="groupInfo">
        <el-form-item label="团队名称">
          <el-input v-model="groupInfo.name" placeholder="请输入团队名称"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="updateSubmit">确 定</el-button>
          <el-button @click="groupInfoDialog = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { getProfile, updateGroupInfo, updateGroupInfoApp, getZhiHuiSign, createGroup, saveGroup, updateGroup } from '@/api/zhihui/index.js';
import useUserStore from '@/store/modules/user';
import dayjs from 'dayjs';

const { proxy } = getCurrentInstance();

const teams_list = ref([]);
const groupInfoDialog = ref(false);
const innerHeight = ref(0);
const isLast = ref(false);
const isLoading = ref(false);
innerHeight.value = window.innerHeight;
const zhFirmId = useUserStore().zhFirmId; //企业id

const groupInfo = ref({});

async function init() {
  let data = await getProfile(); //获取团队列表
  if (data.statusCode == 200) {
    teams_list.value = data.data.team;
  }
}

function updateInfo(item) {
  groupInfoDialog.value = true;
  groupInfo.value = { ...item };
}
//更新信息
async function updateSubmit() {
  if (!groupInfo.value._id) {
    if (!zhFirmId) {
      return proxy.$modal.msgError('请先加入企业');
    }
    let data = await createGroup({ companyId: zhFirmId, name: groupInfo.value.name });
    if (data.statusCode == 200) {
      let result = await saveGroup({ name: groupInfo.value.name, zhFirmId: zhFirmId, zhGroupId: data.data._id });
      if (result.code == 200) {
        proxy.$modal.msgSuccess('创建成功');
        let zhGroupIds = useUserStore().zhGroupIds;
        if (zhGroupIds) {
          let ids = zhGroupIds.split(',');
          ids.push(data.data._id);
          useUserStore().updateZHInfo(zhFirmId, ids.join(','));
        }
      }
      groupInfoDialog.value = false;
      init();
    }
  } else {
    let data = await updateGroupInfo({ id: groupInfo.value._id, name: groupInfo.value.name });
    if (data.statusCode == 200) {
      proxy.$modal.msgSuccess('修改成功');
      updateGroup({ zhGroupId: groupInfo.value._id, name: groupInfo.value.name });
      let item = teams_list.value.filter(e => {
        return e._id == groupInfo.value._id;
      });
      item[0].name = groupInfo.value.name;
      groupInfoDialog.value = false;
    } else {
      proxy.$modal.msgError('修改失败-' + data.message);
    }
  }
}
function goMembers(item) {
  proxy.$router.push({ path: 'groupMembers', query: { id: zhFirmId, groupId: item._id, groupName: item.name } });
}

async function updateInfoApp() {
  let list = ['61639e52a3cea70159d76304', '658bd3a1bf94792ccf660bd0'];
  let option = {
    appid: import.meta.env.VITE_APP_ZHI_HUI_APPID,
    id: '658a430feb6212118e8c35bc',
    manages: JSON.stringify(list),
  };
  let result = await getZhiHuiSign(option);
  option.manages = list;
  option.sig = result.data;
  updateGroupInfoApp(option);
}
init();
</script>
<style scoped lang="scss">
.container {
  padding: 30px;
  background-color: #f7f7f7;
  .content {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 20px;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-weight: bold;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: 2px;
          width: 105%;
          height: 6px;
          border-radius: 3px;
          background: rgba(170, 163, 245, 0.6);
        }
      }
    }
  }
  .content-list-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    .content-list-item-name {
      font-size: 16px;
      font-weight: bold;
      width: 20%;
    }
    .content-list-item-time {
      width: 20%;
    }
    .content-list-item-btns {
    }
  }
}
</style>
