<template> 
<div>
    <Row type="flex" justify="start" >
        <Col :span="leftSpan" v-show="leftShowFlag" style="margin-top: 20px">
            <Affix>
                <Toolbar ref="tool" :config="toolbarConfig" :fontplacement="fontplacement" @doAction="doAction" :showback="true" :checkBtn="true"></Toolbar>
            </Affix>
        </Col>
        <Col :span="mainSpan">
            <Row type="flex" justify="start"> 
                <Col  style="margin-top: 18px;text-align:right;width:2%">
                    <Affix>
                        <Poptip v-show="!leftSpan" trigger="hover" placement="right" content="展开功能菜单栏"> 
                            <CommonIcon type="_right" :size="1" @click="doShowLeft"> </CommonIcon>
                        </Poptip>
                        <Poptip v-show="leftSpan" trigger="hover" placement="right" content="收缩功能菜单栏">
                             <CommonIcon type="_left" :size="1" @click="doHideLeft"> </CommonIcon>
                        </Poptip>
                    </Affix>
                </Col>
                <Col  style="width:98%">
                    <Row>
                    <Card :id="config.name">
                        <template v-if="config.title !== undefined" #title>
                        <p  v-if="config.title !== undefined">
                            {{config.title}}
                        </p>
                        </template>    
                         <FormBox ref="form" :config="config" :dictData="dictData"/>
                    </Card>
                    </Row>
                    <Row style="margin-top: 10px">
                     <Collapse simple v-model="showDetail">
                        <Panel v-for="(detail,index) in config.detail" :key="detail.name+index" :id="detail.name" :name="detail.name" >
                             {{detail.title}}
                               <template  #content>
                         <p>
                              <EditGrid  :ref="detail.name" :config="detail" :dictData="dictData"> </EditGrid>
                        </p>
                        </template>
                        </Panel>
                    </Collapse>
                    </Row>
                </Col>
            </Row>
        </Col>
        <Col :span="rightSpan" v-show="rightShowFlag">
            <Affix>
                <Anchor v-if="showAnchor" :affix="false" show-ink>
                    <AnchorLink v-for="(item,index) in anchor" :key="'anchor_' + index" :href="item.href" :title="item.title"  >
                        <AnchorLink style="margin-top: 20px;" v-for="(item2,index2) in item.children" :key="'anchor_child_' + index2" :href="item2.href" :title="item2.title"  /> 
                    </AnchorLink>
                </Anchor> 
            </Affix>
        </Col>
    </Row>
</div>
</template>
<script>
    import toolAnchor from './toolanchor';
    import Base from './workform.vue';
    export default {
        name: 'formdetail',
        mixins: [toolAnchor],
        extends: Base,
        data (){
            return {
                alonePictureConfig:{
                    type:'PictureBox',
                    height:60,
                    width:95,
                    icon:'ios-cloud-upload',
                    iconSize:42,
                    iconColor:'#3399ff',
                },  
                showAlonePicture:false,
                alonePictureValue:{},
                hackReset:true,
                toolbarConfig:{},
                fontplacement:'right',
                showAnchor:false,
                anchor:[],
                showDetail:[]
            };
        },
       
        methods:{
            customInit() {
                this.addAnchor(this.config.name,this.config.title);
                this.showDetail = [];
                if (this.config.detail) {
                    this.config.detail.forEach(el => {
                        this.addAnchor(el.name,el.title);
                    });
                }
                if (this.anchor.length > 0) {
                    this.showAnchor = true;
                } else {
                    this.showAnchor = false;
                }
            },
        
            reset() {
                this.hackReset = false;
                this.$nextTick(() => {
                    this.hackReset = true;
                });
            },
            addAnchor(href,title) {
                let anchor = {};
                anchor.href = '#'+href;
                anchor.title = title;
                anchor.children = [];
                if (href && title) {
                    this.anchor.push(anchor);
                }
            },
            updateItemConfig(name, config) {
                this.$refs.form.updateItemConfig(name, config);
            },
            updateItemsConfig(obj) {
                this.$refs.form.updateItemsConfig(obj);
            },
            setRequired(name,value) {
                this.$refs.form.setRequired(name, value);
            }
        }
    };
</script>