<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="Entity"
                :filter="filter">
                <template slot-scope="{ row }"
                    slot="command">
                    <Button size="small"
                        title="扩展字段"
                        type="primary"
                        custom-icon="fa fa-bars"
                        @click="$refs.columnTable.open({modelName:row.name})"></Button>
                </template>
            </view-table>
        </Card>
        <modal-table ref="columnTable"
            view-code="ExtendColumn"
            @create="(param)=>$refs.columnForm.openDefault(param)"
            @edit="({row, index})=>$refs.columnForm.open(row)">
            <template slot-scope="{ row }"
                slot="command">
                <Button size="small"
                    title="删除"
                    type="warning"
                    custom-icon="fa fa-trash-alt"
                    @click="remove(row)"></Button>
            </template>
        </modal-table>
        <modal-form ref="columnForm"
            view-code="ExtendColumnEdit"
            @on-change="formChange"
            @on-after-save="$refs.columnTable.loadData()" />
    </div>
</template>
<script>
    import { mixinPage, modelApi } from '/src/index.js';
    //import tableSetting from '../../components/view/table-setting';

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

                const columnColumnName = columns.find(item => {
                    return item.code === 'columnName';
                });
                const columnDataType = columns.find(item => {
                    return item.code === 'dataType';
                });
                const columnSize = columns.find(item => {
                    return item.code === 'size';
                });
                const columnFkModel = columns.find(item => {
                    return item.code === 'fkModel';
                });

                if (data.dataType === 10) {
                    // 字符串
                    columnSize.isShow = true;
                    columnSize.name = '长度';
                    columnFkModel.isShow = false;
                } else if (data.dataType === 30) {
                    // 小数
                    columnSize.isShow = true;
                    columnSize.name = '小数位';
                    columnFkModel.isShow = false;
                } else if (data.dataType === 90) {
                    // 唯一键
                    columnSize.isShow = false;
                    columnFkModel.isShow = true;
                } else {
                    columnSize.isShow = false;
                    columnFkModel.isShow = false;
                }

                if (data.id != null) {
                    // 不能修改数据类型、外键表名
                    columnColumnName.readonly = true;
                    columnDataType.readonly = true;
                    columnFkModel.readonly = true;
                } else {
                    columnColumnName.readonly = false;
                    columnDataType.readonly = false;
                    columnFkModel.readonly = false;
                }

                this.$refs.columnForm.forceUpdate();
            },
            remove(row) {
                this.confirm('确认要删除该项吗？', () => {
                    this.confirm('删除扩展字段后该字段的所有数据将不可恢复，确认要删除吗？', async () => {
                        await modelApi.remove('ExtendColumn', row.id);

                        this.success('操作成功', () => {
                            this.$refs.columnTable.loadData();
                        });
                    });
                });
            }
        }
    };
</script>
