<template>
    <div>
        <modal-table ref="table"
            :static="true"
            :setting-enable="false"
            :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-indent"
                    @click="openColumnSelect">
                    选择
                </Button>
                <Button type="primary"
                    ghost
                    custom-icon="fa fa-redo"
                    v-if="isSetting"
                    @click="reset">
                    重置
                </Button>
                <Button type="primary"
                    custom-icon="fa fa-bookmark"
                    v-if="!isSetting"
                    @click="createVirtual">
                    虚拟字段
                </Button>
                <Button type="primary"
                    ghost
                    custom-icon="fa fa-save"
                    v-if="isSetting"
                    @click="userSave">
                    保存
                </Button>
                <Button type="primary"
                    custom-icon="fa fa-save"
                    v-if="!isSetting"
                    @click="save">
                    保存
                </Button>
                <Button type="error"
                    custom-icon="fa fa-save"
                    v-if="isSetting"
                    @click="globalSave">
                    全局保存
                </Button>
                <Button type="error"
                    custom-icon="fa fa-cog"
                    v-if="isSetting"
                    @click="setting">
                    表格设置
                </Button>
            </template>
        </modal-table>
        <column-select ref="columnSelect" />
        <column-edit ref="columnEdit"
            :view-type="10" />
        <modal-form ref="setting"
            view-code="TableViewSetting"
            v-if="isSetting">
            <template slot="column"
                slot-scope="{form, code}">
                <slot name="column"
                    :form="form">
                </slot>
                <div v-if="code =='sorting'">
                    <input class="ivu-input ivu-input-default"
                        placeholder="设置表排序字段"
                        v-model="sort"
                        readonly="readonly"
                        @click="$refs.modal_sort.open()">
                </div>
                <div v-if="code =='filtering'">
                    <input class="ivu-input ivu-input-default"
                        placeholder="设置过滤字段"
                        v-model="filter"
                        readonly="readonly"
                        @click="$refs.modal_filter.open()">
                </div>
            </template>
            <template slot="footer">
                <Button type="primary"
                    custom-icon="fa fa-save"
                    @click="saveSetting">
                    保存
                </Button>
            </template>
        </modal-form>
        <modal-form-sort ref="modal_sort"
            :sort="sort"
            :dataView="dataView"
            @bindSort="bindSort" />

        <modal-form-filter ref="modal_filter"
            :filter="filter"
            :dataView="dataView"
            @bindFilter="bindFilter" />

    </div>
</template>
<script>
    import mixinPage from '../../mixins/page';
    import columnSelect from './column-select';
    import columnEdit from './column-edit';
    import { mapActions } from 'vuex';
    import modalFormSort from './modal-form-sort';
    import modalFormFilter from './modal-form-filter';

    export default {
        mixins: [mixinPage],
        components: { columnSelect, columnEdit, modalFormSort, modalFormFilter },
        data() {
            return {
                active: false,
                dataView: {},
                data: {},
                tablename: '',
                sort: '',
                filter: '',
                tableid: ''
            };
        },
        created() {},
        props: {
            // 是否公共配置界面
            isSetting: {
                type: Boolean,
                default: false
            }
        },
        computed: {},
        methods: {
            ...mapActions('admin/dataView', {
                resetDataView: 'reset',
                saveDataView: 'save',
                saveUserView: 'saveUserView',
                saveDataViewSetting: 'saveSetting'
            }),
            // 打开
            open(dataView, columns) {
                this.dataView = dataView;
                this.active = true;
                let code;

                if (this.isSetting) {
                    code = 'TableViewColumnSimple';
                } else {
                    code = 'TableViewColumn';
                }

                setTimeout(async () => {
                    await this.$refs.table.init(code, () => {
                        this.$refs.table.loadData(columns);
                        this.$refs.table.open();
                    });
                });
            },
            // 打开字段设置界面
            edit(row, index) {
                this.$refs.columnEdit.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);
            },
            // 打开字段选择界面
            openColumnSelect() {
                let columns = this.$refs.table.data;
                this.$refs.columnSelect.open(this.dataView, columns, checked => {
                    // 移除未勾选的
                    columns = columns.filter(column => {
                        return (
                            checked.some(item => {
                                return column.code === item.code;
                            }) || column.isVirtual
                        );
                    });

                    // 添加新勾选的
                    checked.forEach(item => {
                        if (
                            !columns.some(column => {
                                return column.code === item.code;
                            })
                        ) {
                            columns.push({
                                code: item.code,
                                name: item.name,
                                dataType: item.dataType,
                                isShow: true,
                                controlType: 'Label', // 默认只读文本
                                align: 'Center' // 默认居中
                            });
                        }
                    });

                    setTimeout(() => {
                        this.$refs.table.loadData(columns);
                    });
                });
            },
            // 创建虚拟字段
            createVirtual() {
                let columns = this.$refs.table.data;

                let row = {
                    IsShow: true,
                    IsVirtual: true,
                    DataType: 'String'
                };

                this.$refs.columnEdit.open(row, data => {
                    columns.push(data);
                    this.$refs.table.loadData(columns);
                });
            },
            // 全局保存
            globalSave() {
                this.confirm('确定要保存全局设置吗？', () => {
                    this.confirm('本次操作将修改全局设置，确认要保存吗？', async () => {
                        await this.saveDataView({
                            code: this.dataView.code,
                            columns: this.$refs.table.data
                        });

                        this.$emit('on-change', this.dataView.code);
                        this.success('保存成功！', () => {
                            this.$refs.table.close();
                        });
                    });
                });
            },
            // 重置
            reset() {
                this.confirm('确定要恢复默认设置吗？', async () => {
                    await this.resetDataView(this.dataView.code);

                    this.$emit('on-change', this.dataView.code);
                    this.success('重置成功！', () => {
                        this.$refs.table.close();
                    });
                });
            },
            // 用户保存
            userSave() {
                this.confirm('确定要保存设置吗？', async () => {
                    await this.saveUserView({
                        code: this.dataView.code,
                        columns: this.$refs.table.data
                    });

                    this.$emit('on-change', this.dataView.code);
                    this.success('保存成功！', () => {
                        this.$refs.table.close();
                    });
                });
            },
            // 保存
            save() {
                this.confirm('确定要保存设置吗？', async () => {
                    await this.saveDataView({
                        code: this.dataView.code,
                        columns: this.$refs.table.data
                    });

                    this.success('保存成功！', () => {
                        this.$refs.table.close();
                    });
                });
            },
            // 设置
            setting() {
                // 排序字段参数赋值
                this.sort = this.dataView.sorting;
                this.filter = this.dataView.filtering;
                this.$refs.setting.open(this.copy(this.dataView));
            },
            // 保存设置
            saveSetting() {
                this.confirm('确定要保存设置吗？', async () => {
                    console.log(this.$refs.setting.data);
                    let res = await this.saveDataViewSetting(this.$refs.setting.data);
                    this.dataView = res.dataView;

                    this.$emit('on-change', this.dataView.code);
                    this.success('保存成功！', () => {
                        this.$refs.setting.close();
                    });
                });
            },
            //绑定排序组件返回的排序json
            bindSort(value) {
                this.sort = value;
                this.$refs.setting.data.sorting = value;
            },
            //绑定筛选组件返回的排序json
            bindFilter(value) {
                this.filter = value;
                this.$refs.setting.data.filtering = value;
            }
        }
    };
</script>
