<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader :title="$route.meta.title"
                :content="$route.meta.description"
                hidden-breadcrumb />
        </div>
        <Card :bordered="false"
            dis-hover
            class="ivu-mt">
            <view-table ref="table"
                view-code="FormView"
                :filter="filter"
                @create="$refs.form.openDefault({ ViewType: 'FormView' })"
                @edit="({row, index})=>$refs.form.open(row)">
                <template slot-scope="{ row }"
                    slot="command">
                    <Button size="small"
                        title="字段设置"
                        type="info"
                        custom-icon="fa fa-bars"
                        @click="setting(row)"></Button>
                </template>
            </view-table>
        </Card>
        <modal-form ref="form"
            view-code="FormViewEdit"
            @on-change="formChange"
            @on-after-save="$refs.table.loadData()" />
        <form-setting ref="setting" />
    </div>
</template>
<script>
    import { mixinPage } from '/src/index.js';
    //import formSetting from '../../components/view/form-setting';
    import viewColumnApi from '../../api/viewColumn';

    export default {
        name: 'system-formView',
        mixins: [mixinPage],
        components: {},
        data() {
            return {
                filter: {
                    viewType: 'FormView'
                }
            };
        },
        computed: {},
        created() {},
        methods: {
            formChange(sender) {
                const data = this.$refs.form.data;
                const columns = this.$refs.form.columns;

                const columnModel = columns.find(item => {
                    return item.code === 'model';
                });
                const columnDataSource = columns.find(item => {
                    return item.code === 'dataSource';
                });

                if (data.isDataSource) {
                    columnModel.isShow = false;
                    columnDataSource.isShow = true;
                } else {
                    columnModel.isShow = true;
                    columnDataSource.isShow = false;
                }

                this.$refs.form.forceUpdate();
            },
            // 字段设置
            async setting(row) {
                let res = await viewColumnApi.queryByDataViewID(row.id);
                this.$refs.setting.open(row, res.data);
            }
        }
    };
</script>
