<template>
	<view class="content">
		<view class="container">
			<view class="headers">
				<view class="">商家服务</view>
			</view>
			<view class="top-box">
				<image src="../../static/home/homebg.png" mode=""></image>
				<view class="t-box-t">
					<view class="t-top" @click="goCollection()">
						<view class="size-fff" style="font-size: 25rpx">今日营业额（元）</view>
						<view class="num-fff">{{dealNum(formData.tradeAmtNow)}}</view>
					</view>
					<view class="t-bs">
						<view class="t-bs-in">
							<view class="size-fff">本周数据</view>
							<view class="">{{dealNum(formData.tradeAmtWeek)}}</view>
						</view>
						<view class="t-bs-in">
							<view class="size-fff">本月数据</view>
							<view class="">{{dealNum(formData.tradeAmtMonth)}}</view>
						</view>
					</view>
				</view>
				<view class="jg-box">
					<view class="box-jg" @click="goManage()">
						<image src="../../static/home/newjg1.png" mode=""></image>
						<view class="">店铺信息</view>
					</view>
					<view class="box-jg" @click="goCollection()">
						<image src="../../static/home/newjg2.png" mode=""></image>
						<view class="">收款记录</view>
					</view>
					<view class="box-jg" @click="goStaffManagement()">
						<image src="../../static/home/newjg3.png" mode=""></image>
						<view class="">员工管理</view>
					</view>
          <view class="box-jg" @click="goNotice()">
            <image src="../../static/home/newbai1.png" mode=""></image>
            <view class="">通知</view>
          </view>
          <view class="box-jg" @click="goHead()">
            <image src="../../static/home/newbai2.png" mode=""></image>
            <view class="">头条</view>
          </view>
          <view class="box-jg" @click="gettel()">
            <image src="../../static/home/newbai3.png" mode=""></image>
            <view class="">在线客服</view>
          </view>
				</view>
			</view>
			<view class="hui-box">

			</view>
			<view class="q-box" @click="goNotice()">
        <view style="background:white;display: flex;border-radius: 20rpx;padding: 20rpx">
          <view class="left-box">
            <image src="../../static/home/newmrtt.png" mode=""></image>
          </view>
<!--          <view class="right-icon">-->
<!--            通知-->
<!--          </view>-->
          <view class="size-l" v-if="notificationList&&notificationList.length>0">
            {{notificationList[0].content || "暂无" }} {{notificationList[0].createDate.substring(0,10) || "---"}}
          </view>
        </view>
        </view>


		</view>
		<u-modal :show="show" :title="title" :showCancelButton="true" @confirm="confirm" @cancel="cancel"></u-modal>
	</view>
</template>

<script>
	import headers from '../../components/header/headers.vue'
	import config from '@/config'
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				formData: {},
				type: 'Android',
				firm: '',
				typeStr: '1',
				apkUrl: '',
				userType: '3',
				notificationList: [],
				show: false,
        title: '您是否要更新',
			}
		},
		components: {
			headers
		},

		methods: {
			gettel() {
				uni.makePhoneCall({
					phoneNumber: '4001170808' //仅为示例
				});
			},

			confirm() {
				this.show = false
				// #ifdef APP-PLUS
				plus.runtime.openURL(this.apkUrl)
				// #endif
			},
			cancel() {
				this.show = false

			},
			getNotificationList() {
				request({
					url: 'app/uaMer/notificationList',
					method: 'post',
					data: {
						type: '2'
					},
				}).then(res => {
					this.notificationList = res.list
				})
			},
			dealNum(data) {
				if (data) {
					return parseFloat(data).toFixed(2)
				} else {
					return '0.00'
				}
			},
			uaMerIndex() {
				let that = this
				request({
					url: 'app/uaMer/index',
					method: 'post',
					data: {},
				}).then(res => {
					that.formData = res
				})
			},
			appVersionPost() {
				if (uni.getSystemInfoSync().osName == 'ios') {
					this.type = 'iOS'

				} else if (uni.getSystemInfoSync().osName == 'android') {
					this.type = 'Android'
				}
				request({
					url: 'app/base/appVersion',
					method: 'post',
					data: {
						type: this.type,
						firm: this.firm,
						userType: this.userType,
						typeStr: this.typeStr

					},
				}).then(res => {
					if (res.code == 0) {
						console.log(uni.getSystemInfoSync(), 'uni.getSystemInfoSync()');
						if (uni.getSystemInfoSync().osName == 'ios') {
							if (config.appInfo.iosVersion != res.appVersion.versionNo) {
								this.apkUrl = res.appVersion.wgtUrl
								this.show = true
							}

						} else if (uni.getSystemInfoSync().osName == 'android') {
							if (config.appInfo.apkVersion != res.appVersion.versionNo) {
								this.apkUrl = res.appVersion.apkUrl
								this.show = true
							}
						}

					}

				})
			},
			goNotice() {
				uni.navigateTo({
					url: '/homePages/notice/notice'
				})
			},
			goHead() {
				uni.navigateTo({
					url: '/homePages/Headline/Headline'
				})
			},

			goManage() {
				uni.navigateTo({
					url: '/homePages/Manage/detail'
				})
			},
			goStaffManagement() {
				uni.navigateTo({
					url: '/homePages/StaffManagement/StaffManagement'
				})
			},

			goCollection() {
				uni.navigateTo({
					url: '/homePages/Manage/CollectionMerList'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100vh;
    background: #f4f2f5;
	}

	.container {
		width: 100%;
		box-sizing: border-box;

	}

	.headers {
		width: 100%;
		height: 88px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		box-sizing: border-box;
		padding: 0px 15px;
		padding-top: 40px;
		z-index: 99999;
		// background: #E4612E;
		position: fixed;
		top: 0px;
    font-size: 40rpx;

		.my-icons {
			height: 20px;
			width: 20px;

		}

		.my-text {
			font-weight: bold;
		}


	}

	.top-box {
		width: 100%;
		height: 280px;

		position: relative;
		color: #fff;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.t-box-t {
		width: 90%;
		position: absolute;
		left: 50%;
    top: 90%;
		transform: translate(-50%, -180%);

	}

	.t-bs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		color: #fff;
	}
  .t-bs-in{
    display: flex;
    align-items: center;
    font-size: 30rpx;
  }

	.t-top {
		text-align: center;
	}

	.t-bs {
		text-align: center;
	}

	.hui-box {
		width: 100%;
		height: 45px;
		background: #f4f2f5;
    margin-top: 150rpx;
	}

	.num-fff {
		font-size: 28px;

	}

	.size-fff {
		color: white;
		font-size: 25rpx;
    margin-right: 15rpx;
	}

	.jg-box {
		position: relative;
		width: 90%;
		background: #fff;
		border-radius: 4px;
		left: 50%;
		transform: translate(-50%, -70%);
		box-sizing: border-box;
		padding: 15px;
    top: 20%;
		display: flex;
		align-items: center;
		justify-content: space-between;
    flex-wrap: wrap;
    //justify-content: space-between; /* 或者使用 center 居中 */

	}

	.box-jg {
		width: 33%;
		text-align: center;
    color: black;
		font-size: 14px;
    margin-top: 25rpx;

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

	.wrap-box {
		width: 90%;
		display: flex;
		box-sizing: border-box;
		padding: 15px;
		flex-wrap: wrap;
		margin: 0 auto;
	}

	.w-box {
		text-align: center;
		font-weight: bold;
		font-size: 14px;
		margin-right: 35px;

		image {
			width: 55px;
			height: 55px;
			margin-bottom: 5px;
		}
	}

	.q-box {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		align-items: center;

	}

	.left-box {
		box-sizing: border-box;
		padding-right: 20px;
		border-right: 1px solid #e0e0e1;
		margin-right: 10px;

		image {
			width: 20rpx;
			height: 25rpx;
		}

	}

	.right-icon {
		box-sizing: border-box;
		padding: 5px 10px;
		background: #fcd144;
		color: #fff;
		font-size: 14px;
		border-radius: 2px;
		margin: 0px 10px;

	}

	.size-l {
		width: 60%;
		color: #949897;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
