<template>
    <div v-bind="$attrs" class="p-card-con" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'"
  
      :style="{border: isCardBorder?'1px solid #ebeef5':''}">
      <div class="card-head" v-if="$slots.header" :style="{'border-bottom': isHeadBottomBorder?'1px solid #ebeef5':''}">
        <slot name="header"></slot>
      </div>
      <div :class="['card-body',bodyClass]" :style="bodyStyle">
        <slot></slot>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'PPageCard',
    props: {
      // 表示是否显示外围边框
      isCardBorder:{type:Boolean,default:()=>true},
      // 头部下的边框
      isHeadBottomBorder:{type:Boolean,default:()=>true},
      // card-body 的样式 class
      bodyClass:{type:String,default:()=>''},
       // card-body 的样式 style
      bodyStyle: {type:Object, default:()=>{}},
      // 表示是否显示阴影  always 表示一直显示  hover 表示鼠标移动上面时显示  never 表示不显示
      shadow: {
        type: String,  //  always  hover  never
        default:()=>'never'
      },
      showHelp:{type:Boolean, default: () => { return false }}
    },
    mounted(){
      if(this.$isShowHelp == true &&this.showHelp === true){
        console.log(`
        组件名称：
            PPageCard
        使用方法：
            <p-PageCard >
              <template slot="header" >
              </template>
              // 默认是 body 的插槽
              <template>
              </template>
            </p-PageCard>
        props参数说明：
            props: {
              // 此参数可选 表示是否显示外围边框
              isCardBorder:{type:Boolean,default:()=>true},
              // 此参数可选 头部下的边框
              isHeadBottomBorder:{type:Boolean,default:()=>true},
              // 此参数可选 card-body 的样式 class
              bodyClass:{type:String,default:()=>''},
              // 此参数可选 card-body 的样式 style
              bodyStyle: {type:Object, default:()=>{}},
              // 此参数可选 表示是否显示阴影  always 表示一直显示  hover 表示鼠标移动上面时显示  never 表示不显示
              shadow: {
                type: String,  //  always  hover  never
                default:()=>'never'
              }
            },
        `);
      }
    },
  }
  </script>
  
  <style lang="less">
  .p-card-con {
    width: 100%;
    // height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    border-radius: 4px;
    // border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: .3s;
  
    .card-head {
      width: 100%;
      padding: 18px 20px;
      // border-bottom: 1px solid #ebeef5;
      box-sizing: border-box;
    }
  
    .card-body {
      padding: 20px;
      flex: 1;
    }
  }
  
  // .card-con,
  // .card-con:focus,
  // .card-con:hover {
  //   box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
  // }
  
  .p-card-con.is-always-shadow,
  .p-card-con.is-hover-shadow:focus,
  .p-card-con.is-hover-shadow:hover {
    box-shadow:  1px 3px 5px #0000001a;
  }
  </style>
  