<template>
  <div class="buttons">
    <div :style="getRit()" class="back-to">
      <a title="打印" href="javascript:;" @click="click" class="back-top" :style="{float: left_right}">
        <svg t="1659435525353" class="icon" :fill="color" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             p-id="3561">
          <path
              d="M873.9328 533.333333 824.1664 533.333333C805.3248 533.333333 790.033067 518.075733 790.033067 499.2 790.033067 480.324267 805.3248 465.066667 824.1664 465.066667L873.9328 465.066667C911.581867 465.066667 942.199467 434.449067 942.199467 396.8L942.199467 136.533333C942.199467 98.884267 911.581867 68.266667 873.9328 68.266667L136.516267 68.266667C98.8672 68.266667 68.2496 98.884267 68.2496 136.533333L68.2496 396.8C68.2496 434.449067 98.8672 465.066667 136.516267 465.066667L188.330667 465.066667C207.172267 465.066667 222.464 480.324267 222.464 499.2 222.464 518.075733 207.172267 533.333333 188.330667 533.333333L136.516267 533.333333C61.252267 533.333333-0.017067 472.098133-0.017067 396.8L-0.017067 136.533333C-0.017067 61.2352 61.252267 0 136.516267 0L873.9328 0C949.230933 0 1010.466133 61.2352 1010.466133 136.533333L1010.466133 396.8C1010.466133 472.098133 949.230933 533.333333 873.9328 533.333333"
              p-id="3562"></path>
          <path
              d="M783.117653 1010.199893 714.509653 1010.199893C695.668053 1010.199893 680.37632 994.942293 680.37632 976.06656 680.37632 957.190827 695.668053 941.933227 714.509653 941.933227L783.117653 941.933227C786.940587 941.933227 790.04672 938.827093 790.04672 935.00416L790.04672 288.416427 222.477653 288.416427 222.477653 935.00416C222.477653 938.827093 225.583787 941.933227 229.372587 941.933227L533.978453 941.933227C552.820053 941.933227 568.111787 957.190827 568.111787 976.06656 568.111787 994.942293 552.820053 1010.199893 533.978453 1010.199893L229.372587 1010.199893C187.93472 1010.199893 154.210987 976.47616 154.210987 935.00416L154.210987 254.283093C154.210987 235.40736 169.468587 220.14976 188.34432 220.14976L824.180053 220.14976C843.021653 220.14976 858.313387 235.40736 858.313387 254.283093L858.313387 935.00416C858.313387 976.47616 824.589653 1010.199893 783.117653 1010.199893"
              p-id="3563"></path>
          <path
              d="M866.484907 288.39936 143.98464 288.39936C125.14304 288.39936 109.851307 273.14176 109.851307 254.266027 109.851307 235.390293 125.14304 220.132693 143.98464 220.132693L866.484907 220.132693C885.326507 220.132693 900.61824 235.390293 900.61824 254.266027 900.61824 273.14176 885.326507 288.39936 866.484907 288.39936"
              p-id="3564"></path>
          <path
              d="M559.284907 463.366827 343.118507 463.366827C324.242773 463.366827 308.985173 448.109227 308.985173 429.233493 308.985173 410.35776 324.242773 395.10016 343.118507 395.10016L559.284907 395.10016C578.126507 395.10016 593.41824 410.35776 593.41824 429.233493 593.41824 448.109227 578.126507 463.366827 559.284907 463.366827"
              p-id="3565"></path>
          <path
              d="M667.368107 609.56672 343.10144 609.56672C324.25984 609.56672 308.968107 594.30912 308.968107 575.433387 308.968107 556.557653 324.25984 541.300053 343.10144 541.300053L667.368107 541.300053C686.209707 541.300053 701.50144 556.557653 701.50144 575.433387 701.50144 594.30912 686.209707 609.56672 667.368107 609.56672"
              p-id="3566"></path>
          <path
              d="M667.368107 755.766613 343.10144 755.766613C324.25984 755.766613 308.968107 740.509013 308.968107 721.63328 308.968107 702.757547 324.25984 687.499947 343.10144 687.499947L667.368107 687.499947C686.209707 687.499947 701.50144 702.757547 701.50144 721.63328 701.50144 740.509013 686.209707 755.766613 667.368107 755.766613"
              p-id="3567"></path>
        </svg>
      </a>
    </div>
  </div>
</template>
<script>
export default {
  name: 'y-floating-button',
  props: {
    position: {
      type: Array,
      required: false,
      default: () =>['top', 'right']
    },
    color: {
      type: String,
      default: '#676363'
    }
  },
  watch: {
    position: {
      deep: true,
      immediate: true,
      handler (position) {
        if (typeof position == 'object') {
          let up_down = position[0],
              left_right = position[1]
          console.log(up_down, left_right)
          this.left_right = left_right
        }
      }
    }
  },
  data () {
    return {
      left_right: 'right',
      up_down: 'top'
    }
  },
  methods: {
    click () {
      this.$emit('click')
    },
    getRit () {
      if (this.left_right == 'right') {
        return {
          right: '10px'
        }
      } else {
        return {
          left: '10px'
        }
      }
    }
  }
}
</script>
<style scoped>
.buttons {
  position: absolute !important;
  right: 30px;
  top: 0px;
}

.buttons .back-to {
  z-index: 999;
  margin-top: 2px;
  padding: 5px;
  height: 20px;
  width: 20px;
  border: 1px #ccc solid;
  background-color: white;
}

.buttons .back-to .back-top {
  height: 20px;
  width: 20px;
}

.buttons .back-to .back-top:hover {
  /*background-position: -50px 0*/
}
</style>
