<!--
 * @Description: 上方标题，下方左中右布局
 * @Author: 王晓颖
 * @Date: 2021-07-13 14:46:17
 -->
<template>
  <div class="screenContainer">
    <vuescroll>
      <dv-full-screen-container class="bg">
        <slot/>
        <!--标题-->
        <div class="screen-title" :style="{'height':titleHeight}">
          <slot name="title"></slot>
        </div>
        <!--加载中-->
        <div v-if="loading" class="loading">
          <a-spin size="large" tip="Loading..."/>
        </div>
        <!--内容-->
        <div v-else class="screen-content">
          <a-row v-if="scale&&scale.length>0" class="content-row">
            <a-col v-if="scale[0]" :span="scale[0]" class="content-col">
              <div class="content-left" :style="{'padding':padding}">
                <slot name="left"></slot>
              </div>
            </a-col>
            <a-col v-if="scale[1]" :span="scale[1]" class="content-col">
              <div class="content-middle" :style="{'padding':padding}" >
                <slot name="middle"></slot>
              </div>
            </a-col>
            <a-col v-if="scale[2]" :span="scale[2]" class="content-col">
              <div class="content-right" :style="{'padding':padding}">
                <slot name="right"/>
              </div>
            </a-col>
          </a-row>
        </div>
      </dv-full-screen-container>
    </vuescroll>

  </div>
</template>

<script>
  export default {
    name: "commonLayout1",
    props:{
      titleHeight:{
        type: String,
        default: '1rem'
      }, // 标题区高度
      scale: {
        type: Array,
        default:()=>{
          return [6,12,6]
        },
        validator: (val)=>{
          let sum = 0
          val.forEach(val=>{
            if (typeof val === 'number'){ // 校验元素类型
              sum+=val
            }else{
              return false
            }
          })
          if(sum!==24){ // 校验和
            return false
          }
          return true
        }
      },// 下方内容区比例，和必须为24
      padding: {
        type: String,
        default: '0.1rem'
      },
      loading:{
        type: Boolean,
        default: false
      } // 加载状态
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.screenContainer{
  width:100%;
  height:100%;
  .bg{
    display: flex;
    flex-direction: column;
  }
  .screen-title{
    width:100%;
  }
  .loading{
    position: absolute;
    top:40%;
    left:50%;
    transform: translate(-50%,-50%);
  }
  .screen-content{
    flex: 1;
    width: 100%;
    /*background-color: #f0f0f0;*/
    .content-row{
      height: 100%;
    }
    .content-col {
      height:100%;
    }
    .content-left{
        padding: 0.1rem;
      height: 100%;
      /*background-color: #4f98ee;*/
    }
    .content-middle{
      padding: 0.1rem;
      height: 100%;
      /*background-color: #33cea0;*/
    }
    .content-right{
      padding: 0.1rem;
      height: 100%;
      /*background-color: #4f98ee;*/
    }
  }
}
</style>

<style>
  #dv-full-screen-container{

  }
</style>