ChuangHeng/src/views/modules/agent/program.vue

<template>
    <div class="page">
        <div class="title">{{ title }}</div>
        <div class="tabs">
            <div class="t_pre" :class="{'active':tidx===1}" @click="handleChangeTab(1)">活动项目</div>
            <div class="t_pre" :class="{'active':tidx===2}" @click="handleChangeTab(2)">已完成</div>
            <!-- <div class="t_pre" :class="{'active':tidx===3}" @click="handleChangeTab(3)">已归档</div>-->
            <div class="t_add" @click="handleAdd" v-hasPermi="['core:project:add']">+ 创建新项目</div>
        </div>
        <template v-if="tidx===1">
            <div class="content">
                <template v-if="teamList.length">
                    <div class="team_user_list">
                        <div class="tul_left">
                            <div class="tull_top">
                                <div class="tullt_l">项目管理</div>
                                <div class="tullt_r" @click="handleAddTeam" v-hasPermi="['core:project:addTeam']">+添加团队</div>
                            </div>
                            <div class="tull_query queryInput">
                                <el-input v-model="programName" placeholder="请输入公司名称" @keyup.enter.native="getProgramList"></el-input>
                                <img src="@/assets/images/agent/query_mini.png">
                            </div>
                            <div class="tull_list">
                                <div class="tull_item" :class="{'active':item.select}" v-for="(item,index) in companyList" :key="index" @click="handleExpand(item,index)">
                                    <div class="tname">
                                        <div>
                                            <img src="@/assets/images/agent/down_sj.png">
                                            <span>{{ item.enterpriseName }}</span>
                                        </div>
                                        <el-popover placement="right" width="177" trigger="click">
                                            <div class="tl_czs">
                                                <div class="tlc_pre" @click="handleProgramDetail(item)" v-hasPermi="['core:program:info']">项目详情</div>
                                                <div class="tlc_pre" @click="handleProgramDelete(item)" v-hasPermi="['core:program:delete']">删除项目</div>
                                            </div>
                                            <i slot="reference" class="el-icon-more" style="font-size: 14px;color: #999; transform: rotate(90deg);" @click.stop="handleSetTeam(team,idx)"></i>
                                        </el-popover>
                                    </div>
                                    <template v-if="item.expand&&item.teams&&item.teams.length">
                                        <div class="tuser_list" :class="{'active':team.select}" v-for="(team,idx) in item.teams" :key="idx" @click.stop="handleSelect(team,idx)">
                                            <span>{{ team.teamName }}</span>
                                            <span>（{{ team.teamNum||0 }}人）</span>
                                            <el-popover placement="right" width="177" trigger="click">
                                                <div class="tl_czs">
                                                    <div class="tlc_pre" @click="handleTeamDetail(team,item)" v-hasPermi="['core:team:info']">团队详情</div>
                                                    <div class="tlc_pre" @click="handleTeamDelete(team)" v-hasPermi="['core:team:delete']">删除团队</div>
                                                </div>
                                                <i slot="reference" class="el-icon-more" style="font-size: 14px;color: #999; transform: rotate(90deg);" @click.stop="handleSetTeam(team,idx)"></i>
                                            </el-popover>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                        <div class="tul_right">
                            <div class="tulr_top">
                                <div class="tulrt_l queryInput">
                                    <el-input v-model="queryParams.realName" placeholder="请输入姓名查询" @keyup.enter.native="getUserList"></el-input>
                                    <img src="@/assets/images/agent/query_mini.png">
                                </div>
                                <div class="tulrt_r">
                                    <div class="tr_btn" @click="handleDownloadExcel" v-hasPermi="['core:project:downloadExcel']" v-if="programid&&teamid">模板下载</div>
                                    <el-upload v-if="programid&&teamid"
                                        :action="uploadUrl"
                                        :data="{enterpriseId: programid, teamId: teamid}"
                                        :headers="uploadHeaders"
                                        :before-upload="handleBeforeUpload"
                                        :on-success="handleSuccess"
                                        >
                                        <div class="tr_btn" v-hasPermi="['sys:user:export']">批量导入</div>
                                    </el-upload> 
                                    <div class="tr_btn" @click="handleAddUser" v-hasPermi="['sys:user:add']">添加成员</div>
                                </div>
                            </div>
                            <el-table :data="userList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无人员" max-height="578px" style="margin-top: 16px;">
                                <el-table-column label="序号" width="50">
                                    <template #default="scope">
                                        {{ scope.$index + 1 }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="姓名" prop="realName"></el-table-column>
                                <el-table-column label="性别" prop="gender">
                                    <template #default="{ row }">{{ genderCfg[row.gender]||'未知' }}</template>
                                </el-table-column>
                                <el-table-column label="类型" prop="category">
                                    <template #default="{ row }">{{ UserCategory.find(u=>u.value===row.category)?.label ||'未知' }}</template>
                                </el-table-column>
                                <el-table-column label="所属部门" prop="dept"></el-table-column>
                                <el-table-column label="手机号码" prop="mobile"></el-table-column>
                                <el-table-column label="职位" prop="post"></el-table-column>
                                <el-table-column label="级别" prop="level"></el-table-column>
                                <el-table-column label="分工" prop="divisionOfLabour"></el-table-column>
                                <!-- <el-table-column label="上级" prop="realName"></el-table-column> -->
                                <el-table-column label="创建时间" prop="createDate" width="200"></el-table-column>
                                <el-table-column label="操作" width="150">
                                    <template #default="scope">
                                        <el-button link type="text" size="mini" @click="handleEdit(scope.row)" v-hasPermi="['sys:user:update']">编辑</el-button>
                                        <el-button link type="text" size="mini" @click="handleDelete(scope.row)" v-hasPermi="['sys:user:delete']">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-row style="display: flex;justify-content: center;">
                                <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="queryParams.page"
                                    :page-sizes="[5, 10, 20, 50]"
                                    :page-size="10"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="total"
                                    v-show="total > 0">
                                </el-pagination>
                            </el-row>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="empty">
                        <img src="@/assets/images/agent/team.png">
                        <p>您还没有任何项目及团队成员信息</p>
                        <div class="e_add" @click="handleAdd" v-hasPermi="['core:project:add']">+ 创建新项目</div>
                    </div>
                </template>
            </div>
        </template>
        <template v-else-if="tidx===2"></template>
        <template v-else-if="tidx===3"></template>
        <el-drawer :title="userTitle" :visible.sync="userShow" append-to-body size="60%" @close="userShow=false">
            <el-form ref="userRef" :model="userForm" :rules="userRules" label-width="100px" style="width: 90%;margin: 0 auto;">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="姓名" prop="realName">
                      <el-input v-model="userForm.realName" placeholder="请输入姓名" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="性别" prop="gender">
                        <el-select v-model="userForm.gender" placeholder="请选择性别" style="width: 100%;">
                            <el-option label="男" :value="0"></el-option>
                            <el-option label="女" :value="1"></el-option>
                            <el-option label="保密" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                        <el-form-item label="类型" prop="category">
                            <el-select v-model="userForm.category" placeholder="请选择类型" style="width: 100%;">
                                <el-option v-for="item in UserCategory" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="手机号码" prop="mobile">
                      <el-input type="number" v-model="userForm.mobile" placeholder="请输入手机号码" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="所属部门" prop="dept">
                      <el-input v-model="userForm.dept" placeholder="请输入所属部门" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="教育程度" prop="education">
                        <el-input v-model="userForm.education" placeholder="请输入教育程度" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="分工" prop="divisionOfLabour">
                      <el-input v-model="userForm.divisionOfLabour" placeholder="请输入分工" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="职位" prop="post">
                      <el-input v-model="userForm.post" placeholder="请输入职位" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="级别" prop="level">
                        <el-input v-model="userForm.level" placeholder="请输入级别" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="人物简介" prop="introduction">
                        <el-input type="textarea" :rows="2" v-model="userForm.introduction" placeholder="请输入人物简介" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="人物故事" prop="userStory">
                        <el-input type="textarea" :rows="2" v-model="userForm.userStory" placeholder="请输入人物故事" />
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
            <div class="demo-drawer__footer" style="display: flex;justify-content: end;">
                <el-button :loading="buttonLoading2" type="primary" @click="submitForm2" v-hasPermi="['sys:user:save']">保 存</el-button>
                <el-button @click="cancel2" style="margin-right: 5%;">取 消</el-button>
            </div>
        </el-drawer>
        <el-drawer title="团队详情" :visible.sync="teamShow" append-to-body size="60%" @close="teamShow=false">
            <el-form ref="teamRef" :model="teamForm" :rules="teamRules" label-width="120px" style="width: 90%;margin: 0 auto;">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="所属公司名称" prop="companyName">
                        <el-input v-model="teamForm.companyName" placeholder="请输入所属公司名称" disabled/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="团队类型" prop="teamName">
                        <el-input v-model="teamForm.teamName" placeholder="请输入团队类型" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="团队故事" prop="teamStory">
                        <el-input type="textarea" v-model="teamForm.teamStory" placeholder="请输入团队故事" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="项目阶段及状态" prop="projectSituation">
                        <el-input type="textarea" v-model="teamForm.projectSituation" placeholder="请输入项目阶段及状态" />
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
            <div class="demo-drawer__footer" style="display: flex;justify-content: end;">
                <el-button :loading="buttonLoading3" type="primary" @click="submitForm3" v-hasPermi="['core:team:save']">保 存</el-button>
                <el-button @click="cancel3" style="margin-right: 5%;">取 消</el-button>
            </div>
        </el-drawer>
        <el-drawer title="项目详情" :visible.sync="programShow" append-to-body size="60%" @close="programShow=false">
            <el-form ref="programRef" :model="programForm" :rules="programRules" label-width="140px" style="width: 90%;margin: 0 auto;">
                <el-form-item label="公司名称" prop="enterpriseName">
                    <el-input v-model="programForm.enterpriseName" placeholder="请输入公司名称" />
                </el-form-item>
                <el-form-item label="统一社会信用代码" prop="creditCode">
                    <el-input v-model="programForm.creditCode" placeholder="请输入统一社会信用代码" />
                </el-form-item>
                <el-form-item label="所在地区" prop="area">
                    <el-select v-model="programForm.province" :placeholder="disabled ? '' : '省'" clearable style="width: 32%"
                        @change="(val) => {  regionChange(val, 'province'); }">
                        <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="programForm.city" :placeholder="disabled ? '' : '市'" clearable style="width: 32%;margin: 0 2%"
                        @change="(val) => {  regionChange(val, 'city'); }">
                        <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="programForm.area" :placeholder="disabled ? '' : '区'" clearable style="width: 32%;"
                        @change="(val) => {  regionChange(val, 'area'); }">
                        <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在行业" prop="industryCode">
                    <el-select v-model="programForm.industryCode" placeholder="请选择所在行业" style="width: 100%;">
                        <el-option v-for="item in companyIndustry" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="人员规模" prop="staffSizeCode">
                    <el-select v-model="programForm.staffSizeCode" placeholder="请选择人员规模" style="width: 100%;">
                        <el-option v-for="item in staffSize" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目教练" prop="">
                    <el-popover
                        placement="top-start"
                        title="选择教练"
                        width="790"
                        trigger="click"
                        v-model="coachShow"
                        @show="hangleSelectCoach">
                        <div class="ed_coach adf">
                            <div class="ec_l">
                                <el-input placeholder="请输入教练名搜索" suffix-icon="el-icon-search" v-model="coachName" style="width: 100%;" @keyup.enter.native="handleQueryCoach"></el-input>
                                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="margin-top: 65px;">全选</el-checkbox>
                                <div class="ecl_cbs">
                                    <el-checkbox v-model="coach.checked" v-for="(coach,index) in coachList" :key="coach.id" @change="handleChangeCoach" style="margin-top: 24px;display: block;">{{ coach.realName }}</el-checkbox>
                                </div>
                            </div>
                            <div class="ec_r">
                                <div class="ecr_text">已选择（{{ coachSelecteds.length }}/<span>{{ coachList.length }}</span>）</div>
                                <div class="ecr_names">
                                    <div class="en_pre adfacjc" v-for="(item,index) in coachSelecteds" :key="index">
                                        <span>{{ item.realName }}</span>
                                        <img src="@/assets/images/agent/delete_mini.png" @click="handleDeleteCoach(item,index)">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="demo-drawer__footer" style="display: flex;justify-content: end;margin-top: 20px;">
                            <el-button :loading="buttonLoading5" type="primary" @click="submitForm5">确 认</el-button>
                            <el-button @click="cancel5" style="margin-right: 5%;">取 消</el-button>
                        </div>
                        <div slot="reference">
                            <div class="f_s adfacjb" v-if="programForm.coachList.length===0">
                                <div class="fs_text" :class="{'active':coachs!=='请选择'}">{{ coachs }}</div>
                                <i class="el-icon-arrow-down" style="color: #C0C4CC;"></i>
                            </div>
                            <div class="f_s adfac" v-else>
                                <p>{{ cocahNames }}</p>
                            </div>
                        </div>
                    </el-popover>
                </el-form-item>
                <el-form-item label="公司背景" prop="background">
                    <el-input type="textarea" :rows="2" v-model="programForm.background" placeholder="请输入公司背景" />
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer" style="display: flex;justify-content: end;">
                <el-button :loading="buttonLoading4" type="primary" @click="submitForm4" v-hasPermi="['core:project:save']">保 存</el-button>
                <el-button @click="cancel4" style="margin-right: 5%;">取 消</el-button>
            </div>
        </el-drawer>
        <el-drawer title="添加团队" :visible.sync="programTeamShow" append-to-body size="80%" @close="programTeamShow=false">
            <el-form :model="programTeamForm" :rules="programTeamRules" ref="programTeamRef" label-width="130px" style="margin: 0 25px;">
                <el-row style="width: 100%;">
                    <el-col :span="12">
                        <el-form-item label="所属公司名称" prop="companyName">
                            <el-input v-model="programTeamForm.companyName" clearable placeholder="请输入所属公司名称" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="团队类型" prop="teamName">
                            <el-input v-model="programTeamForm.teamName" clearable placeholder="请输入团队类型"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="width: 100%;">
                    <el-col :span="24">
                        <el-form-item label="团队故事" prop="teamStory">
                            <el-input type="textarea" v-model="programTeamForm.teamStory" clearable placeholder="请输入团队故事"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="width: 100%;">
                    <el-col :span="24">
                        <el-form-item label="项目阶段及状态" prop="projectSituation">
                            <el-input type="textarea" v-model="programTeamForm.projectSituation" clearable placeholder="请输入项目阶段及状态"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="demo-drawer__footer" style="display: flex;justify-content: end;">
                <el-button :loading="buttonLoading6" type="primary" @click="submitForm6" v-hasPermi="['core:team:save']">保 存</el-button>
                <el-button @click="cancel6" style="margin-right: 5%;">取 消</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script setup name="">
    import Cookies from "js-cookie";
    import { ref, reactive, getCurrentInstance,onMounted } from 'vue'
    import { useRegion } from "@/mixins/region-module";
    const { proxy } = getCurrentInstance();
    const { companyIndustry, staffSize, UserCategory} = proxy.useDict("companyIndustry", "staffSize", "UserCategory");
    const {
        provinceOptions,
        cityOptions,
        areaOptions,
        provincAreaDetailInfoList,
        cityAreaDetailInfoList,
        countyAreaDetailInfoList,
        regionChange
    } = useRegion();
    provincAreaDetailInfoList();
    import { 
        getCoachProgramList,
        getCoachProgramInfo,
        addProgramTeam,
        updateCoachProgram,
        deleteCoachProgram,
        getCoachList,
        addCoach,
        updateCoach,
        getCoachInfo,
        deleteCoach,
        updateProgramTeam,
        getProgramTeamInfo,
        deleteProgramTeam 
    } from '@/api/agent/index.js'
    const uploadUrl = `${window.SITE_CONFIG["apiURL"]}/sys/user/import`
    const uploadUrl2 = `${window.SITE_CONFIG["apiURL"]}/sys/oss/uploadFile`
    const uploadHeaders = {token:Cookies.get("token")}; 

    const tidx = ref(1);
    const teamList = ref([1]);
    const programName = ref('')
    const companyList = ref([]);
    const programid = ref('')
    const teamid = ref('')
    const loading = ref(false);
    const queryParams = ref({
        page:1,
        limit:10,
        teamId:'',
        realName:'',
    })
    const userList = ref([]);
    const total = ref(0);
    const genderCfg = {
        '0': '男',
        '1': '女',
        '2': '保密',
    }
    const userTitle = ref('添加成员信息');
    const userShow = ref(false);
    const userRef = ref(null);
    const userForm = ref({
        id:'',
        enterpriseId:'',
        teamId:'',
        realName:'',
        username:'',
        gender:'',
        birthdate:'',
        mobile:'',
        dept:'',
        education:'',
        divisionOfLabour:'',
        post:'',
        level:'',
        userType:2,
        category:'',
        introduction:'',
        userStory:''
    });
    const userRules = ref({
        realName: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        gender: [
            { required: true, message: '请选择性别', trigger: 'change' }
        ],
        birthdate: [
            { required: true, message: '请选择出生日期', trigger: 'change' }
        ],
        mobile: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        dept: [
            { required: true, message: '请输入所属部门', trigger: 'blur' }
        ],
        education: [
            { required: true, message: '请输入教育程度', trigger: 'blur' }
        ],
        divisionOfLabour: [
            { required: true, message: '请输入分工', trigger: 'blur' }
        ],
        post: [
            { required: true, message: '请输入职位', trigger: 'blur' }
        ],
        level:[
            { required: true, message: '请输入级别', trigger: 'blur' }
        ],
        category:[
            { required: true, message: '请选择成员类型', trigger: 'change' }
        ],
        introduction:[
            { required: true, message: '请输入成员简介', trigger: 'blur' }
        ],
        userStory:[
            { required: true, message: '请输入成员故事', trigger: 'blur' }
        ]
    });
    const buttonLoading2 = ref(false);
    const teamRef = ref(null);
    const teamShow = ref(false);
    const teamForm = ref({
        id:'',
        enterpriseId:'',
        companyName:'',
        teamName:'',
        teamStory:'',
        workTasks:'',
        projectSituation:'',
        background:''
    });
    const teamRules = ref({
        teamName: [
            { required: true, message: '请输入所属公司名称', trigger: 'blur' }
        ],
        teamStory: [
            { required: true, message: '请输入团队故事', trigger: 'blur' }
        ],
        workTasks: [
            { required: true, message: '请输入工作任务', trigger: 'blur' }
        ],
        projectSituation: [
            { required: true, message: '请输入项目阶段及状态', trigger: 'blur' }
        ],
        background:[
            { required: true, message: '请输入团队背景', trigger: 'blur' }
        ]
    });
    const buttonLoading3 = ref(false);
    const programForm = ref({
        id:'',
        enterpriseName: '',
        creditCode: '',
        industryCode: '',
        staffSizeCode: '',
        province:'',
        city:'',
        area:'',
        areaCode:'',
        coachList:[]
    });
    const programRules = ref({
        enterpriseName: [
            { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        creditCode: [
            { required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
        ],
        industryCode: [
            { required: true, message: '请选择所在行业', trigger: 'change' }
        ],
        staffSizeCode: [
            { required: true, message: '请选择人员规模', trigger: 'change' }
        ],
        area: [
            { required: true, message: '请选择所在地区', trigger: 'change' }
        ]
    });
    const programRef = ref(null);
    const programShow = ref(false);
    const coachs = ref('请选择')
    const coachName = ref('')
    const coachShow = ref(false)
    const coachSelecteds = ref([])
    const coachList = ref([])
    const isIndeterminate = ref(false)
    const checkAll = ref(false)
    const cocahNames = ref('')
    const buttonLoading4 = ref(false);
    const buttonLoading5 = ref(false);
    const title = proxy.$route.meta.title;

    const programTeamForm = ref({
        id:'',
        enterpriseId:'',
        companyName:'',
        teamName:'',
        workTasks:'',
        teamStory:'',
        projectSituation:'',
        file:'',
        users:[]
    });
    const programTeamRules = ref({
        companyName: [
            { required: true, message: '请输入所属公司名称', trigger: 'blur' }
        ],
        teamName: [
            { required: true, message: '请输入团队类型', trigger: 'blur' }
        ],
        teamStory: [
            { required: true, message: '请输入团队故事', trigger: 'blur' }
        ],
        projectSituation: [
            { required: true, message: '请输入项目阶段及状态', trigger: 'blur' }
        ]
    });
    const programTeamRef = ref(null);
    const programTeamShow = ref(false);
    const buttonLoading6 = ref(false);
    const addType = ref(1)

    const handleChangeTab = (idx) => {
        tidx.value = idx;
    }
    const handleAdd = () => {
        proxy.$router.push('/agentProgramAddTeam');
    };

    const handleExpand = (item, index) => {
        programid.value = item.id;
        programTeamForm.value.companyName = item.enterpriseName;
        item.expand = !item.expand;
        companyList.value.forEach(c => { c.select = false; });
        item.select = true;
    };
    const handleSelect = (team, index) => {
        teamid.value = team.teamId;
        queryParams.value.teamId = team.teamId;
        companyList.value.forEach(item => {
            if(item.teams){
                item.teams.forEach(t => t.select = false);
            }
        });
        team.select = true;
        getUserList();
    };

    const handleSetTeam = (team, index) => {

    };

    const handleAddTeam = () => {
        if(!programid.value) return proxy.$message.error('请先选择项目')
        programTeamShow.value = true;
    };

    
    const getUserList = async () => {
        let query = {...queryParams.value};
        loading.value = true;
        const res = await getCoachList(query);
        userList.value = res.data.list;
        total.value = res.data.total;
        loading.value = false;
    }
    const handleSizeChange = (e)=>{
        queryParams.value.limit = e;
        getUserList();
    }
    const handleCurrentChange = (e)=>{
        queryParams.value.page = e;
        getUserList();
    }

    const handleTeamDetail = (team,item) => {
        getProgramTeamInfo(team.teamId).then(res=>{
            if(res.code!==0) return proxy.$message.error(res.msg);
            teamForm.value = {...teamForm.value,...res.data};
            teamForm.value.companyName = item.enterpriseName;
            teamShow.value = true;
        })
    }
    const handleTeamDelete = async team => {
        await proxy.$modal.confirm('确认删除团队【' + team.teamName + '】吗？').finally(() => buttonLoading3.value = false);
        deleteProgramTeam(team.teamId).then(res=>{
            if(res.code === 0) proxy?.$modal.msgSuccess("删除成功");
            else return proxy?.$modal.msgError(res.msg);
            getProgramList();
        });
    }

    const getProgramList = async () => {
        loading.value = true;
        const res = await getCoachProgramList({enterpriseName:programName.value});
        if(res.code!==0) return proxy.$message.error(res.msg);
        companyList.value = res.data.map((d,i)=>{
            return {
                ...d,
                expand: false,
                select: false,
                teams: res.data[i].teams.map(t => {
                    return {
                        ...t,
                        select: false
                    }
                })
            }
        });
        loading.value = false;
        userList.value = [];
        total.value = 0;
        queryParams.value.teamId = '';
        queryParams.value.page = 1;
        queryParams.value.realName = '';
    }

    const handleEdit = (row) => {
        reset();
        getCoachInfo(row.id).then(response => {
            userForm.value = {...userForm.value,...response.data};
            userTitle.value = "编辑成员详情";
            userShow.value = true;
        });
    }
    async function handleDelete(row) {
        await proxy?.$modal.confirm('确认删除成员【' + row.realName + '】吗？').finally(() => loading.value = false);
        let res = await deleteCoach([row.id]);
        if (res.code === 0) proxy?.$modal.msgSuccess("删除成功");
        else return proxy?.$modal.msgError(res.msg);
        await getUserList();
    }
    
    const reset = () => {
        userForm.value = {
            id:'',
            enterpriseId:'',
            teamId:'',
            realName:'',
            username:'',
            gender:'',
            birthdate:'',
            mobile:'',
            dept:'',
            education:'',
            divisionOfLabour:'',
            post:'',
            level:'',
            userType:2,
            category:'',
            introduction:'',
            userStory:''
        };
        proxy.resetForm("userRef");
    }
    
    const handleChangeDate = (e) => {
        userForm.value.birthdate = proxy.parseTime(new Date(e), '{yy}-{mm}-{dd}');
    }
    const submitForm2 = () => {
        proxy.$refs.userRef.validate((valid) => {
            if (valid) {
                buttonLoading2.value = true;
                userForm.value.username = userForm.value.mobile;
                userForm.value.enterpriseId = programid.value;
                userForm.value.teamId = teamid.value;
                if(userForm.value.id){
                    updateCoach(userForm.value).then((res)=>{
                        if(res.code!==0) return proxy.$message.error(res.msg);
                        buttonLoading2.value = false;
                        userShow.value = false;
                        getUserList();
                    })
                }else{
                    addCoach(userForm.value).then((res)=>{
                        if(res.code!==0) return proxy.$message.error(res.msg);
                        buttonLoading2.value = false;
                        userShow.value = false;
                        getUserList();
                    })
                }
            } else {
                return false;
            }
        });
    }
    const cancel2 = () => {
        userShow.value = false;
        reset();
    }
    
    const handleDownloadExcel = () => {
        window.location.href = `${window.SITE_CONFIG["apiURL"]}/sys/user/download?token=${Cookies.get("token")}`;
    }
    const uploadFileSuccess = e =>{
        programTeamForm.value.file = e.data;
        proxy?.$modal.msgSuccess('上传成功');
    }
    const beforeAvatarUpload = (e) => {
        let type = e.name.split('.')[e.name.split('.').length-1];
        let isExcel = e.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if(type.toLowerCase() !== 'xlsx' && type.toLowerCase() !== 'xls' && !isExcel){
            proxy?.$modal.msgError('请上传xlsx或xls格式的Excel文件！');
            return false;
        }
    }
    const handleAddUser = () => {
        if(!teamid.value) return proxy.$message.error('请先选择团队');
        reset();
        userTitle.value = "新增成员详情";
        userShow.value = true;
    }

    const submitForm3 = () => {
        proxy.$refs.teamRef.validate((valid) => {
            if (valid) {
                buttonLoading3.value = true;
                teamForm.value.enterpriseId = programid.value;
                updateProgramTeam(teamForm.value).then((res)=>{
                    if(res.code!==0) return proxy.$message.error(res.msg);
                    buttonLoading3.value = false;
                    teamShow.value = false;
                    getProgramList();
                })
            } else {
                return false;
            }
        });
    }
    const cancel3 = () => {
        teamShow.value = false;
    }

    const handleProgramDetail = program => {
        programid.value = program.id;
       getCoachProgramInfo(program.id).then(res => {
            programForm.value = {...programForm.value,...res.data};
            if(programForm.value.coachList===null) programForm.value.coachList = [];
            let areas = programForm.value.areaCode.split('-');
            if(areas.length === 3){
                programForm.value.province = areas[0];
                cityAreaDetailInfoList(areas[0]);
                programForm.value.city = areas[1];
                countyAreaDetailInfoList(areas[1]);
                programForm.value.area = areas[2];
            }
            cocahNames.value = programForm.value.coachList.map(item => item.coachName).join(';');
            programShow.value = true;
        })
    }
    const handleProgramDelete = async program => {
        await proxy.$modal.confirm('确认删除项目【' + program.enterpriseName + '】吗？');
        deleteCoachProgram(program.id).then(res=>{
            if(res.code === 0) proxy?.$modal.msgSuccess("删除成功");
            else return proxy?.$modal.msgError(res.msg);
            getProgramList();
        });
    }
    const hangleSelectCoach = () => {
        getCoachList({page:1,limit:-1,realName:coachName.value}).then(res => {
            if(res.code!==0) return proxy.$message.error(res.msg);
            coachList.value = res.data.list.filter(d=>d.userType=='1');
            coachList.value.forEach(item => {
                item.checked = false;
            })
            coachShow.value = true;
        })
    }
    const submitForm5 = () => {
        if(coachSelecteds.value.length===0) return proxy.$message.warning('请至少选择一位教练')
        programForm.value.coachList = JSON.parse(JSON.stringify(coachSelecteds.value)).map(c=>{return {coachId:c.id,coachName:c.realName}});
        cocahNames.value = programForm.value.coachList.map(c=>c.coachName).join(';');
        checkAll.value = false;
        isIndeterminate.value = false;
        coachSelecteds.value = [];
        coachList.value = [];
        coachShow.value = false;
    }
    const cancel5 = () => {
        coachShow.value = false;
    }

    const submitForm4 = () => {
        proxy.$refs.programRef.validate((valid) => {
            if (valid) {
                buttonLoading5.value = true;
                programForm.value.id = programid.value;
                programForm.value.areaCode = `${programForm.value.province}-${programForm.value.city}-${programForm.value.area}`;
                updateCoachProgram(programForm.value).then((res)=>{
                    if(res.code!==0) return proxy.$message.error(res.msg);
                    else proxy?.$modal.msgSuccess("保存成功");
                    buttonLoading5.value = false;
                    programShow.value = false;
                    getProgramList();
                })
            } else {
                return false;
            }
        });
    }
    const cancel4 = () => {
        programShow.value = false;
    }
    const handleCheckAllChange = (val) => {
        coachSelecteds.value = val ? JSON.parse(JSON.stringify(coachList.value)) : [];
        isIndeterminate.value = false;
        coachList.value.forEach(item => item.checked = val)
    }
    const handleChangeCoach = () => {
        let trues = coachList.value.filter(item => item.checked).length;
        if(trues>0&&trues<coachList.value.length) isIndeterminate.value = true;
        else isIndeterminate.value = false;
        if(trues===coachList.value.length) checkAll.value = true;
        else checkAll.value = false;

        coachSelecteds.value = coachList.value.filter(item => item.checked);
    }
    const handleDeleteCoach = (item,index) => {
        let i = coachList.value.findIndex(c => c.id === item.id);
        if(i>-1) coachList.value[i].checked = false;
        coachSelecteds.value.splice(index,1);

        let trues = coachList.value.filter(item => item.checked).length;
        if(trues>0&&trues<coachList.value.length) isIndeterminate.value = true;
        else isIndeterminate.value = false;
        if(trues===coachList.value.length) checkAll.value = true;
        else checkAll.value = false;
    }

    const handleBeforeUpload = (e,node,data)=>{
        let type = e.name.split('.')[e.name.split('.').length-1];
        let isExcel = e.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if(type.toLowerCase() !== 'xlsx' && type.toLowerCase() !== 'xls' && !isExcel){
            proxy?.$modal.msgError('请上传xlsx或xls格式的Excel文件！');
            return false;
        }
        setTimeout(()=>{
            getUserList();
        },1000)
    }
    const handleSuccess = (e,node,data)=>{
        if(e.code===0){
            proxy?.$modal.msgSuccess('导入成功！'+e.msg);
        }else {
            proxy?.$modal.msgError('导入失败！'+e.msg);
        }
    }

    const submitForm6 = () => {
        proxy.$refs.programTeamRef.validate((valid) => {
            if (valid) {
                buttonLoading6.value = true;
                programTeamForm.value.enterpriseId = programid.value;
                addProgramTeam(programTeamForm.value).then((res)=>{
                    if(res.code!==0) return proxy.$message.error(res.msg);
                    else proxy?.$modal.msgSuccess("保存成功");
                    buttonLoading6.value = false;
                    programTeamShow.value = false;
                    getProgramList();
                })
            
            } else {
                return false;
            }
        });
    }
    const cancel6 = () => {
        programTeamShow.value = false;
    }
    
    // const handleAddItem = () => {
    //     programTeamForm.value.users.push({
    //         id:'',
    //         realName:'',
    //         gender:'',
    //         birthdate:'',
    //         mobile:'',
    //         dept:'',
    //         post:'',
    //         divisionOfLabour:'',
    //         education:'',
    //         level:'',
    //     })
    // }

    // const handleDeleteItem = (item,index) => {
    //     programTeamForm.value.users.splice(index,1)
    // }

    onMounted(() => {
        getProgramList();
    });
</script>

<style scoped lang="scss">
    ::v-deep .queryInput .el-input__inner{
        border: none !important;
        height: 30px !important;
        line-height: 30px !important;
        padding: 0 !important;
        width: 200px !important;
    }

    .page{
        padding: 28px 16px 12px;
        background: #FAFAFA;
        .title{
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 16px;
            color: #111111;
            line-height: 16px;
        }

        .tabs{
            position: relative;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #E5E7EB;
            padding-bottom: 18px;
            margin-top: 32px;
            .t_pre{
                width: 116px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #111111;
                line-height: 16px;
                text-align: center;
                position: relative;
                cursor: pointer;
                &.active{
                    font-weight: bold;
                    color: #761E6A;
                    &::after{
                        content: '';
                        position: absolute;
                        bottom: -18px;
                        left: 0;
                        width: 100%;
                        height: 2px;
                        background: #761E6A;
                    }
                }
            }
            .t_add{
                width: 114px;
                height: 32px;
                background: #761E6A;
                border-radius: 6px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #FFFFFF;
                line-height: 32px;
                text-align: center;
                position: absolute;
                top: -10px;
                right: 0;
                cursor: pointer;
            }
        }

        .content{
            width: 100%;
            height: calc(100vh - 140px);
            background: #FFFFFF;
            border: 1px solid #F3F4F6;
            margin-top: 15px;

            .team_user_list{
                height: 100%;
                padding: 20px;
                background: #FFFFFF;
                display: flex;
                .tul_left{
                    width: 280px;
                    padding-right: 20px;
                    box-sizing: border-box;
                    border-right: 1px solid #E5E7EB;
                    .tull_top{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .tullt_l{
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 600;
                            font-size: 16px;
                            color: #0D162A;
                            line-height: 16px;
                        }
                        .tullt_r{
                            width: 73px;
                            height: 28px;
                            border-radius: 6px;
                            border: 1px solid #761E6A;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 12px;
                            color: #761E6A;
                            line-height: 24px;
                            text-align: center;
                            cursor: pointer;
                        }
                    }
                    .tull_query{
                        margin-top: 12px;
                        width: 100%;
                        height: 34px;
                        border-radius: 6px;
                        border: 1px solid #E2E7F5;
                        padding: 0 16px;
                        box-sizing: border-box;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        img{
                            width: 16px;
                            height: 16px;
                            cursor: pointer;
                        }
                    }
                    .tull_list{
                        height: calc(100% - 100px);
                        overflow-y: auto;
                        margin-top: 24px;
                        .tull_item{
                            margin-top: 24px;
                            cursor: pointer;
                            &.active{
                                .tname span{
                                    font-weight: bold;
                                    color: #761E6A;
                                    i{
                                        color: #761E6A !important;
                                    }
                                }
                            }
                            &:first-child{
                                margin-top: 0;
                            }
                            .tname{
                                width: 100%;
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                position: relative;
                                img{
                                    width: 16px;
                                    height: 16px;
                                    cursor: pointer;
                                }
                                span{
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    font-size: 14px;
                                    color: #111111;
                                    line-height: 16px;
                                    margin-left: 10px;
                                }
                                &:hover,&.active{
                                    border-radius: 6px;
                                    span{
                                        font-weight: bold;
                                        color: #761E6A;
                                    }
                                    i{
                                        color: #761E6A !important;
                                    }
                                }
                            }
                            .tuser_list{
                                margin-top: 9px;
                                width: 100%;
                                height: 36px;
                                padding-left: 34px;
                                display: flex;
                                align-items: center;
                                cursor: pointer;
                                position: relative;
                                span{
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    font-size: 14px;
                                    color: #4B5563;
                                    line-height: 16px;
                                    &:first-child{
                                        margin-right: 5px;
                                    }
                                }
                                &:hover,&.active{
                                    background: #F0F2F8;
                                    border-radius: 6px;
                                    span{
                                        font-weight: bold;
                                        color: #761E6A;
                                    }
                                    i{
                                        color: #761E6A !important;
                                    }
                                }
                                i{
                                    position: absolute;
                                    right: 10px;
                                    top: 12px;
                                }
                            }
                        }
                    }
                }
                .tul_right{
                    width: calc(100% - 281px);
                    padding-left: 23px;
                    box-sizing: border-box;
                    .tulr_top{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .tulrt_l{
                            width: 278px;
                            height: 34px;
                            border-radius: 6px;
                            border: 1px solid #E2E7F5;
                            padding: 0 16px;
                            box-sizing: border-box;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            img{
                                width: 16px;
                                height: 16px;
                                cursor: pointer;
                            }
                        }
                        .tulrt_r{
                            display: flex;
                            .tr_btn{
                                width: 92px;
                                height: 36px;
                                border-radius: 6px;
                                border: 1px solid #C1C7D2;
                                margin-left: 20px;
                                cursor: pointer;
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 14px;
                                color: #111111;
                                line-height: 36px;
                                text-align: center;
                                &:last-child{
                                    background: #761E6A;
                                    color: #FFFFFF;
                                }
                            }
                        }
                    }
                }
            }

            .empty{
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                img{
                    width: 90px;
                    height: 76px;
                }
                p{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #1D2129;
                    line-height: 20px;
                    margin-top: 20px;
                }
                .e_add{
                    width: 114px;
                    height: 32px;
                    background: #761E6A;
                    border-radius: 6px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FFFFFF;
                    line-height: 32px;
                    text-align: center;
                    margin-top: 36px;
                    cursor: pointer;
                }
            }
        }
    }
    
    .tl_czs{
        .tlc_pre{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #1D2129;
            line-height: 20px;
            padding: 12px 0;
            border-bottom: 1px solid #ECEEF5;
            cursor: pointer;
            &:first-child{
                padding-top: 0;
            }
            &:last-child{
                border: none;
                padding-bottom: 0;
            }
            &:hover{
                color: #761E6A;
            }
        }
    }

    .f_s{
        width: 100%;
        height: 42px;
        border-radius: 6px;
        border: 1px solid #dcdfe6;
        padding: 11px 11px 11px 16px;
        box-sizing: border-box;
        cursor: pointer;
        .fs_text{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #C0C4CC;
            line-height: 20px;
            &.active{
                color: #606266;
            }
        }
    }

    .f_title{
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #0D162A;
        line-height: 16px;
        margin-bottom: 20px;
    }

    .f_pldr{
        margin-top: 20px;
        .fp_box{
            display: flex;
            width: 526px;
            height: 125px;
            border-radius: 4px;
            border: 1px solid #EDEEF0;
            position: relative;
            .fpb_pre{
                width: calc(50% - 1px);
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                .fpbp_btn{
                    width: 140px;
                    height: 36px;
                    border-radius: 6px;
                    border: 1px solid #E5E7EB;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #761E6A;
                    line-height: 32px;
                    text-align: center;
                    cursor: pointer;
                }
                &.sc{
                    border-left: 1px solid #EDEEF0;
                    .fpbp_btn{
                        background: #761E6A;
                        border: 1px solid #761E6A;
                        color: #FFFFFF;
                    }
                }
            }
            img{
                width: 50px;
                height: 20px;
                position: absolute;
                left: 50%;
                margin-left: -25px;
                top: 50%;
                margin-top: -10px;
            }
        }
        p{
            margin-top: 11px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #C1C7D2;
            line-height: 20px;
            text-align: justify;
        }
    }

    .f_sdlr{
        padding-top: 10px;

        .fs_add{
            width: 80px;
            height: 32px;
            background: #761E6A;
            border-radius: 6px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 32px;
            text-align: center;
            margin-top: 20px;
            cursor: pointer;
            &.del{
                background: rgb(212, 96, 96);
                margin: 0;
                margin-top: 5px;
            }
        }
    }
    
    .ed_coach{
        .ec_l{
            width: calc(50% - 1px);
            height: 100%;
            padding-right: 30px;
            box-sizing: border-box;
            border-right: 1px solid #ECEEF5;
            .ecl_cbs{
                width: 100%;
                // height: calc(100% - 143px);
                max-height: 376px;
                overflow-y: auto;
            }
        }
        .ec_r{
            width: 50%;
            padding-left: 30px;
            box-sizing: border-box;
            .ecr_text{
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 16px;
                color: #252525;
                line-height: 22px;
                span{
                    color: #B9B9B9;
                }
            }
            .ecr_names{
                margin-left: -16px;
                overflow: hidden;
                .en_pre{
                    float: left;
                    padding: 10px;
                    background: #F9FAFB;
                    border-radius: 6px;
                    margin: 19px 0 0 16px;
                    span{
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #252525;
                        line-height: 14px;
                    }
                    img{
                        width: 16px;
                        height: 16px;
                        margin-left: 10px;
                        cursor: pointer;
                    }
                }
            }
        }
    }
    
    :v-deep .el-dialog__wrapper{
        background: rgba(0,0,0,.3) !important;
    }
    ::v-deep .el-dialog__title{
        font-weight: bold !important;
    }
    ::v-deep .el-dialog{
        margin-top: 15vh !important;
    }
    ::v-deep .el-drawer__header span{
        font-weight: bold;
        font-size: 16px;
        color: #1D2129;
        line-height: 22px;
    }
</style>

<style>
    .el-upload-list{
        display: none;
    }
</style>