<template>
  <div class="py-indexcard">
    <div class="py-indexcard_bg">
      <svg width="100%" height="100%" viewBox="0,0,50,50">
        <rect v-if="bg=='rect'" x="0" y="0" width="50" height="50" :fill="bgcolor"></rect>
        <circle v-else-if="bg=='circle'" cx="25" cy="25" r="25" :fill="bgcolor"></circle>
        <polygon
          v-else-if="bg=='hexgon'"
          points="25,0 46.65,12.5 46.65,40.5 25,50 3.35,40.5 3.35,12.5"
          style="fill:#008EFF;stroke:purple;stroke-width:1"
        ></polygon>
        <polygon
          v-else-if="bg=='hexgon2'"
          points="25,0 250,190 160,210 "
          style="fill:#008EFF;stroke:purple;stroke-width:1"
        ></polygon>
      </svg>
    </div>
    <span>
      <slot></slot>
    </span>
  </div>
</template>

<script>
export default {
  name: "PyIndexcard",
  props: {
    bg: {
      type: String,
      default: "rect"
    },
    bgcolor: {
      type: String,
      default: "#008EFF"
    }
  }
};
</script>

<style scoped>
.py-indexcard_bg {
  width: 100%;
  height: 100%;
}
</style>