<template>
    <div>
        <el-form :disabled="isDetail">
            <el-card shadow="hover" class="m-b-20">
                <div class="flex-between">
                    <el-page-header @back="goBack" :content="isDetail ? '查看' : (id ? '更新' : '创建') + '教学实验'"></el-page-header>
                    <div>
                        <el-button type="primary" size="small" @click="upload" v-show="!isDetail">{{id ? '更新' : '创建'}}</el-button>
                    </div>
                </div>
            </el-card>

            <el-card shadow="hover" class="mgr20 m-b-20">
                <div>
                    <p class="m-b-20">考核名称</p>
                    <el-input
                        placeholder="请输入考核名称"
                        v-model="experimentalName"
                        clearable
                        maxlength="15"
                        class="inline-input"
                    ></el-input>
                </div>
            </el-card>



            <el-card shadow="hover" class="m-b-20">
                <div>
                    <p class="m-b-20">发布方式</p>
                    <el-radio-group v-model="type" :disabled="id ? true : false">
                        <el-radio :label="1">手动发布</el-radio>
                        <el-radio :label="2">定时发布</el-radio>
                    </el-radio-group>
                </div>
            </el-card>
            <!-- 根据发布方式判断时间的显示 -->
            <el-card shadow="hover" class="m-b-20">
                <div>
                    <p class="m-b-20">实验时间</p>
                    <!-- 手动发布显示 -->
                    <div class="date-inputs" v-if="type==1">
                        实验时长：
                        <el-input size="small" v-model="duration.day" placeholder></el-input> 天
                        <el-input size="small" v-model="duration.hour" placeholder></el-input> 小时
                        <el-input size="small" v-model="duration.minute" placeholder></el-input> 分
                    </div>

                    <!-- 定时发布显示 -->
                    <div v-if="type==2" class="addAssess">
                        <span class="mgr10">开始时间:</span>
                        <el-date-picker
                            size="small"
                            v-model="date"
                            type="datetimerange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                        ></el-date-picker>
                    </div>
                </div>
            </el-card>

            <el-card shadow="hover" class="mgr20 m-b-20">
                <div>
                    <p class="m-b-20">课程</p>
                    <div class="inline-input">
                        <el-select v-model="systemId" placeholder="请选择" @change="initData">
                            <el-option
                                v-for="item in systemList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </div>
                </div>
            </el-card>

            <!-- 实训项目模块 -->
            <el-card shadow="hover" class="m-b-20">
                <div class="flex-between m-b-20">
                    <span>实训项目</span>
                    <div style="display: inline-flex;">
                        <div>
                            <el-input size="small" placeholder="请输入项目名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input>
                        </div>
                        <el-button style="margin-left: 5px" type="primary" size="small" round @click="toProject">自定义实验项目</el-button>
                    </div>
                </div>
                <!-- 实训项目表格 -->
                <el-table :data="projectData" class="table" stripe header-align="center">
                    <!-- 单选实训项目ID -->
                    <el-table-column width="60" label="选择" align="center">
                        <template slot-scope="scope">
                            <el-radio v-model="projectId" :label="scope.row.projectId">&nbsp;</el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column prop="projectName" label="项目名称" align="center"></el-table-column>
                    <el-table-column prop="auth" label="项目权限" align="center">
                        <template slot-scope="scope">
                            {{ founderKeys[scope.row.founder] }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="creater" label="创建人" align="center">
                        <template slot-scope="scope">
                            {{ permissionsKeys[scope.row.permissions] }}
                        </template>
                    </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="showProject(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        background
                        :page-size="pageSize"
                        @current-change="handleCurrentChange"
                        layout="total,prev, pager, next"
                        :total="total"
                    ></el-pagination>
                </div>
            </el-card>

            <el-card shadow="hover" class="mgr20 m-b-20">
                <div>
                    <p class="m-b-20">考核发布</p>
                    <el-radio-group v-model="isSpecify">
                        <el-radio :label="1">指定范围</el-radio>
                        <el-radio :label="0">无指定范围</el-radio>
                    </el-radio-group>

                </div>
                <div v-show="isSpecify === 1" style='padding-top: 24px;'>
                    <p class="m-b-20">班级名称</p>
                    <el-input
                        placeholder="请输入班级名称"
                        v-model="filterClassName"
                        class="inline-input"
                        clearable
                    ></el-input>

                    <div v-show='tagList.length' style="padding: 24px 0">
                        <el-tag
                            v-for="(tag, index) in tagList"
                            :key="index"
                            closable
                            @close="handleCloseTag(tag)"
                            style="margin-right: 10px"
                        >
                            {{tag.className}}
                        </el-tag>
                    </div>

                    <el-tree
                        ref="tree"
                        node-key="id"
                        show-checkbox
                        highlight-current
                        default-expand-all
                        :data="classTreeList"
                        :default-checked-keys="defaultCheckedList"
                        :filter-node-method="filterNode"
                        :props="defaultProps"
                        @check="handleCheck"
                    >
                    </el-tree>
                </div>
            </el-card>

            <!-- 邀请码 -->
            <el-card v-if='isSpecify === 0' shadow="hover" class="m-b-20">
                <div style="margin-bottom: 10px">
                    <p class="m-b-20">设置邀请码</p>
                    <el-radio-group v-model="isEnableCode">
                        <el-radio :label="0">是</el-radio>
                        <el-radio :label="1">否</el-radio>
                    </el-radio-group>
                </div>
                <div v-if="isEnableCode === 0">
                    <el-input style="display: inline-block;width: auto;margin-right: 10px" type="number" v-model="invitationCode" maxlength="6" placeholder="请设置6个数字"></el-input>
                    <el-button type="text" @click="createInv">随机</el-button>
                </div>
            </el-card>
        </el-form>
    </div>
</template>
<script>
import Setting from '@/setting'
import util from '@/libs/util'
import { mapState, mapActions } from 'vuex'
export default {
    data() {
        return {
            founderKeys: {
                0: '系统',
                1: '老师'
            },
            permissionsKeys: {
                0: '练习',
                1: '考核',
                2: '竞赛'
            },
            id: '',
            type: 1, // 发布类型(1、手动发布 2、定时发布)
            isSpecify: 1, // 考核发布(1、指定范围 2、无指定范围)
            filterClassName: "", // 班级名称搜索
            tagList: [], // 班级名称标签
            classTreeList: [], // 班级树数据
            defaultCheckedList: [], // 默认选中
            allCheckedNodes: [], // 当前选中和半选节点
            allCheckedKeys: [], // 当前选中的班级和学生节点key
            defaultProps: {
                children: 'children',
                label: 'organizationName'
            }, // 树控件配置选项
            schoolId: Setting.schoolId, // 学校id Setting.schoolId
            systemId: Setting.systemId,
            systemList: Setting.systemList,
            roleStatus: util.getRoleName,
            isDetail: Boolean(this.$route.query.show),
            duration: {
                day: '',
                hour: '',
                minute: ''
            },
            keyword: '',
            searchTimer: null,
            date: '',
            experimentDuration: '0d0h0m',
            experimentalNumber: 0,
            projectId: '',
            projectName: '',
            status: 0, // 状态(0、待开始 1、进行中 2、已结束)
            surplusTime: '',
            experimentalName: '',//考核名称
            isEnableCode: 0, //是否设置邀请码
            startTime: '0000-00-00 00:00:00', //开始时间
            stopTime: '0000-00-00 00:00:00', //结束时间
            invitationCode: '',
            currPage: 1,
            projectDataAll: [],
            projectData: [],
            invRepeat: false,
            pickerOptions: {
                disabledDate: time => {
                    return time.getTime() < new Date().getTime() - 86400000
                }
            },

            projectPermissionsList: ['练习','考核','竞赛'],
            projectQueryData: {
                userId: this.userId,
                systemId: this.systemId
            },
            page: 1,
            pageSize: 5,
            total: 0,
            multipleSelection: [],
            isToProject: false,
            expNameRepeat: false
        };
    },
    computed: {
        ...mapState('user', [
            'userId'
        ]),
        ...mapState('project', [
            'assFields'
        ]),
    },
    mounted() {
        // console.log(22,this.assFields)
        this.date = [util.formatDate("yyyy-MM-dd hh:mm:ss",new Date(new Date().getTime() + 300000)),util.formatDate("yyyy-MM-dd hh:mm:ss",new Date(new Date().getTime() + 300000))]
        this.id = this.$route.query.id
        this.id && this.getData()
        this.getProjectData()
        this.recoveryData()
        this.getClassTreeData()
    },
    beforeDestroy(){
        if(!this.isToProject) this.setAss({})
    },
    watch: {
        date: function(val){
            if(val[0] != '0000-00-00 00:00:00'){
                this.startTime = util.formatDate("yyyy-MM-dd hh:mm:ss",new Date(val[0]))
                this.stopTime = util.formatDate("yyyy-MM-dd hh:mm:ss",new Date(val[1]))
            }
        },
        duration: {
            handler(n,o){
                this.experimentDuration = `${n.day ? n.day : 0}d${n.hour ? n.hour : 0}h${n.minute ? n.minute : 0}m`
            },
            deep: true
        },
        keyword: function(val) {
            clearTimeout(this.searchTimer)
            this.searchTimer = setTimeout(() => {
                this.initData()
            },500)
        },
        filterClassName(val) {
            this.$refs.tree.filter(val);
        }
    },
    methods: {
        ...mapActions('project', [
            'setAss'
        ]),
        handleCloseTag(tag) { // 关闭班级标签
            let tagIndex = this.tagList.findIndex( i => i.classId === tag.classId);
            this.tagList.splice(tagIndex, 1);

            // 获取当前班级在全部节点中的下标
            let classIndex  = this.allCheckedNodes.findIndex( i => i.id === tag.id);

            // 获取当前班级下学生keys
            let studentsKeys = [];
            if(this.allCheckedNodes[classIndex].children && this.allCheckedNodes[classIndex].children.length) {
                studentsKeys = this.allCheckedNodes[classIndex].children.map( i => i.id);
            }
            let filterKeys = [...studentsKeys, this.allCheckedNodes[classIndex].id];
            let setKeys = []; // 设置选中的节点
            this.allCheckedKeys.forEach(i => {
                if(!filterKeys.includes(i)){
                    setKeys.push(i)
                }
            }); // 一个数组过滤另一个数组
            this.allCheckedKeys = setKeys; // 重新缓存全选状态下的班级和学生节点key

            console.log("所有节点keys===",JSON.stringify(this.allCheckedKeys));
            console.log("当前班级和学生keys===",JSON.stringify(filterKeys));
            console.log("设置选中的节点===",JSON.stringify(setKeys));


            let tempArr = [];
            this.allCheckedNodes.forEach(i => {
                if(!filterKeys.includes(i.id)){
                    tempArr.push(i)
                }
            });
            this.allCheckedNodes = tempArr; // 缓存全选和半选状态下的所有节点
            this.$refs.tree.setCheckedKeys(setKeys);

        },
        handleCheck(data, checked) { // 当复选框被点击的时候触发
            console.log(checked);
            // console.log(JSON.stringify(checked.checkedNodes));

            // 全选和半选状态下的班级都显示在标签
            let checkedClass =  checked.checkedNodes.filter( i => i.level === 3);
            let halfCheckedClass =  checked.halfCheckedNodes.filter( i => i.level === 3);
            this.tagList = [...checkedClass, ...halfCheckedClass].map(i => {
                return {classId: i.id, className: i.organizationName}
            });

            // 缓存全选和半选状态下的所有节点
            this.allCheckedNodes = [...checked.checkedNodes, ...checked.halfCheckedNodes];

            // 缓存全选状态下的班级和学生节点key
            let tempArr =  checked.checkedNodes.filter( i => i.level === 3 || i.level === 4);
            this.allCheckedKeys = tempArr.map(i => i.id);
        },
        filterNode(value, data) { // 对树节点进行过滤
            if (!value) return true;
            return data.organizationName.indexOf(value) !== -1;
        },
        toTreeId(data) { // 多个班级有相同的学生，将学生id重新封装成（班级id+学生id）,已便达到树节点需要的key唯一性
            if (!data) return data;
            let result;
            if (Array.isArray(data)) {
                result = [];
                data.forEach(item => {
                    if (item.level < 4 && item.children && item.children.length) {
                        item.children = this.toTreeId(item.children);
                    } else if (item.level === 4) {
                        item.id = `${item.parentId}-${item.id}`;
                    }
                    result.push(item);
                });
            }
            return result;
        },
        getClassTreeData () { // 获取树结构数据
            this.$post(`${this.api.treeList}?schoolId=${this.schoolId}`).then(res => {
                let {status, list} = res;
                if (status === 200 && list) {
                    this.classTreeList = this.toTreeId(res.list);
                } else {
                    util.errorMsg(res.message);
                }
            }).catch(err => {
                console.log(err);
            });
        },
        getProjectData(){ 
            let data = {
                schoolId: this.schoolId, // 学校id
                platformId: 1, // 平台：职站:1 中台:3
                permissions: 1, // 项目权限(0:练习 1:考核 2:竞赛)
                projectName: this.keyword, // 项目名称
                systemId: this.systemId, // 系统id
                founder: 0, // 创建人角色(0:系统 1:老师)
                state: 1, // 状态(0:草稿箱 1:已发布)
                pageNum: this.page,
                pageSize: 10000,
            }
            this.$post(this.api.queryProjectManage, data).then(res => {
                let { status, data } = res;
                if (status === 200 && data) {
                    let list = data.records;
                    let result = []
                    list.map(n => {
                        n.enable || result.push(n)
                    })
                    this.projectDataAll = result
                    this.total = result.length
                    this.handlePage()
                }
            }).catch(err => {
                console.log(err);
            });
        },
        handlePage(){
            let list = this.projectDataAll
            let result = list.slice((this.page - 1) * this.pageSize,this.page * this.pageSize)
            this.projectData = result
        },
        initData(){
            this.page = 1
            this.getProjectData()
        },
        recoveryData(){
            if(JSON.stringify(this.assFields) != '{}'){
                let info = this.assFields
                this.experimentDuration = info.experimentDuration
                this.experimentalName = info.experimentalName
                this.invitationCode = info.invitationCode
                this.isEnableCode = info.isEnableCode
                this.projectId = info.projectId
                this.startTime = info.startTime
                this.stopTime = info.stopTime
                this.surplusTime = info.surplusTime
                this.type = info.type
                this.expNameRepeat = info.expNameRepeat

                this.formatDuration()
            }
        },
        upload() { // 提交
            if(!this.experimentalName) return util.warningMsg('请填写考核名称')
            if(this.expNameRepeat) return util.warningMsg('考核名称重复，请重新输入')
            if(this.type !== 1){
                if(new Date().getTime() > new Date(this.startTime).getTime()) return util.warningMsg('开始时间不能早于当前时间')
                let timestamp = new Date(new Date(this.stopTime).getTime() - new Date(this.startTime).getTime())
                let minute = 1000 * 60
                let hour = minute * 60
                let day = hour * 24
                this.experimentDuration = `${Math.floor(timestamp / day)}d${Math.floor(timestamp % day / hour)}h${Math.floor(timestamp % day % hour / minute)}m`
            }
            if(this.type == 1 && this.experimentDuration == '0d0h0m') return util.warningMsg('请填写实验时长')
            if(this.type == 2 && this.startTime == '0000-00-00 00:00:00') return util.warningMsg('请填写实验时间')
            if(!this.projectId) return util.warningMsg('请选择实训项目')
            this.projectName = this.projectData.find(n => n.projectId == this.projectId).projectName
            if(this.isSpecify === 0 && this.isEnableCode == 0){
                if(!this.invitationCode) return util.warningMsg('请设置邀请码')
                if(!this.invitationCode || String(this.invitationCode).length < 6 || isNaN(this.invitationCode)) return util.warningMsg('请输入6位纯数字邀请码')
                // if(this.invRepeat) return util.warningMsg('邀请码重复，请重新输入')
            }

            let classId = "";
            let stuInfo = [];
            if (this.isSpecify === 1) {
                if (!this.tagList.length) {
                    util.warningMsg('请选择学生')
                    return;
                } else {
                    let ids = this.tagList.map(i => i.classId);
                    classId = ids.toString();
                    let nodes = this.allCheckedNodes.filter( i => i.level === 4);
                    nodes.forEach(i => {
                        let arr = i.id.split("-")
                        stuInfo.push({classId: arr[0], stuAccountId: arr[1]})
                    });
                }
            }

            let data = {
                id: this.id,
                experimentDuration: this.experimentDuration,
                createTime: this.id ? this.createTime : util.formatDate("yyyy-MM-dd hh:mm:ss"),
                experimentalName: this.experimentalName,
                experimentalNumber: this.experimentalNumber,
                invitationCode: this.invitationCode,
                isEnableCode: this.isEnableCode,
                projectId: this.projectId,
                projectName: this.projectName,
                status: this.status,
                surplusTime: this.surplusTime,
                type: this.type,
                userId: this.userId,
                systemId: this.systemId,
                isSpecify: this.isSpecify,
                classId,
                stuInfo,

            }
            if(this.type == 2){
                data.startTime = this.startTime
                data.stopTime = this.stopTime
            }
            if(this.id){
                this.$post(this.api.modifyAssessment, data).then(res => {
                    util.successMsg('修改成功');
                    this.$router.back()
                })
                .catch(err => {
                    console.log(err);
                });
            }else{
                this.$post(this.api.saveAssessment, data).then(res => {
                    if (res.status === 200) {
                        util.successMsg('创建成功');
                        this.$router.back()
                    } else {

                    }
                })
                .catch(err => {
                    console.log(err);
                });
            }
        },
        getData() {
            this.$get(`${this.api.getDetailById}?id=${this.id}`)
                .then(res => {
                    if(res.status == 200){
                        let info = res.data;
                        this.createTime = info.createTime
                        this.experimentDuration = info.experimentDuration
                        this.experimentalName = info.experimentalName
                        this.experimentalNumber = info.experimentalNumber
                        this.invitationCode = info.invitationCode
                        this.isEnableCode = info.isEnableCode
                        this.projectId = info.projectId
                        this.projectName = info.projectName
                        this.startTime = info.startTime
                        this.status = info.status
                        this.stopTime = info.stopTime
                        this.surplusTime = info.surplusTime
                        this.type = info.type

                        // 处理实验时间
                        this.formatDuration();

                        // 编辑时，设置默认勾选
                        if (info.stuInfo && info.stuInfo.length) {
                            let keys = info.stuInfo.map(i => {
                                return `${i.classId}-${i.stuAccountId}`;
                            });
                            this.$nextTick(function () {
                                this.$refs.tree.setCheckedKeys(keys);
                            });
                        }

                        // 获取树结构选中和半选中状态下的数据
                        this.allCheckedNodes = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes());

                        // 缓存全选状态下的班级和学生节点key
                        let tempArr =  this.$refs.tree.getCheckedNodes().filter( i => i.level === 3 || i.level === 4);
                        this.allCheckedKeys = tempArr.map(i => i.id);

                        this.tagList = this.allCheckedNodes.map(i => {
                            let obj = {};
                            if (i.level === 3) {
                                obj = { classId: i.id, className: i.organizationName }
                            }
                            return obj;
                        })
                    }else{
                        util.errorMsg(res.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        formatDuration(){
            let duration = this.experimentDuration.replace(/\D+/g,',').split(',')
            this.duration = {
                day: duration[0],
                hour: duration[1],
                minute: duration[2]
            }
            this.date = [this.startTime,this.stopTime]
        },
        handleCacheData(){
            let data = {
                id: this.id,
                experimentDuration: this.experimentDuration,
                experimentalName: this.experimentalName,
                invitationCode: this.invitationCode,
                isEnableCode: this.isEnableCode,
                projectId: this.projectId,
                startTime: this.startTime,
                stopTime: this.stopTime,
                surplusTime: this.surplusTime,
                type: this.type,
                expNameRepeat: this.expNameRepeat
            }
            this.setAss(data)
            this.isToProject = true
        },
        toProject(){
            this.handleCacheData()
            this.$router.push('/project/list/?show=1')
        },
        showProject(row){
            this.handleCacheData()
            this.$router.push(`/project/add?projectId=${row.projectId}&show=1`)
        },
        goBack() {
            if(this.isDetail){
                this.$router.back()
            }else{
                this.$confirm('确定返回？未更新的信息将不会保存。', '提示', {
                    type: 'warning'
                })
                .then(() => {
                    this.$router.back()
                })
                .catch(() => {});
            }
        },
        varifyInv() {
            this.$get(this.api.getInvitationCode, { invitationCode: this.invitationCode })
            .then(res => {
                if(res.InvitationCode) {
                    util.warningMsg('邀请码重复，请重新输入')
                    this.invRepeat = true
                }else{
                    this.invRepeat = false
                }
            })
            .catch(err => {});
        },
        createInv() {
            let result = ''
            for(let i=0; i<6; i++){
                result += Math.floor(Math.random()*10)
            }
            this.invitationCode = result
            // this.varifyInv()
        },
        handleCurrentChange(val){
            this.page = val
            this.handlePage()
        }
    },
};
</script>

<style lang="scss" scoped>
    .inline-input{
        width: 300px;
    }
    .date-inputs{
        .el-input{
            width: 100px;
        }
    }
</style>