<template>
    <ContainerLayout :options="view.layout" ref="layout" class="body-content form" @resize="resize">
        <div slot="north">
            <div class="title" v-if="view.showTitle" ref="title">{{$_i18n(view.title)||$_i18n("form.no_title")}}</div>
            <!--表单应用，不提供工具栏fid-->
            <CustomToolbar v-show="view.showToolbar" ref="toolbar" @click="$page_toolbar_clickHandler"
                           @ready="$_page_toolbar_initComplete" @resize="resize" @completed="completed"
                           :queryParams="queryParams"></CustomToolbar>
        </div>
        <!--使用vue动态组件加载适配-->
        <component v-if="view.layout.south && view.layout.south.component!=null && view.layout.south.visible"
                   slot="south" ref="south" :is="view.layout.south.component" :params="view.layout.south.params">
        </component>
        <dynamic-form ref="form" :options="view.formView"></dynamic-form>
        <Dialog refs="dialog" :title="dialog.title" :visible.sync="dialog.visible" :destroy-on-close="dialog.destroyOnClose"
                :width="dialog.width" :height="dialog.height" :close-on-click-modal="dialog.modalClose"
                :parentClass="view.parentClass" @close="handleDialogClose"
                :modal-append-to-body="false" :close-on-press-escape="false">
            <component v-if="dialog.visible" :is="dialog.component" :params="dialog.params"></component>
            <span v-if="dialog.footer&&dialog.footer.visible" slot="footer" class="dialog-footer">
            <el-button @click="dialog.visible = false">{{$_i18n("form.cancel")}}</el-button>
            <el-button type="primary" @click="dialog.visible = false">{{$_i18n("form.ok")}}</el-button>
          </span>
        </Dialog>
    </ContainerLayout>
</template>
<script>
    import resize from '../../utils/mixins/resize';
    import page from '../Common/page';
    import DynamicForm from "../Common/DynamicForm";
    export default {
        name: "StepView",
        mixins: [resize, page],//监听外部框架的大小改变事件
        components: {
            ProcessView: (resolve) => require([`../oa/ProcessView`], resolve),
            DynamicForm
        },
        data() {
            return {
                cache:{},
                view: {//布局控制配置
                    idKey: "id",
                    layout: {
                        north: {visible: true, resize: false, size: "auto"},
                        south: {visible: false, size: "100px",
                            params: {showTitle: false,inited:false}}
                    },
                    formView: {
                        params:{},
                        type:"workflow",
                        validateOnRuleChange:false,
                        enableQuery:false,  //是否允许其他页面查询
                        saveAndClose: true,
                        columnCount: 2, //表单列数计算范围
                        width: "100%",  //表单内容占表单总允许宽度
                        labelWidth: "100px" //标题的宽度
                    }
                },
                tools: [
                    {type: "save", code: "save", name: "[toolbar.save]", remark: "[toolbar.save_remark]",
                        style: "icon-save",actionUrl:this.$store.state.api.oa.save,
                        linkageRule:{params:{cmd:"none"},saveAndClose:false}},
                    {type: "save", code: "oa_pass", name: "审批通过", remark: "审批通过",
                        style: "icon-oa-pass success",actionUrl:this.$store.state.api.oa.save,
                        linkageRule:{params:{cmd:"pass"},saveAndClose:true}},
                    {type: "form", code: "oa_return", name: "审批退回",
                        linkageRule:{width:"600px",height:"350px",title:"审批退回",
                            params:{closeParent:true,cid:"{cid}",infoId:"{infoId}",proId:"{proId}",
                                stepId:"{stepId}",fid:"stepReturn",cmd:"back"}},
                        remark: "审批退回到某个已执行的步骤", style: "icon-oa-return warning"},
                    {type: "form", code: "oa_reject", name: "审批驳回",
                        linkageRule:{width:"600px",height:"300px",title:"审批驳回",
                        params:{closeParent:true,cid:"{cid}",infoId:"{infoId}",proId:"{proId}",
                            stepId:"{stepId}",fid:"stepReject",cmd:"reject"}},
                        remark: "审批驳回后，该单据不允许再次提交", style: "icon-oa-reject danger"},
                    {type: "form", code: "oa_change", name: "审批转交",
                        linkageRule:{width:"600px",height:"350px",title:"审批转交",
                            params:{closeParent:true,cid:"{cid}",infoId:"{infoId}",proId:"{proId}",
                                stepId:"{stepId}",fid:"stepChange",}},
                        remark: "当前审批人转交另一个审批人，执行结论和步骤不变", style: "icon-oa-change"},
                    {
                        type: "form", code: "oa_detail", name: "查看详情", remark: "查看审批结果与审批记录", style: "icon-log",
                        linkageRule: {
                            component: "ProcessView", params: {proId: "{proId}", cid: "{cid}", id: "{infoId}", rid: "{rid}"},
                            width: "850px", height: "800px", title: "查看代办详情",
                            validate: {
                                id: {required: true}, proId: {required: true, msg: "未设置有效的流程编号"}
                            }
                        }
                    }
                ],
            }
        }, created() {
            this.$_page_getRouter();
        },async mounted() {
            let formItems=[];
            if(this.queryParams){
                if(this.queryParams.cid&&this.queryParams.proId&&this.queryParams.stepId){
                    await this.$async({url: this.$store.state.api.oa.getStepItems,
                        keymap: {columns:"columnCount",default_value:"defaultValue",linkage_rule:"linkageRule",
                            format:"formatString"},
                        data:this.queryParams})
                        .then(async (res) => {
                            formItems=res.data;
                        })
                }
            }
            let formData=[];
            await this.$async({url: this.$store.state.api.oa.loadStepData,data: this.queryParams,
                keymap:{columns:"columnCount"}}).then(async (res) => {
                formData=res.data;
            });
            if(!this.fid)
                this.fid="doProcess";//赋值默认的oa表单
            this.$core.debug().log("流程使用表单编号",this.fid);
            if (this.fid) {
                let cache = {};
                if (this.$store.state.form[this.fid]) {
                    cache = this.$core.decodeData(this.$store.state.form[this.fid], {}).data[0];
                } else {
                    await this.$async({
                        url: this.$store.state.api.form.loadConfig + this.fid, keymap: {}, beforeDecode: (e) => {
                            this.$store.dispatch('form/update', {key: this.fid, value: e});
                        }
                    }).then(async (res) => {
                        cache = res.data[0];
                    })
                }
                if(cache.view) {
                    if (cache.view.formView && cache.view.formView.layout)
                        this.$_page_updateLayoutSetting(cache.view.formView);
                    //完成工具栏数据布局
                    if (cache.view.formView)
                        for (let key in cache.view.formView)
                            this.$set(this.view.formView, key, cache.view.formView[key])
                }
                if (this.view.formView.tools && this.view.formView.tools.length) {//如果需要重写，则在这边配置，比如选择并返回
                    this.tools = this.view.formView.tools;
                }
                if (cache.tools) {
                    for (let i in cache.tools) {
                        if (cache.tools[i].position == "5") {
                            this.tools.push(cache.tools[i])
                        }
                    }
                }
                formItems=formItems.concat(cache.items);
            }
            if(this.$store.state.settings.oa){//都加载完后再控制显示
                for(let i=this.tools.length-1;i>=0;i-- ){
                    if(this.$store.state.settings.oa[this.tools[i].code]===false)
                        this.tools.splice(i,1);
                }
            }
            this.view.formView.params=this.queryParams;
            await this.$refs.form.updateForm(formItems,formData);
            // this.$core.debug().log(this.form);
            this.$nextTick(()=>{
                this.$refs.toolbar.updateTools(this.tools);
            })
            if(this.$refs.layout)
                this.$refs.layout.updateLayout(this.view.layout);
            this.resize();
        },
        computed: {},
        methods: {
            async customQuery(params) {
                //步骤页面不允许做查询级操作
            }, updatePageParams(pageParams) {
                if (pageParams.reportName) {
                    this.view.title = pageParams.reportName;
                    delete pageParams.reportName;
                }
                if (pageParams.fid) {
                    this.fid = pageParams.fid;//拦截无穷递归
                    delete pageParams.fid;
                    delete this.queryParams.fid;
                }
                if (pageParams.columnCount)
                    this.view.formView.columnCount = pageParams.columnCount;
            }, resize() {
                this.$nextTick(()=>{
                    if(this.view.layout.south.visible&&this.$refs.south) {
                        this.$refs.south.resize();
                    }
                })
            }, completed() {
                this.$core.debug().log("收到工具栏加载完成事件", this.params);
            }
        }
    }
</script>