<template>
  <view class="container">
    <view class="top">
      <uni-notice-bar
        show-get-more
        show-icon
        more-text="查看更多"
        :text="noticeList[0].content"
        @getmore="getMore"
      />
      <view class="back">
        <view class="back-top"></view>
        <view class="uni-radius back-con uni-shadow-sm">
          <view class="">
            <view class="back-con-top"> 昨日收益 </view>
            <view class="back-con-mid">
              <view class="back-con-mid-left">
                广告收益
                <view class="top-text">
                  ¥ {{ profitInfo.yesterdayAdProfit }}
                </view>
              </view>
              <view class="border"></view>
              <view class="back-con-mid-right">
                邀请收益
                <view class="top-text">
                  ¥ {{ profitInfo.yesterdayInviteProfit }}
                </view>
              </view>
            </view>
          </view>
          <view class="back-con-bot uni-radius uni-shadow-sm">
            <view class="back-con-bot-left">
              累计
              <view class="top-text size14">
                ¥ {{ profitInfo.totalProfit }}
              </view>
            </view>
            <view class="border"></view>
            <view class="back-con-bot-mid">
              上月
              <view class="top-text size14">
                ¥ {{ profitInfo.lastMonthProfit }}
              </view>
            </view>
            <view class="border"></view>
            <view class="back-con-bot-right">
              当月
              <view class="top-text size14">
                ¥ {{ profitInfo.thisMonthProfit }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="back2">
        <view class="uni-radius back-con2 uni-shadow-sm">
          <view class="" style="width: 100%">
            <view class="back-con-top"> 收益明细 </view>
            <view class="segmented">
              <view v-for="(item, index) in items" :key="index">
                <view
                  @click="segActive(index)"
                  v-if="item != ''"
                  :class="[
                    'segmented-con',
                    index == active ? 'activecolor' : '',
                  ]"
                >
                  {{ item }}
                  <image
                    :class="['img1', index == active ? 'show' : '']"
                    src="/static/active.png"
                  ></image>
                </view>
                <image v-else class="img" src="/static/right.png"></image>
              </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>
              <uni-list>
                <uni-list-item title="曝光" link @click="linkTo(0,0)">
                  <template v-slot:footer>
                    <view class="blue"> {{downloadAndInviteCountInfo.creatorProfitDownloadCount[0].downloadNum || 0}}次 </view>
                  </template>
                </uni-list-item>
                <uni-list-item title="邀请" link @click="linkTo(1,0)">
                  <template v-slot:footer>
                    <view class="blue"> [{{downloadAndInviteCountInfo.creatorProfitInviteCount[0].createTime || ''}}] {{downloadAndInviteCountInfo.creatorProfitInviteCount[0].inviteDownloadNum || 0}}次 </view>
                  </template>
                </uni-list-item>
              </uni-list>
            </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"> 2022.06.05 至 2022.07.20 </view> -->
              </view>
              <uni-list>
                <uni-list-item title="曝光" link @click="linkTo(0,1)">
                  <template v-slot:footer>
                    <view class="blue"> ¥{{inProfitInfo.profit || 0}} </view>
                  </template>
                </uni-list-item>
                <uni-list-item title="邀请" link @click="linkTo(1,1)">
                  <template v-slot:footer>
                    <view class="blue"> ¥{{inProfitInfo.inviteProfit || 0}} </view>
                  </template>
                </uni-list-item>
              </uni-list>
            </view>
            <!-- 已转入钱包 -->
            <view v-show="active == 4">
              <view class="adver">
                <view class="adver-top">
                  <view class="circular"></view>
                  <view class="adver-top-text"> 广告: </view>
                </view>
              </view>
              <uni-list>
                <uni-list-item title="曝光" link @click="linkTo(0,2)">
                  <template v-slot:footer>
                    <view class="blue"> ¥{{endProfitInfo.profit || 0}} </view>
                  </template>
                </uni-list-item>
                <uni-list-item title="邀请" link @click="linkTo(1,2)">
                  <template v-slot:footer>
                    <view class="blue"> ¥{{endProfitInfo.inviteProfit || 0}} </view>
                  </template>
                </uni-list-item>
              </uni-list>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  queryFrontProfitInfo, //查询指定艺术家收益统计
  queryFrontPreDownloadAndInviteCount, //查询指定艺术家即将入账广告及邀请次数列表
  queryFrontPreProfit, //查询指定艺术家即将入账收益列表
  queryFrontInOrOutAmt, //查询指定艺术家已入账/转入钱包累计收益
} from "@/api/profit.js";
import { getNoticeList } from "@/api/userInfo.js";
export default {
  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: 10,
      pageNum: 1,
      active: 0,
    };
  },
  // 下拉刷新
  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();
  },
  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: "../profit/profitPreDetails",
            });
          },
        });
      } else if (status === 1) {
        uni.setStorage({
          key: "typeId",
          data: typeId,
          success() {
            uni.navigateTo({
              url: "../profit/profitInDetails",
            });
          },
        });
      } else {
        uni.setStorage({
          key: "typeId",
          data: typeId,
          success() {
            uni.navigateTo({
              url: "../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;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
}
.back {
  width: 100%;
  height: 320px;
  position: relative;
}
.back2 {
  width: 100%;
  // height: 320px;
  // position: relative;
  // top: -60px;
}
.back-top {
  width: 100%;
  position: absolute;
  height: 120px;
  background: #416bdc;
}
.back-con {
  width: 95%;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  background-color: white;
  position: absolute;
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.back-con2 {
  width: 95%;
  padding: 0 16px;
  box-sizing: border-box;
  left: 50%;
  top: 460px;
  transform: translate(-50%, -50%);
  background-color: white;
  position: absolute;
  height: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.back-bot {
  width: 100%;
  position: absolute;
  top: 80px;
}
.back-con-top {
  font-size: 20px;
  font-weight: 600;
  margin: 20px 0 15px 0;
  display: flex;
  justify-content: center;
}
.back-con-mid {
  display: flex;
  align-items: center;
}
.border {
  width: 1px;
  height: 30px;
  background-color: rgb(165, 165, 165);
}
.back-con-mid-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgb(165, 165, 165);
  padding-right: 40px;
  // border-right: 1px solid #ccc;
}
.back-con-mid-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgb(165, 165, 165);
  padding-left: 40px;
}

.back-con-bot {
  width: 100%;
  height: 150rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-con-bot-left {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #a5a5a5;
}
.back-con-bot-mid {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #a5a5a5;
}
.back-con-bot-right {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #a5a5a5;
}
.uni-padding-wrap {
  // width: 750rpx;
  padding: 0px 30px;
}

.uni-common-mt {
  margin-top: 30px;
}
.segmented {
  display: flex;
  justify-content: center;
  // align-items: center;
}
.segmented-con {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #a5a5a5;
}
.img1 {
  width: 15px;
  height: 10px;
  margin-top: 7px;
  visibility: hidden;
}
.img {
  width: 18px;
  height: 15px;
  margin: 0 20px;
}
.top-text {
  font-size: 20px;
  margin-top: 12px;
  color: red;
}
.size14 {
  font-size: 16px;
}
.show {
  visibility: visible;
}
.activecolor {
  color: #4d6cff;
}
.circular {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #4d6cff;
  margin-right: 10px;
}
.adver {
  margin-top: 6px;
  margin-bottom: 10px;
}
.adver-top {
  display: flex;
  align-items: center;
  margin-top: 12px;
}
.adver-top-text {
  font-size: 18px;
  font-weight: bold;
}
.adver-mid {
  font-size: 12px;
  color: #ccc;
  // margin-top: ;
  margin-bottom: 8px;
}
.blue {
  color: #4d6cff;
}
</style>
