<template>
    <div class="question-bank">
        <div class="top">
            <div class="top-left flex-items">
                <span class="subject-title only-line-1">
                    <a-icon class="blue-hover" style="margin-right:8px" type="arrow-left" @click="goBack" />
                    下载生成（{{$route.query.testName}}）</span>
            </div>
            <div class="top-right flex-align">
                <div>
                    <!-- 历史生成 -->
                </div>
                <div class="flex"></div>
            </div>
        </div>
        <div class="main">
            <!-- 右侧试题框 -->
            <div class="main-right">
                <a-table :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="_PaperDeleteProduceResult(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: "creationTime",
            key: "creationTime",
            scopedSlots: { customRender: "creationTime" },
            ellipsis: true,
            width: 280
        },
        {
            title: "操作",
            key: "action",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            width: 160,
        },
    ]
    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, GetPaperProduceResult, PaperDeleteProduceResult } 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,
                testID: '',
                data: [],
                Disciplines: []
            }
        },
        mounted() {
            this.testID = this.$route.query.testID;
            console.log(this.testID, 'this.testID')
            this.$store.dispatch('DisciplineGetList')
            this._GetPaperProduceResult();
        },
        methods: {
            goBack() {
                this.$router.go(-1)
            },
            //下载
            _FileReadFile(record) {
                this.$refs.Down.showModal(record)
            },
            //生成试卷
            showModal(record = {}) {
                console.log(record, 'record')
                this.$refs.PaperProduce.showModal(record.id);
            },
            //删除试卷
            _PaperDeleteProduceResult(record) {
                let _this = this;
                this.$confirm({
                    okText: '确认',
                    cancelText: '取消',
                    mask: false,
                    title: `您确认要删除此条记录吗?`,
                    onOk() {
                        let data = {
                            paperProduceResultId: record.id
                        }
                        PaperDeleteProduceResult(data).then(res => {
                            _this.$message.success('删除成功！');
                            _this._GetPaperProduceResult();
                        }).catch(err => {
                        })
                    }
                });
            },
            //试卷列表
            _GetPaperProduceResult() {
                this.loading = true;
                let data = {
                    id: this.testID,
                    SkipCount: (this.pagination.current - 1) * this.pagination.pageSize,
                    MaxResultCount: this.pagination.pageSize,
                }
                GetPaperProduceResult(data).then(res => {
                    console.log(res, '试卷历史列表')
                    this.data = res.items;
                    this.pagination.total = res.totalCount;
                    this.loading = false;
                }).catch(err => {
                    this.loading = false;
                })
            },
            callback(key) {
                console.log(key);
            },
            //表格change
            handleChange(pagination, filters, sorter) {
                const pager = { ...this.pagination };
                pager.current = pagination.current;
                this.pagination = pager;
                this._GetPaperProduceResult();
            },
            subjectChange(value) {
                console.log(value)
                this.Disciplines = value;
                const pager = { ...this.pagination };
                pager.current = 1;
                this.pagination = pager;
                this._GetPaperProduceResult();
            },
            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>