<template>
  <view class="statistics">
    <view class="title">
      <text>数据统计</text>
    </view>
    <view class="statisticsBox">
      <view class="time-wrapper u-m-l-10 u-m-r-10">
        <view v-for="(v, i) in timeList" :key="i" class="timelistbox">
          <view
            class="time-item"
            @tap="changeTime(v.value, i)"
            :class="[v.value == selected ? 'time-selected' : '']"
          >
            {{ v.label }}
          </view>
          <!-- <view class="xian" v-if="v.value==selected "> </view> -->
        </view>
      </view>
      <view class="time_bootom_line">
        <view
          class="block"
          :style="{
            transform: 'translateX(' + comBlockX + 'rpx) rotate(45deg) ',
          }"
        ></view>
      </view>
      <view class="bottom"></view>
      <div class="u-flex u-row-between u-font-28 color-333">
        <div class="u-flex-1">
          <view class="u-m-t-32">
            <view class="">营业额</view>
            <view class="u-m-t-16">
              <up-text
                bold
                color="#318AFE"
                size="20"
                mode="price"
                :text="yingyeE"
              ></up-text>
            </view>
          </view>
          <view class="u-m-t-20">
            <view class="">退款</view>
            <view class="u-m-t-14">
              <up-text
                color="#333"
                size="14"
                bold
                mode="price"
                :text="refundAmount"
              ></up-text>
            </view>
          </view>
        </div>
        <view class="line"></view>
        <view class="payList u-flex-1 u-p-l-40">
          <view
            class="li w-full u-flex u-row-between u-font-24 color-333"
            v-for="(item, index) in list"
            :key="index"
          >
            <view class="u-flex">
              <view
                :style="returnColorStyle(item, index)"
                class="circle"
              ></view>
              <view class="u-m-l-8">
                {{ item.payType }}
              </view>
            </view>

            <view style="text-align: center" class="u-m-t-6">
              {{ item.payAmount }}
            </view>
          </view>
        </view>
      </div>

      <!-- <view class="u-m-t-8 u-flex u-row-center u-font-24 u-col-center color-666">
				<view class="u-flex" @click="toggleShowAll">
					<view>{{!showAll?'展开全部':'收起全部' }}</view>
					<view class="u-flex  u-col-center u-m-t-4 tranistion-2" :class="{rotate:showAll}">
						<up-icon color="#666" name="arrow-down" :size="12"></up-icon>
					</view>
				</view>
			</view> -->
    </view>
  </view>
  <datePickerview
    @confirm="datePickerConfirm"
    ref="datePicker"
    style="z-index: 999"
  ></datePickerview>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { timeList } from "@/data/index.js";
import dayjs from "dayjs"; //时间格式库
import datePickerview from "./my-date-pickerview.vue";

import { getTrade } from "@/http/api/summary.js";

let selected = ref("today");
let showAll = ref(false);
let list = ref();
const pageData = reactive({
  list: [
    {
      payType: "微信小程序",
      key: "wechatPayAmount",
      payAmount: 0,
      bgcolor: "#5AA25F",
    },
    {
      payType: "支付宝小程序",
      key: "aliPayAmount",
      payAmount: 0,
      bgcolor: "#31ACFE",
    },
    {
      payType: "扫码收款金额",
      key: "backScanPayAmount",
      payAmount: 0,
      bgcolor: "#FF5C6D",
    },
    {
      payType: "现金",
      key: "cashPayAmount",
      payAmount: 0,
      bgcolor: "#FC843F",
    },
    {
      payType: "充值",
      key: "rechargeAmount",
      payAmount: 0,
      bgcolor: "#9090FF",
    },
    {
      payType: "挂账",
      key: "creditPayAmount",
      payAmount: 0,
      bgcolor: "#7BA7A4",
    },
    // {payType: '收款码收款', key:'', payAmount: 0,bgcolor:'#5AA25F'},
  ],
});

function returnColorStyle(item) {
  return {
    backgroundColor: item.bgcolor,
  };
}

function toggleShowAll() {
  showAll.value = !showAll.value;
  setList();
}

function setList() {
  // list.value = showAll.value ? pageData.list : pageData.list.slice(0, 4)
  list.value = pageData.list;
}

const emit = defineEmits(["totalRevenue"]);

const timeSleIndex = ref(0);

const datePicker = ref();
onShow((options) => {
  let iToken = uni.getStorageSync("iToken").tokenValue;
  if (iToken) {
    getlist();
  } else {
    uni.redirectTo({
      url: "/pages/login/index",
    });
  }
});

const yingyeE = ref(0);
const refundAmount = ref(0);
/**
 * 获取统计数据
 * @param {Object} start
 * @param {Object} end
 */
function getlist(start, end) {
  let beginDate, endDate;
  const rangeType = timeList[timeSleIndex.value].value;
  if(rangeType == "custom"){
    beginDate = start.split(" ")[0];
    endDate = end.split(" ")[0];
  }else{
	beginDate = timeList[timeSleIndex.value].beginDate;
	endDate = timeList[timeSleIndex.value].endDate;
  }
  getTrade({
    beginDate: beginDate,
    endDate: endDate,
    shopId: uni.getStorageSync("shopId"),
    rangeType: rangeType,
  }).then((res) => {
    refundAmount.value = res.refundAmount;
    for (var key in res) {
      pageData.list.map((item) => {
        if (item.key == key) {
          item.payAmount = res[key];
        }
      });
    }
    setList();
    let incomeAmountAll = 0;
    pageData.list.map((item) => {
      incomeAmountAll += item.payAmount || 0;
    });

    yingyeE.value = incomeAmountAll;
    emit("totalRevenue", incomeAmountAll);
  });
}

/**
 * 日期筛选确认
 * @param {Object} e
 */
function datePickerConfirm(e) {
  getlist(e.start, e.end);
}

// 获取当前时间
function getdate() {
  const dt = new Date();
  const y = dt.getFullYear();
  const m = (dt.getMonth() + 1 + "").padStart(2, "0");
  const d = (dt.getDate() + "").padStart(2, "0");
  const hh = (dt.getHours() + "").padStart(2, "0");
  const mm = (dt.getMinutes() + "").padStart(2, "0");
  const ss = (dt.getSeconds() + "").padStart(2, "0");
  return `${y}-${m}-${d}`;
}

// 获取昨天时间
const formatTime = () => {
  let strDate = getdate();
  let dateFormat = new Date(strDate);
  dateFormat = dateFormat.setDate(dateFormat.getDate() - 1);
  dateFormat = new Date(dateFormat);
  let y = dateFormat.getFullYear();
  let m = (dateFormat.getMonth() + 1).toString().padStart(2, "0");
  let d = dateFormat.getDate().toString().padStart(2, "0");
  return `${y}-${m}-${d}`;
};

function changeTime(e, index) {
  selected.value = e;
  timeSleIndex.value = index;
  if (e == "custom") {
    datePicker.value.toggle();
  } else {
    getlist();
  }
}

const xArr = [0, 134, 262, 390, 532];
const comBlockX = computed(() => {
  return xArr[timeSleIndex.value];
});
</script>
<style scoped lang="less">
ul,
li {
  list-style: none;
  padding: 0;
}

.rotate {
  transform: rotate(180deg);
}

.statistics {
  padding: 0 28rpx;
  margin-top: 50rpx;
  position: relative;

  .title {
    position: absolute;
    width: 170rpx;
    left: 18rpx;
    height: 50rpx;
    line-height: 50rpx;
    font-weight: 700;
    font-size: 26rpx;
    color: #fff;
    text-align: center;
    background: linear-gradient(109deg, #70b9ff 0%, #629ffa 100%);
    border-radius: 12rpx 12rpx 12rpx 0rpx;
    top: -16px;
  }

  .statisticsBox {
    width: 694rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 48rpx 32rpx 32rpx;
    box-sizing: border-box;
    margin-top: 54rpx;

    .bottom {
    }

    .time-wrapper {
      display: flex;
      justify-content: space-between;

      .timelistbox {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

        .time-item {
          font-size: 28rpx;
          text-align: center;
          padding-bottom: 10rpx;
        }

        .xian {
          width: 40rpx;
          height: 3rpx;
          background-color: #318afe;
          // position: absolute;
          // left: 16rpx;
          // bottom: 0;
        }
      }

      .time-selected {
        color: #318afe;
        font-size: 32rpx !important;
        font-weight: bold;
      }
    }

    .line {
      width: 0rpx;
      height: 170rpx;
      border: 2rpx solid #eee8e8;
    }

    .payList {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-wrap: wrap;

      .li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        white-space: nowrap;
        margin-top: 12rpx;

        > view {
          text-align: center;
        }
      }
    }
  }
}

.circle {
  width: 8rpx;
  height: 8rpx;
  border-radius: 8rpx;
}

.time_bootom_line {
  height: 16rpx;
  position: relative;
  border-bottom: 1px solid #629ffa;

  .block {
    width: 18rpx;
    height: 18rpx;
    box-sizing: border-box;
    background: #fff;
    position: absolute;
    border-top: 0.5rpx solid #629ffa;
    border-left: 0.5rpx solid #629ffa;
    left: 30rpx;
    top: 6rpx;
    transform: rotate(45deg);
    transform-origin: center;
    transition: all 0.2s linear;
  }
}
</style>
