<script lang="ts" setup>
import {appMerchantDishSaleRecordPost} from "@/service";
import dayjs from "dayjs";

const {t} = useI18n()

const show = ref(false)

function handleClose() {
  show.value = false
}

function handleSubmit() {
  console.log(timeValue.value)
  // 计算选中日期的开始和结束时间
  timeData.value = {
    createBeginTime: dayjs(timeValue.value).startOf('day').valueOf(),
    createEndTime: dayjs(timeValue.value).endOf('day').valueOf(),
  }
  // 重新拉取数据
  appMerchantDishSaleRecord()
  // 关闭弹窗
  show.value = false
}

const timeValue = ref(Date.now())
const maxDate = dayjs().valueOf();

onLoad(() => {
  appMerchantDishSaleRecord()
})

const timeData = ref({
  createBeginTime: dayjs().add(1, 'day').startOf('day').valueOf(),
  createEndTime: dayjs().add(1, 'day').endOf('day').valueOf(),
})
const saleRecordData = ref({})

function appMerchantDishSaleRecord() {
  appMerchantDishSaleRecordPost({
    body: {
      ...timeData.value
    }
  }).then(res => {
    console.log(res)
    saleRecordData.value = res.data
  })
}
</script>

<template>
  <z-paging>
    <template #top>
      <navbar :title="t('pages-user.sales-record.title')"/>
      <view class="pl-30rpx py-36rpx flex items-center" @click="show = true">
        <image
            v-if="!show"
            class="w-28rpx h-28rpx"
            src="@img/chef/191.png"
        ></image>
        <image
            v-else
            class="w-28rpx h-28rpx"
            src="@img/chef/193.png"
        ></image>
        <text :class="[show ? 'text-#FF6106' : 'text-#333']" class="text-28rpx lh-28rpx mx-12rpx">
          {{ t('pages-user.sales-record.dateFilter') }}
        </text>
        <image
            v-if="!show"
            class="w-20rpx h-20rpx"
            src="@img/chef/192.png"
        ></image>
        <image
            v-else
            class="w-20rpx h-20rpx"
            src="@img/chef/194.png"
        ></image>
      </view>
    </template>

    <view class="px-30rpx pb-36rpx">
      <view class="h-226rpx bg-#00A76D rounded-36rpx flex-center-sb mb-30rpx">
        <view class="w-full h-full center flex-col">
          <view class="text-56rpx lh-56rpx text-#fff font-500">{{ saleRecordData?.num }}</view>
          <view class="text-28rpx lh-28rpx text-#fff mt-32rpx">{{ t('pages-user.sales-record.dishQuantity') }}</view>
        </view>
        <view class="w-1rpx h-80rpx bg-white rotate-180"></view>
        <view class="w-full h-full center flex-col">
          <view class="text-56rpx lh-56rpx text-#fff font-500">{{ saleRecordData?.price }}</view>
          <view class="text-28rpx lh-28rpx text-#fff mt-32rpx">{{ t('pages-user.sales-record.dishAmount') }}</view>
        </view>
      </view>

      <template v-for="item in saleRecordData?.dishRecordVos">
        <view class="w-full h-88rpx mb-16rpx last:mb-0 bg-white rounded-16rpx px-28rpx flex-center-sb">
          <text class="text-28rpx text-#333">{{ item.dishName }}</text>
          <view class="flex items-center gap-82rpx">
            <view class="flex items-center">
              <text class="text-22rpx text-#999">{{ t('pages-user.sales-record.qty') }}：</text>
              <text class="text-28rpx text-#333">{{ item.num }}{{ t('pages-user.sales-record.portion') }}</text>
            </view>

            <view class="flex items-center">
              <text class="text-22rpx text-#999">{{ t('pages-user.sales-record.amt') }}：</text>
              <text class="text-28rpx text-#333">{{ item.price }}</text>
            </view>
          </view>
        </view>
      </template>

      <view v-if="saleRecordData?.dishRecordVos && saleRecordData?.dishRecordVos.length === 0" class="py-100rpx center">
        <image class="w-250rpx h-250rpx" src="@img/chef/16033@2x.png"></image>
      </view>
    </view>
  </z-paging>


  <wd-popup v-model="show" position="bottom" @close="handleClose">
    <view>
      <view class="flex-center-sb h-102rpx bg-#F7F7F7 px-30rpx">
        <view class="text-30rpx text-#999">{{ t('common.cancel') }}</view>
        <view class="text-34rpx text-#333"></view>
        <view class="text-30rpx text-#FF6106" @click="handleSubmit">{{ t('common.confirm') }}</view>
      </view>
      <view class="px-60rpx pt-60rpx">
        <wd-datetime-picker-view v-model="timeValue" :maxDate="maxDate" type="date"/>
      </view>
    </view>
  </wd-popup>
</template>

<style lang="scss" scoped>
:deep(.uni-picker-view-wrapper) {
  & > uni-picker-view-column:first-of-type .uni-picker-view-group {
    .uni-picker-view-indicator {
      height: 94rpx !important;
      border-radius: 20rpx 0 0 20rpx !important;

      &:after {
        border: none;
      }

      &:before {
        border: none;
      }
    }

    .wd-picker-view-column__item {
      height: 94rpx !important;
      line-height: 94rpx !important;
    }
  }

  & > uni-picker-view-column:nth-of-type(2) .uni-picker-view-group {
    .uni-picker-view-indicator {
      height: 94rpx !important;

      &:after {
        border: none;
      }

      &:before {
        border: none;
      }
    }

    .wd-picker-view-column__item {
      height: 94rpx !important;
      line-height: 94rpx !important;
    }
  }

  & > uni-picker-view-column:nth-of-type(3) .uni-picker-view-group {
    .uni-picker-view-indicator {
      height: 94rpx !important;
      border-radius: 0 20rpx 20rpx 0 !important;

      &:after {
        border: none;
      }

      &:before {
        border: none;
      }
    }

    .wd-picker-view-column__item {
      height: 94rpx !important;
      line-height: 94rpx !important;
    }
  }
}
</style>