<template>
    <div class="ws-tpl-form-edit">
        <el-tabs v-model="activeName" type="card" @tab-click="handleTabChange">
            <el-tab-pane v-for="(item, idx) in privateData" :key="idx" :label="item.title" :name="idx+''">
                <div class="ws-tpl-form-edit--list">
                    <div class="ws-tpl-form-edit--item" v-for="(child) in item.children" :key="child.id">
                        <div class="ws-tpl-form-edit--item-tag">
                            <ws-checkbox :disabled="child.disabled" v-model="child.selected"></ws-checkbox>
                        </div>
                        <div class="ws-tpl-form-edit--item-label">{{child.alias || child.title}}{{child.notNull ? '*' : ''}}</div>
                        <div class="ws-tpl-form-edit--item-content">
                            <ws-input v-if="child.type == 'input'" size="mini"></ws-input>
                            <ws-input v-if="child.type == 'textarea'" size="mini" type="textarea"></ws-input>
                            <ws-select value v-if="child.type == 'select'" size="mini"></ws-select>
                            <ws-date-picker v-if="child.type == 'date'" size="mini"></ws-date-picker>
                            <ws-date-picker v-if="child.type == 'datetime'" size="mini" type="datetime"></ws-date-picker>
                            <ws-date-picker v-if="child.type == 'daterange'" size="mini" type="daterange"></ws-date-picker>
                            <ws-date-picker v-if="child.type == 'datetimerange'" size="mini" type="datetimerange"></ws-date-picker>
                            <div class="file" v-if="child.type == 'file'">附件</div>
                        </div>
                        <div class="handler" :class="selectedItem == child && 'selected'" @click="handleItemClick(child)"></div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>

        <toolbar v-if="selectedItem" :data="selectedItem" :style="toolbarStyle" @close="handleToolbarClose"></toolbar>
    </div>
</template>

<script>
import WsCheckbox from '../../WsCheckbox'
import Toolbar from './Toolbar'
import bridge from './bridge';

export default {
    name: 'WsTplFormEdit',
    components: {WsCheckbox, Toolbar},
    props: {
        data: { // 服务直接返回的数据
            type: Object,
            default: function(){
                return [];
            }
        },
        toolbarStyle: {
            type: Object,
            default: function(){
                return {
                    position: 'fixed',
                    right: '0',
                    top: '0',
                    height: '100%',
                }
            }
        }
    },
    data(){
        return {
            privateData: undefined,
            activeName: '0',

            selectedItem: undefined,//当前选中的item
        }
    },
    watch: {
        data: {
            deep: true,
            handler(newVal, oldVal){
                this.privateData = bridge.toClient(newVal);
            }
        },
        privateData: {
            deep: true,
            handler(newVal, oldVal){
                this.$emit('change', bridge.toServer(newVal));
            }
        }
    },
    created(){
        this.privateData = bridge.toClient(this.data);
        console.log(this.privateData)

        // setInterval(()=>{
        //     this.isShowToolbar = !this.isShowToolbar;
        // }, 2000)
    },
    methods:{
        getPublicData(){
            return bridge.toServer(this.privateData);
        },

        handleItemClick(item){
            if(this.selectedItem == item){
                this.selectedItem = undefined;
            }else{
                this.selectedItem = item;
            }
        },
        handleToolbarClose(){
            this.selectedItem = false;
        },
        handleTabChange(){
            this.handleToolbarClose();
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../WsTheme/var.scss";

.ws-tpl-form-edit{
    // background: red;
    position: relative;
    padding-top: 18px;

    &--list{
    }
    &--item{
        display: flex;
        align-items: center;
        position: relative;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 4px;
        padding-bottom: 4px;

        & + & {
            margin-top: 6px;
        }

        &-tag{
            width: 30px;
        }
        &-label{
            font-size: 12px;
            width: 100px;
        }
        &-content{
            flex: 1;
            padding-left: 10px; 

            .file{
                font-size: 14px;
            }
        }

        .handler{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;

            &:hover{
                border: 1px dashed $color-primary;
            }

            &.selected{
                border: 1px solid $color-primary !important;
            }
        }
    }
}

</style>