<template>
    <!-- 团队管理 -->
    <el-card class="analysis-container">
        <div class="table-container">
            <TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="false" ref="teamTableRef"
                :columnsList="columnsList" :request-api="listTeamAPI" :handleColWidth="250">
                <template slot="tableTitle">
                    <h3>数据列表</h3>
                </template>
                <template slot="tableActions">
                    <el-button @click="handleAdd" v-hasPermi="['system:team:add']" class="add-btn"><i
                            class="el-icon-plus"></i> 新增团队</el-button>
                </template>
                <template slot="teamNum" slot-scope="{ data }">
                    <span
                      class="version-link"
                      @click="handleUserListClick(data)"
                      v-if="data.teamNum"
                    >
                      {{ data.teamNum }}
                    </span>
                </template>

                <template slot="handle" slot-scope="{ data }">
                    <el-button type="text" v-hasPermi="['system:team:edit']" class="action-btn"
                        @click="handleUpdate(data)">
                        编辑
                    </el-button>
                    <el-button type="text" v-hasPermi="['system:team:del']" class="action-btn" style="color: #db3e29"
                        @click="handleDelete(data)">
                        删除
                    </el-button>
                </template>
            </TableModel>
        </div>
        <!-- 新建团队/修改团队 -->
        <TeamForm ref="teamForm" v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
            @closeDialog="closeDialog" :width="600" />
    </el-card>
</template>

<script>
import TableModel from '@/components/TableModel2'
import { columnsList, formLabel } from './config'
import { listTeamAPI, delTeamAPI } from '@/api/system/team'
import TeamForm from './components/TeamForm.vue'
import {encryptWithSM4} from "@/utils/sm";
export default {
    name: 'TeamManage',
    components: {
        TableModel,
        TeamForm
    },
    data() {
        return {
            formLabel,
            columnsList,
            listTeamAPI,
            isflag: false,
            isAdd: '',
            title: '新增团队',
            row: {},
            loading: false,
        }
    },

    created() { },

    methods: {
        handleUserListClick(data) {
          this.$router.push({
            name: 'UserList',
            query: {
              teamId: encryptWithSM4(data.teamId.toString()),
            },
            title: `人员信息`
          });
        },

        /** 新增按钮操作 */
        handleAdd() {
            this.title = '新增团队'
            this.isAdd = 'add'
            this.row = {}
            this.isflag = true
        },

        /** 修改操作 */
        handleUpdate(row) {
            this.title = '修改团队'
            this.isAdd = 'edit'
            this.row = row
            this.isflag = true
        },

        /* 搜索操作 */
        handleQuery() {
            this.$refs.teamTableRef.getTableList()
        },

        closeDialog() {
            this.isflag = false;
        },

        /** 删除操作 */
        handleDelete(row) {
            this.$confirm(
                `确定要删除"${row.teamName}"吗？删除后将无法恢复！`,
                '操作提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    dangerouslyUseHTMLString: true,
                    customClass: 'delete-confirm-dialog',
                },
            ).then(() => {
                delTeamAPI({
                    teamId: row.teamId,
                })
                    .then((res) => {
                        if (res.code === 200) {
                            this.$message.success('删除成功')
                            this.handleQuery()
                        } else {
                            this.$message.error(res.msg || '删除失败')
                        }
                    })
                    .catch((error) => {
                        console.error('删除失败:', error)
                    })
            })
        },
    },
}
</script>
<style scoped lang="scss">
.analysis-container {
    height: calc(100vh - 84px);
    overflow: hidden;
    background: linear-gradient(180deg, #f1f6ff 20%, #e5efff 100%);
}

::v-deep .table-card {
    height: calc(100vh - 230px) !important;
}

.add-btn {
    width: 121px;
    height: 36px;
    background: #1f72ea;
    box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
    border-radius: 4px 4px 4px 4px;
    color: #fff;
    border: none;
    font-size: 14px;
    transition: all 0.3s;

    &:hover {
        background: #4a8bff;
        box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
    }
}

.action-btn {
    margin-right: 8px;

    &:last-child {
        margin-right: 0;
    }
}

.version-link {
  color: #1F72EA;
  cursor: pointer;
  transition: color 0.3s ease;

  &:hover {
    color: #4A8BFF;
  }
}

</style>
