<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"
                    custom-icon="fa fa-bookmark"
                    @click="createVirtual">
                    虚拟字段
                </Button>
                <Button type="primary"
                    ghost
                    custom-icon="fa fa-eye"
                    @click="preview">
                    预览
                </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>
            </template>
        </modal-table>
        <column-select ref="columnSelect" />
        <column-edit ref="columnEdit"
            :view-type="20" />
        <modal-form ref="preview"
            v-if="previewActive"
            :setting-enable="false">
            <template slot="footer">
                <div></div>
            </template>
        </modal-form>
    </div>
</template>
<script>
    import mixinPage from '../../mixins/page';
    import columnSelect from './column-select';
    import columnEdit from './column-edit';
    import { mapActions } from 'vuex';

    export default {
        mixins: [mixinPage],
        components: { columnSelect, columnEdit },
        data() {
            return {
                active: false,
                dataView: {},
                previewActive: false
            };
        },
        created() {},
        props: {
            // 是否公共配置界面
            isSetting: {
                type: Boolean,
                default: false
            }
        },
        computed: {},
        methods: {
            ...mapActions('admin/dataView', { saveDataView: 'save' }),
            // 打开
            open(dataView, columns) {
                this.dataView = dataView;
                this.active = true;

                setTimeout(async () => {
                    await this.$refs.table.init('FormViewColumn');
                    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,
                                dataView: this.dataView,
                                isShow: true,
                                controlType: 'TextInput', // 默认文本输入框
                                columnWidth: 'Column6', // 默认宽度1/2
                                source: item.objColumn != null ? item.objColumn.dataType : null,
                                sourceDataCode: item.objColumn != null ? 'id' : null,
                                sourceDisplayCode:
                                    item.objColumn != null &&
                                    item.objColumn.columns.some(function (column) {
                                        return column.code === item.objColumn.code + '.name';
                                    })
                                        ? 'name'
                                        : null
                            });
                        }
                    });

                    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();
                        });
                    });
                });
            },
            // 保存
            save() {
                this.confirm('确定要保存设置吗？', async () => {
                    await this.saveDataView({
                        code: this.dataView.code,
                        columns: this.$refs.table.data
                    });

                    this.success('保存成功！', () => {
                        this.$refs.table.close();
                    });
                });
            },
            // 预览
            preview() {
                this.previewActive = true;

                setTimeout(async () => {
                    let view = {
                        dataView: this.dataView,
                        viewColumns: this.$refs.table.data
                    };
                    this.$refs.preview.loadView(this.copy(view));
                    this.$refs.preview.open();
                });
            }
        }
    };
</script>
