<template>
    <div>
        <div class="top-box flex-align">
            <div>
                <a-button type="primary" style="margin-right: 24px;" @click="showModal('add')">创建题型</a-button>
                <!-- <a-button type="primary">删除</a-button> -->
            </div>
            <!-- <a-input-search style="width:400px;" placeholder="搜索题型" enter-button @search="onSearch" /> -->
        </div>
        <a-table :columns="columns" :loading="loading" :dataSource="data" size="small" :rowKey="record => record.id"
            :pagination="false" @change="handleChange">
            <template slot="xktx" class="flex-align">
                <a>管理</a>
            </template>
            <span slot="customTitle" class="flex-align">
                <span>排序</span>
                <myTips str="该排序会影响试卷整体排序，请谨慎操作" />
                <!-- <div class="sort-box">
                    <a-icon type="info-circle" class="sort-icon" theme="filled" />
                    <a-alert message="该排序会影响试卷整体排序，请谨慎操作" banner class="sort-alert" />
                </div> -->
            </span>
            <template slot="action" slot-scope="text,record">
                <a @click="showModal('edit',record)">修改</a>
                <a-divider type="vertical" />
                <a @click="_DeleteQuestionTypeId(record)">删除</a>
            </template>
        </a-table>
        <EditQuestionType ref="EditQuestionType" />
    </div>
</template>
<script>
    const columns = [
        {
            title: "题型名称",
            dataIndex: "name",
            key: "name",
            scopedSlots: { customRender: "name" },
            ellipsis: true,
            width: 280
        },
        // {
        //     title: "学科题型",
        //     dataIndex: "xktx",
        //     key: "xktx",
        //     scopedSlots: { customRender: "xktx" },
        //     ellipsis: true,
        //     width: 180
        // },
        {
            dataIndex: "sort",
            key: "sort",
            slots: { title: 'customTitle' },
            scopedSlots: { customRender: "sort" },
            ellipsis: true,
            width: 180
        },
        {
            title: "操作",
            key: "action",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            width: 100,
            align: "center"
        },
    ]
    import { myPagination } from '@/mixins/myPagination.js'
    import EditQuestionType from './EditQuestionType.vue'
    import myTips from '@/components/myTips.vue'
    import { GetQuestionTypeList, DeleteQuestionTypeId } from '@/api/api'
    export default {
        mixins: [myPagination],
        components: {
            EditQuestionType,
            myTips
        },
        data() {
            return {
                columns,
                loading: false,
                data: [],
                selectedRowKeys: []
            }
        },
        mounted() {
            this._GetQuestionTypeList();
        },
        methods: {
            //删除题型
            _DeleteQuestionTypeId(record) {
                let _this = this;
                this.$confirm({
                    okText: '确认',
                    cancelText: '取消',
                    mask: false,
                    title: `您确认要删除${record.name}"题型吗?`,
                    onOk() {
                        let data = {
                            id: record.id
                        }
                        DeleteQuestionTypeId(data).then(res => {
                            _this.$message.success('删除成功！');
                            _this._GetQuestionTypeList();
                        })
                    }
                });
            },
            //题型排序列表
            _GetQuestionTypeList() {
                this.loading = true;
                GetQuestionTypeList().then(res => {
                    console.log(res, '题型排序列表')
                    this.data = res;
                    this.loading = false;
                }).catch(err => {
                    this.loading = false;
                })
            },
            showModal(type, data = {}) {
                this.$refs.EditQuestionType.showModal(type, data)
            },
            onSearch() {

            },
            //表格选项选中
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys;
            },
            //表格change
            handleChange(pagination, filters, sorter) {
                const pager = { ...this.pagination };
                pager.current = pagination.current;
                this.pagination = pager;
                // this.getList();
            },
        }
    }
</script>
<style scoped>
    .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>
<style scoped>
    .top-box {
        height: 64px;
        padding: 0 24px;
    }
</style>