<template>
  <!-- <view class="box"> -->
         <popup :open="open" :position="position" :percent="percent" :background="background" @close="openPopup = false">
    <view class="xzpinpai">
      <view class="top">
        <img src="../../static/img/caricon.png" alt class="caricon" />
        <text class="carname"></text>
      </view>
      <view class="chexi"></view>
      <view class="chexilist">智障</view>
      <view class="line"></view>
    </view>
         </popup>
  <!-- </view> -->
</template>

<script>
import popup from '../../components/xzcxlist/popup';
export default {
  name: "xzpinpai", 
    data(){
        return{
             openPopup: false,
        position: '',
        background: '#fff',
        openAdPopup: false,
        percent: 0,
        showText: false,
        change: false,
        loopTimer: false,
        sizeSort: 'asc'
        }
    },
      methods: {
      open: function(position) {
        this.position = position;
        this.openPopup = true;
      },
      touchend: function() {
        clearInterval(this.loopTimer)
      },
      changeBgColor: function(e) {
        clearInterval(this.loopTimer);
        this.loopTimer = setInterval(() => {
          let r = Math.floor(Math.random() * 256);
          let g = Math.floor(Math.random() * 256);
          let b = Math.floor(Math.random() * 256);
          let color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
          this.background = color
        }, 300)
      },
      changeSize: function() {
        clearInterval(this.loopTimer);
        this.loopTimer = setInterval(() => {
          let percents = [40, 45, 50, 55, 60, 65, 70, 75, 80];

          if (this.percent <= 40) this.sizeSort = 'asc';
          if (this.percent >= 80) this.sizeSort = 'desc';
          if (this.sizeSort == 'desc') percents = percents.reverse();

          for (let i = 0; i <= percents.length; i++) {
            if (this.sizeSort == 'desc') {
              if (this.percent > percents[i]) {
                this.percent = percents[i];
                break;
              }
            } else {
              if (this.percent < percents[i]) {
                this.percent = percents[i];
                break;
              }
            }
          }
        }, 200)
      },
      reset: function() {
        this.percent = 0;
        this.background = '#fff';
        this.showText = false;
      }
    },
  components:{
      popup
  }
};
</script>

<style lang="scss">
.box{
    width:750upx;
    height:100%;
    background-color: rgba(126, 126, 126, 0.8);
      position: absolute;
  top: 0;
}
.xzpinpai {
  width: 618upx;
  height: 100%;
  background-color: white;
  position: absolute;
  top: 0;
  right: 0;
  .top {
    height: 93upx;
    .caricon {
      width: 92upx;
      height: 53upx;
      margin: auto 0;
    }
    .carname {
      color: #1d1d1d;
      font-size: 28upx;
      line-height: 53upx;
    }
  }
  .chexi {
    height: 59upx;
    width: 100%;
    background-color: #f0efed;
    line-height: 59upx;
    text-indent: 30upx;
    color: #666666;
    font-size: 22upx;
  }
  .chexilist {
    height: 85upx;
    width: 100%;
  }
  .line {
    width: 590upx;
    height: 2upx;
    background-color: #d9d9d9;
    margin-left: 28upx;
  }
}
</style>