<template>
    <el-container class="default-body">
        <el-header>
            <div class="default-title" style="float: left;">
                {{ dataType == "1" ? '随堂问备题' : '即时测组卷' }}
            </div>
            <el-dropdown v-if="this.dataType == '2'" :hide-on-click="true" style="float: right;margin-right: 50px;">
                <el-button :size="'small'" :icon="'el-icon-plus'" class="green-el-button">添加试卷</el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="import(1)">导入试卷</el-dropdown-item>
                    <el-dropdown-item @click.native="createAnwseredCard()">创建答题卡</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-button style="float: right;margin-right: 50px;" :size="'small'" :icon="'el-icon-plus'"
                class="green-el-button" @click.native="import(2)" v-if="this.dataType == '1'">添加课件</el-button>
        </el-header>
        <div class="default-filter">
            <el-input v-model="query.paper" :placeholder="dataType == '1' ? '搜索课件' : '搜索试卷'"
                suffix-icon="el-icon-search" class="filter-input" type="number" clearable />
            <el-select @change="_changeClass" v-model="query.class" class="filter-select" placeholder="选择班级">
                <el-option v-for="item  in classList" :key="item.classId" :label="item.className"
                    :value="item.classId" />
            </el-select>
            <el-select v-model="query.subject" placeholder="选择科目" class="filter-select">
                <el-option v-for=" item  in  subjectList " :key="item" :label="item" :value="item" />
            </el-select>
            <el-select v-if="dataType == '2'" v-model="query.tagId" placeholder="选择测验类型" class="filter-select">
                <el-option v-for="item in typeList" :key="item.label" :label="item.label" :value="item.value" />
            </el-select>
            <el-date-picker value-format="yyyy-MM-dd" class="filter-datePicker" v-model="query.dateRange"
                type="daterange" range-separator="-">
            </el-date-picker>
            <el-button type="primary" @click="_serach">
                筛选
            </el-button>
            <el-radio-group v-model="dateStatus" class="default-date-radio-group">
                <el-radio-button label="onDay">当天</el-radio-button>
                <el-radio-button label="onWeek">本周</el-radio-button>
                <el-radio-button label="onMonth">本月</el-radio-button>
            </el-radio-group>
        </div>
        <el-main>
            <div style='position: relative;'>
                <el-tabs v-model="tabType" v-loading="queryLoading" type="card" class="default-tabs">
                    <el-tab-pane :name="'0'" :label="`自编课件(${createdCount})`">
                        <el-row>
                            <el-col :key="index" v-for="( item, index ) in  defaultList " :span="12">
                                <div class="card-content">
                                    <el-row>
                                        <el-col :span="6" class="left">
                                            <div class="left-icon">
                                                <div class="icon">
                                                    <img src="../../../assets/images/shuben.png" />
                                                </div>
                                                <div class="text">
                                                    {{ item.id }}
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="18" class="content">
                                            <div class="title-text">
                                                {{ item.title }}
                                                <el-dropdown class="dropdown-button" :hide-on-click="false">
                                                    <el-button>操作</el-button>
                                                    <el-dropdown-menu slot="dropdown">
                                                        <el-dropdown-item
                                                            @click.native="_detailQ(item.id)">查看</el-dropdown-item>
                                                        <el-dropdown-item
                                                            @click.native="_updateQ(item)">修改</el-dropdown-item>
                                                        <el-dropdown-item
                                                            @click.native="_copy(item)">复制</el-dropdown-item>
                                                        <el-dropdown-item>
                                                            <el-popconfirm style="color:gray !important;"
                                                                @confirm="_deleteDetermineQ(item.id)"
                                                                title="这是一段内容确定删除吗？">
                                                                <el-button style="color:#606266 !important;"
                                                                    @click.native="_delete(item.id)" type="text"
                                                                    slot="reference">删除</el-button>
                                                            </el-popconfirm>
                                                        </el-dropdown-item>
                                                    </el-dropdown-menu>
                                                </el-dropdown>
                                            </div>
                                            <div class="descption-tag-text" v-if="role != 'ROLE_PERSONAL'">
                                                <template>
                                                    授课端同步：
                                                    <span class="descption-tag"
                                                        v-for="( clazzChild, indexs ) in  item.classList "
                                                        :key="clazzChild.classId"
                                                        :class="clazzChild.keepStatus == 1 ? 'active' : ''">
                                                        {{ clazzChild.className }}
                                                        <i v-if="clazzChild.keepStatus == 1"
                                                            class="el-icon-success"></i>
                                                    </span>
                                                    <el-tooltip effect="dark" content="刷新同步状态">
                                                        <img @click="_loadQueryDatas" height="18px" width="18px"
                                                            src="../../../assets/images/shuaxin.png" />
                                                    </el-tooltip>
                                                </template>
                                            </div>
                                            <div class="descption-text">
                                                <span class="descption-text-block">
                                                    <div class="pic">
                                                        <img src="../../../assets/images/tishu.png" />
                                                    </div>
                                                    <div class="text"> 总题数：</div>
                                                    <div class="value">{{ item.questionNum }}</div>
                                                    <div class="pic" v-if="dataType == 2" style="margin-left: 44px;">
                                                        <img src="../../../assets/images/tishu.png" />
                                                    </div>
                                                    <div class="text" v-if="dataType == 2"> 预计时长：</div>
                                                    <div class="value" v-if="dataType == 2">{{ item.examsDuration }}
                                                        分钟
                                                    </div>
                                                    <div class="pic" style="margin-left: 44px;">
                                                        <img src="../../../assets/images/tishu.png" />
                                                    </div>
                                                    <div class="text"> 创建人：</div>
                                                    <div class="value">{{ item.realName }}</div>
                                                </span>
                                            </div>
                                            <div class="descption-text">
                                                <span class="descption-text-block">
                                                    <div class="pic"><img src="../../../assets/images/rili.png"></img>
                                                    </div>
                                                    <div class="text"> 更新时间：</div>
                                                    <div class="value">{{ item.modifiedTime }}</div>
                                                    <span class="sharing-descption"
                                                        v-if="item.sharingType == 1">已分享到非任课班级</span>
                                                </span>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane :name="'1'" :label="`共享课件(${sharedCount})`">
                        <el-row>
                            <el-col :key="index" v-for="( item, index ) in  sharedList " :span="12">
                                <div class="card-content">
                                    <el-row>
                                        <el-col :span="6" class="left">
                                            <div class="left-icon">
                                                <div class="icon">
                                                    <img src="../../../assets/images/shuben.png" />
                                                </div>
                                                <div class="text">
                                                    {{ item.id }}
                                                </div>
                                            </div>
                                        </el-col>
                                        <el-col :span="15" class="content">
                                            <div class="title-text">
                                                {{ item.title }}
                                            </div>
                                            <div class="descption-tag-text" v-if="role != 'ROLE_PERSONAL'">
                                                <template>
                                                    授课端同步：
                                                    <span class="descption-tag"
                                                        v-for="( clazzChild, indexs ) in  item.classList "
                                                        :key="clazzChild.classId"
                                                        :class="clazzChild.keepStatus == 1 ? 'active' : ''">
                                                        {{ clazzChild.className }}
                                                        <i v-if="clazzChild.keepStatus == 1"
                                                            class="el-icon-success"></i>
                                                    </span>
                                                    <el-tooltip effect="dark" content="刷新同步状态">
                                                        <img @click="_loadQueryDatas" height="18px" width="18px"
                                                            src="../../../assets/images/shuaxin.png" />
                                                    </el-tooltip>
                                                </template>
                                            </div>
                                            <div class="descption-text">
                                                <span class="descption-text-block">
                                                    <div class="pic"><img src="../../../assets/images/tishu.png"></img>
                                                    </div>
                                                    <div class="text"> 总题数：</div>
                                                    <div class="value">{{ item.questionNum }}</div>

                                                    <div class="pic" style="margin-left: 44px;"><img
                                                            src="../../../assets/images/tishu.png"></img>
                                                    </div>
                                                    <div class="text"> 创建人：</div>
                                                    <div class="value">{{ item.realName }}</div>
                                                </span>
                                            </div>
                                            <div class="descption-text">
                                                <span class="descption-text-block">
                                                    <div class="pic"><img src="../../../assets/images/rili.png"></img>
                                                    </div>
                                                    <div class="text"> 更新时间：</div>
                                                    <div class="value">{{ item.createdTime }}</div>
                                                </span>
                                            </div>
                                        </el-col>
                                        <el-col :span="3" class="right">
                                            <el-dropdown :hide-on-click="true">
                                                <el-button>操作</el-button>
                                                <el-dropdown-menu slot="dropdown">
                                                    <el-dropdown-item>查看</el-dropdown-item>
                                                    <el-dropdown-item>删除</el-dropdown-item>
                                                </el-dropdown-menu>
                                            </el-dropdown>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <div slot="tab-bar">
                        <el-button type="primary" icon="el-icon-plus">新增</el-button>
                    </div>
                </el-tabs>
                <el-button size='mini' v-if="role == 'ROLE_PERSONAL' || role == 'ROLE_JIAOSHI'" @click="recycle"
                    style='position: absolute;right:40px;top:5px;'>查看回收站</el-button>
            </div>
        </el-main>
        <el-footer class="el-footer-pagination">
            <el-pagination @current-change="pageSizeChange" background layout="prev, pager, next" 
            :size="listPage.size" :current-page="listPage.page"
             :total="listPage.total">
            </el-pagination>
        </el-footer>
        <el-dialog :append-to-body="true" :close-on-click-modal="false" title="上传word文档" :visible.sync="diaUp" width="600px">
            <upload :url="url" :params="{ type: importType }" @upSuccess="upSuccess" fileName="下载">
                <div class="down-box p0" slot="down">
                    <p class="down-head" v-if="importType == 1">
                        <span>第一步：</span>
                        <el-link type="primary" @click="downExcel">下载模板,</el-link>
                        <span>或者导出菁优网试卷/组卷网(学科网)试卷；
                            为保证第三方试卷导入成功，请注意参考导出示例：</span>
                        <span class="img-box">
                            <el-image class="img" :src="examplePic" :preview-src-list="examplePicList">
                            </el-image>
                            菁优网示例 </span>/
                        <span class="img-box">
                            <el-image class="img" :src="examplePic2" :preview-src-list="examplePicList2">
                            </el-image>
                            组卷网(学科网)示例。
                        </span>
                    </p>
                    <p class="down-head" v-if="importType == 2">
                        <span>第一步：导出菁优网试卷/组卷网(学科网)试卷；为保证第三方试卷导入成功，请注意参考导出示例：</span>
                        <span class="img-box">
                            <el-image class="img" :src="examplePic" :preview-src-list="examplePicList">
                            </el-image>
                            菁优网示例
                        </span>
                        /
                        <span class="img-box">
                            <el-image class="img" :src="examplePic2" :preview-src-list="examplePicList2">
                            </el-image>
                            组卷网(学科网)示例。
                        </span>
                    </p>
                    <p>第二步：上传完成编辑好的试卷。</p>
                </div>
            </upload>
            <div class="dialog-footer" slot="footer">
                <el-button @click="diaUp = false">取 消</el-button>
            </div>
        </el-dialog>
    </el-container>

</template>

<script>
import { setDateRules } from "@/utils";
import example from "@/assets/images/example.jpg";
import example2 from "@/assets/images/example2.png";


export default {
    data() {
        return {
            diaUp: false,
            examplePic: example,
            examplePic2: example2,
            examplePicList: [example],
            examplePicList2: [example2],
            role: "",
            classList: [],
            subjectList: [],
            defaultList: [],
            typeList: [],
            sharedList: [],
            dataType: "1",
            importType: 0,
            tabType: "0",
            dateStatus: "-1",
            url: "/api_html/common/paper/upload", //上传文档地址
            listPage: {
                page: 1,
                size: 8,
                total: 0,
            },
            query: {
                title: "",
                class: null,
                subject: null,
                dateRange: [
                    "2022-03-01", "2023-05-01"
                ],
                tagId: null
            },
            queryLoading: false,
            createdCount: 0,
            sharedCount: 0
        };
    },
    watch: { 
        '$route'() {
            this.dataType = location.href.endsWith("askPreparationQuestions") ? "1" : "2";
            this._serach();
        },
        'tabType'() {
            this.listPage.page = 1;
            this._serach();
        },
        'dateStatus'(val) {
            var dateRange = setDateRules(val);
            this.query.dateRange = [dateRange.startDay, dateRange.endDay];
        }
    },
    created() {
        this.dataType = location.href.endsWith("askPreparationQuestions") ? "1" : "2";
        this.code = this.$store.getters.csCode;
        this.role =
            this.$store.getters.info.showRole ||
            this.$store.getters.info.permissions[0].role;
        this._loadQueryDatas();
    },
    methods: {
        async pageSizeChange(value){
            this.listPage.page = value;
            await this._serach();
        },
        recycle() {
            let routerItem = {
                path: "/askPreparationQuestionsRecycle"
            };
            if (this.dataType == '2') {
                routerItem.path = "/testPaperRecycle";
            }
            this.$router.push(routerItem);
        },
        createAnwseredCard() {
            let routerItem = {
                path: "/testPaperAdd",
                query: {
                    listType: 2,
                    listShare: 0,
                    subjectName: this.query.subject,
                },
            };
            this.$router.push(routerItem);
        },
        import(type) {
            this.importType = type;
            this.diaUp = true;
        },
        //v1.5
        upSuccess(res) {
            if (res.status == 0) {
                //导入成功
                this.$message.closeAll();
                this.$message({
                    showClose: true,
                    message: `${res.info}`,
                    type: "success",
                    duration: 2000,
                });
                this.diaUp = false;
                let params = JSON.stringify(res.data);
                if (this.query.type == 2) {
                    this.toAdd({ params, isUpload: 1 });
                } else {
                    this.toAddQs({ params });
                }
            }
        },
        async _changeClass() {
            await this._loadSubjectData();
        },
        async _loadSubjectData() {
            const fetchSubject =
                this.role == "ROLE_BANZHUREN" ? this.$request.cTSubjectList :
                    this.role == "ROLE_PERSONAL" ? this.$request.pSubjectList : this.$request.tSubjectList;

            const { data, status, info } = await fetchSubject({
                classId: this.query.class,
            });

            if (status != 0) {
                this.$message.error(info);
                return;
            }
            this.subjectList = data?.subjectNames ?? [];
            this.query.subject = data?.subjectNames[0] ?? "";
        },
        async _loadTypes() {
            let fetchTypeNames =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pPaperTagList
                    : this.$request.fetchTypeNames;

            const { data, status, info } = await fetchTypeNames({
                classId: this.query.class,
                type: 0,
            });
            if (status != 0) {
                this.$message.error(info);
                return;
            }
            this.typeList =
                data.list.map((item) => {
                    return {
                        value: item.tagId,
                        label: item.tag,
                    };
                }) || [];
            this.typeList.unshift({
                value: "",
                label: "请选择标签",
            });
            this.query.tagId = "";
        },
        async _loadClassData() {
            const fetchClassList =
                this.role == "ROLE_BANZHUREN" ? this.$request.cTClassList :
                    this.role == "ROLE_PERSONAL" ? this.$request.pClassList : this.$request.tClassList;

            const { data, status, info } = await fetchClassList();

            if (status != 0) {
                this.$message.error(info);
                return;
            }

            this.classList = data?.list ?? [];

            this.query.class = this.classList[0]?.classId
        },
        async _loadQueryDatas() {
            this.$loading.open();
            await this._loadClassData();
            await this._loadSubjectData();
            if (this.dataType == "2") await this._loadTypes();
            this.$loading.close();
            await this._serach();
        },
        async _serach() {
            this.queryLoading = true;
            let fetchPaperList =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pPaperList
                    : this.$request.fetchPaperList;

            var queryParams = {
                classId: "",
                subjectName: "",
                tagId: "",
                title: "",
                type: this.dataType, //试卷类型
                share: this.tabType, //分享类型
            };

            queryParams.classId = this.query.class;
            queryParams.subjectName = this.query.subject;
            queryParams.tagId = this.query.tagId;
            queryParams.title = this.query.paper;
            // queryParams.start = this.query.dateRange[0];
            // queryParams.end = this.query.dateRange[1];

            const { data, status, info } = await fetchPaperList({
                ...queryParams,
                status: 1,
                page: this.listPage.page,
                size: this.listPage.size
            });

            if (status != 0) {
                this.$message.error(info);
                return;
            }
            this.queryLoading = false;
            this.createdCount = data?.myCount || 0;
            this.sharedCount = data?.gradeCount || 0;
            this.listPage.total = data.total;
         
            if (this.tabType == "0") {
                this.defaultList = [];
                if (data?.list) this.defaultList = [...data?.list];
            }
            else if (this.tabType == "1") {
                this.sharedList = [];
                if (data?.list) this.sharedList = [...data?.list];
            }
        },
        _detailQ(id) {
            let routerItem = {
                path: "/askPreparationQuestionsDetail",
                query: { id: id },
            };
            if (this.dataType == '2') {
                routerItem.path = "/testPaperQuestionsDetail";
            }
            this.$router.push(routerItem);
        },
        _copy(currentRow) { 
            let routerItem = {
                path: "/askPreparationQuestionsAdd",
                query: {
                    type: 2,
                    paperId: currentRow.id,
                    listType: 1,
                    listShare: 0,
                    subjectName: this.query.subjectName,
                },
            };

            if (this.dataType == '2') {
                routerItem.path = "/testPaperAdd";
            }

            this.$router.push(routerItem);
        },
        _delete() {

        },
        _updateQ(item) {
            console.log(item)
            var currentClass = this.classList.find(item => item.classId == this.query.class);

            let routerItem = {
                path: "/askPreparationQuestionsUpdate",
                query: {
                    paperId: item.id, paperType: 1,
                    classId: currentClass.classId,
                    gradeName: currentClass.gradeName
                },
            };

            if (this.dataType == '2') {
                routerItem.path = "/testPaperQuestionsUpdate";
            }

            this.$router.push(routerItem);
        },
        async _deleteDetermineQ(id) {
            let modifyPaper =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pModifyPaper
                    : this.$request.modifyPaper;
            const { data, status, info } = await modifyPaper({
                paperId: id,
                status: 2,
            });
            if (status != 0) {
                this.$message.error(info);
            }
            this.page = 1;
            this._serach();
        }
    },
};
</script>
<style lang="scss">
.down-box {
    padding-left: 20px;

    .down-head {
        display: block;

        span,
        a {
            vertical-align: middle;
        }
    }
}

.header-button {
    float: right;
    margin-right: 50px;
    background: rgba(65, 204, 149, 1);
    color: white;

    :hover {
        background: rgba(65, 204, 149, 1);
        color: white;
    }
}

.el-tabs__content {
    padding-left: 20px !important;
    padding-right: 0px !important;
    padding-top: 20px !important;
}

.el-tabs__header {
    margin: 0px !important;
}

.card-content {
    .descption-tag {
        display: inline-block;
        background: rgba(102, 127, 253, 0.1);
        border-radius: 4px 4px 4px 4px;
        color: #667FFD;
        line-height: 32px;
        padding: 0 10px;
        height: 32px;
        margin-right: 10px;
    }

    margin-bottom: 10px;
    height: 180px;
    border: 1px solid #E6E9F4;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08);
    margin-right: 20px;
    background: #FFFFFF;

    .content {
        margin-top: 15px !important;
        padding-left: 10px !important;
        font-size: 14px;
        font-weight: 400;

        .descption-tag-text {
            margin-bottom: 20px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .descption-text {
            height: 30px;
            margin-top: 10px;

            .descption-text-block {
                margin-right: 10px;
                display: flex;
                justify-content: flex-start;

                .sharing-descption {
                    flex: 1;
                    color: gray;
                    opacity: 0.8;
                    text-align: right
                }

                img {
                    height: 20px;
                    width: 20px;
                    margin-right: 5px;
                }
            }
        }

        .title-text {
            font-weight: bold;
            font-size: 20px;
            color: #303133;
            line-height: 28px;
            height: 28px;
            text-transform: none;
            padding-bottom: 10px !important;

            .dropdown-button {
                .el-button {
                    background-color: #667FFD !important;
                    color: white;
                }

                float: right;
                margin-right: 20px;

            }
        }
    }

    .left {
        height: 180px;
        background-color: #41CC95;
        vertical-align: middle;
        border-radius: 10px 0px 0px 10px;

        .left-icon {
            margin-top: 26px;
            height: 70px;

            .icon {
                height: 100px;
                width: 100px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 61px 61px 61px 61px;
                margin: auto;
                text-align: center;

                img {
                    margin-top: 24px;
                    height: 52px;
                    width: 52px;
                }
            }

            .text {
                width: 100%;
                text-align: center;
                margin-top: 5px;
                font-size: 20px;
                color: #FFFFFF;
            }
        }
    }

    .right {
        .el-button {
            background-color: #667FFD;
            line-height: 16px;
            color: #FFFFFF;
            margin-top: 15px;
            padding: 10px 20px !important;
        }
    }

}

.el-popconfirm__action {
    margin-top: 10px;
}
</style>