<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 v-if="inited"
                ref="table"
                :view-code="page.tableView.code"
                @create="$refs.form.open()"
                @edit="({row, index})=>$refs.form.open(row)">
                <template slot-scope="{ row }"
                    slot="command">
                    <Button v-for="(item) in page.controls"
                        :key="item.id"
                        size="small"
                        :title="item.name"
                        :type="item.colorType.toLowerCase()"
                        :custom-icon="item.icon"
                        @click="controlClick(row, item.targetCode, item.param)">
                    </Button>
                </template>
            </view-table>
        </Card>
        <modal-form ref="form"
            v-if="inited&&page.formView"
            :view-code="page.formView.code"
            @on-after-save="$refs.table.loadData()" />
        <modal-table v-if="inited"
            v-for="(table) in tables"
            :key="table.id"
            :ref="table.code"
            :view-code="table.dataView.code"
            @create="(param)=>create(param, table.targetCode)"
            @edit="({row, index})=>edit(row, table.targetCode)">
            <template slot-scope="{ row }"
                slot="command">
                <Button v-for="(item) in table.controls"
                    :key="item.id"
                    size="small"
                    :title="item.name"
                    :type="item.colorType.toLowerCase()"
                    :custom-icon="item.icon"
                    @click="controlClick(row, item.targetCode, item.param)">
                </Button>
            </template>
        </modal-table>
        <modal-form v-if="inited"
            v-for="(form) in forms"
            :key="form.id"
            :ref="form.code"
            :view-code="form.dataView.code"
            @on-after-save="aftersave(form.targetCode)" />
    </div>
</template>
<script>
    import { mixinPage } from '/src/index.js';
    import { mapActions } from 'vuex';

    export default {
        // name: this.$route.name,
        mixins: [mixinPage],
        components: {},
        data() {
            return {
                inited: false,
                page: {},
                tables: [],
                forms: []
            };
        },
        computed: {},
        async created() {
            let res = await this.loadPage(this.$route.meta.data.code);

            this.page = res.customPage;
            this.page.controls = res.customPageControls.filter(item => {
                return item.customPageComponentID == null;
            });
            this.tables = res.customPageComponents.filter(item => {
                return item.componentType === 'Table';
            });
            this.tables.forEach(component => {
                component.controls = res.customPageControls.filter(item => {
                    return item.customPageComponentID === component.id;
                });
            });
            this.forms = res.customPageComponents.filter(item => {
                return item.componentType === 'Form';
            });

            this.inited = true;
        },
        methods: {
            ...mapActions('admin/viewPage', { loadPage: 'load' }),
            // 点击按钮
            controlClick(data, targetCode, param) {
                let model = null;
                if (param) {
                    model = JSON.parse(param);
                    for (let key in model) {
                        model[key] = data[model[key]];
                    }
                }

                this.$refs[targetCode][0].open(model);
            },
            // 点击新增
            create(param, targetCode) {
                this.$refs[targetCode][0].openDefault(param);
            },
            // 点击修改
            edit(data, targetCode) {
                this.$refs[targetCode][0].open(data);
            },
            // 新增、修改完成后事件
            aftersave(targetCode) {
                this.$refs[targetCode][0].loadData();
            }
        }
    };
</script>
