<template>
  <view class="work-container">
    <view class="header">
      <text class="header-text">皖送e餐</text>
    </view>

    <!-- 轮播图 -->
    <u-swiper :list="bannerList" @change="handleSwiperChange" :autoplay="true" :interval="3000"></u-swiper>
    <!-- 指示器 -->
    <view class="external-indicator">
      <view
        v-for="(item, index) in bannerList"
        :key="index"
        class="indicator-dot"
        :class="{ active: index === current }"
      ></view>
    </view>

    <!-- 功能按钮区 -->
    <view class="function-area">
      <view class="function-item" @click="goToMenu">
        <view class="icon-box menu">
          <image src="/static/images/index/weeklyMenu.png" mode="aspectFit"></image>
        </view>
        <text class="function-text">一周菜谱</text>
      </view>
      <view class="function-item" @click="goToOrder">
        <view class="icon-box order">
          <image src="/static/images/index/food.png" mode="aspectFit"></image>
        </view>
        <text class="function-text">预订餐</text>
      </view>
    </view>

    <!-- 底部信息区 -->
    <view class="bottom-info">
      <!-- 左侧二维码区域 -->
      <view class="qr-area" @click="goCode">
        <view class="qr-title">个人二维码</view>
        <view class="qr-subtitle">核身、支付、核销</view>
        <view class="qr-code">
          <image src="/static/images/index/code.png" mode="aspectFit"></image>
        </view>
      </view>

      <!-- 右侧余额区域 -->
      <view class="balance-area">
        <view class="balance-text" @click="goToRemainingSum">
          <text class="balance-label">余额/充值</text>
          <view class="balance-amount">
            <text class="currency">¥</text>
            <text class="amount">{{ walletBal }}</text>
          </view>
          <view class="wallet-icon">
            <image src="/static/images/index/balance.png" mode="aspectFit"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getWalletBalanceAPI, getOrderQRCodeAPI } from '../api/index/index'
export default {
  data() {
    return {
      current: 0,
      swiperDotIndex: 0,
      bannerList: [
        '/static/images/banner/banner1.png',
        '/static/images/banner/banner2.png',
        '/static/images/banner/banner3.png',
        '/static/images/banner/banner4.png'
      ],
      list5: [
        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper1.png'
      ],

      walletBal: 0 // 钱包余额
    }
  },
  methods: {
    changeSwiper(e) {
      this.current = e.detail.current
    },
    goToMenu() {
      // 跳转到菜单页面
      uni.navigateTo({
        url: '/pages/weeklyMenu/index'
      })
    },
    goToOrder() {
      // 跳转到订餐页面
      uni.navigateTo({
        // url: '/pages/advanceOrder/index'
        url: '/pages/advanceOrder/stopperSelection/index'
      })
    },
    goCode() {
      // 跳转到订餐页面
      uni.navigateTo({
        url: '/pages/code/index'
      })
    },
    handleSwiperChange(e) {
      this.current = e.current // 更新当前活动的指示点索引
    },
    goToRemainingSum() {
      // 跳转到余额/充值页面
      uni.navigateTo({
        url: '/pages/remainingSum/index'
      })
    },
    // 获取钱包余额
    async getWalletBalanceData(custId) {
      const { data: res } = await getWalletBalanceAPI({ custId })
      this.walletBal = res.walletBal
      console.log(res, '余额信息--')
    },
    // 获取二维码
    async getOrderQRCodeData(custId) {
      const res = await getOrderQRCodeAPI({ custId })
      console.log(res, '二维码信息--')
    }
  },
  created() {
    // console.log(uni.getStorageSync('accountId'), 'uni.getStorageSyn----')

    this.getWalletBalanceData(uni.getStorageSync('accountId') || '')
    this.getOrderQRCodeData(uni.getStorageSync('accountId') || '')
  }
}
</script>

<style lang="scss">
.external-indicator {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  /* 与轮播图之间的间距 */
}

.indicator-dot {
  width: 24px;
  /* 长方形宽度 */
  height: 4px;
  /* 长方形高度 */
  background-color: rgba(15, 39, 75, 0.5);
  /* 默认颜色 */
  margin: 0 5px;
  transition: all 0.3s ease-in-out;
  /* 添加过渡效果 */
  border-radius: 4px 4px 4px 4px;
}

.active {
  background: #0f274b;
  /* 选中时的颜色 */
}

/* #ifndef APP-NVUE */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fafcff;
  min-height: 100%;
  height: auto;
}

view {
  font-size: 14px;
  line-height: inherit;
}

/* #endif */
.work-container {
  background-color: #fafcff;
  padding: 0 30rpx;
}

.header {
  padding: 50rpx 0;

  .header-text {
    font-size: 36rpx;
    font-weight: 700;
    color: #333;
  }
}

.function-area {
  margin-top: 30rpx;
  border-radius: 16rpx;
  padding: 0rpx;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

  .function-item {
    background-color: #ffffff;
    border-radius: 12rpx;
    padding: 40rpx;
    display: flex;
    align-items: center;
    gap: 18rpx;
    flex: 0 0 calc(50% - 30rpx);
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  }

  .icon-box {
    width: 66rpx;
    height: 66rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;

    &.menu {
      background-color: #f5f5f5;
    }

    &.order {
      background-color: #fff7f2;
    }
  }

  .function-text {
    font-size: 28rpx;
    color: #333;
    font-weight: 600;
  }
}

.bottom-info {
  margin-top: 30rpx;
  border-radius: 12rpx;
  padding: 0 0 0 0;
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

  .qr-area,
  .balance-area {
    background-color: #ffffff;
    border-radius: 12rpx;
    padding: 80rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  }

  .qr-area {
    .qr-title {
      font-size: 30rpx;
      color: #333;
      margin-bottom: 8rpx;
      margin-top: -45rpx;
      margin-left: -45rpx;
      font-weight: 700;
    }

    .qr-subtitle {
      font-size: 24rpx;
      color: #333;
      margin-bottom: 20rpx;
      margin-left: -45rpx;
    }

    .qr-code {
      width: 160rpx;
      height: 160rpx;
      margin-bottom: -60rpx;

      image {
        width: 100%;
        height: 100%;
        margin-left: 60rpx;
      }
    }
  }

  .balance-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .balance-text {
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 8rpx;
      margin-left: 0rpx;

      .wallet-icon {
        width: 160rpx;
        height: 160rpx;
        margin-bottom: -60rpx;

        image {
          width: 100%;
          height: 100%;
          margin-left: 60rpx;
        }
      }

      .balance-label {
        font-size: 24rpx;
        color: #333;
        margin-top: -72rpx;
        margin-left: -160rpx;
        font-weight: 600;
      }

      .balance-amount {
        display: flex;
        align-items: baseline;
        margin-left: -50rpx;

        .currency {
          font-size: 24rpx;
          color: #333;
          margin-right: 4rpx;
        }

        .amount {
          font-size: 36rpx;
          font-weight: 700;
          color: #333;
        }
      }
    }
  }
}

.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.grid-item-box {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}

.swiper {
  height: 300rpx;
}

.swiper-box {
  height: 150px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 300rpx;
  line-height: 300rpx;
}

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    /* #ifndef APP-NVUE */
    margin: 0 auto;
    /* #endif */
    margin-top: 8px;
  }

  .image {
    width: 100%;
  }
}
</style>
