<template>
    <div>
        <a-modal title="排序设置" :visible="visible" @ok="handOK" :confirmLoading="confirmLoading" @cancel="handCancle"
            width="900px" :maskClosable="false" :destroyOnClose="true">
            <div class="modal-box" style="padding:0">
                <table width="100%" class="table-box" cellspacing="0">
                    <tr>
                        <th>序号</th>
                        <th>题型名称</th>
                        <th>学科</th>
                        <th>排序</th>
                    </tr>
                    <!-- <a-spin :spinning="spinning"> -->
                    <template v-if="data.length>0">
                        <tr v-for="(item,index) in data">
                            <td>{{index+1}}</td>
                            <td style="text-align: left;padding-left: 8px;">
                                {{(index+1)|NoToChinese}}、{{item.disciplineQuestionType}}
                            </td>
                            <td>{{item.discipline}}</td>
                            <td>
                                <!-- <a-input-number v-model="item.sort" :min="1" :max="data.length" /> -->
                                <a class="m-r8" @click="move(0,index)">上移</a>
                                <a @click="move(-1,index)">下移</a>
                            </td>
                        </tr>
                    </template>
                    <template v-else>
                        <tr>
                            <td colspan="4" style="border:none">
                                <a-empty />
                            </td>
                        </tr>
                    </template>
                    <!-- </a-spin> -->
                </table>
            </div>
        </a-modal>
    </div>
</template>
<script>
    import { GetDisciplineSortSetting, UpdateDisciplineSortSetting } from '@/api/api'
    export default {
        components: {
        },
        data() {
            return {
                spinning: false,
                confirmLoading: false,
                visible: false,
                form: this.$form.createForm(this),
                data: [],
            };
        },
        computed: {

        },
        watch: {
        },
        mounted() {

        },
        methods: {
            //上下移
            move(type, index) {
                if (type == 0) {
                    if (index == 0) {
                        this.$message.error('该题型已为第一位！')
                        return;
                    }
                    let sort1 = this.data[index - 1].sort,
                        sort2 = this.data[index].sort;
                    this.data[index - 1] = this.data.splice(index, 1, this.data[index - 1])[0];
                    this.data[index - 1].sort = sort1;
                    this.data[index].sort = sort2;
                }
                if (type == -1) {
                    if (index == this.data.length - 1) {
                        this.$message.error('该题型已为最后一位！')
                        return;
                    }
                    let sort1 = this.data[index + 1].sort,
                        sort2 = this.data[index].sort;
                    this.data[index + 1] = this.data.splice(index, 1, this.data[index + 1])[0];
                    this.data[index + 1].sort = sort1;
                    this.data[index].sort = sort2;
                }
            },
            //获取细分题型排序
            _GetDisciplineSortSetting() {
                this.spinning = true;
                let data = {
                    paperId: this.$parent.examId
                }
                GetDisciplineSortSetting(data).then(res => {
                    console.log(res, '试卷细分题型排序列表')
                    this.data = res;
                    this.spinning = false;
                }).catch(err => {
                    this.spinning = false;
                })
            },
            showModal(data) {
                this._GetDisciplineSortSetting();
                this.visible = true;
            },
            //表单确认
            handOK(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        let arr = [];
                        this.data.forEach(item => {
                            if (arr.indexOf(item.sort) == -1) {
                                arr.push(item.sort)
                            }
                        })
                        if (this.data.length != arr.length) {
                            this.$message.error('排序不可相同，请重新设置')
                            return;
                        }
                        this.confirmLoading = true;
                        let params = {
                            paperId: this.$parent.examId
                        }
                        UpdateDisciplineSortSetting(this.data, params).then(res => {
                            this.$message.success('操作成功');
                            this.$parent._PaperGetPaperInfo();
                            this.handCancle();
                            this.confirmLoading = false;
                        }).catch(err => {
                            this.confirmLoading = false;
                        })
                    }
                })
            },
            handCancle() {
                this.visible = false;
            }
        },
    };
</script>
<style scoped>
    table {
        width: 100%;
        table-layout: fixed;
    }

    th,
    td {
        text-align: center;
        border: 1px solid rgba(232, 232, 232, 1);
        /* padding: 4px 0; */
    }

    table tr td {
        padding:6px;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -moz-text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
    }
</style>