<template>
    <el-row :gutter="20" class="data-form">
        <el-form label-position="top" label-width="80px">
            <!-- template v-for-->
            <template>
                <p class="title">基础信息</p>
                <el-row :gutter="20">
                    <template v-for="(item,index) in header.basicInfos.data">
                        <el-col :span="8" :key="index">
                            <el-form-item
                                :key="index"
                                :label="item.name">
                                <el-input v-model="form[item.path]"/>
                            </el-form-item>
                        </el-col>
                    </template>
                </el-row>
            </template>
            <div class="content">
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane v-for="(item,index) in paneMsg" :key="index" :label="item" :name="index.toString()"/>
                </el-tabs>
                <div class="table">
                    <el-row :gutter="20">
                        <template v-for="(item,index) in header.dictStages.data">
                            <el-col span="8" :key="index">
                                <el-form-item
                                    :key="index"
                                    :label="item.name">
                                    <el-input v-model="form[item.path]"/>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-row>
                </div>
            </div>


        </el-form>


    </el-row>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
@Component({
    name: "dataForm",
})
export default class extends Vue {
    @Prop({ default: Object }) dataFormList?: {};
    // tabs数据
    paneMsg = ['设计阶段维护', '施工阶段维护', '运维阶段维护']
    activeName = this.paneMsg[0]
    header = {}
    form = {}

    @Watch('deviceHeaders', { immediate: true, deep: true })
    async deviceHeaders() {
        await this.test()

    }

    // test() {
    //     let header = []
    //     console.log(this.dataFormList)
    //     if (Object.keys(this.dataFormList.length > 0)) {
    //         this.dataFormList.dictStages.forEach(item => {
    //             console.log(this.activeName)
    //             if (this.activeName == item.name) {
    //                 console.log(this.activeName)
    //                 item.infos && item.infos.forEach(val => header.push(val))
    //             }
    //         })
    //     }
    //     this.header = {
    //         basicInfos: {
    //             name: '基础信息台账',
    //             data: this.dataFormList.basicInfos
    //         },
    //         dictStages: {
    //             name: this.activeName,
    //             data: header
    //         }
    //     }
    // }

    handleClick(val) {
        this.activeName = val.label
        this.deviceHeaders()
    }
}

</script>

<style scoped lang="scss">
$border: 1px solid #E1E7EA;
.data-form {
    .title {
        border-left: 7px solid;
        text-indent: 10px;
        color: #646C73;
        margin-bottom: 10px;
    }

    .content {
        .table {
            border-left: $border;
            border-right: $border;
            border-bottom: $border;
            height: calc(100% - 41px);
            padding: 12px;
        }
    }
}
</style>
