<script>
export default {
  name: "mycard",
  data(){
    return {
     isshowbody:true
    }
  },
  props:{
    datatoshow:{
      type:Object,
      default(){
        return {
          header:"header",
          infolist:[{key:"key",value:"value"}]
        }
      }
    }
  }
}
</script>

<template>
  <BCardGroup deck class="Devinfo1"  size="sm">
    <BCard no-body>
      <BCardHeader header-tag="nav" style="position: relative">
        <b>{{ datatoshow.header }}</b>

        <button  @click="isshowbody=!isshowbody" style="position: absolute;right: 5px" class="mybutton" >
          <svg class="borow" v-show="isshowbody"  viewBox="0 0 20 20" style="background-color: transparent;box-shadow:0 0 0;vertical-align: middle;"><path fill="black" d="M10.103 12.778L16.81 6.08a.69.69 0 0 1 .99.012a.726.726 0 0 1-.012 1.012l-7.203 7.193a.69.69 0 0 1-.985-.006L2.205 6.72a.727.727 0 0 1 0-1.01a.69.69 0 0 1 .99 0z"/></svg>
          <svg  class="borow" v-show="!isshowbody"  viewBox="0 0 20 20" style="background-color: transparent"><path fill="black"  d="M10.103 7.222c3.447 3.468 5.744 5.764 6.89 6.887c.198.185.539.56 1.046.07c.339-.327.325-.685-.039-1.073l-7.444-7.43a.638.638 0 0 0-.455-.176a.702.702 0 0 0-.472.176l-7.453 7.635c-.241.388-.231.715.03.98c.26.265.577.28.95.043z"/></svg>
        </button>


      </BCardHeader>
      <BCardBody v-show="isshowbody" >
        <p class="card-text devinfolist" v-show="isshowbody">
          <b v-for="item in datatoshow.infolist" :key="item.key">{{item.key}}:{{item.value}}<br></b>
        </p>
      </BCardBody >
    </BCard>


  </BCardGroup>
</template>

<style scoped>
.Devinfo1{


  left: 0px;
  width: 100%;
  user-select: none;

}
.mybutton{
  height: 25px;
  width: 25px;
  padding: 0px;
  background-color: transparent;
  border: 0px;
}
.borow{
  height: 25px;
  width: 25px;
  padding: 0px;
  background-color: transparent;
  border: 0px;
  box-shadow:0 0 0;
}

</style>
