<template>
    <div>
        <div class="top-box flex-align">
            <div>
                <a-button type="primary" style="margin-right: 24px;" @click="showModal('add',activeSubjectItem)">创建题型
                </a-button>
                <!-- <a-button type="primary">删除</a-button> -->
            </div>
            <div>
                <a-select v-if="activeSubject" :value="activeSubject" placeholder="请选择"
                    style="width:300px;margin-right: 8px;">
                    <a-select-opt-group v-for="item in $store.state.baseInfo.LearningArr" :key="item.type">
                        <span slot="label">{{item.name}}</span>
                        <a-select-option :value="v.id" v-for="v in item.data" :key="v.id"
                            @click="subjectChange(v.id,v)">
                            {{v.name}}
                        </a-select-option>
                    </a-select-opt-group>
                </a-select>
                <!-- <a-input-search style="width:400px;" placeholder="搜索题型" enter-button @search="onSearch" /> -->
            </div>
        </div>
        <a-table :columns="columns" :loading="loading" :dataSource="data" size="small" :rowKey="record => record.id"
            :pagination="false" @change="handleChange">
            <template slot="action" slot-scope="text,record">
                <a @click="showModal('edit',record)">修改</a>
                <a-divider type="vertical" />
                <a @click="_DisciplineQuestionTypeDelete(record)">删除</a>
            </template>
        </a-table>
        <EditQuestionType ref="EditQuestionType" />
    </div>
</template>
<script>
    const columns = [
        {
            title: "题型名称",
            dataIndex: "name",
            key: "name",
            scopedSlots: { customRender: "name" },
            ellipsis: true,
            width: 180
        },
        // {
        //     title: "所属学段",
        //     dataIndex: "JobName",
        //     key: "JobName",
        //     scopedSlots: { customRender: "JobName" },
        //     ellipsis: true,
        //     width: 100
        // },
        {
            title: "所属学科",
            dataIndex: "discipline",
            key: "discipline",
            scopedSlots: { customRender: "discipline" },
            ellipsis: true,
            width: 100
        },
        {
            title: "所属试卷题型",
            dataIndex: "questionType",
            key: "questionType",
            scopedSlots: { customRender: "questionType" },
            ellipsis: true,
            width: 100
        },
        {
            title: "操作",
            key: "action",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            width: 100,
            align: "center"
        },
    ]
    import { myPagination } from '@/mixins/myPagination.js'
    import EditQuestionType from './EditQuestionType.vue'
    import { DisciplineQuestionTypeGetList, DisciplineQuestionTypeDelete } from '@/api/api'
    export default {
        props: {
            receiveData: {
                type: Object,
                default: () => { }
            }
        },
        mixins: [myPagination],
        components: {
            EditQuestionType
        },
        data() {
            return {
                columns,
                loading: false,
                data: [],
                selectedRowKeys: [],
                activeSubject: this.receiveData.id || '',
                activeSubjectItem: {}
            }
        },
        watch: {
            activeSubject: {
                handler(nVal) {
                    if (this.activeSubject) {
                        this._DisciplineQuestionTypeGetList();
                    }
                },
                immediate: true
            }
        },
        mounted() {
            this.$store.dispatch('DisciplineGetList');
            this.$store.dispatch('GetQuestionTypeList');

            if (!this.receiveData.id && this.$store.state.baseInfo.LearningArr.length > 0) {
                this.activeSubject = this.$store.state.baseInfo.LearningArr[0].data[0].id;
                this.activeSubjectItem = this.$store.state.baseInfo.LearningArr[0].data[0];
            }
        },
        methods: {
            //删除题型
            _DisciplineQuestionTypeDelete(record) {
                let _this = this;
                this.$confirm({
                    okText: '确认',
                    cancelText: '取消',
                    mask: false,
                    title: `您确认要删除"${record.name}"题型吗?`,
                    onOk() {
                        let data = {
                            id: record.id
                        }
                        DisciplineQuestionTypeDelete(data).then(res => {
                            _this.$message.success('删除成功！');
                            _this._DisciplineQuestionTypeGetList();
                        })
                    }
                });
            },
            //题型列表
            _DisciplineQuestionTypeGetList() {
                this.loading = true;
                let data = {
                    disciplineId: this.activeSubject
                }
                DisciplineQuestionTypeGetList(data).then(res => {
                    console.log(res, '学科细分题型列表')
                    this.data = res;
                    this.loading = false;
                }).catch(err => {
                    this.loading = false;
                })
            },
            showModal(type, record = {}) {
                this.$refs.EditQuestionType.showModal(type, record)
            },
            onSearch() {

            },
            //表格选项选中
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys;
            },
            //表格change
            handleChange(pagination, filters, sorter) {
                const pager = { ...this.pagination };
                pager.current = pagination.current;
                this.pagination = pager;
                // this.getList();
            },
            subjectChange(value, item) {
                console.log(item, 'item')
                this.activeSubject = value;
                this.activeSubjectItem = item;
            }
        }
    }
</script>
<style scoped>
    .top-box {
        height: 64px;
        padding: 0 24px;
    }
</style>