<template>
    <div class="question-bank">
        <div class="top">
            <div class="top-right flex-align">
                <div>
                   <a-button type="primary" style="margin-right: 24px;" @click="showModal('add',{})">添加测验</a-button>
                </div>
                <div class="flex">
                    <a-select placeholder="选择学科" style="width:300px;margin-right: 8px;"
                        @change="subjectChange" showSearch :filterOption="filterOption" option-filter-prop="children">
                        <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-input-search style="width:300px;" placeholder="搜索测验" enter-button @search="onSearch" />
                </div>

            </div>
        </div>
        <div class="main">
            <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="action" slot-scope="text,record">
                        <a class="m-r8" @click="showModalSelectQuestion(record)">试题</a>
                        <a class="m-r8" @click="showModal('edit',record)">修改</a>
                        <a class="m-r8" @click="_TestingDelete(record)">删除</a>
                    </template>
                </a-table>
            </div>
        </div>
        <TestingEdit ref="testingEditRef" />
        <SelectQuestion ref="selectQuestionRef" />
    </div>
</template>

<script>
    const columns = [
        {
            title: "测验名称",
            dataIndex: "name",
            ellipsis: true,
            width: 280
        },
        {
            title: "测验类型",
            dataIndex: "testingTypeName",
            width: 100,
            ellipsis: true,
        },
        {
            title: "年级",
            dataIndex: "gradeName",
            width: 80
        },
        {
            title: "学科",
            dataIndex: "disciplineName",
            width: 80
        },
        {
            title: "题量",
            dataIndex: "totalQuestion",
            width: 80
        },
        {
            title: "创建时间",
            dataIndex: "creationTime",
            scopedSlots: { customRender: "creationTime" },
            ellipsis: true,
            width: 140
        },
        {
            title: "操作",
            key: "action",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            width: 100,
        },
    ]

    import { myPagination } from '../../mixins/myPagination.js';
    import { TestingGetList, TestingDelete } from '@/api/api'

    import TestingEdit from './Edit.vue'
    import SelectQuestion from './components/SelectQuestion.vue'

    export default {
        mixins: [myPagination],
        components: {
          TestingEdit,
          SelectQuestion
        },
        data() {
            return {
                columns,
                current: ['mail'],
                loading: false,
                selectedRowKeys: [],
                data: [],
                searchPost:{
                  DisciplineId:''
                }
            }
        },
        mounted() {
            this.$store.dispatch('DisciplineGetList')
            this._TestingGetList();
        },
        methods: {
            //试卷列表
            _TestingGetList() {
                this.loading = true;
                let data = {
                    DisciplineId: this.searchPost.DisciplineId,//学科id
                    SkipCount: (this.pagination.current - 1) * this.pagination.pageSize,
                    MaxResultCount: this.pagination.pageSize,
                }
                TestingGetList(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._TestingGetList();
            },
            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._TestingGetList();
            },
            subjectChange(value) {
                this.searchPost.DisciplineId = value;
                const pager = { ...this.pagination };
                pager.current = 1;
                this.pagination = pager;
                this._TestingGetList();
            },
            filterOption(input, option){
              if ( option.componentOptions.children[0].children ) {
                return option.componentOptions.children[0].children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
              } else {
                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
            },
            showModal(type, record){
              this.$refs.testingEditRef.showModal(type,record)
            },
            _TestingDelete(record) {
              const self = this;
                self.$confirm({
                    okText: '确认',
                    cancelText: '取消',
                    mask: false,
                    title: `您确认要删除测验 ${record.name} 吗?`,
                    onOk() {
                        const data = {
                            id: record.id
                        }
                        TestingDelete(data).then(res => {
                            self.$message.success('删除成功！');
                            self._TestingGetList();
                        })
                    }
                });
            },
            showModalSelectQuestion(record) {
              this.$refs.selectQuestionRef.showModal(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;
        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>