<template>
	<view class="u-page u-page-home">
		<view class="sty-statistics-top-b">
			<u-row gutter="16">
				<u-col span="12" text-align="center">
					<view class="sty-statistics-top-item">
						<view><span>济钢城市矿产再生资源智慧管家平台1</span></view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="sty-statistics-top">
			<u-row gutter="16">
				<u-col span="4" text-align="center" class="line-right">
					<view class="sty-statistics-top-item">
						<view><span class="fsizeA">{{homeInfo.avgPurchasePrice}}</span></view>
						<view><span class="fsizeA">磅单采购数</span></view>
					</view>
				</u-col>
				<u-col span="4" text-align="center" class="line-right">
					<view class="sty-statistics-top-item">
						<view><span class="fsizeA">{{homeInfo.todayPurchasePrice}}</span></view>
						<view><span class="fsizeA">今日采购量</span></view>
					</view>
				</u-col>
				<u-col span="4" text-align="center">
					<view class="sty-statistics-top-item">
						<view><span class="fsizeA">{{homeInfo.salesVolumeToday}}</span></view>
						<view><span class="fsizeA">今日销售量</span></view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="sty-msg">
			<u-notice-bar :duration="5000" mode="horizontal" :is-circular="false" @click="goMsg" :list="list">
			</u-notice-bar>
		</view>
		<view class="sty-statistics">
			<u-row gutter="22" justify="space-between">
				<u-col span="12" gutter="0">
					<u-row gutter="22" justify="space-between">
						<u-col span="6">
							<view class="sty-item sty-item-a">
								<u-row>
									<u-col span="12" text-align="center">
										<view>
											<u-icon name="red-packet" color="#ffffff" size="80"></u-icon>
										</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col span="12" text-align="center">
										<view>
											待支付:{{homeInfo.unpaid}}元
										</view>
									</u-col>
								</u-row>
							</view>
						</u-col>
						<u-col span="6">
							<view class="sty-item sty-item-b">
								<u-row>
									<u-col span="12" text-align="center">
										<view>
											<u-icon name="car" color="#ffffff" size="80"></u-icon>
										</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col span="12" text-align="center">
										<view>
											今日付款:{{homeInfo.todayPay}}元
										</view>
									</u-col>
								</u-row>
							</view>
						</u-col>
					</u-row>
				</u-col>
			</u-row>
			<u-row gutter="22" justify="space-between">
				<u-col span="12" gutter="0">
					<u-row gutter="22" justify="space-between">
						<u-col span="6">
							<view class="sty-item sty-item-c">
								<u-row>
									<u-col span="12" text-align="center">
										<view>
											<u-icon name="rmb" color="#ffffff" size="80"></u-icon>
										</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col span="12" text-align="center">
										<view>
											待回款:{{homeInfo.moneyCollected}}元
										</view>
									</u-col>
								</u-row>
							</view>
						</u-col>
						<u-col span="6">
							<view class="sty-item sty-item-d">
								<u-row>
									<u-col span="12" text-align="center">
										<view>
											<u-icon name="home" color="#ffffff" size="80"></u-icon>
										</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col span="12" text-align="center">
										<view>
											今日回款:{{homeInfo.todayPayment}}元
										</view>
									</u-col>
								</u-row>
							</view>
						</u-col>
					</u-row>
				</u-col>
			</u-row>
		</view>
		<view class="sty-sch-box">
			<u-row gutter="44" justify="space-between">
				<u-col span="12" gutter="0">
					<u-search placeholder="搜索" @search="schNav" :show-action="false"></u-search>
				</u-col>
			</u-row>
		</view>
		<view class="sty-nav-list">
			<u-row v-for="(item,index) in btnGroupList" :key="index" gutter="44" justify="space-between"
				class="sty-navg-item">
				<u-col span="12" gutter="0">
					<view class="title">
						<u-icon name="list" :label="item.fullName"></u-icon>
					</view>
					<view class="item-list">
						<view class="item" v-for="(itemB,i) in item.children" :key="i">
							<navigator :url="itemB.urlAddress+'?menuId='+itemB.id" hover-class="navigator-hover">
								<u-row gutter="12">
									<u-col span="12" text-align="center">
										<template v-if="itemB.iconCus">
											<uni-icons :color="itemB.iconCus.color" custom-prefix="iconfont"
												:type="itemB.iconCus.type" size="36"></uni-icons>
										</template>
										<template v-else>
											<text class="u-font-40 item-icon" :class="itemB.icon"
												:style="{'background':itemB.iconBackground||'#008cff'}" />
										</template>
									</u-col>
								</u-row>
								<u-row gutter="5">
									<u-col span="12" text-align="center">
										<view class="grid-text">{{itemB.fullName}}</view>
									</u-col>
								</u-row>
							</navigator>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	var _ = require('lodash');
	import request from '@/utils/request'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import IndexMixin from "./mixin.js";
	import {
		mapGetters
	} from "vuex";
	import {
		getIMReply
	} from "@/api/message.js";
	import {
		FlowLaunchList
	} from '@/api/workFlow/flowLaunch'
	import {
		FlowBeforeList
	} from '@/api/workFlow/flowBefore'

	import {
		versionUpgrade
	} from '@/api/common.js'
	import {
		getAppVersion
	} from '@/components/updataApp.js'

	export default {
		mixins: [MescrollMixin, IndexMixin],
		data() {
			return {
				todayInfo: {
					"purchasingGuidePrice": 2700,
					"purchaseVolumeToday": 2800,
					"salesVolumeToday": 2900,
				},
				homeInfo: {},
				list: [],
				listInfo: [],
				upOption: {
					use: false,
				},
				msgCountAll: 0,
				btnGroupListO: [],
				btnGroupList: [],
				mapIcon: {
					"jgdatamanagement": {
						'text': '贸易',
						'type': 'icon-maoyi',
						'color': '#FFCC33',
					},
					"jgdatamanagementexamine": {
						'text': '磅单审核',
						'type': 'icon-jiesuan',
						'color': '#66CCFF',
					},
					"jgpoundlist": {
						'text': '磅单列表',
						'type': 'icon-bangdan',
						'color': '#0000CC',
					},
					"jgpurchaseorder": {
						'text': '采购订单',
						'type': 'icon-hetong',
						'color': '#FFCC33',
					},
					"jgpurchasereturn": {
						'text': '采购退货',
						'type': 'icon-caigoutuihuo',
						'color': '#66CCFF',
					},
					"jgsaleorder": {
						'text': '销售订单',
						'type': 'icon-hetong',
						'color': '#FFCC33',
					},
					"jgsaleback": {
						'text': '销售退货',
						'type': 'icon-caigoutuihuo',
						'color': '#66CCFF',
					},
					"jgpaymentrequest": {
						'text': '付款申请单',
						'type': 'icon-hetong',
						'color': '#FFCC33',
					},
					"jgpayment": {
						'text': '付款单',
						'type': 'icon-hetong',
						'color': '#FFCC33',
					},
					"jgcollection": {
						'text': '收款单',
						'type': 'icon-hetong',
						'color': '#FFCC33',
					},
					"jgsupplyprocessanalysis": {
						'text': '供应进程分析',
						'type': 'icon-jindu',
						'color': '#FFCC33',
					},
					"jgcustomerprofit": {
						'text': '客户利润统计',
						'type': 'icon-lirunfenxi',
						'color': '#66CCFF',
					},
					"jgcustomer": {
						'text': '客户档案',
						'type': 'icon-kehuda',
						'color': '#33CC33',
					},
					"jgsupplier": {
						'text': '供应商档案',
						'type': 'icon-gongyingshang',
						'color': '#0000CC',
					},
					"jgmaterialarchive": {
						'text': '物料档案',
						'type': 'icon-wuliaoda',
						'color': '#FF0033',
					},
					"jgvehicle": {
						'text': '车辆档案',
						'type': 'icon-huocheda',
						'color': '#FFCC33',
					},
					"jgwarehousemanage": {
						'text': '仓库管理',
						'type': 'icon-cangku',
						'color': '#FFCC33',
					},
					"jgareamanage": {
						'text': '库区管理',
						'type': 'icon-kuweiguanli',
						'color': '#66CCFF',
					},
					"jgcontract": {
						'text': '合同档案',
						'type': 'icon-hetong',
						'color': '#0000CC',
					},
					"jgnatural": {
						'text': '业务员2',
						'type': 'icon-renqun',
						'color': '#FFCC33',
					},
					"jgproductionMonitoring": {
						'text': '生产监控',
						'type': 'icon-jiankong',
						'color': '#FFCC33',
					},
				},
			};
		},
		watch: {
			badgeNum(val) {
				this.setTabBarBadge();
			},
		},
		computed: {
			...mapGetters(["msgInfo"]),
			baseURL() {
				return this.define.baseURL;
			},
			report() {
				return this.define.report;
			},
			token() {
				return this.$store.getters.token;
			},
		},
		onShow() {
			console.log('2222')
			this.getBtnGroupList()
			// this.btnGroupList = this.btnGroupListO;
			this.getHomeInfo()
			this.getMsgList()
			this.getMsgCount()
		},
		onLoad() {
		console.log('1111')
			let javaApk = 'http://221.214.32.166:8000/api/file/Image/annex/scApp.apk';
			versionUpgrade().then(res => {
				let resVersion = res.data.appVersion;
				let forceUpdates = res.data.forceUpdates;
				let updatesDescription = res.data.updatesDescription;
				resVersion = Number(resVersion.replace(/[^0-9]/ig, ""));
				getAppVersion(true, resVersion, javaApk, forceUpdates, updatesDescription)
			})

			this.$store.dispatch('user/getCurrentUser');
		},
		onUnload() {
			uni.$off("updateList");
			uni.$off("updateMsgNum");
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				uni.scanCode({
					success: (res) => {
						if (this.isJSON(res.result)) {
							const result = JSON.parse(res.result);
							if (result.t === "ADP") {
								uni.navigateTo({
									url: "/pages/apply/dynamicModel/index?isPreview=1&id=" + result.id,
									fail: (err) => {
										this.$u.toast("暂无此页面");
									},
								});
							}
							if (result.t === "DFD") {
								let config = JSON.stringify(result);
								uni.navigateTo({
									url: "/pages/apply/dynamicModel/scanForm?config=" + config,
									fail: (err) => {
										this.$u.toast("暂无此页面");
									},
								});
							}
							if (result.t === "report") {
								let url =
									`${this.report}/preview.html?id=${result.id}&token=${this.token}&page=1&from=menu`;
								uni.navigateTo({
									url: "/pages/apply/externalLink/index?url=" +
										encodeURIComponent(url),
									fail: (err) => {
										this.$u.toast("暂无");
									},
								});
							}
						} else {
							uni.navigateTo({
								url: "/pages/my/scanResult/index?result=" + res.result,
								fail: (err) => {
									this.$u.toast("暂无此页面");
								},
							});
						}
					},
				});
			}
		},
		methods: {
			getBtnGroupList() {
				request({
					url: '/api/oauth/CurrentUser?type=app',
					method: 'get'
				}).then(res => {

					let _menuList = res.data.menuList;
					_menuList = _.map(_menuList, (o1) => {
						o1.children = _.map(o1.children, (o2) => {
							if (_.has(this.mapIcon, o2.enCode)) {
								o2.iconCus = this.mapIcon[o2.enCode];
							} else {
								o2.iconCus = null;
							}
							return o2;
						})
						return o1;
					})
					this.btnGroupListO = _menuList;
					this.btnGroupList = this.btnGroupListO;
				}).catch(() => {})
			},
			getHomeInfo() {
				request({
					url: '/api/messageCenter/MessageCenter/getHomePage',
					method: 'get'
				}).then(res => {
					let _info = res.data[0];
					this.homeInfo = _info;
				}).catch(() => {})
			},
			getMsgList() {
				const query = {
					currentPage: 1,
					pageSize: 20,
					menuId: '',
				}
				request({
					url: '/api/messageCenter/MessageCenter/getMobileList',
					method: 'post',
					data: query,
				}).then(res => {
					let _list = this.dataList(res.data);
					let _listA = _.map(_list, (o1) => {
						return o1.head;
					})
					this.list = _listA;
					this.listInfo = _list;
					this.mescroll.endSuccess(_list.length);
				}).catch(() => {})
			},
			goMsg(idx) {
				let _info = this.listInfo[idx];
				let query = {
					id: [_info.id]
				};
				request({
					url: '/api/messageCenter/MessageCenter/isRead',
					method: 'post',
					data: query,
				}).then(res => {
					uni.navigateTo({
						url: _info.skipUrl
					})
				}).catch(() => {})
			},
			schNav(val) {
				let listO = _.cloneDeep(this.btnGroupListO);
				listO = _.map(listO, (o1) => {
					o1.children = _.filter(o1.children, (o2) => {
						return _.includes(o2.fullName, val);
					})
					return o1;
				})
				listO = _.filter(listO, (o1) => {
					return o1.children.length > 0;
				})
				this.btnGroupList = listO;
			},
			isJSON(str) {
				try {
					var obj = JSON.parse(str);
					if (typeof obj == "object" && obj) {
						return true;
					} else {
						return false;
					}
				} catch (e) {
					return false;
				}
			},
			downCallback(page) {
				getIMReply()
					.then((res) => {
						this.list = res.data.list || [];
						this.mescroll.endSuccess(res.data.list.length, false);
						uni.hideLoading();
					})
					.catch(() => {
						this.mescroll.endErr();
					});
			},
			search() {
				return;
				this.searchTimer && clearTimeout(this.searchTimer);
				this.searchTimer = setTimeout(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				}, 300);
			},
			updateReply(data) {
				let boo = false;
				const len = this.list.length;
				for (let i = 0; i < len; i++) {
					if (data.id === this.list[i].id) {
						this.list[i].unreadMessage += data.unreadMessage;
						this.list[i].latestMessage = data.latestMessage;
						this.list[i].messageType = data.messageType;
						this.list[i].latestDate = data.latestDate;
						boo = true;
						break;
					}
				}
				if (boo) return;
				data.unreadMessage = data.unreadMessage;
				this.list.unshift(data);
			},
			updateMsgNum(id) {
				const len = this.list.length;
				for (let i = 0; i < len; i++) {
					if (id === this.list[i].id) {
						const num = this.list[i].unreadMessage;
						this.$store.commit("chat/REDUCE_BADGE_NUM", num);
						this.list[i].unreadMessage = 0;
						break;
					}
				}
			},
			getMsgText(text, type) {
				let message = "";
				switch (type) {
					case "voice":
						message = "[语音]";
						break;
					case "image":
						message = "[图片]";
						break;
					default:
						message = text;
						break;
				}
				return message;
			},
			openPage(path) {
				if (!path) return;
				uni.navigateTo({
					url: path,
				});
			},
			toIm(item) {
				const name = item.realName + "/" + item.account;
				if (item.unreadMessage) {
					this.$store.commit("chat/REDUCE_BADGE_NUM", item.unreadMessage);
					item.unreadMessage = 0;
				}
				uni.navigateTo({
					url: "/pages/message/im/index?name=" +
						name +
						"&formUserId=" +
						item.id +
						"&headIcon=" +
						item.headIcon,
				});
			},
			dataList(data) {
				let _list = []
				for (let i = 0; i < data.list.length; i++) {
					let _data = data.list[i]
					_list.push(_data)
				}
				return _list;
			},
			getMsgCount() {
				let query = {
					currentPage: 1,
					pageSize: 1,
					keyword: ""
				}
				this.msgCountAll = 0;
				FlowBeforeList(1, query, {
					load: true
				}).then(res => {
					this.msgCountAll = this.msgCountAll + res.data.pagination.total;
					FlowBeforeList(3, query, {
						load: true
					}).then(res => {
						this.msgCountAll = this.msgCountAll + res.data.pagination.total;
						if (this.msgCountAll > 0) {
							uni.setTabBarBadge({
								index: 3,
								text: "" + this.msgCountAll + ""
							})
						} else {
							uni.removeTabBarBadge({
								index: 3
							})
						}
					})
				})
			},
		},
	};
</script>

<style lang="scss">
	@import "@/static/iconfont.css";

	.u-page {
		.fsizeA {
			font-size: 18px;
		}

		a {
			text-decoration: none
		}
	}

	.page-home {}

	.sty-statistics-top {
		// background-color: #2DA9FA;
		background-color: #66B3FF;
		padding: 0px;
		//padding: 5px 0px 15px 0px;
		color: #ffffff;

		.sty-statistics-top-item {
			padding: 5px 0px;
		}

		.line-right {
			border-right: solid 1px #ffffff;
		}
	}
	.sty-statistics-top-b {
		background-color: #97CBFF;
		padding: 0px;
		//padding: 5px 0px 15px 0px;
		color: #ffffff;

		.sty-statistics-top-item {
			padding: 5px 0px;
		}

		.line-right {
			border-right: solid 1px #ffffff;
		}
	}

	.sty-statistics {
		.sty-item {
			margin-top: 11px;
			padding: 8px 0px;
			color: #ffffff;
			border-radius: 10px;
		}

		.sty-item-a {
			background-color: #81CBFC;
		}

		.sty-item-b {
			background-color: #1EC695;
		}

		.sty-item-c {
			background-color: #FF9800;
		}

		.sty-item-d {
			background-color: #2DA9FA;
		}
	}

	.sty-sch-box {
		margin-top: 11px;
	}

	.sty-nav-list {
		background-color: #f0f2f6;

		.sty-navg-item {
			background-color: #ffffff;
			border-bottom: solid 3px #f0f2f6;
			padding: 11px 0px 0px 0px;

			.title {
				font-size: 16px;
				line-height: 16px;
				font-weight: bold;
			}

			.item-list {
				font-size: 12px;
				display: flex;
				align-content: flex-start;
				flex-wrap: wrap;
				margin-top: 11px;

				.item {
					width: 25%;
					margin-bottom: 12px;
				}
			}
		}
	}

	.item-icon {
		width: 80px;
		height: 80px;
		line-height: 48px;
		text-align: center;
		border-radius: 5px;
		padding: 5px;
		color: #fff;
		font-size: 30px;

		&.more {
			background: #ECECEC;
			color: #666666;
			font-size: 30px;
		}
	}
</style>
