<template>
    <div class="question-bank">
        <div class="top">
            <!-- <div class="top-left flex-items">
                <span class="subject-title only-line-1">试卷类别</span>
            </div> -->
            <div class="top-right flex-align">
                <div>
                    <!-- <a-button type="primary" style="margin-right: 24px;">生成试卷</a-button>
                    <a-button type="primary" style="margin-right: 24px;">下载试卷</a-button>
                    <a-button type="primary">删除</a-button> -->
                </div>
                <div class="flex">
                    <a-select mode="multiple" placeholder="选择学科" style="width:300px;margin-right: 8px;"
                        @change="subjectChange">
                        <a-select-opt-group v-for="(val,key) in $store.state.baseInfo.SubjectsGroup" :key="key">
                            <span slot="label">{{key}}</span>
                            <a-select-option :value="v.id" v-for="v in val" :key="v.id">
                                {{v.name}}
                            </a-select-option>
                        </a-select-opt-group>
                    </a-select>
                    <a-select :default-value="[]" style="width: 260px;margin-right:16px;" placeholder="选择状态"
                        @change="statusChange">
                        <a-select-option :key="''">全部</a-select-option>
                        <a-select-option :key="0">组题中</a-select-option>
                        <a-select-option :key="1">等待生成</a-select-option>
                        <a-select-option :key="2">生成中</a-select-option>
                        <a-select-option :key="3">已生成</a-select-option>
                        <a-select-option :key="4">生成失败</a-select-option>
                    </a-select>
                    <a-input-search style="width:300px;" placeholder="搜索试卷" enter-button @search="onSearch" />
                </div>

            </div>
        </div>
        <div class="main">
            <!-- 左侧菜单树 -->
            <!-- <div class="main-left">
                <a-menu v-model="current" mode="inline">
                    <a-menu-item key="mail">单科试卷 </a-menu-item>
                    <a-menu-item key="2">多科试卷</a-menu-item>
                </a-menu>
            </div> -->
            <!-- 右侧试题框 -->
            <div class="main-right">
                <a-table :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :columns="columns"
                    :loading="loading" :dataSource="data" size="small" :rowKey="record => record.id"
                    :pagination="pagination" @change="handleChange">
                    <template slot="creationTime" slot-scope="text">
                        {{text|sliceTime}}
                    </template>
                    <template slot="status" slot-scope="text">
                        <myStatus :num="text" :strs="strs" />
                    </template>
                    <template slot="action" slot-scope="text,record">
                        <a class="m-r8" @click="toPath(record)">详情</a>
                        <a class="m-r8" @click="_PaperDelete(record)">删除</a>
                        <!-- <a class="m-r8" v-if="record.status==1" @click="showModal(record)">生成试卷</a> -->
                        <a class="m-r8" v-if="record.status==4" @click="showModal(record)">重新生成</a>
                        <a class="m-r8" @click="_FileReadFileLast(record)">下载最新</a>
                        <a class="m-r8" @click="_FileReadFile(record)">下载历史</a>
                    </template>
                </a-table>
            </div>
        </div>
        <PaperProduce ref="PaperProduce" />
        <Down ref="Down" />
    </div>
</template>

<script>
    const columns = [
        {
            title: "试卷名称",
            dataIndex: "name",
            key: "name",
            scopedSlots: { customRender: "name" },
            ellipsis: true,
            width: 280
        },
        {
            title: "学科",
            dataIndex: "paperDisciplines",
            key: "paperDisciplines",
            scopedSlots: { customRender: "paperDisciplines" },
            width: 100,
            ellipsis: true,
        },
        {
            title: "题量",
            dataIndex: "paperQuestionCount",
            key: "paperQuestionCount",
            scopedSlots: { customRender: "paperQuestionCount" },
            width: 80
        },
        {
            title: "分数",
            key: "totalScore",
            dataIndex: "totalScore",
            scopedSlots: { customRender: "totalScore" },
            width: 80
        },
        {
            title: "创建时间",
            key: "creationTime",
            dataIndex: "creationTime",
            scopedSlots: { customRender: "creationTime" },
            ellipsis: true,
            width: 140
        },
        {
            title: "状态",
            key: "status",
            dataIndex: "status",
            scopedSlots: { customRender: "status" },
            ellipsis: true,
            width: 100,
            // align: 'center'
        },
        {
            title: "操作",
            key: "action",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            width: 200,
        },
    ]
    let strs = [
        { title: '组题中', index: 0 },
        { title: '等待生成', index: 1 },
        { title: '生成中', index: 2 },
        { title: '成功', index: 4 },
        { title: '生成失败', index: 3 }
    ]
    import { myPagination } from '../../mixins/myPagination.js';
    import myStatus from '@/components/myStatus.vue'
    import { PaperGetList, PaperDelete, FileReadFile, GetPaperProduceResultOne } from '@/api/api'
    import PaperProduce from './components/PaperProduce.vue'
    import Down from './components/Down.vue'
    export default {
        mixins: [myPagination],
        components: {
            myStatus,
            PaperProduce,
            Down
        },
        data() {
            return {
                columns,
                strs,
                current: ['mail'],
                loading: false,
                selectedRowKeys: [],
                data: [],
                Status: null,
                KeyWord: '',
                Disciplines: []
            }
        },
        mounted() {
            this.$store.dispatch('DisciplineGetList')
            this._PaperGetList();
        },
        methods: {
            //下载
            _FileReadFile(record) {
                // this.$refs.Down.showModal(record)
                this.$router.push({
                    name: 'examPaperRecord',
                    query: {
                        testName: record.name,
                        testID: record.id
                    }
                })
            },
            //下载最新
            _FileReadFileLast(record) {
                this.loading = true;
                GetPaperProduceResultOne({id: record.id}).then(res => {
                    console.log(res, '试卷历史最后一条')
                    this.loading = false;
                    this.$refs.Down.showModal(res);
                }).catch(err => {
                    this.loading = false;
                })
            },
            //生成试卷
            showModal(record = {}) {
                console.log(record, 'record')
                this.$refs.PaperProduce.showModal(record.id);
            },
            //删除试卷
            _PaperDelete(record) {
                let _this = this;
                this.$confirm({
                    okText: '确认',
                    cancelText: '取消',
                    mask: false,
                    title: `您确认要删除"${record.name}"试卷吗?`,
                    onOk() {
                        let data = {
                            id: record.id
                        }
                        PaperDelete(data).then(res => {
                            _this.$message.success('删除成功！');
                            _this._PaperGetList();
                        }).catch(err => {
                        })
                    }
                });
            },
            //试卷列表
            _PaperGetList() {
                this.loading = true;
                let data = {
                    Disciplines: this.Disciplines,//学科id[]
                    Status: this.Status,
                    KeyWord: this.KeyWord,
                    SkipCount: (this.pagination.current - 1) * this.pagination.pageSize,
                    MaxResultCount: this.pagination.pageSize,
                }
                PaperGetList(data).then(res => {
                    this.data = res.items;
                    this.pagination.total = res.totalCount;
                    this.loading = false;
                }).catch(err => {
                    this.loading = false;
                })
            },
            onSearch(val) {
                this.KeyWord = val;
                const pager = { ...this.pagination };
                pager.current = 1;
                this.pagination = pager;
                this._PaperGetList();
            },
            callback(key) {
                console.log(key);
            },
            //表格选项选中
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys;
            },
            //表格change
            handleChange(pagination, filters, sorter) {
                const pager = { ...this.pagination };
                pager.current = pagination.current;
                this.pagination = pager;
                this._PaperGetList();
            },
            subjectChange(value) {
                console.log(value)
                this.Disciplines = value;
                const pager = { ...this.pagination };
                pager.current = 1;
                this.pagination = pager;
                this._PaperGetList();
            },
            statusChange(value) {
                console.log(value)
                this.Status = value;
                const pager = { ...this.pagination };
                pager.current = 1;
                this.pagination = pager;
                this._PaperGetList();
            },
            toPath(record) {
                this.$router.push({
                    name: 'examPaperPreview',
                    query: {
                        examId: record.id
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .question-bank {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .top {
        width: 100%;
        height: 64px;
        border-bottom: 1px solid rgba(232, 232, 232, 1);
        display: flex;
        position: relative;
    }

    .top-left {
        width: 240px;
        height: 100%;
        border-right: 1px solid rgba(232, 232, 232, 1);
        padding: 16px;
        font-size: 20px;
        columns: #333333;
    }

    .subject-icon {
        margin-right: 8px;
        cursor: pointer;
    }

    .subject-icon:hover {
        color: rgb(24, 144, 255);
    }

    .subject-title {
        flex: 1
    }

    .top-right {
        padding: 24px;
        flex: 1;
    }

    .main {
        display: flex;
        flex: 1;
        position: relative;
    }

    .main-left {
        width: 240px;
        height: 85%;
        border-right: 1px solid rgba(232, 232, 232, 1);
        overflow-y: auto;
        box-sizing: border-box;
    }

    /deep/.ant-tabs-nav .ant-tabs-tab {
        padding: 8px 16px;
        margin: 0;
    }

    /deep/.ant-tabs-bar {
        margin: 0;
    }

    .main-right {
        flex: 1;
        height: 100%;
        position: relative;
    }

    .sort-box {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .sort-icon {
        color: orange;
        cursor: pointer;
        transition: all 1s;
        margin-left: 16px;
        display: block;
    }

    .sort-box:hover .sort-icon {
        display: none;
    }

    .sort-box:hover .sort-alert {
        /* display: block; */
        opacity: 1;
    }

    .sort-alert {
        transition: all 1.5s;
        /* display: none; */
        opacity: 0;
    }
</style>