<template>
    <el-container class="default-body">
        <el-header>
            <back-box class="detailBack">
                <template slot="title">
                    <span class="default-title">
                        查看回收站
                    </span>
                </template>
            </back-box>
        </el-header>
        <div class="default-filter">
            <el-input v-model="query.paper" :placeholder="dataType == '1' ? '搜索课件' : '搜索试卷'"
                suffix-icon="el-icon-search" class="filter-input" 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>
        </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-table class="default-table" :data="defaultList">
                            <el-table-column prop="id" label="试卷ID" width="100"></el-table-column>
                            <el-table-column prop="title" label="试卷名称"></el-table-column>
                            <el-table-column prop="tag" label="测验类型" width="200"></el-table-column>
                            <el-table-column prop="questionNum" label="总题数" width="200"></el-table-column>
                            <el-table-column prop="realName" label="创建人" width="200"></el-table-column>
                            <el-table-column prop="createdTime" label="创建时间"></el-table-column>
                            <el-table-column prop="modifiedTime" label="删除时间"></el-table-column>
                            <el-table-column prop="createdTime" label="操作">
                                <template slot-scope="scoped">
                                    <el-button class="edit" type="text" @click="modify(scoped.row)">
                                        恢复
                                    </el-button>
                                    <el-popconfirm title="确定删除这张答题卡吗？" @confirm="remove(scoped.row)">
                                        <el-button style="color:red;margin-left: 10px;" slot="reference" class="delete"
                                            type="text">
                                            删除
                                        </el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane :name="'1'" :label="`被共享的(${sharedCount})`">
                        <el-table class="default-table" :data="sharedList">
                            <el-table-column prop="id" label="试卷ID" width="100"></el-table-column>
                            <el-table-column prop="title" label="试卷名称"></el-table-column>
                            <el-table-column prop="tag" label="测验类型" width="200"></el-table-column>
                            <el-table-column prop="questionNum" label="总题数" width="200"></el-table-column>
                            <el-table-column prop="realName" label="创建人" width="200"></el-table-column>
                            <el-table-column prop="createdTime" label="创建时间"></el-table-column>
                            <el-table-column prop="modifiedTime" label="删除时间"></el-table-column>
                            <el-table-column prop="createdTime" label="操作">
                                <template slot-scope="scoped">
                                    <el-button class="edit" type="text" size="mini" @click="modify(scoped.row)">
                                        恢复
                                    </el-button>
                                    <el-popconfirm title="确定删除这张答题卡吗？" @confirm="remove(scoped.row)">
                                        <el-button style="color:red;margin-left: 10px;" slot="reference" class="delete"
                                            type="text" size="mini">
                                            删除
                                        </el-button>
                                    </el-popconfirm>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <div slot="tab-bar">
                        <el-button type="primary" icon="el-icon-plus">新增</el-button>
                    </div>
                </el-tabs>

            </div>
        </el-main>
        <el-footer class="el-footer-pagination">
            <div class="el-footer-pagination-box">
                <el-pagination @current-change="pageSizeChange" background layout="prev, pager, next"
                    :page-size="listPage.size" :current-page="listPage.page" :total="listPage.total">
                </el-pagination>
            </div>
        </el-footer>
    </el-container>
</template>
<script>
import { setDateRules } from "utils";
export default {
    data() {
        return {
            dataType: "1",
            importType: 0,
            tabType: "0",
            classList: [],
            subjectList: [],
            defaultList: [],
            typeList: [],
            sharedList: [],
            query: {
                type: 1,
                classId: "",
                subjectName: "",
                tagId: "",
                title: "",
            },
            listPage: {
                page: 1,
                size: 20,
                total: 0,
            },
            query: {
                title: "",
                class: null,
                subject: null,
                dateRange: [
                    "2022-03-01", "2023-05-01"
                ],
                tagId: null
            },
            queryLoading: false,
            createdCount: 0,
            sharedCount: 0
        }
    },
    async created() {
        this.dataType = location.href.endsWith("askPreparationQuestionsRecycle") ? "1" : "2";
        this.role =
            this.$store.getters.info.showRole ||
            this.$store.getters.info.permissions[0].role;

        var dateRange = setDateRules('onDay');
        this.query.tagId = "";
        this.query.dateRange = [dateRange.startDay, dateRange.endDay];
        await this._loadQueryDatas();
        await this._serach();

    },
    watch: {
        'tabType'() {
            this.listPage.page = 1;
            this._serach();
        }
    },
    methods: {
        async pageSizeChange(value) {
            this.listPage.page = value;
            await this._serach();
        },
        async modify(obj) {
            //恢复答题卡
            let modifyPaper =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pModifyPaper
                    : this.$request.modifyPaper;
            const { data, status, info } = await modifyPaper({
                paperId: obj.id,
                share: this.tabType == '0' ? "0" : "1",
                status: 1
            });
            if (status == 0) {
                let type = this.query.title ? 1 : 0;
                this.$message.success(info);
                this._serach(type);
            } else {
                this.$message.error(info);
            }
        },
        async remove(obj) {
            //删除答题卡
            let delPaper =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pDelPaper
                    : this.$request.delPaper;
            const { data, status, info } = await delPaper({
                paperId: obj.id,
                share: this.tabType == '0' ? "0" : "1",
                status: 2

            });
            if (status == 0) {
                let type = this.query.title ? 1 : 0;
                this.$message.success(info);
                this._serach(type);
            } else {
                this.$message.error(info);
            }
        },
        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(queryParams) {
            let fetchTypeNames =
                this.role == "ROLE_PERSONAL"
                    ? this.$request.pPaperTagList
                    : this.$request.fetchTypeNames;

            const { data, status, info } = await fetchTypeNames({
                ...queryParams,
                status: queryParams.type,
                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: "请选择标签",
            });
        },
        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();
            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, //分享类型
            };
            this.listPage.page = 1;
            queryParams.classId = this.query.class;
            queryParams.subjectName = this.query.subject;
            queryParams.tagId = this.query.tagId;
            queryParams.title = this.query.paper;
            if (this.query?.dateRange?.length >= 2) {
                queryParams.start = this.query.dateRange[0] ?? "";
                queryParams.end = this.query.dateRange[1] ?? "";
            }
            console.log(queryParams)
            if (this.dataType == "2") await this._loadTypes(queryParams);
            const { data, status, info } = await fetchPaperList({
                ...queryParams,
                status: 2,
                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?.delShare || 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];
            }
        },
    }
}
</script>
<style>
.el-tabs__content {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 20px !important;
}
</style>