<template>
  <el-row :gutter="gutterComputed" :type="type" :justify="justify" :align="align"
          :style="{
          '--gutterPaddingXs':gutterPaddingXs/2+'px',
          '--gutterPaddingXsml':'-'+gutterPaddingXs/2+'px',
          '--gutterPaddingSm':gutterPaddingSm/2+'px',
          '--gutterPaddingSmml':'-'+gutterPaddingSm/2+'px',
          '--gutterPaddingMd':gutterPaddingMd/2+'px',
          '--gutterPaddingMdml':'-'+gutterPaddingMd/2+'px',
          '--gutterPaddingLg':gutterPaddingLg/2+'px',
          '--gutterPaddingLgml':'-'+gutterPaddingLg/2+'px',
          '--gutterPaddingXl':gutterPaddingXl/2+'px',
          '--gutterPaddingXlml':'-'+gutterPaddingXl/2+'px',
          '--gutterBottomXs':gutterBottomXs+'px',
          '--gutterBottomSm':gutterBottomSm+'px',
          '--gutterBottomMd':gutterBottomMd+'px',
          '--gutterBottomLg':gutterBottomLg+'px',
          '--gutterBottomXl':gutterBottomXl+'px'}">
    <slot></slot>
  </el-row>
</template>

<script>
    export default {
        name: "index",
        data(){
            return{
                mb:24,
                gutterPaddingXs:16,//动态修改的左右间隔 xs
                gutterPaddingSm:16,//动态修改的左右间隔 sm
                gutterPaddingMd:16,//动态修改的左右间隔 md
                gutterPaddingLg:16,//动态修改的左右间隔 lg
                gutterPaddingXl:16,//动态修改的左右间隔 xl
                gutterBottomXs:24,//动态修改的底部间距 xs
                gutterBottomSm:24,//动态修改的底部间距 sm
                gutterBottomMd:24,//动态修改的底部间距 md
                gutterBottomLg:24,//动态修改的底部间距 lg
                gutterBottomXl:24,//动态修改的底部间距 xl
            }
        },
        props:{
            gutter:{type:[Number,Array,Object],default:20},
            type:{
                type:String,
                default:''
            },
            justify:{
                type:String,
                default:''
            },
            align:{
                type:String,
                default:''
            }
        },
        computed:{
            gutterComputed(){
                if(this.gutter.length){
                    if(this.gutter[1]!=undefined&&typeof this.gutter[1]=='number'){
                        this.mb=this.gutter[1]
                        this.gutterBottomXs=this.gutter[1];
                        this.gutterBottomSm=this.gutter[1];
                        this.gutterBottomMd=this.gutter[1];
                        this.gutterBottomLg=this.gutter[1];
                        this.gutterBottomXl=this.gutter[1];
                    }else if(this.gutter[1]!=undefined&&typeof this.gutter[1]=='object'){
                        for(var item in this.gutter[1]){
                            switch (item){
                                case 'xs':
                                    this.gutterBottomXs=this.gutter[1][item];
                                    break;
                                case 'sm':
                                    this.gutterBottomSm=this.gutter[1][item];
                                    break;
                                case 'md':
                                    this.gutterBottomMd=this.gutter[1][item];
                                    break;
                                case 'lg':
                                    this.gutterBottomLg=this.gutter[1][item];
                                    break;
                                case 'xl':
                                    this.gutterBottomXl=this.gutter[1][item];
                                    break;
                            }
                        }
                    }

                    //行间隔
                    //如果没有指定媒体查询，统一一个距离
                    if(this.gutter[0]!=undefined&&typeof this.gutter[0]=='number'){
                        this.gutterPaddingXs=this.gutter[0];
                        this.gutterPaddingSm=this.gutter[0];
                        this.gutterPaddingMd=this.gutter[0];
                        this.gutterPaddingLg=this.gutter[0];
                        this.gutterPaddingXl=this.gutter[0];
                        return this.gutter[0]
                    }else if(this.gutter[0]!=undefined&&typeof this.gutter[0]=='object'){
                        for(var item in this.gutter[0]){
                            switch (item){
                                case 'xs':
                                    this.gutterPaddingXs=this.gutter[0][item];
                                    break;
                                case 'sm':
                                    this.gutterPaddingSm=this.gutter[0][item];
                                    break;
                                case 'md':
                                    this.gutterPaddingMd=this.gutter[0][item];
                                    break;
                                case 'lg':
                                    this.gutterPaddingLg=this.gutter[0][item];
                                    break;
                                case 'xl':
                                    this.gutterPaddingXl=this.gutter[0][item];
                                    break;
                            }
                        }
                        return 1500
                    }
                }else{
                    if(typeof this.gutter=='object'){
                        for(var item in this.gutter){
                            switch (item){
                                case 'xs':
                                    this.gutterPaddingXs=this.gutter[item];
                                    break;
                                case 'sm':
                                    this.gutterPaddingSm=this.gutter[item];
                                    break;
                                case 'md':
                                    this.gutterPaddingMd=this.gutter[item];
                                    break;
                                case 'lg':
                                    this.gutterPaddingLg=this.gutter[item];
                                    break;
                                case 'xl':
                                    this.gutterPaddingXl=this.gutter[item];
                                    break;
                            }
                        }
                        return 1500;//这里return啥都不重要了，样式会被覆盖掉
                    }else{
                        this.gutterPaddingXs=this.gutter;
                        this.gutterPaddingSm=this.gutter;
                        this.gutterPaddingMd=this.gutter;
                        this.gutterPaddingLg=this.gutter;
                        this.gutterPaddingXl=this.gutter;
                        return this.gutter
                    }
                }
            },
        }
    }
</script>

<style scoped lang="scss">
  .el-row {
    &:last-child {
      margin-bottom: 0!important;
    }
  }
  @media only screen and (min-width: 768px){
    .el-row{
      margin-bottom: var(--gutterBottomSm);
      margin-left:var(--gutterPaddingSmml)!important;
      margin-right:var(--gutterPaddingSmml)!important;
    }
    /deep/ .el-col{
      padding-left:var(--gutterPaddingSm)!important;
      padding-right:var(--gutterPaddingSm)!important;
    }
  }
  @media only screen and (min-width: 992px){
    .el-row{
      margin-bottom: var(--gutterBottomMd);
      margin-left:var(--gutterPaddingMdml)!important;
      margin-right:var(--gutterPaddingMdml)!important;
    }
    /deep/ .el-col{
      padding-left:var(--gutterPaddingMd)!important;
      padding-right:var(--gutterPaddingMd)!important;
    }
  }
  @media only screen and (min-width: 1200px){
    .el-row{
      margin-bottom: var(--gutterBottomLg);
      margin-left:var(--gutterPaddingLgml)!important;
      margin-right:var(--gutterPaddingLgml)!important;
    }
    /deep/ .el-col{
      padding-left:var(--gutterPaddingLg)!important;
      padding-right:var(--gutterPaddingLg)!important;
    }
  }
  @media only screen and (min-width: 1920px){
    .el-row{
      margin-bottom: var(--gutterBottomXl);
      margin-left:var(--gutterPaddingXlml)!important;
      margin-right:var(--gutterPaddingXlml)!important;
    }
    /deep/ .el-col{
      padding-left:var(--gutterPaddingXl)!important;
      padding-right:var(--gutterPaddingXl)!important;
    }
  }
  @media only screen and (max-width: 767px){
    .el-row{
      margin-bottom: var(--gutterBottomXs);
      margin-left:var(--gutterPaddingXsml)!important;
      margin-right:var(--gutterPaddingXsml)!important;
    }
    /deep/ .el-col{
      padding-left:var(--gutterPaddingXs)!important;
      padding-right:var(--gutterPaddingXs)!important;
    }
  }
</style>
