<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> -->
                <a-button type="danger" v-if="isSource" @click="dataSyncClick">同步</a-button>
            </div>
            <div class="flex">
                <a-select style="width: 160px;margin-right:8px;" placeholder="选择状态" @change="statusChange">
                    <a-select-option :key="''">全部</a-select-option>
                    <a-select-option :key="1">启用</a-select-option>
                    <a-select-option :key="0">禁用</a-select-option>
                </a-select>
                <a-select placeholder="学科选择" style="width:260px;margin-right: 8px;" @change="subjectChange">
                    <a-select-option :key="''">全部</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-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="isActive" slot-scope="text">
                <div class="flex-items">
                    <div :class="[text?'green-dot':'gray-dot']"></div>{{text?'已启用':'未启用'}}
                </div>
            </template>
            <template slot="chapter" slot-scope="text,record">
                <a @click="changeTabs(record)">章节管理</a>
            </template>
            <template slot="action" slot-scope="text,record">
                <a @click="showModal('edit',record)" class="m-r8">修改</a>
                <a class="m-r8" v-if="!record.isActive" @click="_TextbookActive(record.id,true)">启用</a>
                <a class="m-r8" v-if="record.isActive" @click="_TextbookActive(record.id,false)">禁用</a>
                <a @click="_TextbookDelete(record)">删除</a>
            </template>
        </a-table>
        <EditTextBook ref="EditTextBook" />
    </div>
</template>
<script>
    const columns = [
        {
            title: "教材版本名称",
            dataIndex: "name",
            key: "name",
            scopedSlots: { customRender: "name" },
            ellipsis: true,
            width: 180
        },
        {
            title: "所属学段",
            dataIndex: "educationCategory",
            key: "educationCategory",
            scopedSlots: { customRender: "educationCategory" },
            ellipsis: true,
            width: 100
        },
        {
            title: "所属学科",
            dataIndex: "discipline",
            key: "discipline",
            scopedSlots: { customRender: "discipline" },
            ellipsis: true,
            width: 100
        },
        {
            title: "状态",
            dataIndex: "isActive",
            key: "isActive",
            scopedSlots: { customRender: "isActive" },
            ellipsis: true,
            width: 100
        },
        {
            title: "章节",
            key: "chapter",
            dataIndex: "chapter",
            scopedSlots: { customRender: "chapter" },
            width: 100,
            align: "center"
        },
        {
            title: "操作",
            key: "action",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            width: 100,
            align: "center"
        },
    ]
    import { myPagination } from '@/mixins/myPagination.js'
    import EditTextBook from './EditTextBook.vue'
    import { TextbookGetList, TextbookActive, TextbookDelete,TextbookDataSync,ChapterDataSync } from '@/api/api'
    export default {
        mixins: [myPagination],
        components: {
            EditTextBook
        },
        data() {
            return {
                columns,
                loading: false,
                data: [],
                selectedRowKeys: [],
                KeyWord: '',
                isActive: '',
                isSource:false,
                EducationCategoryId: '',//学段id
                DisciplineId: '',//学科id
            }
        },
        mounted() {
            this.$store.dispatch('GetQuestionTypeList');
            this.$store.dispatch('DisciplineGetList')
            this.isSource=localStorage.getItem("isSource")==='1'
            this.$parent.bookObj = {};
            this._TextbookGetList();

        },
        methods: {
            //跳转章节诶管理
            changeTabs(record) {
                this.$parent.bookObj = record;
                this.$parent.currentTabComponent = 'ChapterManage';
            },
            //删除教材
            _TextbookDelete(record) {
                let _this = this;
                this.$confirm({
                    okText: '确认',
                    cancelText: '取消',
                    mask: false,
                    title: `您确认要删除"${record.name}"教材版本吗?`,
                    onOk() {
                        let data = {
                            id: record.id
                        }
                        TextbookDelete(data).then(res => {
                            _this.$message.success('删除成功！');
                            _this._TextbookGetList();
                        })
                    }
                });
            },
            //是否激活
            _TextbookActive(id, bool) {
                let data = {
                    id: id,
                    isActive: bool
                }
                TextbookActive(data).then(res => {
                    this.$message.success(`${bool ? '启用' : '禁用'}成功！`);
                    this._TextbookGetList();
                })
            },
            //教材列表
            _TextbookGetList() {
                this.loading = true;
                let data = {
                    DisciplineId: this.DisciplineId,//学科id
                    EducationCategoryId: this.EducationCategoryId,//学段id
                    IsActive: typeof (this.IsActive) == 'number' ? Boolean(this.IsActive) : this.IsActive,//是否激活
                    KeyWord: this.KeyWord,
                    SkipCount: (this.pagination.current - 1) * this.pagination.pageSize,
                    MaxResultCount: this.pagination.pageSize,
                }
                TextbookGetList(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 = {}) {
                this.$refs.EditTextBook.showModal(type, record)
            },
            onSearch(val) {
                this.KeyWord = val;
                const pager = { ...this.pagination };
                pager.current = 1;
                this.pagination = pager;
                this._TextbookGetList();
            },
            statusChange(value) {
                console.log(value)
                this.IsActive = value;
                const pager = { ...this.pagination };
                pager.current = 1;
                this.pagination = pager;
                this._TextbookGetList();
            },
            subjectChange(value) {
                console.log(value)
                this.DisciplineId = value;
                this._TextbookGetList();
            },
            //表格选项选中
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys;
            },
            //表格change
            handleChange(pagination, filters, sorter) {
                const pager = { ...this.pagination };
                pager.current = pagination.current;
                this.pagination = pager;
                this._TextbookGetList();
            },
            dataSyncClick(){
              let _this = this;
                this.$confirm({
                    mask: false,
                    title: `同步数据会清空现有数据，确定要同步数据吗?`,
                    onOk() {
                        TextbookDataSync().then(res => {
                           // _this._TextbookGetList();
                            //_this.$store.dispatch('EducationCategoryGetList', true);

                            ChapterDataSync().then(resChapter => {
                              _this.$message.success('同步成功！');
                              _this._TextbookGetList();
                            })
                        })
                    }
                });
            }
        }
    }
</script>
<style scoped>
    .top-box {
        height: 64px;
        padding: 0 24px;
    }

    .green-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: green;
        margin-right: 6px;
    }

    .gray-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: gray;
        margin-right: 6px;
    }
</style>