<template>
  <page-meta :page-style="themeColor"></page-meta>
  <view class="my-shop">
    <!--顶部个人信息-->
    <view class="top">
      <image class="top-image" :src="$util.img('public/static/img/futures/my_shop_top_bg.png')" mode="widthFix"></image>
      <view class="top-content">
        <image class="avatar" :src="$util.img(info.headimg)" mode="widthFix"></image>
        <view class="nickname">{{ info.nickname || info.username }}的小店</view>
        <view class="link-button" @click="$util.redirectTo('/pages_tool/member/info')">
          点击完善信息<i class="icondiy icon-system-arrow-right-s-line"></i>
        </view>
      </view>
    </view>
    <!--惩罚信息-->
    <view class="punish">
      <view class="punish-block">
        <view class="punish-title">违规次数</view>
        <view class="punish-num">{{ user.violation_num || 0 }}</view>
      </view>
      <view class="punish-block" v-if="h > 0 || i > 0 || s > 0">
        <view class="punish-title">惩罚倒计时</view>
        <view class="punish-num">{{ h }}时{{ i }}分{{ s }}秒</view>
      </view>
      <view class="punish-block">
        <view class="punish-title">违规总次数</view>
        <view class="punish-num">{{ user.total_violation_num || 0 }}</view>
      </view>
    </view>
    <!--菜单列表-->
    <view class="menu-list">
      <view class="title">小店订单</view>
      <view class="menu-list-content">
        <view class="menu-block" v-for="(item,index) in menu" :key="index" @click="$util.redirectTo('/pages_rush/futures/order',{ status: item.status })">
          <view class="left" :style="{ background: item.background}">
            <image class="top-image" :src="$util.img(item.image)" mode="widthFix"></image>
          </view>
          <view class="right">
            <view class="block-title">{{ item.title }}</view>
            <view class="block-desc">{{ item.desc }}</view>
          </view>
          <view class="block-icon">
            <i class="icondiy icon-system-arrow-right-s-line"></i>
          </view>
        </view>
      </view>
    </view>
    <!--登录弹框-->
    <ns-login ref="login"></ns-login>
    <!--加载动画-->
    <loading-cover ref="loadingCover"></loading-cover>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 菜单列表 （all:全部，stock:库存，release:已上架，sold:已售卖）
      menu: [
        {
          image: 'public/static/img/futures/my_shop_order_sell.png',
          title: '小店销售订单',
          desc: '显示当前全部正在出售中的订单',
          background: '#eaebff',
          status: 'release',
        },{
          image: 'public/static/img/futures/my_shop_order_buy.png',
          title: '小店采购订单',
          desc: '显示当前全部已采购的订单',
          background: '#fbebeb',
          status: 'all',
        },{
          image: 'public/static/img/futures/my_shop_order_stock.png',
          title: '小店库存订单',
          desc: '显示当前全部正在库存中的订单',
          background: '#e2fdf8',
          status: 'stock',
        }
      ],
      // 用户信息
      info: {},
      user: {},
      // 倒计时
      end_time: 0,// 结束时间  时间戳
      diff_time: 0,
      h: '00',
      i: '00',
      s: '00',
      interval: '',
    };
  },
  components: {},
  mixins: [],
  onLoad(option) {},
  onShow() {},
  onReady(){
    // 判断是否登录
    if (!uni.getStorageSync('token')) this.$refs.login.open('/pages_rush/futures/seckill');
    this.getMemberInfo();
    this.getPunish();
  },
  methods: {
    // 获取个人信息
    getMemberInfo() {
      this.$api.sendRequest({
        url: '/api/member/info',
        success: res => {
          if(parseInt(res.code) === 0){
            this.info = res.data;
          }
        },
        fail: res => {
          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        }
      });
    },
    // 惩罚信息
    getPunish() {
      this.$api.sendRequest({
        url: '/futures/api/user/info',
        success: res => {
          if(parseInt(res.code) === 0){
            this.user = res.data;
            this.end_time = this.user.punish_time || 0;
            // 开启倒计时
            this.countDown();

            if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
          }
        },
        fail: res => {}
      });
    },
    // 惩罚时间倒计时
    countDown(){
      this.interval = setInterval(() => {
        // 获取距离结束时间的毫秒数
        let nowTime = Math.ceil((new Date()).getTime() / 1000);
        this.diff_time = this.end_time - nowTime;
        // 计算时间
        let result = this.$util.countDown(this.diff_time);
        this.h = (parseInt(result.d) * 24) + parseInt(result.h);
        this.i = parseInt(result.i);
        this.s = parseInt(result.s);
        if(parseInt(this.h) <= 0 && parseInt(this.i) <= 0 && parseInt(this.s) <= 0){
          clearInterval(this.interval);
        }
      }, 1000)
    },

  },
  onBackPress(options) {
    if (options.from === 'navigateBack') return false;
    this.$util.redirectTo('/pages/member/index');
    return true;
  }
};
</script>

<style lang="scss" scoped>
.my-shop{
  background: #f5f6fa;
  min-height: 100vh;

  .top{
    width: 100%;
    position: relative;
    display: inline-flex;
    border-bottom-left-radius: 35rpx;
    border-bottom-right-radius: 35rpx;
    overflow: hidden;

    .top-image{
      width: 100%;
    }
    .top-content{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: inline-flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      .avatar{
        --avatar-size--: 120rpx;
        width: var(--avatar-size--) !important;
        height: var(--avatar-size--) !important;
        border-radius: 50%;
        border: 6rpx solid #fef6f5;
      }
      .nickname{
        height: 60rpx;
        line-height: 60rpx;
        font-size: 30rpx;
        color: #ffe0e1;
      }
      .link-button{
        height: 60rpx;
        line-height: 60rpx;
        font-size: 26rpx;
        color: #a7484c;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        flex-wrap: nowrap;
        i{
          font-size: 36rpx;
          color: #a7484c;
        }
      }
    }
  }
  .menu-list{
    width: calc(100% - (30rpx * 2));
    display: inline-flex;
    flex-direction: column;
    padding: 30rpx;

    .title{
      height: 60rpx;
      line-height: 60rpx;
      font-size: 34rpx;
      font-weight: bold;
      width: calc(100% - (30rpx * 3));
      padding-left: 30rpx;
      position: relative;
    }
    .title::after{
      content: "";
      position: absolute;
      left: 0;
      top: calc((100% - 45rpx) / 2);
      height: 45rpx;
      width: 10rpx;
      background: #ef5452;
    }
    .menu-list-content{
      width: 100%;

      .menu-block{
        --block-size--: 150rpx;
        --left-size--: calc(var(--block-size--) - 40rpx);
        --icon--width: 50rpx;
        width: 100%;
        height: var(--block-size--);
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        background: #FFFFFF;
        border-radius: 20rpx;
        margin-top: 30rpx;
        box-shadow: 4rpx 4rpx 6rpx #e9eaed;

        .left{
          height: var(--left-size--);
          width: var(--left-size--);
          margin: 0 30rpx;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          justify-content: center;
          align-items: center;
          border-radius: 40rpx;
          .top-image{
            height: 50% !important;
            width: 50% !important;
          }
        }
        .right{
          width: calc(100% - var(--left-size--) - var(--icon--width) - (30rpx * 2));
          height: 100%;
          display: inline-flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: flex-start;
          .block-title{
            font-size: 30rpx;
            font-weight: bold;
          }
          .block-desc{
            font-size: 26rpx;
            color: #afafaf;
          }
        }
        .block-icon{
          height: 100%;
          width: var(--icon--width);
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          justify-content: flex-start;
          align-items: center;
          i{
            font-size: 40rpx;
          }
        }
      }
    }
  }
  .punish{
    display: inline-flex;
    width: calc(100% - (30rpx * 2));
    height: 150rpx;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    margin: 20rpx 30rpx;
    background-color: #FFFFFF;
    border-radius: 20rpx;
    box-shadow: 4rpx 4rpx 6rpx #e9eaed;

    .punish-title{
      text-align: center;
    }
    .punish-num{
      text-align: center;
    }
  }
}
</style>
