<template>
    <div class="fullHeight" v-if="isTrainPlan">
        <div>
            <!-- header -->
            <div class="searchBox whiteBlock justify-between">
                <el-form :inline="true" size="medium" class="demo-form-inline">
                    <el-form-item label="培训有效期限">
                        <el-date-picker v-model="starEndTime" type="daterange" range-separator="至" start-placeholder="开始日期" value-format="yyyy-MM-dd hh:mm:ss"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="教育类型">
                        <el-select v-model="subjectId" placeholder="请选择" clearable>
                            <el-option v-for="item in subjectNameList" :key="item.id" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button class="expintBtn" size="medium" type="primary" @click="getRecordList">
                            查询
                        </el-button>
                        <el-button class="expintBtn" size="medium" type="primary" @click="addExam">
                            新增培训计划
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- table -->
            <div class="table_wrap whiteBlock" style="height: 667px">
                <el-table class="tables" :data="listData" height="200">
                    <el-table-column type="index" width="80" label="序号" align="center"></el-table-column>
                    <el-table-column align="center" prop="name" label="培训计划名称"></el-table-column>
                    <el-table-column align="center" prop="subjectName" label="科目名称"></el-table-column>
                    <el-table-column align="center" prop="title" label="教育主题"></el-table-column>
                    <el-table-column align="center" width="310px" label="培训有效期限">
                        <template slot-scope="scope">
                            {{scope.row.trainBeginTime+'-'+scope.row.trainEndTime}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" width="80" prop="workerNum" label="教育人数"></el-table-column>
                    <el-table-column align="center" prop="createByName" label="创建人"></el-table-column>
                    <el-table-column align="center" prop="completeRadio" label="培训完成率">
                        <template slot-scope="scope">
                            <!-- {{scope.row.completeRadio?scope.row.completeRadio+'%':'--'}} -->
                            {{scope.row.completeRadio}}%
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="passRadio" label="培训通过率">
                        <template slot-scope="scope">
                            <!-- {{scope.row.passRadio?scope.row.passRadio+'%':'--'}} -->
                            {{scope.row.passRadio}}%
                        </template>
                    </el-table-column>
                    <el-table-column width="220" label="操作" align="center">
                        <template slot-scope="scope">
                            <div style="display:flex;justify-content:center">
                                <el-button size="medium" type="text" class="delete-btn" icon="el-icon-tickets" @click.native.stop="goTrainRecord(scope.row)">
                                    <span style="color:black">培训情况</span>
                                </el-button>
                                <el-button size="medium" type="text" style="color:#ec4b52" class="delete-btn" icon="el-icon-delete" @click.native.stop="onDeleteInfo(scope.row) ">
                                    <span style="color:black">删除</span>
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="pagerBox" @size-change="sizeChange" @current-change="currentChange"
                    :current-page="pagInfo.pageNo" :page-sizes="$store.state.PAGESIZRS" :page-size="pagInfo.pageSize"
                    layout="total, sizes, prev, pager, next" :total="Number(pagInfo.total)" background></el-pagination>
            </div>
            <!-- 新增 -->
            <el-dialog :modal-append-to-body="false" destroy-on-close=true: :title="title" :visible.sync="dialogVisible" width="1000px">
                <el-steps :active="active" align-center>
                    <el-step title="教育信息"></el-step>
                    <el-step title="人员信息"></el-step>
                </el-steps>
                <div class="dialogContainer" v-show="active == 1">
                    <el-form :model="addCourseForm" ref="examForm" label-width="100px" class="demo-addCourseForm">
                        <div class="item-flex">
                            <el-form-item label="培训计划名称" prop="name">
                                <el-input v-model="addCourseForm.name" placeholder="请输入教育主题" maxlength="50" show-word-limit></el-input>
                            </el-form-item>
                        </div>
                        <div class="item-flex">
                            <el-form-item label="科目类型" prop="subjectId">
                                <el-select v-model="addCourseForm.subjectId" placeholder="请选择科目类型">
                                    <el-option :label="item.name" :value="item.id" v-for="(item, i) in subjectNameList"
                                        :key="i"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="item-flex">
                            <el-form-item label="选择课件" prop="courseId">
                                <el-select v-model="addCourseForm.courseId" placeholder="请选择课件">
                                    <el-option :label="item.courseName" :value="item.id" v-for="(item, i) in courseList"
                                        :key="i"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="item-flex">
                            <el-form-item label="选择试卷" prop="examPaperId">
                                <el-select v-model="addCourseForm.examPaperId" placeholder="请选择试卷">
                                    <el-option :label="item.name" :value="item.id" v-for="(item, i) in examPaperSubjectList"
                                        :key="i"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="item-flex">
                            <el-form-item label="教育主题" prop="title">
                                <el-input v-model="addCourseForm.title" placeholder="请输入教育主题" maxlength="50" show-word-limit></el-input>
                            </el-form-item>
                        </div>
                        <div class="item-flex">
                            <el-form-item label="培训开始时间" prop="trainBeginTime">
                                <el-date-picker v-model="addCourseForm.trainBeginTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd hh:mm:ss" default-time="12:00:00"></el-date-picker>
                            </el-form-item>
                        </div>
                        <div class="item-flex">
                            <el-form-item label="培训结束时间" prop="trainEndTime">
                                <el-date-picker v-model="addCourseForm.trainEndTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd hh:mm:ss" default-time="12:00:00"></el-date-picker>
                            </el-form-item>
                        </div>
                    </el-form>


                </div>
                <div class="dialogContainer2" v-show="active == 2">
                    <div class="d2Right" style="width:100%;">
                        <div class="addbtn">
                            <el-button type="primary" size="medium" @click="addlocal"> 添加作业人员</el-button>
                        </div>
                        <el-table class="tables" :data="selectWorkerList" style="min-height:425px">
                            <el-table-column type="selection" align="center" width="55"></el-table-column>
                            <el-table-column type="index" label="序号" align="center"></el-table-column>
                            <el-table-column align="center" prop="workerName" label="姓名"></el-table-column>
                            <el-table-column align="center" prop="idCard"  label="身份证"></el-table-column>
                            <el-table-column align="center" prop="teamName" label="所在班组"></el-table-column>
                            <el-table-column align="center" prop="typeName" label="工种"></el-table-column>
                            <el-table-column align="center" prop="jobTypeName" label="作业类别">
                                <template slot-scope="scope">
                                    <div>{{ scope.row.jobTypeName ? scope.row.jobTypeName : '-' }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="enterDate" label="进场日期"></el-table-column>
                            <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <div style="display:flex">
                                <div @click="onSelectWorker(scope.row)" style="margin-left:10px;" class="operationText">
                                    <img src="@/assets/images/tableIcon/icon-delete.png" width="15px" height="15px" />
                                    <span style="white-space: nowrap;display:flex;align-items:center">删除</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                        </el-table>
                        <!-- <el-pagination class="pagerBox" style="margin-top: 8px;" @size-change="sizeChange" @current-change="currentChange"
                            :current-page="question.pageNo" :page-sizes="$store.state.PAGESIZRS"
                            :page-size="question.pageSize" layout="total, sizes, prev, pager, next"
                            :total="Number(question.total)" background></el-pagination> -->
                    </div>
                </div>
                <div class="dialogFooter">
                    <el-button @click="next" type="primary" v-if="active === 1">下一步</el-button>
                    <el-button @click="last" type="primary" v-if="active === 2">上一步</el-button>
                    <el-button @click="dialogVisible = false"><i class="el-icon-circle-close"></i> 取 消</el-button>
                    <el-button type="primary" @click="submitBtn('examForm')"><i class="el-icon-circle-check"></i> 确
                        定</el-button>
                </div>
            </el-dialog>
            <!-- 添加作业人员 -->
            <el-dialog :modal-append-to-body="false" :title="'添加作业人员'" :visible.sync="dialogVisible3" width="1000px">
                <div class="dialogContainer2" v-show="active == 2">
                    <div class="d2Right">
              
                           <div class="addbtn" style="justify-content:flex-start">
                            <el-form :inline="true" size="medium" class="demo-form-inline">
                                <!-- <el-form-item label="选择企业" prop="enterpriseId"> -->
                                <el-form-item label="" prop="enterpriseId">
                                    <el-select v-model="workerInfo.enterpriseId" placeholder="请选择企业" clearable="">
                                        <el-option v-for="item in enterpriseInfoList" :key="item.id" :label="item.enterpriseName" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <!-- <el-form-item label="选择班组" prop="teamId"> -->
                                <el-form-item label="" prop="teamId">
                                    <el-select v-model="workerInfo.teamId" placeholder="请选择班组" clearable="">
                                        <el-option v-for="item in teamInfoList" :key="item.id" :label="item.teamName" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item prop="workerName">
                                    <el-input placeholder="请搜索姓名" v-model="workerInfo.workerName" suffix-icon="el-icon-search"></el-input>
                                </el-form-item>
                                <el-form-item prop="questionName">
                                    <el-button class="expintBtn" suffix-icon="el-icon-search" size="medium" type="primary" @click="inquire(1)">
                                    查询
                                    </el-button>
                                    <el-button class="expintBtn" size="medium" type="warning" plain @click="inquire(2)">
                                    刷新
                                    </el-button>
                                </el-form-item>
                            </el-form>
                           </div>
                      
                        <el-table class="tables" ref="multipleTable" :data="workerList" style="min-height:425px">
                            <el-table-column type="selection" align="center" width="55"></el-table-column>
                            <el-table-column type="index" label="序号" align="center">
                    </el-table-column>
                            <el-table-column align="center" prop="workerName" label="姓名"></el-table-column>
                            <el-table-column align="center" prop="idCard" label="身份证"></el-table-column>
                            <el-table-column align="center" prop="enterpriseName" label="合作单位"></el-table-column>
                            <el-table-column align="center" prop="departmentName" label="队伍"></el-table-column>
                            <el-table-column align="center" prop="teamName" label="班组"></el-table-column>                                                                                                                                             
                            <el-table-column align="center" prop="typeName" label="工种"></el-table-column>
                            <el-table-column align="center" prop="age" label="年龄"></el-table-column>
                            <el-table-column align="center" prop="enterDate" label="进场日期"></el-table-column>

                        </el-table>
                        <!-- <el-pagination class="pagerBox" style="margin-top: 8px;" @size-change="workerSizeChange" @current-change="workerCurrentChange"
                            :current-page="worker.pageNo" :page-sizes="$store.state.PAGESIZRS"
                            :page-size="worker.pageSize" layout="total, sizes, prev, pager, next"
                            :total="Number(worker.total)" background></el-pagination> -->
                    </div>
                </div>
                <div class="dialogFooter">
                    <el-button @click="dialogVisible3 = false"><i class="el-icon-circle-close"></i> 取 消</el-button>
                    <el-button type="primary" @click="localSubmitBtn()"><i class="el-icon-circle-check"></i> 确
                        定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
    <div style="height: 100%" v-else>
      <el-page-header
        @back="goBack"
        :content="dialogTitle"
        class="backText"
        :class="{ dark: styleType == 2 }"
      ></el-page-header>
      <trainRecord :trainPlan="trainPlan" @cancleSave="goBack"></trainRecord>
    </div>
</template>

<script>
import trainRecord from './trainRecord.vue'

import {
    addTrainApi,
    pagePaperApi,
    pageTrainRecordApi,
    pageTrainApi,
    pageCourseApi,
    getWorkerInfoListApi,
    getTeamInfoListApi,
    getEnterpriseInfoApi,
    deleteTrainApi,

    addSubjectApi,
    listExamSubjectApi,
    getDepartmentListApi,
    addCourseApi,
   
    pageQuestionBankApi,

    listCourseApi,
} from '@/assets/js/api/examSystem/examSystem'


export default {
  components: {
    trainRecord
  },
    mounted() {
        this.styleType = this.$store.state.userInfo.styleType;
     },
    data() {
        const generateData = _ => {
            const data = [];
            for (let i = 1; i <= 15; i++) {
                data.push({
                    key: i,
                    label: `备选项 ${i}`,
                    // disabled: i % 4 === 0
                });
            }
            return data;
        };
        return {
            starEndTime:[],
            trainPlan: {},
            dialogTitle: '详细',
            styleType: 1,
            isTrainPlan:true,
            active: 1,
            coverFileList: [],                            // 课程封面文件
            value1: "",
            activeTab: '1',   // 考试信息列表Tab
            questionList: [],
            subjectName: '',  // 科目名字
            questionName: '', // 试题名称
            data: generateData(),
            value: [1],
            examForm: {},
            subjectNameList: [],
            pagInfo: {
                //公用分页
                pageNo: 1,
                pageSize: 10,
                total: 0,
            },
            projectSn: '',
            dialogVisible: false, //新增弹窗
            dialogVisible2: false, //新增二级弹窗
            dialogVisible3: false, //新增三级弹窗
            workerInfo: {
                subdivisionProjectName: '',
                children: [],
                id: '',
                level: 0,
                parentId: '',
            },
            listData: [],
            subjectId:'',
            listData3: [
                { ruleType: '1', symbol: '+', ruleScore: 3 },
                { ruleType: '', symbol: '', ruleScore: '' },
            ],
            addCourseForm: {
                examType:2,
            },                            // 新增课程表单
            personType: 0,                                // 人员类型

            // 题目列表
            question: {
                //公用分页
                pageNo: 1,
                pageSize: 10,
                total: 0,
            },
            questionSubjectId: '',
            examPaperSubjectList:[],
            workerInfo:{
                workerName:"",
                teamId:"",
                enterpriseId:""
            },
            worker: {
                //公用分页
                pageNo: 1,
                pageSize: 10,
                total: 0,
            },
            workerList:[],
            teamInfoList:[],
            enterpriseInfoList:[],
            selectWorkerList:[],

            examCourseList:[],
            title:"",
            courseList: [],
        }
    },
    watch: {
        dialogVisible(newV, oldV) {
            this.clearDialog()
            if (newV === false) {

            }
        },
        // subjectId(newV,oldV){
        //     if(newV !== oldV){
        //         if(!newV) return
        //         this.getRecordList()
        //     }
        // },
        // starEndTime(newV,oldV){
        //     if(newV !== oldV){
        //         if(!newV) return
        //         this.getRecordList()
        //     }
        // }
    },
    created() {
        this.projectSn = this.$store.state.projectSn
        this.getRecordList()

        this.userEnterpriseId = this.$store.state.userInfo.userEnterpriseId;
        this.getCourseList()

        this.getExamSubjectList();
        this.getPaperList();

        this.getTeamInfoList();
        this.getEnterpriseInfoList();
    },
    methods: {
        getCourseList(){
            listCourseApi({
                projectSn: this.projectSn,
            }).then(res => {
                if(res.success){
                    this.courseList = res.result
                }
            })
        },
        goTrainRecord(item){
            this.trainPlan = item
            this.isTrainPlan = false
        },
        goBack() {
            this.isTrainPlan = true
            // this.initData()
            // this.isAdd = false
            // this.isEdit = false
            // this.isUpdate = false;
        },
        onSelectWorker(row){
            const findIndex = this.selectWorkerList.findIndex(item => item.id == row.id);
            if(findIndex > -1) {
                this.selectWorkerList.splice(findIndex,1);
                this.$message.success('删除成功!');
            }
        },
        addlocal(){
            this.getWorkerInfoList();
           
            this.dialogVisible3=true;
        },
        localSubmitBtn(){
           this.selectWorkerList = this.$refs.multipleTable.selection;

           console.log("------------------",this.selectWorkerList);
           this.dialogVisible3= false;
        },
        inquire(flag){
            this.worker.pageNo = 1;

            if(flag == 2) {
                this.workerInfo.workerName = "";
                this.workerInfo.enterpriseId = "";
                this.workerInfo.teamId = "";
            }
            this.getWorkerInfoList();
        },
        getWorkerInfoList (){
            let data = {
                workerName:this.workerInfo.workerName,
                teamId:this.workerInfo.teamId,
                projectSn: this.projectSn,
                enterpriseId: this.workerInfo.enterpriseId,
                pageNo: this.worker.pageNo,
                // pageSize: this.worker.pageSize,
                pageSize: 999999,
            }
            getWorkerInfoListApi(data).then((res) => {
                if (res.code == 200) {
                   console.log(res.result.records);
                    this.workerList =  res.result.records;
                    this.worker.total = res.result.total;
                }
            })
        },
        getEnterpriseInfoList(){
            getEnterpriseInfoApi({projectSn: this.projectSn,}).then((res)=>{
                if (res.code == 200) {
                this.enterpriseInfoList = res.result
                console.log('==========公司列表--',this.enterpriseInfoList)
                }
            })
        },
        getTeamInfoList (){
            let data = {
                projectSn: this.projectSn,
            }
            getTeamInfoListApi(data).then((res)=>{
                if (res.code == 200) {
                this.teamInfoList = res.result
                console.log('==========班组列表--'+this.personType+'==========',this.teamInfoList)
                }
            })
        },
        next() {
            // if(this.active == 2) {
            //     this.$message.warning('没有下一步了');
            //     return
            // };
            // this.active++;
            if(this.active == 1) {
                this.active++;
            };
        },
        last() {
            if(this.active == 2) {
                this.active--;
            };
        },
        getExamSubjectList() {  // 获取科目类别列表
            let data = {
                sn: this.projectSn,
            }
            // listTreeExamSubjectApi(data).then((res) => {
            listExamSubjectApi(data).then((res) => {
                if (res.code == 200) {
                    this.subjectNameList = res.result
                    console.log('==========考试科目列表==========', this.listData)
                }
            })
        },
        getPageCourseApi(){
            pageCourseApi({
                pageNo: 1,
                pageSize: 99999,
                courseName: '',
                subjectId:"",
            }).then((result) => {
                if (result.success) {
                    console.log(result);
                    this.examCourseList = result.result.records
                }
            })
        },
        handleClose() {  // 关闭弹框
            this.clearObj()
            this.resetAllChecked()
            this.dialogVisible = false
        },
        clearObj() { //清空表单
            this.addCourseForm = {}
        },
        //删除
        onDeleteInfo(val) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        })
            .then(() => {
                // alert('还未对接口')
                deleteTrainApi({ id: val.id }).then((res) => {
                    if (res.success) {
                        // this.getRecordList()
                        this.refresh()
                    this.$message.success(res.message)
                    } else {
                    this.$message({
                        type: 'error',
                        message: res.message,
                    })
                    }
                })
            })
            .catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除',
                })
            })
        },

        //新增按钮
        async addExam(row) { // 打开弹窗
            this.personType = 1;
            this.active = 1;
            // await this.getExamSubjectList()
            // this.getWorkerInfoList()
            // await this.getLaborPersonList()
            // await this.getAdminPersonList()
            // await this.getTempPersonList()
            pageTrainRecordApi({
                pageNo: this.question.pageNo,
                pageSize: this.question.pageSize,
            }).then((result) => {
                if (result.success) {
                    this.questionList = result.result.records
                    this.question.total = result.result.total
                }
            })

            this.getPageCourseApi();

            if(row && row.id){
                this.title = '编辑';
                this.addCourseForm = {
                    ...row,
                    examType: row.examType.toString(),
                    examNum:row.examNum.toString()
                };
                this.coverFileList = JSON.parse(row.imageUrl);
                
                            // examTrainRecordList:this.selectWorkerList,
            }else {
                this.title = '新增';
            }
           

            this.dialogVisible = true
        },
        getPaperList() {
            let data = {
                projectSn: this.projectSn,
            }
            pagePaperApi({
                pageNo: 1,
                pageSize: 999999,
                name: '',
                subjectId:'',
            }).then((result) => {
                if (result.success) {
                console.log(result);
                    this.examPaperSubjectList = result.result.records
                }
            })
        },
        //获取列表数据
        getRecordList() {
            
            pageTrainApi({
                pageNo: this.pagInfo.pageNo,
                pageSize: this.pagInfo.pageSize,
                subjectId: this.subjectId,
                trainBeginTime: this.starEndTime?this.starEndTime[0]:'',
                trainEndTime: this.starEndTime?this.starEndTime[1]:'',
                projectSn: this.$store.state.projectSn,
            }).then((result) => {
                if (result.success) {
                console.log(result);
                this.listData = result.result.records
                this.pagInfo.total = result.result.total
                }
            })
        },
        //新增/编辑
        submitBtn() {
            if(this.active == 1){
                this.$message.warning("请填写完内容!点击下一步")
                return
            }
            console.log("=====================================")
            console.log(this.addCourseForm)
            console.log(this.selectWorkerList);
            // this.examForm.projectSn = this.projectSn

            this.$refs.examForm.validate((valid) => {
                if (valid) {
                    if (this.title == '新增') {
                        let tempList = []
                        this.selectWorkerList.map(item => {
                            let tempObj = {
                                workerId:item.id,
                                workerName:item.workerName,
                                workerCard: item.idCard,
                                workerTeam: item.departmentName+item.teamName,
                                workType: item.typeName,
                                entryTime: item.enterDate
                            }
                            tempList.push(tempObj)
                        })
                        console.log(this.selectWorkerList,88889999)
                        addTrainApi({
                            ...this.addCourseForm,
                            // examTrainRecordList:this.selectWorkerList,
                            examTrainRecordList:tempList,
                            examType: parseInt(this.addCourseForm.examType),
                            examNum: parseInt(this.addCourseForm.examNum),
                            projectSn: this.projectSn,
                        }).then((res) => {
                            this.addCourseForm = {}
                            this.examForm = {}
                            this.$message.success('新增成功')
                            this.dialogVisible = false
                            this.getRecordList()
                        })
                    } else {
                        // upSubdivisionProjectApi(this.workerInfo).then((res) => {
                        //   this.$message.success('编辑成功')
                        //   this.dialogVisible = false
                        //   this.getRecordList()
                        // })
                    }
                } else {
                    return false
                }
            })
        },
        clearDialog() {
            this.examForm = {}
        },
        //切换条数
        sizeChange(val) {
            this.pagInfo.pageSize = val
            this.getRecordList()
        },
        //切换页数
        currentChange(val) {
            this.pagInfo.pageNo = val
            this.getRecordList()
        },
        //切换条数
        workerSizeChange(val) {
            this.worker.pageSize = val;
            this.getWorkerInfoList();
        },
        //切换页数
        workerCurrentChange(val) {
            this.worker.pageNo = val;
            this.getWorkerInfoList();
        },
        handleChange(value, direction, movedKeys) {
            console.log(value, direction, movedKeys);
        },
        refresh(){
            this.pagInfo.pageNo = 1
            this.getRecordList()
        }
    },
}
</script>
<style lang="less" scoped>
.backText {
    background-color: #fff;
  padding: 8px 0;
  padding-left: 10px;
  /deep/.el-page-header__content {
    font-size: 14px;
  }
}
.qrcode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.qrcode >div:first-child{
    font-size: 16px;
    font-weight: bold;
}
.qrcode >div:nth-child(2){
    margin: 15px 0;
}

.qrcode >div:last-child{
    margin-top: 10px;
    color: #A9ABB5;
}


.item-flex {
    display: flex;
}

.item-flex_child{
    display:flex;
    align-items: center;
}

.item-flex_child > div:last-child{
    font-size: 14px;
    padding: 0 10px;
}


.item-flex /deep/ .el-input__inner {
    width: 280px;
}

.item-flex /deep/ .el-textarea__inner{
    width: 280px;
}

.item-flex_child /deep/ .el-input__inner {
    width: 260px;
}

.item-flex /deep/ .el-radio-group {
    display: flex;
    flex-direction: column;
}

.item-flex /deep/ .el-radio {
    line-height: 40px
}

.addbtn {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.addbtn  /deep/ .el-input__inner {
    width: 180px
}
//examManage
.examManageContainer {
    width: 100%;
    height: 100%;

    .emcHeaderInfo {
        width: 100%;

        .emcTitle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            font-size: 16px;
            font-weight: 500;

            .beforeTitle {
                height: 16px;
                width: 3px;
                border-radius: 3px;
                background-color: #4181EF;
                margin-right: 13px;
            }
        }

        .emcHeader {
            display: flex;

            .headerItem {
                margin-left: 25px;
            }
        }
    }
}

//examManage

// dialog4
.dialogContainer4 {
    // width: 100%;
    height: 615px;
    padding: 0 20px;

    .d4Top {
        width: 100%;
        height: 33%;

        .topTitle {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 30px;
            font-size: 16px;
            font-weight: 500;

            .beforeTitle {
                height: 16px;
                width: 3px;
                border-radius: 3px;
                background-color: #4181EF;
                margin-right: 13px;
            }
        }
    }

    .d4Bottom {
        width: 100%;
        height: 67%;

        .bottomTitle {
            border-top: 1px solid #f3f5fc;
            border-bottom: 1px solid #f3f5fc;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 30px;
            font-size: 16px;
            font-weight: 500;
            height: 40px;

            .beforeTitle {
                height: 16px;
                width: 3px;
                border-radius: 3px;
                background-color: #4181EF;
                margin-right: 13px;
            }

            .tabItem {
                cursor: pointer;
                margin-left: 20px;

                &.active {
                    font-weight: bold;
                    color: #4181EF;
                }
            }
        }
    }
}

// dialog4

// dialog3
.dialogContainer3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

// dialog3

// dialog2
.dialogContainer2 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 575px;

    .d2Left {
        width: 25%;
        height: 100%;
        // background-color: darkred;
    }

    .d2Right {
        width: 100%;
        height: 93%;
        // background-color: darkblue;

    }
}

// dialog2

// dialog
.transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
}

.dialogContainer {
    display: flex;
    justify-content: center;
    // justify-content: space-between;
    width: 100%;

    // height:575px;
    /deep/ .el-dialog__body {
        padding: 0 20px;
    }

    .dialogLeft {
        width: 35%;
        height: 100%;

        // background-color: darkred;
        /deep/ .el-upload-dragger {
            width: 230px;
            height: auto;
        }

        /deep/ .el-input {
            width: 230px;
        }

        /deep/ .el-textarea {
            width: 230px;
        }

        /deep/ .el-date-editor--daterange.el-input__inner {
            width: 230px;
        }

        /deep/ .el-upload-dragger .el-icon-upload {
            margin: 0 0 0;
        }

        /deep/ .el-upload__tip {
            margin: 0 0 0;
        }

        /deep/ .el-upload--picture-card {
            width: 100px;
            height: 100px;
            line-height: 102px;
        }
    }

    .dialogRight {

        width: 65%;
        height: 95.9%;
        // background-color: darkblue;
        display: flex;

        .transLeft {
            width: 50%;
            height: 100%;
            // background-color: darkred;
            border: 1px solid #d7dbe9;
            border-radius: 3px;

            .tlOne {
                margin: 5px 5px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .tlTwo {
                margin: 0 5px;
                margin-bottom: 5px;
                display: flex;
                align-items: center;

            }

            .tlThree {
                // border: 1px solid;
                height: 480px;

                .dialog-tree {
                    margin: 0px 0px;
                    .treeStyle();

                    /deep/.el-tree-node__content {
                        position: relative;
                    }

                    /deep/.el-tree-node__content>label.el-checkbox {
                        position: absolute;
                        right: 0;
                    }
                }
            }
        }

        .transMid {
            width: 10%;
            height: 100%;

            .transBtn {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        }

        .transRight {
            width: 40%;
            height: 100%;
            border: 1px solid #d7dbe9;
            border-radius: 3px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .trItem {
                // background-color: blue;
                height: 98%;
                margin: 0 5px;

                .trItemInner {
                    border: 1px solid #d7dbe9;
                    border-radius: 3px;
                    height: 95.8%;
                    margin: 5px 0px;

                    .innerOne {
                        margin: 5px 5px;
                        height: 20px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }

                    .innerTwo {
                        margin: 5px 5px;
                    }

                    .innerThree {
                        margin: 0 5px;
                        // border: 1px solid;
                        height: 172px;
                    }
                }
            }
        }
    }
}

.dialogFooter {
    display: flex;
    justify-content: center;
}

//dialog

.greenSpan {
    color: green;
}

.detailIcon {
    background: url(~@/assets/images/projectImg/numBgc.png);
}

.down {
    text-decoration: none;
    color: #fff;
}

.expintBtn {
    display: inline-block !important;
    margin-right: 10px;
}

.table_wrap {
    height: 800px;
    overflow: auto;
    margin-top: -15px;
}

.treeStyle() {
    /deep/.el-tree {
        font-size: 15px;
        width: 100%;
        background-color: transparent;

        .el-tree-node {
            white-space: normal;

            &:focus>.el-tree-node__content {
                background-color: transparent;
            }

            &.is-current>.el-tree-node__content {
                background-color: rgba(81, 129, 246, 0.14);
                color: #5181f6;
            }
        }

        .el-tree-node__content {
            // height: 32px;
            padding: 7px 0;
            height: auto;
            line-height: 16px;
            position: relative;

            // margin-bottom: 7px;
            &:hover {
                background-color: rgba(81, 129, 246, 0.14);
                color: #5181f6;
            }

            .videoName {
                font-size: 14px;
            }

            .projectName {
                font-size: 14px;
                width: calc(100% - 55px);
                display: inline-block;
            }

            .companyName2 {
                font-size: 16px;
                font-weight: bold;
                display: inline-block;
                width: 192px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .el-tree-node__expand-icon {
            font-size: 16px;
            padding: 0 6px;

            &.is-leaf {
                color: transparent !important;
            }
        }

        .treeTitle {
            background-color: #f7f7f7;
            margin-bottom: 10px;
        }
    }
}

.justify-between {
    justify-content: space-between;
}
.dark {
  /deep/.el-page-header__content {
    color: #fff;
  }
  /deep/ .print-btn {
    background: none;
    color: #262d47;
    font-size: 14px;
  }
}
</style>