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>
            <template v-if="tidx===1">
                <div class="t_add t_add2" @click="handleAddTeam" v-hasPermi="['core:project:addTeam']">+ 添加团队</div>
                <div class="t_add" @click="handleAdd" v-hasPermi="['core:project:add']">+ 创建项目</div>
            </template>
            <template v-else-if="tidx===2">
                <div class="t_add" @click="handleAddJZ">+ 添加项目进展</div>
            </template>
        </div>
        <template v-if="tidx===1">
            <div class="query adfacjb">
                <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="programName" style="width: 100%" @keyup.enter.native="getProgramList"></el-input>
            </div>
            <div class="content">
                <template v-if="companyList.length">
                    <div class="team_user_list">
                        <div class="tul_left">
                            <div class="tull_top">
                                <div class="tullt_l">全部项目</div>
                            </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>
                                            <span>{{ item.enterpriseName }}</span>
                                        </div>
                                        <el-popover placement="right" width="177" trigger="hover">
                                            <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-edit" style="font-size: 16px;color: #999;" @click.stop="handleSetTeam(team,idx)"></i>
                                        </el-popover>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tul_right">
                            <div class="tulr_top">
                                <div class="tullt_l">项目团队</div>
                            </div>
                            <el-table :data="teamList" 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="teamName"></el-table-column>
                                <el-table-column label="团队人数" prop="teamNum"></el-table-column>
                                <el-table-column label="团队故事" prop="teamStory" width="700" show-overflow-tooltip></el-table-column>
                                <el-table-column label="操作" width="200">
                                    <template #default="scope">
                                        <el-button link type="text" size="mini" @click="handleTeamDetail(scope.row)" v-hasPermi="['core:team:info']">编辑</el-button>
                                        <el-button link type="text" size="mini" @click="handleUsers(scope.row)">成员管理</el-button>
                                        <el-button link type="text" size="mini" @click="handleTeamDelete(scope.row)" v-hasPermi="['core:team:delete']">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </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">
            <div class="query adfacjb">
                <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="programName2" style="width: 100%" @keyup.enter.native="getProgramProgressData"></el-input>
            </div>
            <div class="content">
                <template v-if="companyList2.length">
                    <el-table :data="companyList2" border cell-class-name="vertical-top-cell" v-loading="loading7" empty-text="暂无项目" max-height="578px" style="margin-top: 6px;">
                        <el-table-column label="公司名称" prop="enterpriseName"></el-table-column>
                        <el-table-column label="更新时间" prop="updateDate"></el-table-column>
                        <el-table-column label="公司背景" prop="background" width="400" show-overflow-tooltip></el-table-column>
                        <el-table-column label="项目的阶段及状态" prop="progress" width="400" show-overflow-tooltip></el-table-column>
                        <el-table-column label="操作" width="150">
                            <template #default="scope">
                                <el-button link type="text" size="mini" @click="handleEdit7(scope.row)" v-hasPermi="['core:projectprogress:update']">编辑</el-button>
                                <el-button link type="text" size="mini" @click="handleDelete7(scope.row)" v-hasPermi="['core:projectprogress:delete']">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <template v-else>
                    <div class="empty">
                        <img src="@/assets/images/agent/team.png">
                        <p>您还没有添加过任何项目进展</p>
                        <div class="e_add" @click="handleAddJZ">+ 添加项目进展</div>
                    </div>
                </template>
            </div>
        </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="programTitle" :visible.sync="programShow" append-to-body size="60%" @close="cancel4">
            <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 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 adfacjb" v-else>
                                <p>{{ cocahNames }}</p>
                                <i class="el-icon-arrow-down" style="color: #C0C4CC;"></i>
                            </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="60%" @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>
        <el-drawer :title="xmjzTitle" :visible.sync="xmjzShow" append-to-body size="60%" @close="xmjzClose">
            <el-form :model="xmjzForm" :rules="xmjzRules" ref="xmjzRef" label-width="130px" style="margin: 0 25px;">
                <el-row style="width: 100%;">
                    <el-col :span="24">
                        <el-form-item label="公司名称" prop="enterpriseId">
                            <el-select v-model="xmjzForm.enterpriseId" placeholder="请选择" @change="handleChange7" style="width: 100%;">
                                <el-option v-for="item in useAgentStore().companyList" :key="item.id" :label="item.enterpriseName" :value="item.id"></el-option>                        
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="width: 100%;">
                    <el-col :span="24">
                        <el-form-item label="人员规模" prop="">
                            <el-input v-model="xmjzForm.bbb" clearable disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="width: 100%;">
                    <el-col :span="24">
                        <el-form-item label="项目教练" prop="">
                            <el-input v-model="xmjzForm.ccc" clearable disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="width: 100%;">
                    <el-col :span="24">
                        <el-form-item label="公司背景" prop="">
                            <el-input type="textarea" v-model="xmjzForm.background" clearable disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="width: 100%;">
                    <el-col :span="24">
                        <el-form-item label="项目进展" prop="progress">
                            <el-input :rows="3" type="textarea" v-model="xmjzForm.progress" 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="buttonLoading7" type="primary" @click="submitForm7" v-hasPermi="['core:projectprogress:save']">保 存</el-button>
                <el-button @click="cancel7" 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";
    import {useAgentStore} from "@/store_v3/modules/agent";
    useAgentStore().getCompanyData();
    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,
        getTeamListById,
        addCoachProgram,
        getProgramProgressList,
        addProgramProgress,
        updateProgramProgress,
        getProgramProgressInfo,
        deleteProgramProgress,
    } from '@/api/agent/index.js'
    const tidx = ref(1);
    const teamList = ref([]);
    const programName = ref('')
    const programName2 = ref('')
    const companyList = ref([]);
    const companyList2 = ref([]);
    const programid = ref('')
    const teamid = ref('')
    const loading = ref(false);
    const programTitle = ref('项目详情');
    const queryParams = ref({
        page:1,
        limit:10,
        teamId:'',
        realName:'',
    })
    const queryParams2 = ref({
        page:1,
        limit:10,
        teamId:'',
        enterpriseName:'',
    })
    const userList = ref([]);
    const total = ref(0);
    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:[],
        background:''
    });
    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' }
        ],
        background: [
            { required: true, message: '请输入企业背景', trigger: 'blur' }
        ]
    });
    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 xmjzTitle = ref('添加项目进展');
    const xmjzShow = ref(false);
    const loading7 = ref(false);
    const xmjzForm = ref({
        id:'',
        enterpriseId:'',
        bbb:'',
        ccc:'',
        background:'',
        progress:''
    });
    const xmjzRules = ref({
        enterpriseId: [
            { required: true, message: '请选择公司', trigger: 'change' }
        ],
        progress: [
            { required: true, message: '请输入项目进展', trigger: 'blur' }
        ]
    });
    const xmjzRef = ref(null);
    const buttonLoading7 = ref(false);


    const handleChangeTab = (idx) => {
        tidx.value = idx;
        if(idx===2){
            getProgramProgressData();
        }
    }
    const handleAdd = () => {
        programid.value = '';
        programTitle.value = '创建项目';
        programShow.value = true;
        programForm.value = {
            id:'',
            enterpriseName: '',
            creditCode: '',
            industryCode: '',
            staffSizeCode: '',
            province:'',
            city:'',
            area:'',
            areaCode:'',
            coachList:[],
            background:''
        };
        proxy.$refs.programRef.resetFields();
    };

    const handleAddJZ = () => {
        xmjzTitle.value = '添加项目进展';
        xmjzShow.value = true;
        xmjzForm.value = {
            id:'',
            enterpriseId:'',
            bbb:'',
            ccc:'',
            background:'',
            progress:''
        };
    };

    const handleExpand = (item, index) => {
        programid.value = item.id;
        programTeamForm.value.companyName = item.enterpriseName;
        companyList.value.forEach(c => { c.select = false; });
        item.select = true;
        getTeamListByCompanyId();
    };
    const getTeamListByCompanyId = ()=> {
        getTeamListById({enterpriseId: programid.value}).then(res=>{
            if(res.code!==0) proxy.$message.error(res.msg);
            teamList.value = res.data;
        })
    }
    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) => {
        getProgramTeamInfo(team.id).then(res=>{
            if(res.code!==0) return proxy.$message.error(res.msg);
            teamForm.value = {...teamForm.value,...res.data};
            teamForm.value.companyName = companyList.value.find(c => c.id === team.enterpriseId)?.enterpriseName;
            teamShow.value = true;
        })
    }
    const handleUsers = (team) => {
        proxy.$router.push({path:'/agentTeamUser',query:{teamId: team.id, enterpriseId: team.enterpriseId}});
    }
    const handleTeamDelete = async team => {
        await proxy.$modal.confirm('确认删除团队【' + team.teamName + '】吗？').finally(() => buttonLoading3.value = false);
        deleteProgramTeam(team.id).then(res=>{
            if(res.code === 0) proxy?.$modal.msgSuccess("删除成功");
            else return proxy?.$modal.msgError(res.msg);
            getTeamListByCompanyId();
        });
    }

    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 = [];
        teamList.value = [];
        total.value = 0;
        queryParams.value.teamId = '';
        queryParams.value.page = 1;
        queryParams.value.realName = '';
        programid.value = '';
    }

    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;
                    getTeamListByCompanyId();
                })
            } else {
                return false;
            }
        });
    }
    const cancel3 = () => {
        teamShow.value = false;
    }

    const handleProgramDetail = program => {
        programTitle.value = "项目详情";
        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}`;
                let dto = JSON.parse(JSON.stringify(programForm.value));
                if(dto.coachList.length===0) return proxy.$message.warning('请至少选择一位教练');
                if(dto.id){
                    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{
                    addCoachProgram(dto).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;
        programForm.value = {
            id:'',
            enterpriseName: '',
            creditCode: '',
            industryCode: '',
            staffSizeCode: '',
            province:'',
            city:'',
            area:'',
            areaCode:'',
            coachList:[],
            background:''
        }
        proxy.$refs.programRef.resetFields();
    }
    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;
                    getTeamListByCompanyId();
                })
            } else {
                return false;
            }
        });
    }
    const cancel6 = () => {
        programTeamShow.value = false;
    }

    const getProgramProgressData = async () => {
        loading.value = true;
        const res = await getProgramProgressList({enterpriseName:programName2.value});
        if(res.code!==0) return proxy.$message.error(res.msg);
        else{
            companyList2.value = res.data;
            loading.value = false;
        }
    }

    const handleEdit7 = (row) => {
        xmjzTitle.value = '编辑项目进展';
        getProgramProgressInfo(row.id).then((res)=>{
            if(res.code!==0) return proxy.$message.error(res.msg);
            else{
                xmjzForm.value = res.data;
                getCoachProgramInfo(res.data.enterpriseId).then(res => {
                    xmjzForm.value.background = res.data.background;
                    xmjzForm.value.bbb = staffSize.value.find(item => item.value === res.data.staffSizeCode).label;
                    xmjzForm.value.ccc = res.data.coachList.map(item => item.coachName);
                    xmjzShow.value = true;
                })
            }
        })
    }

    const handleDelete7 = async (row) => {
        await proxy.$modal.confirm('确认删除吗？');
        deleteProgramProgress([row.id]).then(res=>{
            if(res.code === 0) proxy?.$modal.msgSuccess("删除成功");
            else return proxy?.$modal.msgError(res.msg);
            getProgramProgressData();
        });
    }

    const handleChange7 = row => {
        getCoachProgramInfo(row).then(res => {
            xmjzForm.value.background = res.data.background;
            xmjzForm.value.bbb = staffSize.value.find(item => item.value === res.data.staffSizeCode).label;
            xmjzForm.value.ccc =res.data.coachList.map(item => item.coachName);
        })
    }

    const submitForm7 = () => {
        proxy.$refs.xmjzRef.validate((valid) => {
            if (valid) {
                buttonLoading7.value = true;
                if(xmjzForm.value.id){
                    updateProgramProgress(xmjzForm.value).then((res)=>{
                        if(res.code!==0) return proxy.$message.error(res.msg);
                        buttonLoading7.value = false;
                        xmjzShow.value = false;
                        getProgramProgressData();
                    })
                }else{
                    addProgramProgress(xmjzForm.value).then((res)=>{
                        if(res.code!==0) return proxy.$message.error(res.msg);
                        buttonLoading7.value = false;
                        xmjzShow.value = false;
                        getProgramProgressData();
                    })
                }
            } else {
                return false;
            }
        });
    }

    const cancel7 = () => {
        xmjzShow.value = false;
        xmjzForm.value = {
            id:'',
            enterpriseId:'',
            bbb:'',
            ccc:'',
            background:'',
            progress:''
        }
        proxy.$refs.xmjzRef.resetFields();
    }

    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;
    }

    .query{
            width: 100%;
            padding: 16px 20px;
            box-sizing: border-box;
            background: #FFFFFF;
            border-radius: 6px;
            border: 1px solid #F3F4F6;
            margin-top: 11px;
        }

    .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: 112px;
                height: 30px;
                background: #761E6A;
                border-radius: 6px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #FFFFFF;
                line-height: 26px;
                text-align: center;
                position: absolute;
                top: -10px;
                right: 0;
                cursor: pointer;
                border: 1px solid #833478;
                &.t_add2{
                    background: #FFFFFF;
                    color: #833478;
                    right: 130px;
                }
            }
        }

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

            .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{
                        width: 100%;
                        height: calc(100% - 100px);
                        overflow-y: auto;
                        margin-top: 20px;
                        .tull_item{
                            width: 100%;
                            margin-top: 24px;
                            cursor: pointer;
                            padding: 12px;
                            box-sizing: border-box;
                            border-radius: 6px;
                            &:hover,&.active{
                                background: rgba(118,30,106,0.06);
                                .tname span{
                                    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{
                                        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{
                                        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{
                        .tullt_l{
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 600;
                            font-size: 16px;
                            color: #0D162A;
                            line-height: 16px;
                        }
                    }
                }
            }

            .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>