<template>
    <div class="question-bank">
        <div class="top">
            <div class="top-right flex-align">
                <div>
                    <!-- <a-button type="primary">删除</a-button> -->
                </div>
                <div class="flex">
                    <a-select placeholder="选择学科" style="width:300px;margin-right: 8px;" @change="subjectChange">
                        <a-select-option :value="''">
                            全部
                        </a-select-option>
                        <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-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,record">
                        {{text|sliceTime}}
                    </template>
                    <template slot="taskState" slot-scope="text,record">
                        <a-tooltip>
                            <template slot="title" v-if="record.remark">
                                {{record.remark}}
                            </template>
                            <myStatus :num="text" :strs="strs"/>
                        </a-tooltip>
                    </template>
                    <template slot="action" slot-scope="text,record">
                        <a class="m-r8" v-if="record.state===2" @click="toPath('examQuestionView',record)">导入</a>
                        <a class="m-r8" v-if="record.state===4" @click="toPath('examQuestionView',record)">查看</a>
                        <a class="m-r8" @click="_PaperProduceTaskDelete(record)">删除</a>
                    </template>
                </a-table>
            </div>
        </div>
    </div>
</template>

<script>
    const columns = [
        {
            title: "名称",
            dataIndex: "name",
            key: "name",
            scopedSlots: { customRender: "name" },
            ellipsis: true,
            width: 280
        },
        {
            title: "所属学科",
            dataIndex: "discipline",
            key: "discipline",
            scopedSlots: { customRender: "discipline" },
            width: 100
        },
        {
            title: "任务创建时间",
            dataIndex: "creationTime",
            key: "creationTime",
            scopedSlots: { customRender: "creationTime" },
            ellipsis: true,
            width: 150
        },
        {
            title: "状态",
            dataIndex: "taskState",
            key: "taskState",
            scopedSlots: { customRender: "taskState" },
            width: 120,
        },
        {
            title: "操作",
            key: "action",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            width: 160,
        },
    ]
    let strs = [
        { title: '等待中', index: 0 },
        { title: '正在执行', index: 1 },
        { title: '成功', index: 2 },
        { title: '失败', index: 3 },
        { title: '导入完成', index: 4 },
    ]
    import { myPagination } from '@/mixins/myPagination.js';
    import myStatus from '@/components/myStatus.vue'
    import { PaperProduceTaskGetList, PaperProduceTaskDelete } from '@/api/api'
    import { download } from '@/utils/tools'
    export default {
        mixins: [myPagination],
        components: {
            myStatus
        },
        data() {
            return {
                strs,
                columns,
                current: ['mail'],
                loading: false,
                data: [],
                State: '',//状态
                DisciplineId: '',//学科id
            }
        },
        mounted() {
            this.$store.dispatch('DisciplineGetList')
            this._PaperProduceTaskGetList();
        },
        methods: {
            //删除
            _PaperProduceTaskDelete(record) {
                let _this = this;
                this.$confirm({
                    okText: '确认',
                    cancelText: '取消',
                    mask: false,
                    title: `您确认要删除"${record.name}"任务吗?`,
                    onOk() {
                        let data = {
                            id: record.id
                        }
                        PaperProduceTaskDelete(data).then(res => {
                            _this.$message.success('删除成功！');
                            _this._PaperProduceTaskGetList();
                        }).catch(err => {
                        })
                    }
                });
            },
            //试题解析列表
            _PaperProduceTaskGetList() {
                this.loading = true;
                let data = {
                    State: this.State,
                    DisciplineId: this.DisciplineId,//学科id
                    KeyWord: this.KeyWord,
                    SkipCount: (this.pagination.current - 1) * this.pagination.pageSize,
                    MaxResultCount: this.pagination.pageSize,
                }
                PaperProduceTaskGetList(data).then(res => {
                    console.log(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._PaperProduceTaskGetList();
            },
            callback(key) {
                console.log(key);
            },
            //表格change
            handleChange(pagination, filters, sorter) {
                const pager = { ...this.pagination };
                pager.current = pagination.current;
                this.pagination = pager;
                this._PaperProduceTaskGetList();
            },
            subjectChange(value) {
                console.log(value)
                this.DisciplineId = value;
                const pager = { ...this.pagination };
                pager.current = 1;
                this.pagination = pager;
                this._PaperProduceTaskGetList();
            },
            statusChange(value) {
                console.log(value)
                this.State = value;
                const pager = { ...this.pagination };
                pager.current = 1;
                this.pagination = pager;
                this._PaperProduceTaskGetList();
            },
            toPath(name, record = {}) {
                this.$router.push({
                    name: name,
                    query: {
                        taskID: record.id,
                        record: JSON.stringify(record)
                    }
                })
            }
        }
    }
</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; */
        height: calc(100% - 64px);
        position: relative;
        overflow-y: auto;
    }

    .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>