<template>
    <div>
        <modal-table ref="table"
            view-code="TableFilterColumn"
            :static="true"
            :footer-enable="true"
            v-if="active">
            <template slot-scope="{ row, index }"
                slot="command">
                <Button size="small"
                    title="编辑"
                    type="primary"
                    ghost
                    custom-icon="fa fa-edit"
                    @click="edit(row, index)"></Button>
                <Button size="small"
                    title="上移"
                    type="primary"
                    ghost
                    custom-icon="fa fa-chevron-up"
                    @click="up(row, index)"></Button>
                <Button size="small"
                    title="下移"
                    type="primary"
                    ghost
                    custom-icon="fa fa-chevron-down"
                    @click="down(row, index)"></Button>
                <Button size="small"
                    title="移除"
                    type="primary"
                    ghost
                    custom-icon="fa fa-times"
                    @click="remove(row, index)"></Button>
            </template>
            <template slot="footer">
                <Button type="primary"
                    ghost
                    custom-icon="fa fa-plus"
                    @click="add">
                    新增
                </Button>
                <Button type="primary"
                    custom-icon="fa fa-save"
                    @click="save">
                    保存
                </Button>
            </template>
        </modal-table>
        <filter-edit ref="filterEdit"
            :data-view="dataView" />
    </div>
</template>
<script>
    import mixinPage from '../../mixins/page';
    import filterEdit from './filter-edit';
    import { mapActions } from 'vuex';

    export default {
        mixins: [mixinPage],
        components: { filterEdit },
        data() {
            return {
                active: false,
                dataView: {}
            };
        },
        created() {},
        props: {},
        computed: {},
        methods: {
            ...mapActions('admin/dataView', {
                resetDataView: 'reset',
                saveDataView: 'save',
                saveUserView: 'saveUserView',
                saveDataViewSetting: 'saveSetting',
                saveFilterColumn: 'saveFilterColumn'
            }),
            // 打开
            open(dataView, columns) {
                this.dataView = dataView;
                this.active = true;

                setTimeout(async () => {
                    this.$refs.table.loadData(columns);
                    this.$refs.table.open();
                });
            },
            // 新增
            add() {
                this.$refs.filterEdit.open(null, data => {
                    let columns = this.$refs.table.data;
                    columns.push(data);

                    this.$refs.table.loadData(columns);
                });
            },
            // 打开字段设置界面
            edit(row, index) {
                this.$refs.filterEdit.open(row, data => {
                    let columns = this.$refs.table.data;
                    columns.splice(index, 1, data);

                    this.$refs.table.loadData(columns);
                });
            },
            // 上移
            up(row, index) {
                let columns = this.$refs.table.data;
                if (index > 0) {
                    columns.splice(index, 1);
                    columns.splice(index - 1, 0, row);

                    this.$refs.table.loadData(columns);
                }
            },
            // 下移
            down(row, index) {
                let columns = this.$refs.table.data;
                if (index < columns.length - 1) {
                    columns.splice(index, 1);
                    columns.splice(index + 1, 0, row);

                    this.$refs.table.loadData(columns);
                }
            },
            // 移除
            remove(row, index) {
                let columns = this.$refs.table.data;
                columns.splice(index, 1);

                this.$refs.table.loadData(columns);
            },
            // 保存
            save() {
                this.confirm('确定要保存设置吗？', async () => {
                    let columns = this.$refs.table.data;
                    await this.saveFilterColumn({
                        code: this.dataView.code,
                        columns
                    });

                    this.$emit('on-change', this.dataView.code);

                    this.success('保存成功！', () => {
                        this.$refs.table.close();
                    });
                });
            }
        }
    };
</script>
