<template>
    <div style="height:100%;width: 100%">
        <el-container v-if="showTemplate" class="table-list-container">
            <el-header style="height: auto;" size="medium" v-if="isViewTable != '1'">
                <el-button type="primary" size="small" round icon="el-icon-circle-plus">新增
                </el-button>
                <el-button type="danger" size="small" round icon="el-icon-delete">删除
                </el-button>
            </el-header>
            <el-main>
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="时间"
                            width="120">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="表头1"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="表头2"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="250" v-if="isViewTable != '1'">
                        <template slot-scope="scope">
                            <el-button size="small" icon="el-icon-edit" type="primary">
                                修改
                            </el-button>
                            <el-button size="small" icon="el-icon-view" type="primary">
                                查看
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="120" v-else>
                        <template slot-scope="scope">
                            <el-button size="small" icon="el-icon-view" type="primary">
                                查看
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
        <list-view-preview v-else
                           :formId="formId" :listViewId="listViewId" :linkTreeViewId="linkTreeViewId"
                           :isNeedPage="isNeedPage" :isEditTable="isEditTable" :isShowDiyButton="isShowDiyButton"
                           :hidenDeleteBtn="hidenDeleteBtn" :hidenAddBtn="hidenAddBtn" :isEditData="isEditData"
                           :isViewTable="isViewTable" :isTablePreview="isTablePreview" :isHideenOptBtn="isHideenOptBtn"
                           @ejectDataChoose="runEjectDataChoose" :callfill-field-arr="callfillFieldArr"
                           :condition-form-arr="conditionFormArr" :isPreview="isPreview" :condition-id="conditionId"
                           :main-form-data="mainFormData" :is-eject-table="isEjectTable"
                           :isEjectTableShowSelect="acceptMultiple == 'true'"
                           :isEjectTableShowRowButton="acceptMultiple != 'true'"
                           :relationId="relationId" :onlyData="onlyData" :optOwnData="optOwnData"
                           :hidenHeadBtn="hidenHeadBtn" :hidenViewBtn="hidenViewBtn" :hidenUpdateBtn="hidenUpdateBtn"
                           :linkDetele="linkDetele" :parentOptFormData="parentOptFormData" :autoOpenHeight="autoOpenHeight"
                           :minHeight="minHeight" :listOutParam="listOutParam" :editParamSet="editParamSet"
                           pRefs="ejectTableRefs" class="ejectTableRefs"
        >
        </list-view-preview>

    </div>
</template>

<script>
    export default {
        name: "listPreviewHandler",
        props:['formId','listViewId','linkTreeViewId','isNeedPage',
            'isEditTable','isShowDiyButton','hidenDeleteBtn',
            'hidenAddBtn','isEditData','isViewTable','isTablePreview',
            'isHideenOptBtn','isEjectTable','acceptMultiple','conditionId','isPreview',
            'callfillFieldArr','conditionFormArr','ejectDataChoose','mainFormData',
            'relationId','onlyData','optOwnData','hidenHeadBtn','hidenViewBtn',
            'hidenUpdateBtn','linkDetele','parentOptFormData','autoOpenHeight',
            'minHeight','listOutParam','editParamSet'],
        data(){
            return {
                showTemplate: false,
                tableData:[{
                    date: '2016-05-03',
                    name: '列表数据1',
                    address: '列表数据1'
                }, {
                    date: '2016-05-02',
                    name: '列表数据2',
                    address: '列表数据3'
                }, {
                    date: '2016-05-04',
                    name: '列表数据3',
                    address: '列表数据3'
                }, {
                    date: '2016-05-01',
                    name: '列表数据4',
                    address: '列表数据4'
                }, {
                    date: '2016-05-08',
                    name: '列表数据5',
                    address: '列表数据5'
                }, {
                    date: '2016-05-06',
                    name: '列表数据6',
                    address: '列表数据6'
                }]
            }
        },
        watch:{
            formId(){
                this.showTemplate = !this.formId || !this.listViewId;
            },
            listViewId(){
                this.showTemplate = !this.formId || !this.listViewId;
            },
        },
        created() {
            this.showTemplate = !this.formId || !this.listViewId;
            // console.log("this.showTemplate",this.showTemplate);
        },
        methods:{
            runEjectDataChoose(dataRows,callfillFieldArr){
                this.ejectDataChoose && this.ejectDataChoose(dataRows,callfillFieldArr);
            }
        }
    }
</script>

<style scoped>

</style>