<template>
    <div class="app-container">
        <form-create :rule="rule" v-model:api="fApi" :option="options" v-model="value" />
    </div>
</template>
<script>
import { getFlowable } from '@/api/tool/formGreat'
export default {
    props: {
        formId: {
            type: String,
            default: ""
        }
    },
    watch: {
        formId() {
            console.log(this.formId)
        }
    },
    data() {
        return {
            fApi: {},
            value: { field1: '111', field2: '222', time: '11:11:11' },
            options: {
                onSubmit: (formData) => {
                    alert(JSON.stringify(formData))
                }
            },
            rule: [
                { type: 'input', field: 'field1', title: 'field1', value: 'aaa' },
                { type: 'input', field: 'field2', title: 'field2', value: 'sss' },
                { type: 'timePicker', field: 'time', title: 'time', value: '12:12:12' },
                {
                    type: 'ElButton',
                    title: '修改 field1',
                    native: false,
                    on: {
                        click: () => {
                            this.rule[0].value += 'a'
                        }
                    },
                    children: ['点击'],
                }
            ]
        }
    },

    mounted() {
        this.$route.query.tableId && (this.formId = this.$route.query.tableId)

        this.formId && getFlowable(this.formId).then((response) => {
            if (response.state === "success") {
                this.rule = response.data.contentJson && JSON.parse(response.data.contentJson).getRule
            }
        })

    }
}

</script>
  
<style lang="scss" scoped>
._fc-t-header {
    height: 60px;
    margin: 0 20px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: default;
}

._fc-t-logo {
    height: 26px;
}

._fc-t-name {
    display: inline-block;
    color: rgba(0, 0, 0, 0.8);
    font-size: 20px;
    font-weight: 600;
    margin-left: 5px;
}

._fc-t-menu {
    position: absolute;
    right: 0;
}

._fc-t-menu i {
    font-size: 12px;
}

::v-deep(.el-aside) {
    padding: 0px;
    background-color: #fff;
}
</style>
  