<template>
  <view>
    <view class="status_bar"></view>
    <!-- 用户信息 -->
    <user-info />
    <!-- 实时订单数据 -->
    <template v-if="getStorage('terrace') == 'jxcs' || getStorage('terrace') == 'gblm'">
      <!-- 京西菜市 -->
      <order-data
        :showMore="true"
        :saleInfo="saleInfo"
        :_vendorPayPercentage="_vendorPayPercentage"
        :isShowShop="isShowShop"
        :isNotQuote="isNotQuote"
        :isZero="isZero"
        :isUpperfif="isUpperfif"
        :isOut="true"
      />
    </template>
    <template v-else>
      <!-- 京西果园 -->
      <order-data-jxgy :showMore="true" :saleInfo="saleInfo" />
    </template>
    <!-- 选项内容 -->
    <options />

    <!-- 新信息 -->
    <view class="tip-root">
      <!-- 信息 -->
      <view class="new-msg" v-if="isMsg" @tap="getMsg">
        <image
          src="https://image.jxc4.com/image/e17593d0abe4daa160a9d67f46732f7b.png"
          mode="scaleToFill"
        />
        <view class="msg">
          <view class="title">新系统消息</view>
          <view>请查收您的系统信息</view>
        </view>
        <view class="btn">立即查看</view>
      </view>

      <!-- 通知 -->
      <view class="notice" v-if="cidNotice" @tap="goLogin">
        <text>！订单通知提醒已被其他设备抢走-请重新登录</text>
        <jx-icon icon="gengduo" color="red"></jx-icon>
      </view>
    </view>

    <!-- 公共组件 -->
    <jx-loading />

    <!-- 未登录无网络 -->
    <jx-login-empty title="马上登录，开始使用" />
  </view>
</template>

<script lang="ts" setup>
import userInfo from './userInfo/userInfo.vue'
import orderData from './orderData/orderData.vue'
import orderDataJxgy from './orderDataJxgy/orderDataJxgy.vue'
import options from './options/options.vue'
import merchantFn from './index'
import { getStorage } from '@/utils/storage'
const {
  saleInfo, //今日订单数据
  _vendorPayPercentage, // 供应商百分比
  isShowShop, // 是否为出售金额
  isNotQuote,
  isZero,
  isUpperfif,
  getMsg,
  isMsg,
  goLogin,
  cidNotice,
} = merchantFn()
</script>
<style lang="scss" scoped>
.status_bar {
  height: calc(var(--status-bar-height) + 20rpx);
  width: 100%;
  background-color: $jx-primary;
}
.new-msg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 20rpx;
  width: 710rpx;
  overflow: hidden;
  background-color: rgba($color: #000000, $alpha: 0.65);
  color: #fff;
  border-radius: 15rpx;
  box-sizing: border-box;
  margin-bottom: 20rpx;

  image {
    width: 120rpx;
    height: 120rpx;
  }

  .msg {
    .title {
      font-weight: bold;
      font-size: 35rpx;
    }
  }

  .btn {
    padding: 7rpx 22rpx;
    border-radius: 50rpx;
    background-image: linear-gradient(135deg, #f72a6c, #f16692);
    animation: btnANimation 1s ease-in-out infinite alternate;
  }
}

@keyframes btnANimation {
  0% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1.05);
  }
}

.notice {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  padding: 20rpx;
  background-color: #fef5f6;
  color: #e91d37;
  font-size: 28rpx;
}

.tip-root {
  position: fixed;
  width: 100%;
  bottom: 0rpx;
  left: 0rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>