<template>
  <view>
    <scroll-view :style="{ height: `${height}px` }" class="cu-scroll-view" scroll-x scroll-y>
      <view class="">
        <view class="sticky top-0 bg-white z-11">
          <template v-for="(item, i) in list" :key="i">
            <view v-if="i == 0" class="flex items-center w-full text-24rpx">
              <view
                class="w-140rpx sticky z-11 bg-white left-0 text-center flex-none h-120rpx flex-center td"
              >
                日期
              </view>

              <view class="w-400rpx text-center leading-60rpx flex-none" :class="[isMore?'w-400rpx':'w-568rpx']">
                <view class="h-60rpx td">总账</view>
                <template v-if="checkPermission(['admin'])">
                  <view class="h-60rpx grid grid-cols-3">
                    <view class="td">销售</view>
                    <view class="td">兑奖</view>
                    <view class="td">新增客户</view>
                  </view>
                </template>
                <template v-else-if="isLotteryStore">
                  <view class="h-60rpx grid grid-cols-3">
                    <view class="td">销售</view>
                    <view class="td">兑奖</view>
                    <view class="td">新增客户</view>
                  </view>
                </template>
                <template v-else>
                  <view class="h-60rpx grid grid-cols-3">
                    <view class="td">销售</view>
                    <view class="td">支出</view>
                    <view class="td">新增客户</view>
                  </view>
                </template>
              </view>
              <template v-if="checkPermission(['admin']) || isLotteryStore">
                <view
                  class="text-center leading-60rpx w-200rpx flex-none"
                  v-for="(ty, j) in item.lottery_types"
                  :key="j"
                >
                  <view class="td">{{ ty.name }}</view>
                  <view class="grid grid-cols-2">
                    <view class="td">销售</view>
                    <view class="td">兑奖</view>
                  </view>
                </view>
              </template>

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

        <view class="">
          <template v-for="(item, i) in list" :key="i">
            <view
              class="flex justify-between text-center text-24rpx items-center card-shadow bg-white rounded-19rpx"
            >
              <view
                class="flex-1 w-140rpx flex-none td flex-center h-60rpx sticky left-0 bg-white"
              >
                {{ timeFormat(item.date, 'mm-dd') }}
              </view>

              <!-- 总账 -->
              <view class="w-400rpx flex flex-none" :class="[isMore?'w-400rpx':'w-568rpx']">
                <template v-if="checkPermission(['admin'])">
                  <view class="flex-1 td h-60rpx flex-center">{{
                    item.ledger.sales
                  }}</view>
                  <view class="flex-1 td h-60rpx flex-center">{{
                    item.ledger.expenditure
                  }}</view>
                  <view class="flex-1 td h-60rpx flex-center">{{
                    item.ledger.new_customers
                  }}</view>
                </template>
                <template v-else-if="isLotteryStore">
                  <view class="flex-1 td h-60rpx flex-center">{{
                    item.ledger.sales
                  }}</view>
                  <view class="flex-1 td h-60rpx flex-center">{{
                    item.ledger.expenditure
                  }}</view>
                  <view class="flex-1 td h-60rpx flex-center">{{
                    item.ledger.new_customers
                  }}</view>
                </template>
                <template v-else>
                  <view class="flex-1 td h-60rpx flex-center">{{
                    item.ledger.sales
                  }}</view>
                  <view class="flex-1 td h-60rpx flex-center">{{
                    item.ledger.expenditure
                  }}</view>
                  <view class="flex-1 td h-60rpx flex-center">{{
                    item.ledger.new_customers
                  }}</view>
                </template>
              </view>

              <!-- 种类 -->
              <template v-if="checkPermission(['admin']) || isLotteryStore">
                <template v-for="(ty, j) in item.lottery_types" :key="j">
                  <view class="w-200rpx flex flex-none">
                    <view class="flex-1 td h-60rpx flex-center">{{
                      ty.sales
                    }}</view>
                    <view class="flex-1 td h-60rpx flex-center">{{
                      ty.expenditure
                    }}</view>
                  </view>
                </template>
              </template>
            </view>
          </template>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import checkPermission from '@/utils/permission'
import { timeFormat } from '@climblee/uv-ui/libs/function'
import { computed } from 'vue'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()

const isLotteryStore = computed(
  () => userStore.userInfo?.store?.is_lottery_store
)

const isMore = computed(()=>{
  return checkPermission(['admin']) || isLotteryStore.value
})

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  height:{
    type:Number,
    default:0
  }
})
</script>
<style lang="scss" scoped>
.tr {
  border: 0.5px solid #f5f5f5;
}
.td {
  border: 0.5px solid #f5f5f5;
}
</style>
