<template>
  <view class="container">
    <view class="top">
<!--      <image class="left-background-img" :src="incomeBackground" />-->
      <image class="top-background-img" :src="incomeBackground" />
      <view class="accumulate-income">
        <view>
          <div class="accumulate-income-title">
            累计收益
            <span class="income-hidden-but" @click="clickHidden">
              <uni-icons v-if="hidden" type="eye" :size="18" :color="'#909399'" />
              <uni-icons v-else type="eye-slash" :size="18" :color="'#909399'" />
            </span>
          </div>
          <div class="income-num">
            <MoneyView :character="'￥'" :value="profitInfo.totalProfit" :size="60" :hidden="hidden"/>
            <span class="income-refresh-but"  v-if="!hidden"  @click="clickRefresh">
              <uni-icons type="loop" :size="20" :color="'#909399'" />
            </span>
          </div>
          <div class="income-history">
            <view>上月收入：</view><MoneyView :value="profitInfo.lastMonthProfit" :hidden="hidden"/>
            <view :style="{width: '2rpx', marginLeft: '10rpx', marginRight: '10rpx'}"></view>
            <view>当月收入：</view><MoneyView :value="profitInfo.thisMonthProfit" :hidden="hidden"/>
          </div>
        </view>
      </view>
    </view>
    <uni-notice-bar
        show-get-more
        show-icon
        background-color="#1d2734"
        color="#909399"
        moreColor="#909399"
        :scrollable="true"
        more-text="查看更多"
        :text="noticeList[0].content"
        @getmore="getMore"
    />
    <view class="meddle">
      <view class="income-categories">
        <view class="yesterday-income-title">
          昨日收益
        </view>
        <view class="yesterday-income">
          <view class="income-category-item">
            <view class="left-icon">
              <image class="" :src="advertIcon" />
            </view>
            <view class="right-income-info">
              <view>广告收益</view>
              <view class="yesterday-income-num">
                <MoneyView :character="'￥'" :value="profitInfo.yesterdayAdProfit" :size="32" :hidden="hidden"/>
              </view>
            </view>
          </view>
          <view class="income-category-item">
            <view class="left-icon">
              <image class="" :src="inviteIcon" />
            </view>
            <view class="right-income-info">
              <view>邀请收益</view>
              <view class="yesterday-income-num">
                <MoneyView :character="'￥'" :value="profitInfo.yesterdayInviteProfit" :size="32" :hidden="hidden"/>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="foot">
      <view class="income-detail-selector">
        <view class="details-select-item" v-for="(item, index) in items" :key="index">
          <view
              @click="segActive(index)"
              v-if="item !== ''"
              :class="[
                  'segmented-con',
                  index === active ? 'active-color' : '',
                ]"
          >
            {{ item }}
          </view>
        </view>
      </view>

      <!-- 即将入账 -->
      <view v-show="active == 0">
        <view class="adver">
          <view class="adver-top">
            <view class="circular"></view>
            <view class="adver-top-text"> 广告: </view>
          </view>
          <view class="adver-mid">
            抖音/快手/微信均为次日结算前日ECPM价格
          </view>
        </view>
        <view class="detail-categories-item" @click="linkTo(0,0)">
          <div class="title">曝光</div>
          <div class="text uni-white">{{downloadAndInviteCountInfo.creatorProfitDownloadCount[0].downloadNum || 0}}次 </div>
          <uni-icons type="right" size="12" color="#ffffff" />
        </view>
        <view class="detail-categories-item" @click="linkTo(1,0)">
          <div class="title">邀请</div>
          <div class="text uni-white">[{{downloadAndInviteCountInfo.creatorProfitInviteCount[0].createTime || ''}}] {{downloadAndInviteCountInfo.creatorProfitInviteCount[0].inviteDownloadNum || 0}}次 </div>
          <uni-icons type="right" size="12" color="#ffffff" />
        </view>
      </view>
      <!-- 已入账 -->
      <view v-show="active == 1">
        <view class="adver">
          <view class="adver-top">
            <view class="circular"></view>
            <view class="adver-top-text"> 广告: </view>
          </view>
           <view class="adver-mid">
             抖音/快手/微信均为次日结算前日ECPM价格
           </view>
        </view>
        <view class="detail-categories-item" @click="linkTo(0,1)">
          <div class="title">曝光</div>
          <div class="text uni-white"><MoneyView :character="'￥'" :value="inProfitInfo.profit || 0" :hidden="hidden"/></div>
          <uni-icons type="right" size="12" color="#ffffff" />
        </view>
        <view class="detail-categories-item" @click="linkTo(1,1)">
          <div class="title">邀请</div>
          <div class="text uni-white"><MoneyView :character="'￥'" :value="inProfitInfo.inviteProfit || 0" :hidden="hidden"/></div>
          <uni-icons type="right" size="12" color="#ffffff" />
        </view>
      </view>
      <!-- 已转入钱包 -->
      <view v-show="active == 2">
        <view class="adver">
          <view class="adver-top">
            <view class="circular"></view>
            <view class="adver-top-text"> 广告: </view>
          </view>
          <view class="adver-mid">
            抖音/快手/微信均为次日结算前日ECPM价格
          </view>
        </view>
        <view class="detail-categories-item" @click="linkTo(0,2)">
          <div class="title">曝光</div>
          <div class="text uni-white"><MoneyView :character="'￥'" :value="endProfitInfo.profit || 0" :hidden="hidden"/></div>
          <uni-icons type="right" size="12" color="#ffffff" />
        </view>
        <view class="detail-categories-item" @click="linkTo(1,2)">
          <div class="title">邀请</div>
          <div class="text uni-white"><MoneyView :character="'￥'" :value="endProfitInfo.inviteProfit || 0" :hidden="hidden"/></div>
          <uni-icons type="right" size="12" color="#ffffff" />
        </view>
      </view>

    </view>
  </view>
</template>

<script>
import {
  queryFrontProfitInfo, //查询指定艺术家收益统计
  queryFrontPreDownloadAndInviteCount, //查询指定艺术家即将入账广告及邀请次数列表
  queryFrontPreProfit, //查询指定艺术家即将入账收益列表
  queryFrontInOrOutAmt, //查询指定艺术家已入账/转入钱包累计收益
} from "@/api/profit.js";
import { getNoticeList } from "@/api/userInfo.js";
import MoneyView from "@/components/money-view/money-view.vue"
export default {
  components: {
    MoneyView
  },
  data() {
    return {
      nvueWidth: 730,
      profitInfo: {
        yesterdayAdProfit: 0,
        yesterdayInviteProfit: 0,
        totalProfit: 0,
        lastMonthProfit: 0,
        thisMonthProfit: 0,
      },
      downloadAndInviteCountInfo: {},
      profitList: [],
      items: ["即将入账", "已入账", "已转入钱包"],
      current: 0,
      activeColor: "#007aff",
      styleType: "text",
      inProfitInfo: {},
      endProfitInfo: {},
      userInfo: {},
      noticeList: [],
      pageSize: 5,
      pageNum: 1,
      active: 0,
      hidden: true,
      incomeBackground: '/static/income-background.png',
      advertIcon: "http://117.50.61.7:6001/mini/bnyer-hub/inviteIcon.png",
      inviteIcon: "http://117.50.61.7:6001/mini/bnyer-hub/inviteIcon.png",
    };
  },
  // 下拉刷新
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  created() {
    const userInfo = uni.getStorageSync('userInfo')
    if (!userInfo) {
    	uni.showModal({
    		content: '艺术家账户过期,请重新登录！',
    		showCancel: false,
    		success() {
    			//没有缓存则跳转登录页面
    			uni.reLaunch({
    				url: '/pages/login/login'
    			});
    		}
    	});
    } else {
    	this.userInfo = userInfo;
    }
    this.queryFrontProfitInfo();
    this.queryFrontPreDownloadAndInviteCount();
    this.queryFrontInAmt();
    this.queryFrontEndAmt();
    this.getNoticeList();
  },
  onShow() {
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo) {
      this.queryFrontProfitInfo();
      this.queryFrontPreDownloadAndInviteCount();
      this.queryFrontInAmt();
      this.queryFrontEndAmt();
      this.getNoticeList();
    }
  },
  methods: {
    // 获取艺术家收益统计
    async queryFrontProfitInfo() {
	  let that = this;
      const res = await queryFrontProfitInfo(that.userInfo.id);
      //console.log('res', res)
      if (res.data.code === 200) {
        that.profitInfo = res.data.data;
        //console.log('profitInfo', that.profitInfo)
      } else {
        uni.showModal({
          content: "收益统计加载失败！",
          showCancel: false,
        });
      }
    },

    // 查询指定艺术家即将入账广告及邀请次数列表
    async queryFrontPreDownloadAndInviteCount() {
	  let that = this;
      const res = await queryFrontPreDownloadAndInviteCount(that.userInfo.id);
      //console.log('res', res)
      if (res.data.code === 200) {
        that.downloadAndInviteCountInfo = res.data.data;
        //console.log('downloadAndInviteCountInfo', that.downloadAndInviteCountInfo)
      } else {
        uni.showModal({
          content: "收益统计次数加载失败！",
          showCancel: false,
        });
      }
    },

    // 查询指定艺术家已入账累计收益
    async queryFrontInAmt() {
	  let that = this;
      const res = await queryFrontInOrOutAmt({
        creatorId: that.userInfo.id,
        status: "1",
      });
      //console.log('InAmt', res)
      if (res.data.code === 200) {
        that.inProfitInfo = res.data.data;
      } else {
        uni.showModal({
          content: "已入账收益加载失败！",
          showCancel: false,
        });
      }
    },

    // 查询指定艺术家转入钱包累计收益
    async queryFrontEndAmt() {
	  let that = this;
      const res = await queryFrontInOrOutAmt({
        creatorId: that.userInfo.id,
        status: "2",
      });
      //console.log('endAmt', res)
      if (res.data.code === 200) {
        that.endProfitInfo = res.data.data;
      } else {
        uni.showModal({
          content: "转入钱包收益加载失败！",
          showCancel: false,
        });
      }
    },

    // 获取公告分页
    async getNoticeList() {
	  let that = this;
      const res = await getNoticeList({
        pageSize: that.pageSize,
        pageNum: that.pageNum,
      });
      //console.log('res', res)
      if (res.data.code === 200) {
        that.noticeList = res.data.rows;
        //console.log('noticeList', that.noticeList)
      } else {
        uni.showModal({
          content: "公告列表加载失败！",
          showCancel: false,
        });
      }
    },

    // 跳转即将到账收益详情页(status:0->即将入账;1->已入账;2->转入钱包)
    linkTo(typeId, status) {
      if (status === 0) {
        uni.setStorage({
          key: "typeId",
          data: typeId,
          success() {
            uni.navigateTo({
              url: "/pages-profit/profit/profitPreDetails",
            });
          },
        });
      } else if (status === 1) {
        uni.setStorage({
          key: "typeId",
          data: typeId,
          success() {
            uni.navigateTo({
              url: "/pages-profit/profit/profitInDetails",
            });
          },
        });
      } else {
        uni.setStorage({
          key: "typeId",
          data: typeId,
          success() {
            uni.navigateTo({
              url: "/pages-profit/profit/profitEndDetails",
            });
          },
        });
      }
    },
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    },

    //查看更多公告
    getMore() {
      uni.navigateTo({
        url: "/pages-userInfo/notice/notice",
      });
    },
    segActive(index) {
      this.active = index;
    },
    clickHidden() {
      this.hidden = !this.hidden;
    },
    clickRefresh() {
      uni.showLoading({
        title: "加载中"
      });
      this.queryFrontProfitInfo();
      this.queryFrontPreDownloadAndInviteCount();
      this.queryFrontInAmt();
      this.queryFrontEndAmt();
      setTimeout(() => {
        uni.hideLoading()
      }, 500)
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
  min-height: 100vh;
  background: $uni-bg-color;
  color: $uni-white !important;

}

.top {
  width: 750rpx;
  height: 30vh;
  background: $uni-primary;
  position: relative;

  .left-background-img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200rpx;
    height: 150rpx;
    opacity: 0.2;
  }

  .top-background-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
  }

  .accumulate-income {
    width: calc(100% - 80rpx);
    height: calc(100% - 80rpx);
    padding: 40rpx;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-end;

    .accumulate-income-title {
      line-height: 48rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;

      .income-hidden-but {
        margin-left: 30rpx;
      }

    }

    .income-num {
      width: 100%;
      height: 96rpx;
      line-height: 90rpx;
      display: flex;
      //justify-content: space-between;

      .income-refresh-but {
        margin-left: 30rpx;
      }

    }

    .income-history {
      font-size: 24rpx;
      line-height: 24rpx;
      display: flex;

    }

  }
}

.meddle {
  width: 670rpx;
  margin: 40rpx auto;
  background: $uni-bg-base-color;
  border-radius: 20rpx;
  overflow: hidden;

  .income-categories{

    .yesterday-income-title {
      height: 28rpx;
      font-size: 32rpx;
      line-height: 32rpx;
      background: $uni-primary;
      padding: 20rpx 40rpx;
    }

    .yesterday-income {
      display: flex;
      padding: 40rpx;

      .income-category-item {
        width: 295rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left-icon {
          width: 100rpx;
          height: 100rpx;

          ::v-deep image {
            width: 100rpx;
            height: 100rpx;
          }

        }

        .right-income-info {
          width: 170rpx;
          font-size: 24rpx;
          line-height: 60rpx;

        }

      }

    }

  }

}

.foot {
  width: 670rpx;
  margin: 40rpx auto;

  .income-detail-selector {
    display: flex;
    justify-content: space-between;

    .details-select-item {
      width: 200rpx;

      .segmented-con {
        width: 100%;
        height: 72rpx;
        font-size: 28rpx;
        line-height: 72rpx;
        text-align: center;
        background: #1d2734;
        border-radius: 20rpx;
      }

      .active-color {
        background: $uni-primary;
      }

    }

  }

  .adver {
    width: 100%;
    padding: 20rpx 0;

    .adver-top {
      display: flex;
      align-items: center;

      .circular {
        width: 20rpx;
        height: 20rpx;
        border-radius: 100%;
        background: $uni-primary;
        margin-right: 20rpx;
      }

      .adver-top-text {
        font-size: 28rpx;
      }

    }

    .adver-mid {
      font-size: 24rpx;
      color: $uni-secondary-color;
    }

  }

  .detail-categories-item {
    width: calc(100% - 40rpx);
    background: $uni-bg-base-color;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60rpx;

    .title {
      font-size: 28rpx;
    }

    .text{
      font-size: 24rpx;
      line-height: 40rpx;
      width: 500rpx;
      text-align: right;
    }

  }

}

</style>
