<template>
  <div v-if="$route.path === '/Home' || $route.path === '/Square'" class="rules">
    <div
      v-show="show"
      class="w-6 pl-1 py-1 bg-app-blue-3 text-center text-xs leading-5 rounded-l-lg fixed top-44 right-0 z-50"
      @click="show = false">投票规则</div>
    <div
      ref="ruleBox"
      class="rules-page w-full h-screen fixed top-0 left-0 z-50 bg-app-drak-1 text-white transform"
      :class="{ 'scale-0': show, 'scale-100': !show }">
      <div class="w-full flex p-3">
        <div class="w-1/12 transform rotate-180" @click="show = true">
          <app-icon customize type='icon-arrow-right-copy-copy'  size='24px'></app-icon>
        </div>
        <div class="w-10/12 text-center">
          投票规则
        </div>
      </div>
      <div class="rules-content mt-3 mx-4 px-4 py-3 leading-4 bg-app-dark-2 border-app-blue-3 border border-solid rounded-lg">
        <h4 class="text-sm text-center text-white">
          <span>投票人员详情</span>
        </h4>
        <p class="text-xs mb-2.5">所有在币钱包持有流通 BTY 的用户，并且参与挖矿的用户，均可参与投票。</p>
        <h4 class="text-sm text-center text-white">
          <span>投票分配</span>
        </h4>
        <ul class="text-xs">
          <li>1 BTY=1 票，每个用户票数上限 10 万票；</li>
          <li>每日凌晨根据用户在币钱包持有的流通BTY数量，分配选票；</li>
        </ul>
        <h4 class="text-sm text-center text-white">
          <span>发起、投票时间</span>
        </h4>
        <ul class="text-xs">
          <li>投票发起时，可以设置为一次性投票和每日投票，一次性投票是在投票开始后，一次性投完；每日投票是每日每天零点后，根据区块高度计算，区块高度达到后，启动新一轮的投票；</li>
          <li>可以提前约三天发起提案预热，设置提案高度，达到后，开始投票，提案周期按照设置的区块高度计算；</li>
        </ul>
        <h4 class="text-sm text-center text-white">
          <span>投票流程</span>
        </h4>
        <ul class="text-xs">
          <li>发起者在平台进入发起投票界面，输入相关信息后，成功发起投票，投票发起后不可撤销和更改，可以关闭投票，如果修改参数，需要另外发起新一轮的投票；</li>
          <li>用户可以提前三天发起提案，按照区块高度计算，达到高度后可以进行投票，当前只要在币钱包中参与挖矿，就可以参与投票；</li>
          <li>达到投票结束的区块高度时，该投票项目结束，用户可以查看投票详情；</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import AppIcon from '@/components/common/Icon.vue'
export default Vue.extend({
  components: {
    AppIcon
  },
  data() {
    return {
      show: true,
    }
  },
  props: {
    hidden: {
      type: Boolean
    }
  },
  watch: {
    hidden: {
      immediate: true,
      handler(n) {
        console.log(n)
        if (n === true) {
          this.show = true
        }
      }
    }
  }
})
</script>

<style scoped>
  .rules-page {
    background-image: url('../assets/home/banner.png');
    background-size: 100%;
    background-position-x: 50%;
    background-position-y: top;
    background-repeat: no-repeat;
    z-index: 100;
    transform-origin: 100% 25%;
    transition: 0.15s ease-in-out;
  }
  .rules-content {
    height: calc(100vh - 80px);
    overflow-x: hidden;
  }
  h4 {
    padding-top: 7px;
    margin-bottom: 12px;
  }
  h4 span {
    display: inline-block;
    position: relative;
  }
  h4 span::before, h4 span::after {
    display: block;
    content: '';
    width: 48px;
    height: 1px;
    position: absolute;
    top: 50%;
  }
  h4 span::before {
    background: linear-gradient(to right, #666EED, #0D003C);
    right: -60px;
  }
  h4 span::after {
    background: linear-gradient(to left, #666EED, #0D003C);
    left: -60px;
  }
  ul li {
    list-style: disc;
    margin-bottom: 10px;
    margin-left: 16px;
    line-height: 17px;
  }
</style>