<template>
    <div class="end_item container">
        <div class="container_left end_item">
            <FormSearchGroup :searchList="accountFormSearhList" />
            <div class="page_jg_20"/>
            <Table 
                :hidePagination="true"
                class="teacher_table"
                :tableColumns="userTableColumns" 
                :tableData="userAccountData"
                :tableRowClassName="tableRowClassName"
                @rowClick="HandleSelectUser"
            ></Table>
        </div>
        <div  class="container_right end_item">
            <div class="page_search">
                <div class="search_content">
                    <div class="content_left">
                        <TabSearch :tabList="provinceTablist" 
                            :defaultTabKey="defaultProvince" tabType="line" />
                    </div>
                    <div class="content_right">
                        <span v-if="isConfigMode" class="config_switch_desc">
                            {{ selectedUser?.id ? `当前选中的员工：${selectedUser.name}` : '暂无选中的员工' }}
                            </span>
                        <el-switch v-model="isConfigMode"  style="--el-switch-on-color: #2E64FA" />
                        <span class="config_switch_desc" :style="{color:isConfigMode ? '#2E64FA' : '#999999'}">选中员工配置关系</span>
                        <el-button class="button_border" @click="HandleOpenGroup">分组管理</el-button>
                    </div>
                </div>
            </div>
            <div class="page_jg_20" />
            <Table :tableColumns="tableColumns" :tableData="groupPeopleTableData">
                 <template v-for="column in tableColumns.slice(1)" :key="column.name"   v-slot:[column.name]="{row}"> 
                    <div class="cell_container" @click="HandleAddUser(row, column.name)">
                        <template v-if="row?.[column.name]">
                            <el-tooltip
                            effect="dark"
                            :content="`${row?.[column.name].name}`"
                            placement="top-start"
                            >
                            <div v-if="isConfigMode" class="teacher_tag">
                                <span :title="row?.[column.name].name">{{ row?.[column.name].name }}</span>
                                <el-icon class="delete_icon" @click.stop="OpenDeleteDialog(row, column,)"><Close /></el-icon>
                            </div>
                            <div v-else class="disabled_teacher">
                                <span :title="row?.[column.name].name">{{ row?.[column.name].name}}</span>
                            </div>
                            </el-tooltip>
                        </template>
                        <template v-else>
                            <span v-if="isConfigMode" class="placeholder_text" >请选择员工</span>
                            <span v-else>-</span>
                        </template>
                  </div>
                </template>
            </Table>
        </div>
    </div>

    <!-- 分组管理弹窗 -->
    <FormTableEdit 
        style="flex-grow: 0;"
        addOperationName="增加分组" 
        :startDragIndex="startDragIndex" 
        :endDragIndex="endDragIndex" 
        formTitle="分组管理" 
        :middleColumnItm="{name:'groupName',label:'分组名称'}"
        :disabledDeleteRowScene="()=>{return false}"
        :disabledEditRowScene="()=>{return false}"
        :defaultTableData="gorupTableData"
        v-model:formVisible="formVisible"
        v-model:deleteFlag="deleteFlag"
        v-model:formDialogConfirmFlag="formDialogConfirmFlag"
        @editConfirm = 'HandleEditGroup'
        @addConfirm = 'HandleAddGroup'
        @deleteConfirm = 'HandleDeleteGroup'
        @entiretyConfirm = 'HandleConfirmEntiretyGroup'
        >
        <template #groupName="{row,currentIndex}">
            <el-input v-model="row.groupName" v-if="row.tmpId" placeholder="请输fdff入内容" />
            <span v-else>{{ row.groupName }}</span>
        </template>
    </FormTableEdit>


     <!-- 地区 组内用户 删除弹窗 -->
    <Dialog 
        style="flex-grow: 0;"
        v-if="dialogVisible"
        :submitLoading="dialogSubmitLoading"
        :visible="dialogVisible"
        @confirm="HandleDialogConfirm"
        @close="HandleDialogClose">
        请确认是否确认删除{{ currentDeleteColumn.label }}  {{currentDeleteRow[currentDeleteColumn.name].name}}   {{provinceTablist.find(item=>item.key == defaultProvince)?.label}}{{currentDeleteRow.region}}  的权限？
    </Dialog>

</template>


<script setup lang="ts">
import { ref } from 'vue';
import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
import {accountFormSearhList} from './formSearch'
import Table from '@/baseComponents/Table.vue';
import TabSearch from '@/baseComponents/TabSearch.vue';
import FormTableEdit from '@/baseComponents/formTableEdit/index.vue'

import Dialog from '@/baseComponents/Dialog.vue';

import {tableColumns,userTableColumns} from './table'
import {provinceTablist} from './tabSearch'


/**
 * 1. 左侧 员工相关信息及操作
 */
// 员工账号信息
const userAccountData = ref([
    {
        account:'xxx',
        name:'xx',
        id:'1',
    },
    {
        account:'xxx',
        name:'xx2',
        id:'2',
    },
])
// 当前选中的用户
const selectedUser = ref()
// 设置表行选中 样式
const tableRowClassName = ({row,rowIndex})=>{
  if(row.id == selectedUser.value?.id){
    return 'active_row'
  }
}
// 行选中 选择员工
const HandleSelectUser = (user) => {
  selectedUser.value = {
    id:user.id,
    name:user.name,
    account:user.account,
  };
};



/**
 * 2. 右侧分组展示信息 及操作
 */
// 分组信息
const isConfigMode = ref(false)
const defaultProvince = ref('beijing')
const groupPeopleTableData = ref([
     {
        id:'1',
        region:'东城区',
        project1:{id:'1',name:'xxx'},
        project2:{id:'1',name:'xxx'},
        project3:{id:'1',name:'xxx'},
        project4:{id:'1',name:'xxx'},
        project5:{id:'1',name:'xxx'},
        project6:{id:'1',name:'xxx'},
        project7:{id:'1',name:'xxx'},
    },
    {
        id:'2',
        region:'西城区',
        project1:{id:'1',name:'xxx'},
        project2:{id:'1',name:'xxx'},
        project3:{id:'1',name:'xxx'},
        project4:{id:'1',name:'xxx'},
        project5:{id:'1',name:'xxx'},
        project6:{id:'1',name:'xxx'},
        project7:{id:'1',name:'xxx'},
    },
])

// 添加员工
const HandleAddUser = async (row, cell) => {
    if (!isConfigMode.value) return;
    if (!selectedUser.value) return;

    let teacherMsg = { 
        id: selectedUser.value?.id, 
        name: selectedUser.value?.name,
        account:selectedUser.value?.account 
    }

    if (!row[cell]) {
        row[cell] = [];
    
    }
    row[cell] = teacherMsg;

};


/**
 * 3. 删除员工的弹窗 及操作
 */
const dialogVisible = ref(false)
const dialogSubmitLoading = ref(false)
const currentDeleteCell = ref()  //当前准备删除的（员工）单元格数据
const currentDeleteRow = ref()  //当前准备删除的（员工）所在行数据
const currentDeleteColumn = ref()  //当前准备删除的（员工）所在列信息
// 移除员工
const HandleDialogConfirm = ()=>{
    let id = null
    let res = undefined
    currentDeleteRow.value[currentDeleteColumn.value.name] = ''
    // id = currentDeleteCell.value.id
    HandleDialogClose()
}

const HandleDialogClose = ()=>{
    currentDeleteCell.value = null
    currentDeleteRow.value = null
    currentDeleteColumn.value = null
    dialogVisible.value = false
}
const OpenDeleteDialog = (row, cellObj)=>{
    if (!isConfigMode.value) return;
    dialogVisible.value = true
    currentDeleteCell.value = row[cellObj.name]
    currentDeleteRow.value = row
    currentDeleteColumn.value = cellObj
}


/**
 * 4. 分组管理 弹窗相关配置
 */
const formVisible = ref(false)
const formDialogConfirmFlag = ref('')
const deleteFlag = ref('')
const gorupTableData = ref([
    {
        id:'xxx',
        groupName:'xxxx'
    }
])
const HandleOpenGroup = ()=>{
    formVisible.value = true
}
const startDragIndex = ()=>{
    return 0
}
const endDragIndex = (tableData)=>{
    return tableData.length
}
const HandleEditGroup = (row,params)=>{
    row.editFlag = ''
}
const HandleAddGroup = (row,params)=>{
    row.tmpId = ''
}
const HandleDeleteGroup = (row)=>{
    gorupTableData.value = gorupTableData.value.filter(item=>{
        return item.id !== row.id
    })
    // 删除执行内容
    deleteFlag.value = 'success'
}
const HandleConfirmEntiretyGroup = ()=>{
    setTimeout(()=>{
        formDialogConfirmFlag.value = 'fail'
    },1000)
}



</script>


<style lang="scss" scoped>

.container{
    width: 100%;
    overflow: auto;
    flex-direction: row;
    gap:20px;

    .container_left{
        width: 200px;

        :deep(.el-table__body){
            tr.active_row td
            {
                background-color: rgba(46, 100, 250,0.1) !important;
                border:none;
                color: #2e64fa;
            }
        }


    }

    .container_right{
        width: calc(100% - 220px);
        .content_left{
            line-height: 1.5;
        }
        .content_right{
            align-items: center;
        }
        .config_switch_desc{
            font-size: 14px;
        }

        .cell_container {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
     
            text-align: center;
            flex-wrap: wrap;
            padding: 8px 0;
            gap: 8px;

            .placeholder_text,
            .disabled_teacher{
                width: 90px;
                height: 34px;
                font-weight: 400;
                font-size: 14px;
                text-align: center;
                line-height: 34px;
                background-color: #f3f3f3;
                border-radius: 4px;
                cursor: pointer;
            }
            .placeholder_text {
                color: #CCCCCC;
            }
            .disabled_teacher {
                color: #666666;
            }

            // 教师标签样式
            .teacher_tag {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 8px;

                min-width: 90px;
                height: 34px;
                font-weight: 400;
                font-size: 14px;
                color: #2E64FA;
                text-align: center;
                line-height: 34px;
                background: rgba(46, 100, 250, 0.1);
                border-radius: 4px;

                // 删除图标样式 (对应原 img 标签样式)
                .delete_icon {
                width: 12px;
                height: 12px;
                cursor: pointer;
                font-size: 12px;
                margin-left: 10px; /* 保留原代码中 i 标签的 margin-left 习惯 */
                }
            }
        }



    }
}

</style>