<template>
    <Collapse v-model="settingModel" class="module-property">
        <Panel name="borderSetting">
            边框设置
            <div slot="content">
                <div class="property-item">
                    <label>边框</label>
                    <!-- <input type="text" v-model = "homeProperties.borderWidth"> -->
                    <div class="property-item-content">
                        <Select v-model="contentSetting.BorderWidth" style="width:100px">
                            <Option v-for="item in borderWidth" :value="item.value" :key="item.value">{{item.label}}</Option>
                        </Select>
                    </div>
                </div>
                <div class="property-item">
                    <label>边框颜色</label>
                    <div class="property-item-content">
                        <ColorPicker v-model="contentSetting.BorderColor" :colors="colors" alpha editable/>
                    	<!-- <Input type = "text" v-model = "contentSetting.BorderColor" style="width:130px;"/> -->
                    </div>
                </div>

                <div class="property-item">
                    <label>模糊距离</label>
                    <div class="property-item-content">
                        <!-- <Input type = "text" v-model = "contentSetting.ShadowBlur" style="width:130px;"/> -->
                        <InputNumber v-model="contentSetting.ShadowBlur"
                            :min="0"
                            :formatter="value => `${value}px`"
                            :parser="value => value.replace('px', '')"></InputNumber>
                    </div>
                </div>
                <div class="property-item">
                    <label>阴影颜色</label>
                    <div class="property-item-content">
                        <ColorPicker v-model="contentSetting.ShadowColor" :colors="colors" alpha editable/>
                        <!-- <Input type = "text" v-model = "contentSetting.ShadowColor" style="width:130px;"/> -->
                    </div>
                </div>
            </div>
        </Panel>
        <Panel name="areaSetting">
            块区域设置
            <div slot="content">
                <div class="property-item">
                    <label>块背景色</label>
                    <div class="property-item-content">
                        <ColorPicker v-model="contentSetting.ContentBg" :colors="colors" alpha editable/>
                        <!-- <Input type = "text" v-model = "contentSetting.ContentBg" style="width:130px;"/> -->
                    </div>
                </div>

                <!-- <div class="property-item">
                    <label>块透明度</label>
                    <div class="property-item-content">
                        <Input type = "text" v-model = "contentSetting.Opacity" style="width:130px;"/>
                    </div>
                </div> -->

                <div class="property-item">
                    <label>标题字体</label>
                    <div class="property-item-content">
                        <ColorPicker v-model="contentSetting.TitleColor" :colors="colors" alpha editable/>
                        <!-- <Input type = "text" v-model = "contentSetting.TitleColor" style="width:130px;"/> -->
                        <!-- <Input type = "text" v-model = "contentSetting.TitleFontSize" style="width:130px;"/> -->
                        <InputNumber v-model="contentSetting.TitleFontSize"
                            :min="0"
                            :formatter="value => `${value}px`"
                            :parser="value => value.replace('px', '')"></InputNumber>
                    </div>
                </div>
                <div class="property-item">
                    <label>主要字体</label>
                    <div class="property-item-content">
                        <ColorPicker v-model="contentSetting.PrimColor" :colors="colors" alpha editable/>                       
                        <!-- <Input type = "text" v-model = "contentSetting.PrimColor" style="width:130px;"/> -->
                        <!-- <Input type = "text" v-model = "contentSetting.PrimFontSize" style="width:130px;"/> -->
                        <InputNumber v-model="contentSetting.PrimFontSize"
                            :min="0"
                            :formatter="value => `${value}px`"
                            :parser="value => value.replace('px', '')"></InputNumber>
                    </div>
                </div>
                <div class="property-item">
                    <label>描述字体</label>
                    <div class="property-item-content">
                        <ColorPicker v-model="contentSetting.DesColor" :colors="colors" alpha editable/>
                        <!-- <Input type = "text" v-model = "contentSetting.DesColor" style="width:130px;"/> -->
                        <!-- <Input type = "text" v-model = "contentSetting.DesFontSize" style="width:130px;"/> -->
                        <InputNumber v-model="contentSetting.DesFontSize"
                            :min="0"
                            :formatter="value => `${value}px`"
                            :parser="value => value.replace('px', '')"></InputNumber>
                    </div>
                </div>
                <div class="property-item">
                    <label>标题区背景色</label>
                    <div class="property-item-content">
                        <ColorPicker v-model="contentSetting.TitleBg" :colors="colors" alpha editable/>
                        <!-- <Input type = "text" v-model = "contentSetting.TitleBg" style="width:130px;"/> -->
                    </div>
                </div>
                <div class="property-item">
                    <label>标题区边框</label>
                    <div class="property-item-content">
                        <!-- <Input type = "text" v-model = "contentSetting.TitleBorderWidth" style="width:130px;"/> -->
                        <ColorPicker v-model="contentSetting.TitleBorderColor" :colors="colors" alpha editable/>
                        <Select v-model="contentSetting.TitleBorderWidth" style="width:70px">
                            <Option v-for="item in borderWidth" :value="item.value" :key="item.value">{{item.label}}</Option>
                        </Select>
                        <!-- <Input type = "text" v-model = "contentSetting.TitleBorderColor" style="width:130px;"/> -->
                    </div>
                </div>

                <div class="property-item">
                    <label >标题位置</label>
                    <div class="property-item-content">
                        <Select v-model="contentSetting.TitleAlign" style="width:70px">
                            <Option v-for="item in titleAlign" :value="item.value" :key="item.value">{{item.label}}</Option>
                        </Select>            
                    </div>
                </div>
            </div>
        </Panel>
    </Collapse>
</template>
<script>
    import { mapGetters, mapMutations } from "vuex";
    import defaultSetting from './defaultSetting';

    export default {
        data(){
            return {
                settingModel:[]
            }
        },
        computed: {
            contentSetting (){
                var id = this.itemId;
                return this.$store.getters.getContentSettingById(id);
            },

            colors(){
                return defaultSetting.defaultColors;
            },

            borderWidth(){
                return defaultSetting.borderWidth;
            },

            titleAlign(){
                return defaultSetting.titleAlign;
            }
        },
        props:{
            itemId:{
                type: String
            }
        },

        watch: {
            'contentSetting.BorderWidth': function(val, oldVal){
                var id = this.itemId;
                this.updateBorderWidth({id: id, val: val});
            },

            'contentSetting.BorderColor': function(val, oldVal){
                var id = this.itemId;
                this.updateBorderColor({id: id, val: val});
            },

            'contentSetting.ContentBg': function(val){
                var id = this.itemId;
                this.updateNodeBgColor({id: id, val: val});
            },

            'contentSetting.Opacity': function(val){
                var id = this.itemId;
                this.updateContentOpacity({id: id, val: val});
            },

            'contentSetting.ShadowBlur': function(val, oldVal){
                var id = this.itemId;
                //console.log(val);
                this.updateShadowBlur({id: id, val: val});
            },

            'contentSetting.ShadowColor': function(val, oldVal){
                var id = this.itemId;
                //console.log(val);
                this.updateShadowColor({id: id, val: val});
            },

            'contentSetting.TitleColor': function(val, oldVal){
                var id = this.itemId;
                this.updateTitleColor({id: id, val: val});
            },

            'contentSetting.TitleFontSize': function(val, oldVal){
                var id = this.itemId;
                this.updateTitleFontSize({id: id, val: val});
            },

            'contentSetting.PrimColor': function(val, oldVal){
                var id = this.itemId;
                this.updatePrimColor({id: id, val: val});
            },

            'contentSetting.PrimFontSize': function(val, oldVal){
                var id = this.itemId;
                this.updatePrimFontSize({id: id, val: val});
            },

            'contentSetting.DesColor': function(val, oldVal){
                var id = this.itemId;
                this.updateDesColor({id: id, val: val});
            },

            'contentSetting.DesFontSize': function(val, oldVal){
                var id = this.itemId;
                this.updateDesFontSize({id: id, val: val});
            },

            'contentSetting.TitleBg': function(val, oldVal){
                var id = this.itemId;
                this.updateTitleBg({id: id, val: val});
            },

            'contentSetting.TitleBorderWidth': function(val, oldVal){
                var id = this.itemId;
                this.updateTitleBorderWidth({id: id, val: val});
            },

            'contentSetting.TitleBorderColor': function(val, oldVal){
                var id = this.itemId;
                this.updateTitleBorderColor({id: id, val: val});
            },

            'contentSetting.TitleAlign': function(val, oldVal){
                var id = this.itemId;
                this.updateTitleAlign({id: id, val: val});
            }
        },
        methods:{
            ...mapMutations([
                'updateBorderWidth',
                'updateBorderColor',
                'updateNodeBgColor',
                'updateContentOpacity',
                'updateShadowBlur',
                'updateShadowColor',
                'updateTitleColor',
                'updateTitleFontSize',
                'updatePrimColor',
                'updatePrimFontSize',
                'updateDesColor',
                'updateDesFontSize',
                'updateTitleBg',
                'updateTitleBorderWidth',
                'updateTitleBorderColor',
                'updateTitleAlign'
            ])
        }
    };
</script>

<style lang="less" scoped>
    .ivu-color-picker-confirm-color-editable{
        width: 135px;
    }
    .property-item > .property-item-content{
        display: flex !important;
        > div:first-child{
            margin-right: 5px;
        }
    }

</style>