<!--首页-->
<template>
	<div class="box">
		<div class="top-fn-view">
			<div style="line-height: 42px; border-bottom: 1px solid #d8d8d8">
				<span class="ph_title">常用功能</span>
			</div>
			<ul class="nav-btn-ul">
				<li v-for="(item, index) in top_btn_list" :key="index" class="nav-btn-li"
					@click="$router.push(item.path)">
					<span :style="{ background: item.color }" class="iconfont nav-btn-icon" :class="[item.icon]"></span>
					<span style="color: #24365c; margin-left: 10px">
						{{ item.label }}
					</span>
				</li>
				<li v-if="!!wxCodeImg" class="nav-btn-li">
					<el-popover placement="right" width="200" trigger="hover">
						<div slot="reference">
							<p>
								<span style="background-color: rgb(18, 186, 123)"
									class="iconfont nav-btn-icon icon-saomiao"></span>
							</p>
							<p>预览商城</p>
						</div>
						<el-image :src="wxCodeImg" style="width: 180px; height: 180px; background-color: #12ba7b">
						</el-image>
					</el-popover>
				</li>
			</ul>
		</div>
		<div v-if="$accessCheck($Access.overview)">
			<el-row :gutter="20">
				<el-col :span="8">
					<div v-if="$accessCheck($Access.overview)">
						<ul class="top-data-ul">
							<li class="top-data-li clearfix">
								<div class="float_left">
									<p class="card-label">
										<i class="el-icon-s-help card-dot" style="color: #0668f0"></i>
										<span class="card-label-text">应收账款</span>
										<el-tooltip effect="dark" content="当前所有客户的应收款总额" placement="top-start">
											<i class="el-icon-question mark"></i>
										</el-tooltip>
									</p>
									<p class="card-des">
										<i class="el-icon-edit" style="color: transparent"></i>
										当前所有客户的应收款总额
									</p>
									<p class="card-num">
										<i class="el-icon-edit" style="font-size: 13px; color: transparent"></i>
										<span class="money">
											{{
                        $_common.formattedNumber(
                          aggregateStatistics.totalShouldReceive
                        )
                      }}
										</span>
									</p>
								</div>
								<div v-if="flag" class="float_right" style="padding: 29px 20px 0 0">
									<div style="width: 199px; height: 57px">
										<chart2 :chart-data="chart_data"></chart2>
										<div style="margin: -50px 0 0 40px">
											<span style="font-size: 14px; color: #fa6400; z-index: 999">
												-0.84k |&nbsp;
											</span>
											<span style="font-size: 14px">相比较上一周</span>
										</div>
									</div>
								</div>
							</li>
							<li class="top-data-li clearfix">
								<div class="float_left">
									<p class="card-label">
										<i class="el-icon-s-help card-dot" style="color: #f7b500"></i>
										<span class="card-label-text">应付账款</span>
										<el-tooltip effect="dark" content="当前所有的应付款总额" placement="top-start">
											<i class="el-icon-question mark"></i>
										</el-tooltip>
									</p>
									<p class="card-des">
										<i class="el-icon-edit" style="color: transparent"></i>
										当前所有的应付款总额
									</p>
									<p class="card-num">
										<i class="el-icon-edit" style="font-size: 13px; color: transparent"></i>
										<span class="money">
											{{
                        $_common.formattedNumber(
                          aggregateStatistics.totalShouldPay
                        )
                      }}
										</span>
									</p>
								</div>
								<div v-if="flag" class="float_right" style="padding: 29px 20px 0 0">
									<div style="width: 199px; height: 57px">
										<chart2 :chart-data="chart_data"></chart2>
										<div style="margin: -50px 0 0 40px">
											<span style="font-size: 14px; color: #fa6400">
												-0.21k |&nbsp;
											</span>
											<span style="font-size: 14px">相比较上一周</span>
										</div>
									</div>
								</div>
							</li>
							<li class="top-data-li clearfix">
								<div class="float_left">
									<p class="card-label">
										<i class="el-icon-s-help card-dot" style="color: #45cdaf"></i>
										<span class="card-label-text">库存商品数</span>
										<el-tooltip effect="dark" content="仓库总共有的多少种商品" placement="top-start">
											<i class="el-icon-question mark"></i>
										</el-tooltip>
									</p>
									<p class="card-des">
										<i class="el-icon-edit" style="color: transparent"></i>
										仓库总共有的多少种商品
									</p>
									<p class="card-num">
										<i class="el-icon-edit" style="font-size: 13px; color: transparent"></i>
										<span class="money">
											{{
                        $_common.formatNub(
                          aggregateStatistics.numberOfProductsInStock,
                          2
                        ) || 0
                      }}
										</span>
									</p>
								</div>
								<div v-if="flag" class="float_right" style="padding: 29px 20px 0 0">
									<div style="width: 199px; height: 57px">
										<chart2 :chart-data="chart_data"></chart2>
										<div style="margin: -50px 0 0 40px">
											<span style="font-size: 14px; color: #6dd400">
												+0.02k |&nbsp;
											</span>
											<span style="font-size: 14px">相比较上一周</span>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</el-col>
				<el-col :span="8" style="padding: 0">
					<div v-if="$accessCheck($Access.overview)" class="ph">
						<div slot="header" class="clearfix">
							<div class="float_left">
								<!--                <vab-remix-icon icon-class="airplay-line"></vab-remix-icon>-->
								<span class="ph_title">经营概况</span>
								<p class="ph_tip">更新时间（{{ nowTime }}）</p>
							</div>
							<div v-if="flag" class="float_right ph-radio-group">
								<span class="ph-btn" :class="[
                    is_all_survey_shop || !servey_shop_name ? 'ph-on' : '',
                  ]" @click="rankingSearch('is_all_survey_shop', 'survey')">
									全店
								</span>
								<span class="radio-line">|</span>
								<span class="ph-btn" :class="[servey_shop_name ? 'ph-on' : '']"
									@click="openShop('survey')">
									{{ servey_shop_name || "所有店铺" }}
									<i class="el-icon-caret-bottom"></i>
								</span>
							</div>
						</div>
						<div class="module-cont">
							<ul class="clearfix">
								<li class="float_left num-item">
									<div class="clearfix num-item-in">
										<div :style="{
                        background: '#37B17D',
                      }" class="iconfont icon-jine1 num-item-icon float_left"></div>
										<div class="float_left num-item-right">
											<p class="num-item-p">
												{{
                          $_common.formatNub(businessOverview.orderTotalMoney)
                        }}
											</p>
											<p class="text-item-p">
												下单金额(元)
												<el-tooltip effect="dark" content="今日所有订单的总金额，包含已取消订单的金额"
													placement="top-start">
													<i class="el-icon-question ico"></i>
												</el-tooltip>
											</p>
										</div>
									</div>
								</li>
								<li class="float_left num-item">
									<div class="clearfix num-item-in">
										<span :style="{
                        background: '#FFAD00',
                      }" class="iconfont icon-jine1 num-item-icon float_left"></span>
										<div class="float_left num-item-right">
											<p class="num-item-p">
												{{
                          $_common.formatNub(
                            businessOverview.orderConfirmedMoney,
                            2
                          ) || 0
                        }}
											</p>
											<p class="text-item-p">
												营业额(元)
												<el-tooltip effect="dark" content="今日实际已出库商品的总金额，不包含已退货的订单商品金额"
													placement="top-start">
													<i class="el-icon-question ico"></i>
												</el-tooltip>
											</p>
										</div>
									</div>
								</li>
								<li class="float_left num-item">
									<div class="clearfix num-item-in">
										<span :style="{
                        background: '#FE6E4B',
                      }" class="iconfont icon-jine1 num-item-icon float_left"></span>
										<div class="float_left num-item-right">
											<p class="num-item-p">
												{{
                          $_common.formatNub(
                            businessOverview.todayGrossProfit,
                            2
                          ) || 0
                        }}
											</p>
											<p class="text-item-p">
												今日毛利(元)
												<el-tooltip effect="dark" content="今日出库金额 - 今日出库成本 = 今日毛利"
													placement="top-start">
													<i class="el-icon-question ico"></i>
												</el-tooltip>
											</p>
										</div>
									</div>
								</li>
								<li class="float_left num-item">
									<div class="clearfix num-item-in">
										<span :style="{
                        background: '#FF840C',
                      }" class="iconfont icon-jine1 num-item-icon float_left"></span>
										<div class="float_left num-item-right">
											<p class="num-item-p">
												{{
                          $_common.formatNub(
                            businessOverview.todayReceivedMoney,
                            2
                          ) || 0
                        }}
											</p>
											<p class="text-item-p">
												今日收款(元)
												<el-tooltip effect="dark" content="今日已审核收款单总金额" placement="top-start">
													<i class="el-icon-question ico"></i>
												</el-tooltip>
											</p>
										</div>
									</div>
								</li>
								<li class="float_left num-item">
									<div class="clearfix num-item-in">
										<span :style="{
                        background: '#5A739A',
                      }" class="iconfont icon-jine1 num-item-icon float_left"></span>
										<div class="float_left num-item-right">
											<p class="num-item-p">
												{{
                          $_common.formatNub(
                            businessOverview.todayNewCustomerNum,
                            2
                          ) || 0
                        }}
											</p>
											<p class="text-item-p">
												今日新增客户
												<el-tooltip effect="dark" content="今日新增已审核的客户总数" placement="top-start">
													<i class="el-icon-question ico"></i>
												</el-tooltip>
											</p>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div v-if="$accessCheck($Access.overview)" class="ph" style="margin-top: 10px">
						<div slot="header" class="clearfix">
							<div class="float_left">
								<!--                <vab-remix-icon icon-class="airplay-line"></vab-remix-icon>-->
								<span class="ph_title">订单概况</span>
								<p class="ph_tip">更新时间（{{ nowTime }}）</p>
							</div>
							<div class="float_right ph-radio-group">
								<span class="ph-btn" :class="[
                    is_all_survey_shop || !servey_shop_name ? 'ph-on' : '',
                  ]" @click="rankingSearch('is_all_survey_shop', 'survey')">
									全店
								</span>
								<span class="radio-line">|</span>
								<span class="ph-btn" :class="[servey_shop_name ? 'ph-on' : '']"
									@click="openShop('survey')">
									{{ servey_shop_name || "所有店铺" }}
									<i class="el-icon-caret-bottom"></i>
								</span>
							</div>
						</div>
						<div>
							<ul class="clearfix">
								<li class="float_left num-item">
									<div class="clearfix num-item-in">
										<span class="iconfont icon-dingdan1 num-item-icon float_left"></span>
										<div class="float_left num-item-right">
											<p class="num-item-p">
												{{
                          $_common.formatNub(
                            businessOverview.todayConfirmedOrderNum,
                            2
                          ) || 0
                        }}
											</p>
											<p class="text-item-p">
												今日订单
												<el-tooltip effect="dark" content="今日所有订单总数" placement="top-start">
													<i class="el-icon-question ico"></i>
												</el-tooltip>
											</p>
										</div>
									</div>
								</li>
								<li class="float_left num-item">
									<div class="clearfix num-item-in">
										<span :style="{
                        background: '#FFAD00',
                      }" class="iconfont icon-dingdan1 num-item-icon float_left"></span>
										<div class="float_left num-item-right">
											<p class="num-item-p">
												{{
                          $_common.formatNub(
                            businessOverview.todayConfirmedOrderCustomerNum,
                            2
                          ) || 0
                        }}
											</p>
											<p class="text-item-p">
												下单客户
												<el-tooltip effect="dark" content="今日下过单的客户总数" placement="top-start">
													<i class="el-icon-question ico"></i>
												</el-tooltip>
											</p>
										</div>
									</div>
								</li>
								<li class="float_left num-item">
									<div class="clearfix num-item-in">
										<span :style="{
                        background: '#FE6E4B',
                      }" class="iconfont icon-dingdan1 num-item-icon float_left"></span>
										<div class="float_left num-item-right">
											<p class="num-item-p">
												{{
                          $_common.formatNub(
                            businessOverview.customerAverageMoney,
                            2
                          ) || 0
                        }}
											</p>
											<p class="text-item-p">
												今日客单价
												<el-tooltip effect="dark" content="今日客单价 = 今日销售总额 ÷ 今日订单笔数"
													placement="top-start">
													<i class="el-icon-question ico"></i>
												</el-tooltip>
											</p>
										</div>
									</div>
								</li>
								<li class="float_left num-item">
									<div class="clearfix num-item-in">
										<span :style="{
                        background: '#FF840C',
                      }" class="iconfont icon-dingdan1 num-item-icon float_left"></span>
										<div class="float_left num-item-right">
											<p class="num-item-p">
												{{
                          $_common.formatNub(
                            businessOverview.orderNumOfNotOutOfStock,
                            2
                          ) || 0
                        }}
											</p>
											<p class="text-item-p">
												未出库订单
												<el-tooltip effect="dark" content="今日还未出库审核的出库单总数"
													placement="top-start">
													<i class="el-icon-question ico"></i>
												</el-tooltip>
											</p>
										</div>
									</div>
								</li>
								<li class="float_left num-item">
									<div class="clearfix num-item-in">
										<span :style="{
                        background: '#fe6b58',
                      }" class="iconfont icon-dingdan1 num-item-icon float_left"></span>
										<div class="float_left num-item-right">
											<p class="num-item-p">
												{{
                          $_common.formatNub(
                            businessOverview.todayCanceledOrder,
                            2
                          ) || 0
                        }}
											</p>
											<p class="text-item-p">
												今日取消订单
												<el-tooltip effect="dark" content="今日已取消的订单总数" placement="top-start">
													<i class="el-icon-question ico"></i>
												</el-tooltip>
											</p>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="ph" style="height: 488px">
						<div class="ph-radio-group ranking-sel">
							<span class="ph-btn" :class="[parseInt(ranking_sel) === 1 ? 'ph-on' : '']"
								@click="getData('1')">
								销量
							</span>
							<span class="radio-line">|</span>
							<span class="ph-btn" :class="[parseInt(ranking_sel) === 2 ? 'ph-on' : '']"
								@click="getData('2')">
								销额/元
							</span>
						</div>
						<div slot="header" class="clearfix">
							<div class="float_left" style="cursor: pointer">
								<el-dropdown @command="handleClick">
									<span class="el-dropdown-link">
										<span class="ph_title">
											{{
                        ranking_on === "cateTop"
                          ? "类目排行"
                          : ranking_on === "goodsTop"
                          ? "商品排行"
                          : ranking_on === "customerTop"
                          ? "客户排行"
                          : "供应商排行"
                      }}
										</span>
										<i class="el-icon-arrow-down el-icon--right"></i>
									</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item command="cateTop">
											类目排行
										</el-dropdown-item>
										<el-dropdown-item command="goodsTop">
											商品排行
										</el-dropdown-item>
										<el-dropdown-item command="customerTop">
											客户排行
										</el-dropdown-item>
										<el-dropdown-item command="supplierTop">
											供应商排行
										</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
								<br />
								<span class="ph_tip">（今日前8名）</span>
							</div>
							<div v-if="ranking_on === 'cateTop'" class="float_right ph-radio-group">
								<span class="ph-btn" :class="[is_all_cate_shop || !cate_shop_name ? 'ph-on' : '']"
									@click="rankingSearch('is_all_cate_shop', 'cate')">
									全店
								</span>
								<span class="radio-line">|</span>
								<span class="ph-btn" :class="[cate_shop_name ? 'ph-on' : '']" @click="openShop('cate')">
									{{ cate_shop_name || "所有店铺" }}
									<i class="el-icon-caret-bottom"></i>
								</span>
							</div>
							<div v-if="ranking_on === 'goodsTop'" class="float_right ph-radio-group">
								<span class="ph-btn" :class="[
                    is_all_goods_shop || !goods_shop_name ? 'ph-on' : '',
                  ]" @click="rankingSearch('is_all_goods_shop', 'goods')">
									全店
								</span>
								<span class="radio-line">|</span>
								<span class="ph-btn" :class="[cate_shop_name ? 'ph-on' : '']"
									@click="openShop('goods')">
									{{ cate_shop_name || "所有店铺" }}
									<i class="el-icon-caret-bottom"></i>
								</span>
							</div>
							<div v-if="ranking_on === 'supplierTop'" class="float_right ph-radio-group">
								<span class="ph-btn" :class="[
                    is_all_supplier_shop || !supplier_shop_name ? 'ph-on' : '',
                  ]" @click="rankingSearch('is_all_supplier_shop', 'supplier')">
									全店
								</span>
								<span class="radio-line">|</span>
								<span class="ph-btn" :class="[supplier_shop_name ? 'ph-on' : '']"
									@click="openShop('supplier')">
									{{ supplier_shop_name || "所有店铺" }}
									<i class="el-icon-caret-bottom"></i>
								</span>
							</div>
						</div>
						<div v-if="ranking_on === 'cateTop'">
							<template v-if="ranking.categoryRanking">
								<div v-if="!ranking.categoryRanking.length" class="no-data">
									<img :src="require('@/assets/no-data.png')" alt="" />
									<p>暂无数据</p>
								</div>
							</template>
							<div v-else style="padding-top: 15px">
								<span v-for="(item, index) in ranking.categoryRanking" :key="index"
									style="display: flex; margin-top: 20px">
									<h4 style="margin: -5px 30px 0 0">
										<span style="color: gray; font-style: italic; margin-right: 5px">
											0{{ index + 1 }}
										</span>
										{{ item.categoryName }}
										<span style="color: transparent">哈哈</span>
									</h4>
									<el-progress :text-inside="true" :stroke-width="10" :percentage="item.percent"
										:show-text="false"></el-progress>
									<span class="ph-num-text">
										{{ $_common.formatNub(item.numberOrMoney, 2) || 0 }}
									</span>
								</span>
							</div>
						</div>
						<!--            商品排行-->
						<div v-if="ranking_on === 'goodsTop'">
							<template v-if="ranking.goodsRanking">
								<div v-if="!ranking.goodsRanking.length" class="no-data">
									<img :src="require('@/assets/no-data.png')" alt="" />
									<p>暂无数据</p>
								</div>
							</template>
							<div v-else style="padding-top: 15px">
								<span v-for="(item, index) in ranking.goodsRanking" :key="index"
									style="display: flex; margin-top: 20px">
									<h4 style="margin: -5px 30px 0 0">
										<span style="color: gray; font-style: italic; margin-right: 5px">
											0{{ index + 1 }}
										</span>
										{{ item.goodsName }}
										<span style="color: transparent">哈哈</span>
									</h4>
									<el-progress :text-inside="true" :stroke-width="10" :percentage="item.percent"
										:show-text="false"></el-progress>
									<span class="ph-num-text">
										{{ $_common.formatNub(item.numberOrMoney, 2) || 0 }}
									</span>
								</span>
							</div>
						</div>
						<!--            客户排行-->
						<div v-if="ranking_on === 'customerTop'">
							<template v-if="ranking.customerRanking">
								<div v-if="!ranking.customerRanking.length" class="no-data">
									<img :src="require('@/assets/no-data.png')" alt="" />
									<p>暂无数据</p>
								</div>
							</template>
							<div v-else style="padding-top: 15px">
								<span v-for="(item, index) in ranking.customerRanking" :key="index"
									style="display: flex; margin-top: 20px">
									<h4 style="margin: -5px 30px 0 0">
										<span style="color: gray; font-style: italic; margin-right: 5px">
											0{{ index + 1 }}
										</span>
										{{ item.customerName }}
										<span style="color: transparent">哈哈</span>
									</h4>
									<span class="ph-num-text">
										{{ $_common.formatNub(item.numberOrMoney, 2) || 0 }}
									</span>
								</span>
							</div>
						</div>
						<div v-if="ranking_on === 'supplierTop'">
							<template v-if="ranking.supplierRanking">

								<div v-if="!ranking.supplierRanking.length" class="no-data">
									<img :src="require('@/assets/no-data.png')" alt="" />
									<p>暂无数据</p>
								</div>
							</template>
							<div v-else style="padding-top: 15px">
								<span v-for="(item, index) in ranking.supplierRanking" :key="index"
									style="display: flex; margin-top: 20px">
									<h4 style="margin: -5px 30px 0 0">
										<span style="color: gray; font-style: italic; margin-right: 5px">
											0{{ index + 1 }}
										</span>
										{{ item.supplierName }}
										<span style="color: transparent">哈哈</span>
									</h4>
									<span class="ph-num-text">
										{{ $_common.formatNub(item.numberOrMoney, 2) || 0 }}
									</span>
								</span>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="margin-bottom: 20px">
				<el-col :span="8">
					<div v-if="$accessCheck($Access.overview)">
						<ul class="top-data-ul">
							<li class="top-data-li clearfix">
								<div class="float_left">
									<p class="card-label">
										<i class="el-icon-s-help card-dot" style="color: #b620e0"></i>
										<span class="card-label-text">库存总金额</span>
										<el-tooltip effect="dark" content="当前库存总金额" placement="top-start">
											<i class="el-icon-question mark"></i>
										</el-tooltip>
									</p>
									<p class="card-des" style="width: 110px">
										<i class="el-icon-edit" style="color: transparent"></i>
										当前库存总金额
									</p>
									<p class="card-num">
										<i class="el-icon-edit" style="font-size: 13px; color: transparent"></i>
										<span class="money">
											{{
                        $_common.formattedNumber(
                          aggregateStatistics.totalMoneyOfInventory
                        )
                      }}
										</span>
									</p>
								</div>
								<div v-if="flag" class="float_right" style="padding: 29px 20px 0 0">
									<div style="width: 199px; height: 57px">
										<chart2 :chart-data="chart_data"></chart2>
										<div style="margin: -50px 0 0 40px">
											<span style="font-size: 14px; color: #fa6400">
												-99.0k |&nbsp;
											</span>
											<span style="font-size: 14px">相比较上一周</span>
										</div>
									</div>
								</div>
							</li>
							<li class="top-data-li clearfix">
								<div class="float_left">
									<p class="card-label">
										<i class="el-icon-s-help card-dot" style="color: #32c5ff"></i>
										<span class="card-label-text">客户数</span>
										<el-tooltip effect="dark" content="当前客户总数" placement="top-start">
											<i class="el-icon-question mark"></i>
										</el-tooltip>
									</p>
									<p class="card-des">
										<i class="el-icon-edit" style="color: transparent"></i>
										当前客户总数
										<br />
										<i class="el-icon-edit" style="color: transparent"></i>
										<template
											v-if='aggregateStatistics.customerTotalNum'>有效客户：{{$_common.formatNub(aggregateStatistics.customerTotalNum.valid, 2) || 0}}</template>
										<br />
										<i class="el-icon-edit" style="color: transparent"></i>
										<template
											v-if='aggregateStatistics.customerTotalNum'>无效客户：{{$_common.formatNub(aggregateStatistics.customerTotalNum.void,2) || 0}}</template>
									</p>
									<p class="card-num">
										<i class="el-icon-edit" style="font-size: 13px; color: transparent"></i>
										<span class="money">
											<template
												v-if='aggregateStatistics.customerTotalNum'>{{$_common.formatNub(aggregateStatistics.customerTotalNum.totalCount,2) || 0}}</template>
										</span>
									</p>
								</div>
								<div v-if="flag" class="float_right" style="padding: 29px 20px 0 0">
									<div style="width: 199px; height: 57px">
										<chart2 :chart-data="chart_data"></chart2>
										<div style="margin: -50px 0 0 40px">
											<span style="font-size: 14px; color: #6dd400">
												+0.01k |&nbsp;
											</span>
											<span style="font-size: 14px">相比较上一周</span>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</el-col>
				<el-col :span="16" style="padding: 0">
					<div class="ph" style="height: 330px">
						<div slot="header">
							<span>
								<!--                <vab-remix-icon icon-class="line-chart-line"></vab-remix-icon>-->
								<span class="ph_title">近7日交易趋势</span>
							</span>
						</div>

						<div style="padding-bottom: 20px">
							<chart1 :time-data="time_data" :goods-num="goodsNum_data" :order-num="orderNum_data"
								:order-money="orderMoney_data"></chart1>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<GoodsChooseShop v-if="sel_shop" :is-check="false" :dialog-visible="sel_shop" @close="sel_shop = false"
			@confirm="shopConfirm" />
	</div>
</template>

<script>
	import GoodsChooseShop from "@/component/goods/GoodsChooseShop.vue";
	import {
		Enterprise
	} from "@/api/user";
	import {
		getSystemSettingsInfo
	} from "@/api/System";
	import Chart1 from "./components/Chart1";
	import Chart2 from "./components/Chart2";
	export default {
		name: "DriveCabin",
		components: {
			GoodsChooseShop,
			Chart1,
			Chart2,
		},
		data() {
			return {
				flag: false,
				//访问量
				options: {
					grid: {
						top: "4%",
						left: "2%",
						right: "4%",
						bottom: "0%",
						containLabel: true,
					},
					xAxis: [{
						type: "category",
						boundaryGap: false,
						data: [],
						axisTick: {
							alignWithLabel: true,
						},
					}, ],
					yAxis: [{
						type: "value",
					}, ],
					series: [{
						name: "访问量",
						type: "line",
						data: [],
						smooth: true,
						areaStyle: {},
					}, ],
				},
				nowTime: "",
				is_all_supplier_shop: true,
				is_all_survey_shop: true,
				is_all_goods_shop: true,
				is_all_cate_shop: true,
				supplier_shop_name: "",
				goods_shop_name: "",
				cate_shop_name: "",
				servey_shop_name: "",
				sear_shop_type: "",
				ranking_sel: "1",
				sel_shop: false,
				businessOverviewShopId: "",
				categoryRankingShopId: "",
				goodsRankingShopId: "",
				supplierRankingShopId: "",
				aggregateStatistics: {},
				ranking: {
					categoryRanking: [],
					goodsRanking: [],
					customerRanking: [],
					supplierRanking: [],
				},
				time_data: [],
				goodsNum_data: [],
				orderMoney_data: [],
				orderNum_data: [],
				businessOverview: {},
				btn_list: [{
						label: "订单列表",
						path: "/order/manageO/orderQuery",
						icon: "icon-weibiaoti--",
						color: "linear-gradient(270deg,#4B9EFF 0%,#3D89FF 100%)",
						access: "newOrderList",
					},
					{
						label: "代客下单",
						path: "/order/manageO/OrderAdd",
						icon: "icon-xiaoshouzhengce",
						color: "linear-gradient(270deg,#739EFF 0%,#3F64FF 100%)",
						access: "saleOrderList",
					},
					{
						label: "自提订单",
						path: "/order/manageO/selfOrder?type=2",
						icon: "icon-zitiraising",
						color: "linear-gradient(270deg,#73CDFF 0%,#3F9FFF 100%)",
						access: "selfOrder",
					},
					{
						label: "商品管理",
						path: "/goods/sale/PublishGoods",
						icon: "icon-shangpin2",
						color: "linear-gradient(270deg,#5AA4FF 0%,#3884FF 100%)",
						access: "PublishGoods",
					},
					{
						label: "商品调价",
						path: "/goods/sale/PriceTable",
						icon: "icon-icon_tiaojiaadjust",
						color: "linear-gradient(270deg,#48C9DD 0%,#36B5CF 100%)",
						access: "PriceTable",
					},
					{
						label: "库存查询",
						path: "/stock/WarehouseAdmin/query",
						icon: "icon-kucuntongji",
						color: "linear-gradient(270deg,#5AA4FF 0%,#3884FF 100%)",
						access: "query",
					},
					{
						label: "订单出库",
						path: "/stock/OutIn/outgoing",
						icon: "icon-chuku1",
						color: "linear-gradient(270deg,#739EFF 0%,#3F64FF 100%)",
						access: "InventoryOut",
					},
					{
						label: "财务收款",
						path: "/Finance/Receivable/ReceiptList",
						icon: "icon-caiwu",
						color: "linear-gradient(270deg,#C26DD2 0%,#8E3BA6 100%)",
						access: "ReceiptListGetAllReceived",
					},
					// 预览商城--小程序二维码弹窗
					// {
					//   label: '预览商城',
					//   path: '/',
					//   icon: 'icon-saomiao',
					//   color: 'rgb(18,186,123)'
					// }
					// {
					//   label: '开店指南',
					//   path: '/',
					//   icon: 'icon-zhinan',
					//   color: '#409EFF'
					// }
				],
				top_btn_list: [],
				wxCodeImg: "",
				ranking_on: "cateTop",
			};
		},
		created() {
			this.nowTime = this.$_common.formatDate(new Date().getTime());
			this.getData("1");
			this.getSystemSettingsInfo();
		},
		mounted() {
			// 常用功能权限判断
			this.top_btn_list = this.btn_list.filter((item) => {
				return this.$accessCheck(this.$Access[item.access]);
			});
		},
		methods: {
			handleClick(command) {
				this.ranking_on = command;
			},
			// 获取小程序二维码详情ReceiptList
			async getSystemSettingsInfo() {
				if (!this.$accessCheck(this.$Access.WxCodeSetGetSystemSettingsInfo)) {
					return;
				}
				const data = await getSystemSettingsInfo(1);

				this.wxCodeImg =
					data.content && data.content.img ? data.content.img : "";
			},

			async getData(val) {
				if (!this.$accessCheck(this.$Access.overview)) {
					return;
				}
				if (val) {
					this.ranking_sel = val;
				}

				const {
					data
				} = await Enterprise({
					ranking: this.ranking_sel, // "1销量排行 2销额排行",
					businessOverviewShopId: this.businessOverviewShopId, // "经营概况按店铺筛选：为空则筛选全店",
					categoryRankingShopId: this.categoryRankingShopId, // "类目排行按店铺筛选：为空则筛选全店",
					goodsRankingShopId: this.goodsRankingShopId, // "商品排行按店铺筛选：为空则筛选全店",
					supplierRankingShopId: this.supplierRankingShopId, // 供应商排行按店铺筛选：为空则筛选全店"
				});
				if (data.aggregateStatistics) {
					this.aggregateStatistics = data.aggregateStatistics;
					this.ranking = data.ranking;
					this.businessOverview = data.businessOverview;
					if (this.time_data) {
						if (this.time_data.length) {
							this.time_data = [];
							this.goodsNum_data = [];
							this.orderMoney_data = [];
							this.orderNum_data = [];
						}
					}
					this.$nextTick(() => {
						data.chartData.forEach((value) => {
							this.time_data.push(value.date);
							this.goodsNum_data.push(value.goodsNum);
							this.orderMoney_data.push(value.orderMoney);
							this.orderNum_data.push(value.orderNum);
						});
					});
				}
			},
			// 全店切换
			rankingSearch(val, tag) {
				this[val] = !this[val];
				if (this[val]) {
					switch (tag) {
						case "supplier":
							this.supplier_shop_name = "";
							this.supplierRankingShopId = "";
							break;
						case "goods":
							this.goods_shop_name = "";
							this.goodsRankingShopId = "";
							break;
						case "cate":
							this.cate_shop_name = "";
							this.categoryRankingShopId = "";
							break;
						case "survey":
							this.servey_shop_name = "";
							this.businessOverviewShopId = "";
							break;
					}
					this.getData();
				}
			},
			// 商铺搜索
			shopConfirm(row) {
				switch (this.sear_shop_type) {
					case "supplier":
						this.supplier_shop_name = row[0].name;
						this.supplierRankingShopId = row[0].id;
						break;
					case "goods":
						this.goods_shop_name = row[0].name;
						this.goodsRankingShopId = row[0].id;
						break;
					case "cate":
						this.cate_shop_name = row[0].name;
						this.categoryRankingShopId = row[0].id;
						break;
					case "survey":
						this.servey_shop_name = row[0].name;
						this.businessOverviewShopId = row[0].id;
						break;
				}
				this.getData();
			},
			openShop(type) {
				this.sear_shop_type = type;
				this.sel_shop = true;
				this.is_all_cate_shop = false;
			},
		},
	};
</script>
<style scoped lang="scss">
	.box {
		background: #f5f8fa;
	}

	.top-fn-view {
		padding: 0 24px;
		background: #ffffff;
		margin-bottom: 16px;
	}

	.num-item {
		width: 33.333%;

		.num-item-in {
			padding: 10px 0;
		}

		.num-item-right {
			width: calc(100% - 46px);
		}
	}

	.num-item-icon {
		width: 32px;
		height: 32px;
		line-height: 32px;
		border-radius: 100%;
		color: #fff;
		text-align: center;
		margin-right: 12px;
		transform: translateY(12px);
		font-size: 16px;
		background: #37b17d;
	}

	.num-item-p {
		font-size: 20px;
		font-weight: 500;
		color: #24365c;
		margin-top: 10px;
	}

	.num-item-des {
		color: #666666;
		font-size: 12px;
	}

	.text-item-p {
		font-size: 14px;
		font-weight: 400;
		color: #99a0b0;

		.ico {
			color: rgb(192, 197, 207);
		}
	}

	.text-item-p i {
		color: #666666;
		font-size: 12px;
	}

	.module-name {
		font-size: 15px;
		color: #333333;
		font-weight: bold;
	}

	.searchh-view {
		transform: translateY(5px);
		padding-right: 20px;
	}

	/*  新页面 2020-05-19*/
	.tit-view {
		padding: 20px;
	}

	.top-data-ul {
		font-size: 16px;
	}

	.top-data-li {
		min-width: 300px;
		min-height: 158px;
		padding: 12px 17px 12px 17px;
		border-radius: 6px;
		margin-bottom: 10px;
		background-color: #fff;
		box-shadow: 0 2px 6px 0 rgba(76, 80, 88, 0.16);
	}

	.card-label {
		padding-bottom: 4px;
		font-weight: 700;
		font-size: 16px;
		position: relative;
	}

	.card-dot {
		color: #32c5ff;
		font-size: 10px;
	}

	.card-label-text {
		margin-right: 10px;
		margin-left: 6px;
	}

	.card-num {
		font-size: 20px;
		color: #24365c;
		margin-top: 50px;
	}

	.card-des {
		font-size: 12px;
		color: #848890;
	}

	.nav-btn-ul {
		display: flex;
		padding: 20px 0;
	}

	.nav-btn-li {
		flex: 10;
		cursor: pointer;
		font-size: 16px;

		.nav-btn-icon {
			display: inline-block;
			width: 48px;
			height: 48px;
			text-align: center;
			color: #fff;
			background-color: #409eff;
			border-radius: 100%;
			line-height: 48px;
			font-size: 24px;
		}
	}

	.ph {
		background-color: #fff;
		height: 240px;
		padding: 12px 17px 12px 17px;
		border-radius: 6px;
		box-shadow: 0px 2px 6px 0px rgba(76, 80, 88, 0.16);
		position: relative;

		.ranking-sel {
			position: absolute;
			left: 130px;
			top: 14px;
		}

		h4 {
			display: inline-block;
			width: 120px;
		}

		.ph-num-text {
			font-size: 16px;
			font-weight: 600;
			color: #24365c;
			margin: -8px 0 0 10px;
		}
	}

	.ph-radio-group {
		font-size: 14px;
		cursor: pointer;
	}

	.radio-line {
		color: #ddd;
		padding: 0 5px;
	}

	.ph-btn:hover {
		color: #1c8fef;
	}

	.ph-on {
		color: #1c8fef;
	}

	.ph-head {
		padding-bottom: 10px;
	}

	.ph-label {
		font-size: 14px;
	}

	.ph_title {
		font-weight: 700;
		font-size: 16px;
		color: #1b2d54;
	}

	.ph_tip {
		color: #848890;
		font-size: 12px;
		padding-top: 4px;
	}

	.no-data {
		text-align: center;
		padding-top: 100px;
		/*padding-top: 20px;*/
	}

	.no-data img {
		width: 120px;
		padding-bottom: 10px;
	}

	.ranking-tr {
		line-height: 44px;
	}

	.ranking-sort {
		display: inline-block;
		width: 20px;
		height: 20px;
		line-height: 20px;
		border-radius: 100%;
		text-align: center;
	}

	.ranking-sort-o {
		color: #f788a3;
		font-size: 12px;
		background: #faeceb;
	}

	.ranking-sort-t {
		color: #fabb79;
		font-size: 12px;
		background: #fff6e3;
	}

	.ranking-sort-three {
		color: #4ec1cd;
		font-size: 12px;
		background: #e0f9f1;
	}

	.el-progress {
		width: 60%;
	}

	.mark {
		color: #c0c5cf;
		margin-top: 3px;
	}

	.money {
		font-weight: 500;
		font-size: 20px;
	}
</style>
