<template>
  <div class="ipub-empty"
       :style="`flex-direction: ${type}`">
    <div class="ipub-empty-icon">
      <ipub-icon :type="icon" />
      <svg xmlns="http://www.w3.org/2000/svg"
           width="209"
           height="209"
           viewBox="0 0 209 209">
        <g id="Group_3570"
           data-name="Group 3570"
           transform="translate(-1195 -2392)">
          <circle id="Ellipse_110"
                  data-name="Ellipse 110"
                  cx="104.5"
                  cy="104.5"
                  r="104.5"
                  transform="translate(1195 2392)"
                  fill="#e9eef0" />
          <g id="Group_3570-2"
             data-name="Group 3570"
             transform="translate(1310.35 2833.525)">
            <rect id="Rectangle_485"
                  data-name="Rectangle 485"
                  width="115.884"
                  height="95.707"
                  rx="6.814"
                  transform="translate(-68.336 -379.055)"
                  fill="#e9eef0"
                  style="mix-blend-mode: multiply;isolation: isolate" />
            <path id="Path_1259"
                  data-name="Path 1259"
                  d="M-24.9-341.312l-3.5-7.366L-68.35-348.7l.014,14.348v-8.59h36.2l3.5,7.366H47.437v72.552h.131v-78.309Z"
                  transform="translate(0 -23.075)"
                  fill="#fff" />
            <path id="Path_1256"
                  data-name="Path 1256"
                  d="M-48.3-366.13v-16.551l96.424-3.844v27.763H-48.3Z"
                  transform="translate(-12.232 -5)"
                  fill="#fff" />
            <path id="Path_1257"
                  data-name="Path 1257"
                  d="M-24.9-341.312l-3.5-7.366L-68.35-348.7l.014,14.348v-8.59h36.2l3.5,7.366H47.437v72.552h.131v-78.309Z"
                  transform="translate(0 -23.075)"
                  fill="#e9eef0"
                  opacity="0.765"
                  style="mix-blend-mode: multiply;isolation: isolate" />
            <path id="Path_1258"
                  data-name="Path 1258"
                  d="M-32.114-333.936h-36.2v80.012a2.657,2.657,0,0,0,2.657,2.657H44.913a2.657,2.657,0,0,0,2.546-1.9v-73.4H-28.612Z"
                  transform="translate(-0.022 -32.082)"
                  fill="#b4c1c6" />
          </g>
        </g>
      </svg>
    </div>
    <div>
      <slot>
        <div class="default-color ipub-h1 tc">{{title}}</div>
        <div style="margin-top:-4px"
             class="mar-b-40 default-color ipub-p1 tc">{{text}}</div>
      </slot>
    </div>
  </div>
</template>

<script>
import IpubIcon from '../../icon'
export default {
  name: 'IpubEmpty',
  components: {
    IpubIcon
  },
  props: {
    type: {
      type: String,
      default: 'column',
      validator (val) {
        return ['row', 'column'].indexOf(val) !== -1
      }
    },
    icon: {
      type: String,
      default: 'iconfolder'
    },
    title: {
      type: String,
      default: 'No Data'
    },
    text: {
      type: String,
      default: 'There is no data available yet.'
    },
  },
}
</script>

<style lang="scss" scoped>
.ipub-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  &-icon {
    position: relative;
    font-size: 48px;
    height: 240px;
    width: 240px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    > svg {
      z-index: 1;
      position: absolute;
      width: 200px;
      height: 200px;
      left: 20px;
      top: 20px;
      bottom: 20px;
      right: 20px;
    }
    .ipub-icon {
      z-index: 2;
      color: #fff;
      padding-top: 30px;
    }
  }
}
</style>
