<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="TableView"
                :filter="filter"
                @create="$refs.form.openDefault({ viewType: 'TableView' })"
                @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="TableViewEdit"
            @on-change="formChange"
            @on-after-save="$refs.table.loadData()">
            <template slot="column"
                slot-scope="{form, code}">
                <div v-if="code =='sorting'">
                    <input class="ivu-input ivu-input-default"
                        placeholder="设置表排序字段"
                        v-model="$refs.form.data.sorting"
                        readonly="readonly"
                        @click="openSort">
                </div>
                <div v-if="code =='filtering'">
                    <input class="ivu-input ivu-input-default"
                        placeholder="设置过滤字段"
                        v-model="$refs.form.data.filtering"
                        readonly="readonly"
                        @click="openFilter">
                </div>
            </template>
        </modal-form>

        <table-setting ref="setting" />

        <modal-form-sort ref="modal_sort"
            :sort="data.sorting"
            :dataView="data"
            @bindSort="bindSort" />

        <modal-form-filter ref="modal_filter"
            :filter="data.filtering"
            :dataView="data"
            @bindFilter="bindFilter" />
    </div>
</template>
<script>
    import { mixinPage } from '/src/index.js';
    //import tableSetting from '../../components/view/table-setting';
    import viewColumnApi from '../../api/viewColumn';

    export default {
        name: 'system-tableView',
        mixins: [mixinPage],
        // components: { modalFormSort, modalFormFilter },
        data() {
            return {
                filter: {
                    viewType: 'TableView'
                },
                data: {}
            };
        },
        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';
                });
                const columnFunctionType = columns.find(item => {
                    return item.code === 'functionType';
                });
                const columnFunctionName = columns.find(item => {
                    return item.code === 'functionName';
                });

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

                this.$refs.form.forceUpdate();
            },
            // 字段设置
            async setting(row) {
                let res = await viewColumnApi.queryByDataViewID(row.id);
                this.$refs.setting.open(row, res.data);
            },
            //绑定排序组件返回的排序json
            bindSort(value) {
                this.$refs.form.data.sorting = value;
                // this.data.sorting = value;
            },
            //绑定筛选组件返回的排序json
            bindFilter(value) {
                this.$refs.form.data.filtering = value;
                // this.data.filtering = value;
            },
            async openSort() {
                if (!this.$refs.form.data.model == '') {
                    await this.bindData();
                    this.$refs.modal_sort.open();
                } else {
                    this.errorInfo();
                }
            },
            async openFilter() {
                if (!this.$refs.form.data.model == '') {
                    await this.bindData();
                    this.$refs.modal_filter.open();
                } else {
                    this.errorInfo();
                }
            },
            bindData() {
                this.data = this.$refs.form.data;
                console.log(this.data);
            },
            errorInfo() {
                this.error('请先选择模型！');
            }
        }
    };
</script>
