<template>
    <div>
        <el-card v-if="showBack" shadow="hover" class="mgb20">
            <div class="flex-between">
                <div class="per_title" v-preventReClick @click="goback()">
                    <i class="el-icon-arrow-left"></i>
                    <span class="per_back">返回</span>
                </div>
            </div>
        </el-card>

        <el-card shadow="hover" class="mgb20">
            <div>
                <div class="flex-center mgb20">
                    <p class="hr_tag"></p>
                    <span>筛选</span>
                </div>
                <div>
                    <el-form label-width="80px" class="flex-between no-mb">
                        <div class="flex-center">
                            <div>
                                <el-form-item label="创建人">
                                    <el-select v-model="queryData.founder" clearable placeholder="请选择创建人" @change="getData()">
                                        <el-option v-for="(item,index) in founder" :key="index" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="状态">
                                    <el-select v-model="queryData.state" clearable placeholder="请选择状态" @change="getData()">
                                        <el-option v-for="(item,index) in state" :key="index" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="权限">
                                    <el-select v-model="queryData.projectPermissions" placeholder="请选择" @change="getData()">
                                        <el-option
                                            v-for="item in projectPermissions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </div>
                        <div>
                            <el-form-item>
                                <el-input placeholder="请输入项目名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
            </div>  
        </el-card>

        <el-card shadow="hover">
            <div class="flex-between mgb20">
                <div class="flex-center">
                    <p class="hr_tag"></p>
                    <span>项目列表</span>
                </div>
                <div>
                    <el-button type="primary" size="small" round @click="add">新增项目</el-button>
                    <el-button type="primary" size="small" round @click="delAllData">批量删除</el-button>
                </div>
            </div>
            <el-table :data="projectData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column type="index" width="100" label="序号" align="center">
                </el-table-column>
                <el-table-column prop="projectName" label="实验项目名称" align="center">
                </el-table-column>
                <el-table-column prop="founder" label="创建人" align="center"></el-table-column>
                <el-table-column label="权限" align="center">
                    <template slot-scope="scope">
                        {{projectPermissions.find(n => n.value === scope.row.projectPermissions).label}}
                    </template>
                </el-table-column>
                <el-table-column label="模式" align="center">
                    <template slot-scope="scope">
                        {{patternList.find(n => n.value === scope.row.pattern).label}}
                    </template>
                </el-table-column>
                <el-table-column prop="creationTime" label="创建时间" align="center">
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template slot-scope="scope">
                        {{transferStatus(scope.row.state)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="edit(scope.row)" v-if="roleId == 1 || (roleId == 13 && scope.row.founder != '超级管理员') || (roleId == 14 && scope.row.founder == '老师')">编辑</el-button>
                        <el-button type="text" @click="delData(scope.row)" v-if="roleId == 1 || (roleId == 13 && scope.row.founder != '超级管理员') || (roleId == 14 && scope.row.founder == '老师')">删除</el-button>
                        <!-- <el-button type="text" @click="copyData(scope.row)">复制</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="totals">
                </el-pagination>
            </div>
        </el-card>

        <el-dialog title="复制" :visible.sync="copyVisible" width="24%" center :close-on-click-modal="false">
            <el-form>
                <el-form-item> 
                    <el-input placeholder="请输入项目名称" v-model="projectName" @change="projectNameExistis"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="copyVisible = false">取 消</el-button>
                <el-button type="primary" @click="copySubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import bus from '../common/bus';
export default {
    data() {
        return {
            systemId: this.$config.systemId,
            showBack: JSON.stringify(this.$store.state.addClass) == '{}' ? false : true,
            roleId: this.$store.state.userRoleId.includes(',') ? 13 : Number(this.$store.state.userRoleId),
            userId: this.$store.state.userLoginId,
            queryData: {
                projectPermissions: "",
                founder: "",
                state: "",
                projectName: "",
                userId: this.$store.state.userLoginId,
                systemId: this.systemId
            },
            keyword: '',
            status: '',
            projectData:[],
            totals: 0,
            patternList: [
                {
                    value: 0,
                    label: "基础模式"
                },
                {
                    value: 1,
                    label: "挑战模式"
                }
            ],
            projectPermissions: [
                {
                value: "",
                label: "不限"
                },
                {
                value: 0,
                label: "练习"
                },
                {
                value: 1,
                label: "考核"
                },
                // {
                // value: 2,
                // label: "竞赛"
                // }
            ],
            founder: [
                {
                value: "",
                label: "不限"
                },
                {
                value: 1,
                label: "超级管理员"
                },
                {
                value: 2,
                label: "管理员"
                },
                {
                value: 3,
                label: "老师"
                }
            ],
            state: [
                {
                value: "",
                label: "不限"
                },
                {
                value: 0,
                label: "草稿箱"
                },
                {
                value: 1,
                label: "已发布"
                }
            ],
            pageNo: 1,
            pageSize: 10,
            multipleSelection: [],
            copyVisible: false,
            projectName: '',
            projectNameRepeat: false,
            currentRow: {},
            projectDataAll: [],
        };
    },
    watch: {
        keyword: function(val) {
            clearTimeout(this.searchTimer)
            this.searchTimer = setTimeout(() => {
                this.getData()
            },500)
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData(){
            let data = this.queryData
            data.pageNo = this.pageNo
            data.pageSize = this.pageSize
            data.projectName = this.encodeString(this.keyword)
            data.systemId = this.systemId
            this.$get(this.api.queryAllManagements,data).then(res => {
                let list = res.pageInfo.list
                list.map(n => {
                    if(n.founder.includes(',')){
                        n.founder = '管理员'
                    }else{
                        n.founder = this.roleStatus(n.founder)
                    }
                })
                this.projectData = list
                this.totals = res.pageInfo.total
            }).catch(res => {});
        },
        transferStatus(status){
            return status == 1 ? '已发布' : '草稿箱'
        },
        handleCurrentChange(val){
            this.pageNo = val
            this.getData()
        },
        add(){
            this.$store.commit("configData", { config_id : ''});
            this.$router.push('/addproject');
        },
        edit(row){
            this.$router.push(`/addproject?id=${row.projectId}`);
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delData(row) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
            .then(() => {
                this.$post(this.api.removeProjectManagement,[row.projectId]).then(res => {
                    this.$message.success('删除成功');
                    this.getData()
                }).catch(res => {});
            })
            .catch(() => {});
        },
        delAllData() {
            if(this.multipleSelection.length != ''){
                let newArr = this.multipleSelection
                let delList = newArr.map(item => {
                    return item.projectId
                })

                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                .then(() => {
                    this.$post(this.api.removeProjectManagement,delList).then(res => {
                        this.$refs.table.clearSelection()
                        this.$message.success('删除成功');
                        this.getData()
                    }).catch(res => {});
                })
                .catch(() => {});
            }else{
                this.$message.error('请先选择项目 ！');
            }
        },
        projectNameExistis(){
            let data = {
                projectName: this.projectName
            }
            this.$get(this.api.isNameExistis,data).then(res => {
                if(res.status != 200){
                    this.projectNameRepeat = true
                    this.$message.warning('该项目名称已存在')
                }else{
                    this.projectNameRepeat = false
                }
            }).catch(res => {})
        },
        copyData(row){
            this.currentRow.management = {
                caseDescription: row.caseDescription,
                experimentSuggests: row.experimentSuggests,
                experimentalGoal: row.experimentalGoal,
                founder: row.founder,
                isstartexperimentSuggests: row.isstartexperimentSuggests,
                isstartexperimental: row.isstartexperimental,
                projectName: row.projectName,
                projectPermissions: row.projectPermissions,
                state: row.state,
                systemId: row.systemId,
                userId: row.userId,
                knowledgePoints: row.knowledgePoints,
                experimentIntroduction: row.experimentIntroduction
            }
            this.currentRow.founder = row.founder
            this.projectName = row.projectName
            this.projectNameRepeat = true
            this.copyVisible = true
            let data = {
                projectId: row.projectId
            }
            this.$get(this.api.getJudgmentPoints,data).then((res) => {
                this.currentRow.roleId = res.message.roleList.map(n => n.roleId)
                let scoreList = res.message.scoreIndexList
                let scores = []
                for(let i in scoreList){
                    scores = scores.concat(scoreList[i])
                }
                let point = res.message.judgmentPointsList
                point.map(n => {
                    n.judgmentPointsId = n.id
                    let same = scores.find(e => e.judgmentPointsId == n.id)
                    if(same) n.score = same.score
                })
                this.currentRow.pooints = point
                this.$message.warning('请修改项目名称')
            })
        },
        copySubmit(){
            if(!this.projectName.length) return this.$message.warning('请填写项目名称')
            if(this.projectNameRepeat) return this.$message.warning('该项目名称已存在')
            let data = this.currentRow
            data.management.projectName = this.projectName
            data.founder = Number(this.roleId)
            data.management.founder = this.roleId
            data.management.userId = this.userId
            data.pooints.map(n => {
                n.userId = this.userId
            })
            this.$post(this.api.addProjectManagement,data).then((res) => {
                this.$message.success('复制成功');
                this.copyVisible = false
                this.getData()
            })
        },
        goback() {
            this.$router.back()
        },
    }
};
</script>

<style scoped>
    .no-mb /deep/.el-form-item{
        margin-bottom: 0;
    }
</style>

