<template>
    <div class="toolbar">
        <div class="view view-header">
            <ws-button class="close-btn" type="text" icon="el-icon-close" @click="close"></ws-button>
            <h1>{{typeName}}</h1>
        </div>

        <div class="view view-title">
            <p>字段</p>
            <ws-input :value="data.name" :disabled="true" maxlength="7"></ws-input>
        </div>

        <div class="view view-title">
            <p>标题</p>
            <ws-input maxlength="7" v-model="data.alias" @change="onTitleChange" :placeholder="data.title" ></ws-input>
        </div>

        <div class="view view-not-null">
            <p>数据校验</p>
            <ws-checkbox v-model="data.notNull" @change="onNotNullChange">必填</ws-checkbox>
        </div>

        <div class="view view-export">
            <p>导出</p>
            <ws-checkbox v-model="data.export" @change="onExportChange">参与导出</ws-checkbox>
            <label class="tip">(如不勾选，导出时不显示该选项)</label>
        </div>

        <div class="view view-dev">
            <p>调试数据</p>
            <pre>{{data}}</pre>
        </div>
    </div>
</template>

<script>
const TypeNames = {
    input: '输入框',
    select: '选择框',
    file: '附件',
    date: '日期',
    datetime: '日期和时间',
    daterange: '日期范围',
    datetimerange: '日期和时间范围',
    textarea: '多行输入框'
}

export default {
    name: 'Toolbar',
    props: {
        data: {
            type: Object,
            default: undefined
        }
    },
    computed: {
        typeName(){
            return TypeNames[this.data && this.data.type] || '[未识别]'
        }
    },
    methods: {
        onTitleChange(val){
            console.log(val);
        },
        onNotNullChange(val){
            console.log(val);
        },
        onExportChange(val){
            console.log(val)
        },

        close(){
            this.$emit('close');
        }
    }
}
</script>

<style lang="scss" scoped>
.toolbar{
    background: #fff;
    width: 340px;
    box-sizing: border-box;
    padding: 18px;
    font-size: 12px;
    border: 1px solid #eee;

    .view-header{
        .close-btn{
            float: right;
            padding: 0;
            font-size: 18px;
        }
        h1{
            padding-top: 10px;
            margin: 0;
        }
    }
}
</style>