<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-card shadow="hover" class="mgb20">
                    <div class="flex-between">
                        <div class="per_title" @click="goback()">
                            <i class="el-icon-arrow-left"></i>
                            <span class="per_back">返回</span>
                            <span class="per_school">查看用户信息</span>
                        </div>
                    </div>
                </el-card>

                <!-- 用户信息 -->
                <el-card shadow="hover" class="mgb20">
                    <div>
                        <div class="flex-between mgb20 user_header">
                            <div class="flex-center mgb20 user_header">
                                <p class="addhr_tag"></p>
                                <span>用户信息</span>
                            </div>
                        </div>

                        <div>
                            <div>
                                <p class="font_same">个人信息</p>
                                <el-form
                                    ref="form"
                                    :model="form"
                                    :rules="rules"
                                    label-width="120px"
                                    :disabled="isDetail"
                                >
                                    <el-col :span="6" :offset="5">
                                        <el-form-item prop="userName" label="用户姓名">
                                            <el-input v-model="form.userName" placeholder="请输入"></el-input>
                                        </el-form-item>

                                        <el-form-item label="证件类型" prop="documentType">
                                            <el-select
                                                v-model="form.documentType"
                                                clearable
                                                placeholder="请选择证件类型"
                                            >
                                                <el-option
                                                    v-for="(item,index) in documentTypeList"
                                                    :key="index"
                                                    :label="item.name"
                                                    :value="item.value"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>

                                        <el-form-item label="国家">
                                            <el-select
                                                v-model="form.countries"
                                                clearable
                                                placeholder="请选择国家"
                                            >
                                                <el-option
                                                    v-for="(item,index) in countryList"
                                                    :key="index"
                                                    :label="item.name"
                                                    :value="item.value"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>

                                        <el-form-item label="城市">
                                            <el-select
                                                v-model="form.cityId"
                                                clearable
                                                placeholder="请选择城市"
                                                :disabled="form.provinceId ? false : true"
                                            >
                                                <el-option
                                                    v-for="(item,index) in cityList"
                                                    :key="index"
                                                    :label="item.cityName"
                                                    :value="item.cityId"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>

                                        <el-form-item label="教育程度">
                                            <el-select
                                                v-model="form.educationDegree"
                                                clearable
                                                placeholder="请选择教育程度"
                                            >
                                                <el-option
                                                    v-for="(item,index) in educationDegreeList"
                                                    :key="index"
                                                    :label="item.name"
                                                    :value="item.value"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>

                                        <el-form-item prop="schoolId" label="当前院校">
                                            <el-select v-model="form.schoolId" filterable clearable placeholder="请选择学校">
                                                <el-option v-for="(item,index) in schoolList" :key="index" :label="item.schoolName" :value="item.schoolId"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="6" :offset="2">
                                        <el-form-item label="唯一识别码">
                                            <el-input
                                                v-model="form.uniqueIdentification"
                                                placeholder="请输入"
                                                :disabled="true"
                                            ></el-input>
                                        </el-form-item>

                                        <el-form-item prop="IDNumber" label="证件号码">
                                            <el-input
                                                v-model="form.IDNumber"
                                                placeholder="请输入证件号码"
                                                maxlength="18"
                                            ></el-input>
                                        </el-form-item>

                                        <el-form-item label="省份">
                                            <el-select
                                                v-model="form.provinceId"
                                                clearable
                                                placeholder="请选择省份"
                                                @change="getCity"
                                            >
                                                <el-option
                                                    v-for="(item,index) in provinceList"
                                                    :key="index"
                                                    :label="item.provinceName"
                                                    :value="item.provinceId"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>

                                        <el-form-item label="出生日期">
                                            <el-date-picker
                                                type="date"
                                                placeholder="选择出生日期"
                                                v-model="form.dateBirth"
                                                style="width: 100%;"
                                                value-format="yyyy-MM-dd"
                                            ></el-date-picker>
                                        </el-form-item>

                                        <el-form-item label="性别">
                                            <el-select clearable
                                                v-model="form.sex"
                                                :disabled="IDdisabled"
                                                placeholder="请选择性别"
                                            >
                                                <el-option
                                                    v-for="(item,index) in sexList"
                                                    :key="index"
                                                    :label="item.name"
                                                    :value="item.value"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-form>
                            </div>

                            <div class="mgb20_top">
                                <p class="font_same">账号信息</p>
                                <el-form
                                    ref="form"
                                    :model="form"
                                    :rules="rules"
                                    label-width="120px"
                                    :disabled="isDetail"
                                >
                                    <el-col :span="24">
                                            <el-col :span="6" :offset="5">
                                                <el-form-item prop="phone" label="个人手机">
                                                    <el-input
                                                        v-model="form.phone"
                                                        placeholder="请输入手机号"
                                                        maxlength="11"
                                                    ></el-input>
                                                </el-form-item>
                                            </el-col>

                                            <el-col :span="6" :offset="2">
                                                <el-form-item label="微信号">
                                                    <el-input v-model="form.WeChatID" placeholder="请输入微信号"></el-input>
                                                </el-form-item>                                             
                                            </el-col>
                                    </el-col>
                                </el-form>
                            </div>
                        </div>
                    </div>
                </el-card>

                <!-- 个人档案 -->
                <el-card shadow="hover" class="mgb20">
                    <div>
                        <div class="flex-between mgb20 user_header">
                            <div class="flex-center">
                                <p class="addhr_tag"></p>
                                <span>个人档案</span>
                            </div>
                        </div>

                        <div>
                            <div class="flex-center" v-for="(item,index) in archivesList" :key="index">
                                <el-col :span="16" :offset="4">
                                    <el-card shadow="hover" class="from_card">
                                        <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="isDetail">
                                            <div>
                                                <el-col :span="10">
                                                    <el-form-item label="职业">
                                                        <el-select
                                                            v-model="item.personalCareerId"
                                                            placeholder="请选择职业"
                                                        >
                                                            <el-option
                                                                v-for="item1 in occupationList"
                                                                :key="item1.value"
                                                                :label="item1.label"
                                                                :value="item1.value"
                                                            ></el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                    <el-form-item label="院校">
                                                        <el-select v-model="item.schoolId" filterable clearable placeholder="请选择院校" @change="schoolitemChange">
                                                            <el-option v-for="(item,index) in schoolList" :key="index" :label="item.schoolName" :value="item.schoolId"></el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                    <el-form-item label="专业类">
                                                        <el-select
                                                            v-model="item.professionalClassId"
                                                            :disabled="item.disciplineId ? false : true"
                                                            clearable
                                                            placeholder="请选择专业类"
                                                            @change="id => getItemProfessional(id,index)"
                                                            @clear="() => clearItemProfess(index)"
                                                        >
                                                            <el-option
                                                                v-for="(item2,index) in item.ProfessionalClassList"
                                                                :key="index"
                                                                :label="item2.professionalClassName"
                                                                :value="item2.professionalClassId"
                                                            ></el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                </el-col>
                                            </div>

                                            <div>
                                                <el-col :span="10" :offset="3">
                                                    <el-form-item>
                                                        <br />
                                                    </el-form-item>
                                                    <el-form-item label="专业学科">
                                                        <el-select
                                                            v-model="item.disciplineId"
                                                            clearable
                                                            placeholder="请选择专业学科"
                                                            @change="id => getItemProfessionalClass(id,index)"
                                                            @clear="() => clearItemClass(index)"
                                                        >
                                                            <el-option
                                                                v-for="(item3,index) in item.subjectList"
                                                                :key="index"
                                                                :label="item3.disciplineName"
                                                                :value="item3.disciplineId"
                                                            ></el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                    <el-form-item label="专业">
                                                        <el-select
                                                            v-model="item.professionalId"
                                                            :disabled="item.professionalClassId ? false : true"
                                                            clearable
                                                            placeholder="请选择专业"
                                                            @change="getItemStuGrade"
                                                        >
                                                            <el-option
                                                                v-for="(item4,index) in item.ProfessionalList"
                                                                :key="index"
                                                                :label="item4.professionalName"
                                                                :value="item4.professionalId"
                                                            ></el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                </el-col>
                                            </div>
                                        </el-form>
                                    </el-card>
                                </el-col>
                            </div>
                        </div>                      
                    </div>
                </el-card>

                <!-- 已绑定系统 -->
                <el-card shadow="hover" class="mgb20">
                    <div class="flex-between mgb20">
                        <div class="flex-center">
                            <p class="addhr_tag"></p>
                            <span>已绑定系统</span>
                        </div>
                        <div>
                            <el-dialog title="查看系统" :visible.sync="dialogFormVisible" :center="!isIE()" :close-on-click-modal="false">
                                <el-form :class="{region: !isIE()}" ref="chooseList" :rules="rules" :disabled="isDetail">
                                    <el-form-item label="系统选择" label-width="100px">
                                        <el-select
                                            v-model="region"
                                            placeholder="请选择系统"
                                        >
                                            <el-option
                                                v-for="(item,index) in regionOption"
                                                :key="index"
                                                :label="item.regionName"
                                                :value="item.regionId"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                                <div style="margin-bottom: 20px;">
                                    <span class="radio">组织关系</span>
                                    <el-radio v-model="radio" label="1">绑定组织关系</el-radio>
                                    <el-radio v-model="radio" label="2" disabled>不绑定组织关系</el-radio>
                                </div>
                                
                                <div>
                                <el-card shadow="hover" v-for="(item,index) in chooseList" :key="index" class="school-item">
                                    <p class="school-name">{{index}}</p>
                                    <div class="card" :class="{isie: isIE()}">
                                        <div class="port" v-for="(item1,index1) in item" :key="index1">
                                            <p class="port-name">{{typeList.find(n => n.id == item1.type).label}}</p>
                                            <el-card shadow="hover">
                                                <ul class="fields">
                                                    <div class="line">
                                                        <li>
                                                            <span class="name">工号：</span>
                                                            <p class="val">{{item1.workNumber}}</p>
                                                        </li>
                                                        <li>
                                                            <span class="name">账号：</span>
                                                            <p class="val">{{item1.account}}</p>
                                                        </li>
                                                        <li>
                                                            <el-switch v-model="item1.isEnable" :active-value="1" :inactive-value="0" :active-text="item1.isEnable ? '启用' : '禁用'" @change="switchOff($event,item1)"></el-switch>
                                                        </li>
                                                    </div>
                                                    <div class="line">
                                                        <li>
                                                            <span class="name">该工号所绑定角色：</span>
                                                            <p class="val">管理员</p>
                                                        </li>
                                                    </div>
                                                </ul>
                                            </el-card>
                                        </div>
                                    </div>
                                </el-card>
                                </div>
                            </el-dialog>
                        </div>
                    </div>

                    <el-table
                        :data="platformList"
                        class="table"
                        stripe
                        header-align="center"
                        row-key="platformId"
                    >
                        <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
                        <el-table-column prop="platformName" label="系统名称" align="center"></el-table-column>
                        <el-table-column prop="domainName" label="域名" align="center"></el-table-column>
                        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" @click="show(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    data() {
        return {
            isDetail: true,

            typeList: [
                {
                    id: 0,
                    label: '教师端'
                },{
                    id: 1,
                    label: '学生端'
                }
            ],
            region: '', // 系统选择
            checkList: [{
                label: '管理员',
                id: 13
            },
            {
                label: '教师',
                id: 14
            },
            {
                label: '学生',
                id: 4
            }], //角色选择
            radio: '1', //组织关系
            innerVisible: false,
            dialogFormVisible: false,
            form: {
                //个人信息
                userId: this.$store.state.userId,
                userName: '', //用户姓名
                uniqueIdentification: '', //唯一识别码
                documentType: 1, //证件类型
                IDNumber: '', //证件号码
                cityId: '', //省份
                countries: '中国', //国家
                provinceId: '', //城市
                dateBirth: '', //出生日期
                educationDegree: '', //教育程度
                sex: '', //性别
                schoolId: '', //学校

                //账号信息
                phone: '', //手机号码
                WeChatID: '', //微信
                email: '', //邮箱
            },
            occupationList: [{
                value: 1,
                label: '学生'
            },
            {
                value: 2,
                label: '老师'
            }],
            roleIds: [],
            archivesForm: {
                //个人档案
                personalCareerId: '', //职业
                schoolId: '', //院校
                schoolName: '', //院校名称
                professionalClassId: '', //专业类
                professionalClassName: '', //专业类名称
                disciplineId: '', //专业学科
                disciplineName: '', //专业学科名称
                professionalId: '', //专业
                professionalName: '', //专业名称
                userId: this.$store.state.userId
            },
            archivesList: [],
            rules: {
                userName: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }],
                schoolId: [{ required: true, message: '请选择当前院校', trigger: 'change' }],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    {
                        pattern: /^1[3456789]\d{9}$/,
                        message: '请输入正确的手机号',
                        trigger: 'blur'
                    }
                ],
                IDNumber: [
                    // { required: true, message: '请输入证件号码', trigger: 'blur' },
                    {
                        pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/,
                        message: '请输入正确的证件号码',
                        trigger: 'blur'
                    }
                ],
                email: [
                    // { required: true, message: '请输入邮箱', trigger: 'blur' },
                    {
                        pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
                        message: '请输入正确的邮箱',
                        trigger: 'blur'
                    }
                ]
            },
            sexList: [
                {
                    name: '男',
                    value: 1
                },
                {
                    name: '女',
                    value: 2
                }
            ],
            documentTypeList: [
                {
                    name: '居民身份证',
                    value: 1
                }
            ],
            // 教育程度
            educationDegreeList: [
                {
                    name: '专科',
                    value: 1
                },
                {
                    name: '本科',
                    value: 2
                },
                {
                    name: '硕士',
                    value: 3
                },
                {
                    name: '博士',
                    value: 4
                },
                {
                    name: '其他',
                    value: 5
                }
            ],
            subjectList: [], //专业学科
            ProfessionalClassList: [], //专业类
            ProfessionalList: [], //专业
            //国家
            countryList: [
                {
                    name: '中国'
                }
            ],
            schoolList: [],
            cityList: [], //城市
            provinceList: this.$store.state.provinceList, //省份
            userId: this.$store.state.userId,
            IDdisabled: false,
            regionOption: [{
                regionName: '职站',
                regionId: 1
            },
            {
                regionName: '数据平台',
                regionId: 2
            }], //系统选择
            secondaryDepartmentsList: [], //二级部门
            secondaryDepartmentsList_T: [], //二级部门
            majorList: [], //学生—专业
            yearList: [], //学生—年级
            classList: [], //学生—班级
            multipleSelection: [],
            customerList: [], //客户列表
            cusSearch: '',
            chooseCusList: [],
            choosecusArr: '',
            chooseList: [],
            NoAdd: true,
            AccountNoAdd: true,
            NumberNoAdd: true,
            teaNumberNoAdd: true,
            stuNumberNoAdd: true,
            platformList: [], //平台系统列表
            saveList: [],
            roldform: {

            },
            clickFlag: true,
            searchTimer: null
        };
    },
    mounted() {
        this.getSchoolData()
        if(this.userId){
            this.$get(this.api.queryUserInfoDetails,{ userId: this.userId }).then(res => {
                let userInfo = res.result.hrUserInfo
                let personalFileList = res.result.personalFileList
                let platformList = res.result.platformList
                let userAccount = res.result.userAccountList

                this.form.userName = userInfo.userName
                this.form.uniqueIdentification = userInfo.uniqueIdentification
                this.form.IDNumber = userInfo.iDNumber
                this.form.cityId = userInfo.cityId
                this.form.provinceId = userInfo.provinceId
                this.form.dateBirth = userInfo.dateBirth
                this.form.educationDegree = userInfo.educationDegree
                this.form.sex = userInfo.sex
                this.form.schoolId = userInfo.schoolId
                this.form.phone = userInfo.phone
                this.form.WeChatID = userAccount[0].wechatId
                if(userInfo.provinceId){
                    this.getCityData()
                }
                // 个人档案
                if(personalFileList.length != 0){
                    personalFileList.map(e =>{
                        this.$set(e, 'subjectList', this.subjectList);
                        if(e.disciplineId){
                            this.$get(this.api.queryCourseProfessionalClass,{ disciplineId: e.disciplineId }).then(res => {
                                this.$set(e, 'ProfessionalClassList', res.message);
                            }).catch(res => {});
                        }
                        if(e.professionalClassId){
                            this.$get(this.api.queryCourseProfessional,{ professionalClassId: e.professionalClassId }).then(res => {
                                this.$set(e, 'ProfessionalList', res.message);
                            }).catch(res => {});
                        }
                    })
                }
                this.archivesList = personalFileList

                // 平台系统
                platformList.map(e =>{
                    this.regionOption.map((r,index) =>{
                        if(r.regionId == e.platformId){
                            this.regionOption.splice(index,1)
                        }
                    })
                })
                this.platformList = platformList
            }).catch((res) => {})
        }
    },
    methods: {
        async getInfo(item ,index){
            let res = await this.$get(this.api.queryUserOR, { userId: this.userId, platformId: item.platformId})
            return (res.message)
        },
        // 获取城市
        getCity(){
            if(this.form.provinceId){
                this.getCityData()
            }
        },
        getCityData(){
            this.$get(this.api.queryCity,{provinceId: this.form.provinceId}).then(res => {
                this.cityList = res.message
            }).catch(res => {});
        },
        // 获取列表学校名称
        schoolitemChange(item){
            if(item){
                this.archivesList.map(e =>{
                    if(e.schoolId == item){
                        let obj = {};
                        obj = this.schoolList.find(r =>{
                            return r.schoolId === item;
                        });
                        e.schoolName = obj.schoolName
                    }
                })
            }
        },
        // 获取学校名称
        getSchoolData(){
            this.$get(this.api.querySchoolData,{
                schoolName: '',
                provinceId: '',
                cityId: ''
            }).then(res => {
                this.schoolList = res.list
            }).catch(res => {});
        },
        goback(){
            this.$router.back()
        },
        // 获取学科类别
        getSubject(){
            this.$get(this.api.queryCourseDiscipline).then(res => {
                this.subjectList = res.message
            }).catch(res => {});
        },
        // 清除学科类别
        clearClass(){
            this.archivesForm.professionalClassId = '',
            this.archivesForm.professionalId = ''
        },
        // 获取专业类
        getProfessionalClass(val){
            this.clearClass()
            if(val){
                let obj = {};
                obj = this.subjectList.find((item)=>{
                    return item.disciplineId === val;
                });
                this.archivesForm.disciplineName = obj.disciplineName
                this.getProfessionalClassData(val)
            }
        },
        clearItemClass(index){
            this.archivesList[index].professionalClassId = ''
            this.archivesList[index].professionalClassName = ''
            this.archivesList[index].professionalId = ''
            this.archivesList[index].professionalName = ''
            // this.archivesList.map(e =>{
            //     if(e.disciplineId == item){
            //         e.professionalClassId = '',
            //         e.professionalClassName = '',
            //         e.professionalId = '',
            //         e.professionalName = ''
            //     }
            // })
        },
        getItemProfessionalClass(item,index){
            this.clearItemClass(index)
            if(item){
                let obj = {};
                obj = this.subjectList.find(r =>{
                    return r.disciplineId === item;
                });
                this.$get(this.api.queryCourseProfessionalClass,{ disciplineId: item }).then(res => {
                    this.archivesList.map(e =>{
                        if(e.disciplineId == item){
                            e.ProfessionalClassList = res.message
                            e.disciplineName = obj.disciplineName
                        }
                    })
                }).catch(res => {});
            }
        },
        getProfessionalClassData(value){
            this.$get(this.api.queryCourseProfessionalClass,{ disciplineId: value }).then(res => {
                this.ProfessionalClassList = res.message
            }).catch(res => {});
        },
        // 清除专业类
        clearProfess(){
            this.archivesForm.professionalId = ''
        },
        // 获取专业
        getProfessional(val){
            this.clearProfess()
            if(val){
                let obj = {};
                obj = this.ProfessionalClassList.find((item)=>{
                    return item.professionalClassId === val;
                });
                this.archivesForm.professionalClassName = obj.professionalClassName
                this.getProfessionalData(val)
            }
        },
        clearItemProfess(index){
            this.archivesList[index].professionalId = ''
            this.archivesList[index].professionalName = ''
            // this.archivesList.map(e =>{
            //     if(e.professionalClassId == item){
            //         e.professionalId = '',
            //         e.professionalName = ''
            //     }
            // })
        },
        getItemProfessional(item,index){
            this.clearItemProfess(index)
            if(item){
                this.$get(this.api.queryCourseProfessional,{ professionalClassId: item }).then(res => {
                    this.archivesList.map(e =>{
                        if(e.professionalClassId == item){
                            let obj = {};
                            obj = e.ProfessionalClassList.find(r =>{
                                return r.professionalClassId === item;
                            });
                            e.ProfessionalList = res.message
                            e.professionalClassName = obj.professionalClassName
                        }
                    })
                }).catch(res => {});
            }
        },
        getProfessionalData(value){
            this.$get(this.api.queryCourseProfessional,{professionalClassId: value}).then(res => {
                this.ProfessionalList = res.message
            }).catch(res => {});
        },
        // 获取专业名称
        getStuGrade(val){
            if(val){
                let obj = {};
                obj = this.ProfessionalList.find(r =>{
                    return r.professionalId === val;
                });
                this.archivesForm.professionalName = obj.professionalName
            }
        },
        getItemStuGrade(item){
            if(item){
                this.archivesList.map(e =>{
                    if(e.professionalId == item){
                        let obj = {};
                        obj = e.ProfessionalList.find(r =>{
                            return r.professionalId === item;
                        });
                        e.professionalName = obj.professionalName
                    }
                })
            }
        },
        show(row){
            let obj = {}
            Object.assign(obj,{
                regionName: row.platformName,
                regionId: row.platformId,
            })
            this.regionOption = [obj, ...[]]
            this.region = row.platformId
            this.dialogFormVisible = true
            this.choosecusArr = ''
            this.chooseCusList = []
            this.chooseList = []

            this.$get(this.api.selectUserSysBind, { userId: this.userId, platformId: row.platformId}).then(res => {
                let list = res.result.map
                for(let i in list){
                    for(let n in list[i]){
                        console.log(11,list[i][n])
                        list[i] = list[i][n]
                    }
                }
                this.chooseList = list
                console.log(11,list)
            }).catch(res => {})
        },
        switchOff(val,row){
            this.$get(this.api.updateAccountEnable,{
                id: row.id,
                isEnable: val
            }).then(res => {
                this.$message.success(val ? '启用成功' : '禁用成功')
            }).catch(res => {})
        }
    }
};
</script>


<style lang="scss" scoped>
// 新增系统
.card ::v-deep .el-card {
    border-radius: 15px;
}
.card_m {
    margin: 10px 0 20px 0;
}
::v-deep .el-dialog__title {
    font-weight: 600;
}
.region ::v-deep .el-form-item__label {
    font-weight: 600;
}
.region ::v-deep .el-input {
    width: 30%;
}
.numberInput{
    display: inline-flex;
    align-items: center;
    span{
        white-space: nowrap;
    }
}
.numberInput ::v-deep .el-input {
    width: 80%;
}
.stu_input ::v-deep .el-input {
    width: 80%;
}
.radio {
    margin: 0 15px 0 30px;
    font-weight: 600;
}
.jobNumber {
    margin: 10px 0;
}
.jobNumber ::v-deep .el-input {
    margin-left: 20px;
}
.icon_btn {
    margin: 5px 5px 15px 0;
}

.flex_start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.flex_end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.flex {
    display: flex;
    align-items: center;
}
.from_card {
    margin-bottom: 20px;
}
.mgb20_top {
    margin-top: 400px;
}
.mag {
    margin-right: 20px;
}
.magr50 {
    margin-left: 50px;
}
.font_same {
    margin-left: 40px;
    color: rgb(155, 179, 245);
    font-size: 14px;
}
.school-item{
    margin-bottom: 20px;
    .school-name{
        font-size: 16px;
        font-weight: bold;
    }
    .port{
        .port-name{
            margin: 10px 0;
            font-size: 15px;
            color: #9076FF;
        }
        .fields{
            .line{
                display: flex;
                margin-bottom: 10px;
                li{
                    display: flex;
                    align-items: center;
                    margin-right: 80px;
                    .name{
                        font-size: 14px;
                    }
                    .val{
                        font-size: 14px;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}

// 滚动条的宽度
.scrollbar ::-webkit-scrollbar {
    width: 2px; // 横向滚动条
    height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
.scrollbar ::-webkit-scrollbar-thumb {
    background-color: #9278ff;
    border-radius: 3px;
    box-shadow: inset 0 0 5px #dddddd;
}
.scrollbar ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px #dddddd;
    border-radius: 0;
    background: #dddddd;
}
/deep/.el-input__inner{
    height: 40px !important;
}
</style>