<template>
    <div>
        <div class="top-box flex-align">
            <div>
                <a-button type="primary" @click="showModal('add')">创建学科</a-button>
                <a-button type="primary" style="margin: 0 24px;" @click="_DisciplineDeleteList">删除</a-button>
                <a-button type="danger" v-if="isSource" @click="dataSyncClick">同步</a-button>
            </div>
            <div class="flex">
                <a-select :default-value="receiveData.id" show-search placeholder="请选择" option-filter-prop="children"
                    style="width: 200px;margin-right:8px" :filter-option="filterOption" @change="xdChange">
                    <a-select-option :value="''" :key="'all'">
                        所有年级
                    </a-select-option>
                    <a-select-option v-for="item in $store.state.baseInfo.Grades" :value="item.id"
                        :key="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
                <a-input-search style="width:400px;" placeholder="搜索学科" enter-button @search="onSearch" />
            </div>

        </div>
        <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="points" slot-scope="text,record">
                <a @click="changeComponent('KnowledgePoints',record)">管理</a>
            </template>
            <!-- <template slot="chapter" slot-scope="text,record">
                <a>管理</a>
            </template> -->
            <template slot="questionType" slot-scope="text,record">
                <a @click="changeComponent('SubjectQuestionType',record)">管理</a>
            </template>
            <template slot="action" slot-scope="text,record">
                <a @click="showModal('edit',record)">修改</a>
                <a-divider type="vertical" />
                <a @click="_DisciplineDelete(record)">删除</a>
            </template>
        </a-table>
        <EditSubject ref="EditSubject" />
    </div>
</template>
<script>
    const columns = [
        {
            title: "学科名称",
            dataIndex: "name",
            key: "name",
            scopedSlots: { customRender: "name" },
            ellipsis: true,
            width: 180
        },
        {
            title: "年级",
            dataIndex: "gradeName",
            key: "gradeName",
            scopedSlots: { customRender: "gradeName" },
            ellipsis: true,
            width: 80
        },
        {
            title: "知识点",
            dataIndex: "points",
            key: "points",
            scopedSlots: { customRender: "points" },
            ellipsis: true,
            width: 80
        },
        // {
        //     title: "章节",
        //     dataIndex: "chapter",
        //     key: "chapter",
        //     scopedSlots: { customRender: "chapter" },
        //     ellipsis: true,
        //     width: 80
        // },
        {
            title: "学科题型",
            dataIndex: "questionType",
            key: "questionType",
            scopedSlots: { customRender: "questionType" },
            ellipsis: true,
            width: 80
        },
        {
            title: "操作",
            key: "action",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            width: 100,
            align: "center"
        },
    ]
    import { myPagination } from '@/mixins/myPagination.js'
    import EditSubject from './EditSubject.vue'
    import { DisciplineGetList, DisciplineDelete, DisciplineDeleteList, DisciplineDataSync } from '@/api/api'
    export default {
        props: {
            receiveData: {
                type: Object,
                default: () => { }
            }
        },
        mixins: [myPagination],
        components: {
            EditSubject
        },
        data() {
            return {
                columns,
                loading: false,
                data: [],
                selectedRowKeys: [],
                KeyWord: '',
                isSource:false,
                GradeId: this.receiveData.id,//学段id
            }
        },
        mounted() {
            this.$store.dispatch('EducationCategoryGetList')
            this.isSource=localStorage.getItem("isSource")==='1'
            this._DisciplineGetList();
        },
        methods: {
            changeComponent(name, record) {
                console.log(record, 'record')
                this.$emit('callBack', name, record)
            },
            //删除（多个）
            _DisciplineDeleteList() {
                if (this.selectedRowKeys.length === 0) {
                    this.$message.error('请选择需要删除的学科！')
                    return;
                }
                let _self = this;
                this.$confirm({
                    okText: '确认',
                    cancelText: '取消',
                    mask: false,
                    title: `您确认要删除这"${_self.selectedRowKeys.length}"个学科吗?`,
                    onOk() {
                        let data = {
                            idList: _self.selectedRowKeys
                        }
                        DisciplineDeleteList(data).then(res => {
                            _self.selectedRowKeys = [];
                            _self.$message.success('删除成功！');
                            _self._DisciplineGetList();
                        })
                    }
                });
            },
            //删除（单个）
            _DisciplineDelete(record) {
                let _this = this;
                this.$confirm({
                    okText: '确认',
                    cancelText: '取消',
                    mask: false,
                    title: `您确认要删除"${record.name}"学科吗?`,
                    onOk() {
                        let data = {
                            id: record.id
                        }
                        DisciplineDelete(data).then(res => {
                            _this.$message.success('删除成功！');
                            _this._DisciplineGetList();
                        })
                    }
                });
            },
            _DisciplineGetList() {
                this.loading = true;
                let data = {
                    GradeId: this.GradeId,
                    KeyWord: this.KeyWord,
                    SkipCount: (this.pagination.current - 1) * this.pagination.pageSize,
                    MaxResultCount: this.pagination.pageSize,
                }
                DisciplineGetList(data).then(res => {
                    console.log(res, '学科列表')
                    this.data = res.items;
                    this.pagination.total = res.totalCount;
                    this.loading = false;
                }).catch(err => {
                    this.loading = false;
                })
            },
            showModal(type, record = {GradeId:this.GradeId}) {
                this.$refs.EditSubject.showModal(type, record)
            },
            onSearch(val) {
                this.KeyWord = val;
                const pager = { ...this.pagination };
                pager.current = 1;
                this.pagination = pager;
                this._DisciplineGetList();
            },
            //表格选项选中
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys;
            },
            //表格change
            handleChange(pagination, filters, sorter) {
                const pager = { ...this.pagination };
                pager.current = pagination.current;
                this.pagination = pager;
                this._DisciplineGetList();
            },
            //学段改变
            xdChange(val) {
                console.log(val, 'val')
                this.GradeId = val;
                const pager = { ...this.pagination };
                pager.current = 1;
                this.pagination = pager;
                this._DisciplineGetList();
            },
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
            dataSyncClick(){
              let _this = this;
                this.$confirm({
                    mask: false,
                    title: `同步数据会清空现有数据，确定要同步数据吗?`,
                    onOk() {
                        DisciplineDataSync().then(res => {
                            _this.$message.success('同步成功！');
                            _this._DisciplineGetList();
                            //_this.$store.dispatch('EducationCategoryGetList', true);
                        })
                    }
                });
            }
        }
    }
</script>
<style scoped>
    .top-box {
        height: 64px;
        padding: 0 24px;
    }
</style>