<template>
  <footer class="view-footer relative">
    <svg
        viewBox="0 0 1400 93"
        xml:space="preserve"
        class="footer-background absolute"
    >
      <defs>

        <filter filterUnits="userSpaceOnUse" id="shadow" x="0px" y="-20px" width="1400.5px" height="73px"  >
             <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
        </filter>

        <linearGradient id="footer-background" gradientUnits="userSpaceOnUse" x1="-251.3244" y1="576.2474" x2="-251.3244" y2="577.2474" gradientTransform="matrix(1401 0 0 -73.0104 352806 42145.0508)">
              <stop  offset="0" style="stop-color:#2D274E"/>
          <stop  offset="1" style="stop-color:#3C255E"/>
        </linearGradient>
      </defs>


      <g transform='translate(0,20)'>
        <g filter="url(#shadow)">
        <path fill-rule="evenodd" fill="rgba(0,0,0,0.35)" d="M5.5,0.2H531c0,0,47.9-2.8,61.9,13c17.6,19.8,22.6,29.9,82.9,29.9c60.4,0,724.7,0,724.7,0V73H0.5
      V0.2H5.5z"/>
      </g>


        <path fill="url(#footer-background)" d="M5.5,0.2H531c0,0,47.9-2.8,61.9,13c17.6,19.8,22.6,29.9,82.9,29.9c60.4,0,724.7,0,724.7,0V73H0.5
      V0.2H5.5z"/>
      </g>

    </svg>

    <section class="absolute footer-control rowACenter between">
      <aside
        v-for="(item,index) in controlData"
        :key="'view-footer-control-'+index"
        class="center cursor-pointer"
        @click="trigger(item,index)"
      >
        <img :src="item.icon" class="control-icon" />
        <div class="control-label">{{item.label}}</div>
      </aside>
    </section>

  </footer>


</template>

<script>
import controlData from '../data/control';
import mixins from '../mixins';
export default {
  name: "view-footer",
  data(){
    return{
      controlData
    }
  },
  mixins
}
</script>

<style scoped lang="scss" src="../style.scss"></style>