<template>
	<a-card :bordered="false" :body-style="{ 'padding-bottom': '20px' }" class="mb-2">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="日期" name="consumptionTime">
						<a-date-picker
							style="width: 100%;"
							v-model:value="searchFormState.consumptionTime"
							show-date
							format="YYYY-MM-DD"
							placeholder="请选择日期"

						/>
<!--@change="onRangeChange"-->
					</a-form-item>
				</a-col>

				<a-col :span="6">
					<a-button type="primary" html-type="submit" @click="refresh()">查询</a-button>
					<a-button style="margin: 0 8px" @click="reset">重置</a-button>
<!--					<a-button @click="exportTotal">
						<template #icon>
							<export-outlined/>
						</template>
						导出
					</a-button>-->
				</a-col>
			</a-row>
		</a-form>
	</a-card>
	<a-row>
		<a-col :span="8" style="margin-bottom: 10px;">
			<a-card style="height: 180px">
				<a-statistic title="当日充值金额" :value="payMoney"/>
			</a-card>
		</a-col>
		<a-col :span="8" style="margin-bottom: 10px; margin-left: 20px">
			<a-card style="height: 180px">
				<a-statistic title="当日订单数" :value="payCount"/>
			</a-card>
		</a-col>
		<a-col :span="7" style="margin-bottom: 10px; margin-left: 20px;">
			<a-card style="height: 180px">
				<a-statistic title="充值金额较上日" :value-style="{ color: '#3f8600' }" :value="compareMoney" v-if="payMoneyFlag=='up'">
					<template #suffix>
						<arrow-up-outlined/>
					</template>
				</a-statistic>
				<a-statistic title="充值金额较上日" :value-style="{ color: '#cf1322' }" :value="compareMoney" v-else>
					<template #suffix>
						<arrow-down-outlined />
					</template>
				</a-statistic>
				<a-statistic title="订单数较上日" :value-style="{ color: '#3f8600' }" :value="compareOrder" v-if="payOrderFlag=='up'">
					<template #suffix>
						<arrow-up-outlined/>
					</template>
				</a-statistic>
				<a-statistic title="订单数较上日" :value-style="{ color: '#cf1322' }" :value="compareOrder" v-else>
					<template #suffix>
						<arrow-down-outlined/>
					</template>
				</a-statistic>
			</a-card>
		</a-col>
	</a-row>

	<a-card :bordered="false">

		<div style="display:flex;justify-content:space-between" id="totalDiv">
			<span id="totalSpan">
				<left-outlined :style="{fontSize:'13px',color:'#C9C9C9',cursor:'pointer'}" @click="prePage" v-show="leftFlag"/>
			</span>
			<span>
				<right-outlined style="width:1.5em;height:1.5em;color:#C9C9C9;cursor:pointer" @click="nextPage" v-show="rightFlag"/>
			</span>
		</div>


	</a-card>

	<a-card :bordered="false" :body-style="{ 'padding-bottom': '20px' }" class="mb-2">
		<div id="main2" style="height: 340px"></div>
	</a-card>

</template>

<script setup name="customerinfo">
	import bizOrgApi from '@/api/biz/bizOrgApi'
	import downloadUtil from '@/utils/downloadUtil'
	import consumptionRecordApi from '@/api/biz/consumptionRecordApi'
	import bizCouponRecordApi from '@/api/biz/bizCouponRecordApi'
	import bizUserApi from '@/api/biz/bizUserApi'
	import { onMounted } from 'vue'
	import orgApi from '@/api/biz/bizOrgApi'
	import * as echarts from 'echarts'
	import dayjs from 'dayjs'

	//消费
	const consumerCount = ref(0)
	const consumerOrderCount = ref(0)
	//充值统计数量
	const rechargeCount = ref(0)
	const rechargeOrderCount = ref(0)
	//会员
	const userCount = ref(0)
	//账户余额&代金券余额
	const accountBalance = ref(0)
	const voucherBalance = ref(0)
	const payMoneyFlag = ref()
	const payOrderFlag = ref()

	const payMoney = ref(0)
	const payCount = ref(0)
	const compareMoney = ref(0)
	const compareOrder = ref(0)

	const treeData = ref([])
	const activeKey = ref('1');

	const searchFormRef = ref()
	let searchFormState = reactive({})

	const data1 = ref([])
	const data2 = ref([])
	const data3 = ref([])
	const data4 = ref([])
	const data5 = ref([])

	const dayTime = ref()
	const zhibiao = ref()
	const fuhe = ref()
	const typeTitle = ref()

	//三条数据一页
	const echartsPage = ref(7)
	//当前显示页数
	const currentPage = ref(1)
	// 共有多少页
	const totalPage = ref(0)

	const leftFlag = ref(false)
	const rightFlag = ref(false)




	onMounted(() => {
		//金额汇总
		loadData1();
		/*loadData3();
		clickTab()*/
		// 获取机构树并加入顶级
		bizOrgApi.orgTreeSelector().then((res) => {
			treeData.value = res
		})
		//折线图
		customer();
		//各个门店消费统计
		loadData4()
	})

	const onRangeChange = (value, dateString) => {
		console.log('Formatted Selected Time: ', dateString);
		searchFormState.startTime = dateString[0]
		searchFormState.endTime = dateString[1]
		delete searchFormState.times
	};

	const table = ref()
	const formRef = ref()
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const columns1 = [
		{
			title: '会员姓名',
			dataIndex: 'userName',
			align: 'center',
		},
		{
			title: '会员手机号',
			dataIndex: 'phone',
			align: 'center',
		},
		{
			title: '消费操作',
			dataIndex: 'consumptionOperate',
			align: 'center'
		},
		{
			title: '消费金额',
			dataIndex: 'consumptionMoney',
			align: 'center'
		},
		{
			title: '账户糕点',
			dataIndex: 'newAccountBalance',
			align: 'center'
		},
		{
			title: '账户积分',
			dataIndex: 'newVoucherBalance',
			align: 'center'
		},
		{
			title: '消费时间',
			dataIndex: 'consumptionTime',
			align: 'center'
		},
		{
			title: '会员编码',
			dataIndex: 'userCode',
			align: 'center'
		},
		{
			title: '消费门店',
			dataIndex: 'orgName',
			align: 'center'
		},
	]

	const columns2 = [
		{
			title: '优惠券编码',
			dataIndex: 'couponNo',
			align: 'center',
		},
		{
			title: '优惠券生成时间',
			dataIndex: 'time',
			align: 'center',
		},
		{
			title: '是否核销',
			dataIndex: 'couponStatus',
			align: 'center'
		},
		{
			title: '有效期开始时间',
			dataIndex: 'startTime',
			align: 'center'
		},
		{
			title: '有效期截止时间',
			dataIndex: 'endTime',
			align: 'center'
		},
		{
			title: '核销人',
			dataIndex: 'destroyUserName',
			align: 'center'
		},
		{
			title: '核销时间',
			dataIndex: 'destroyTime',
			align: 'center'
		},
		{
			title: '核销门店',
			dataIndex: 'destroyOrgName',
			align: 'center'
		},
	]


	const columns3 = [
		{
			title: '会员编码',
			dataIndex: 'userReferralCode',
			align: 'center',
		},
		{
			title: '手机号',
			dataIndex: 'phone',
			align: 'center',
		},
		{
			title: '姓名',
			dataIndex: 'name',
			align: 'center',
		},
		{
			title: '账户糕点',
			dataIndex: 'accountBalance',
			align: 'center',
		},
		{
			title: '账户积分',
			dataIndex: 'voucherBalance',
			align: 'center',
		},
		{
			title: '注册时间',
			dataIndex: 'createTime',
			align: 'center',
		},
		/*{
			title: '门店',
			dataIndex: 'orgName',
			align: 'center',
		},*/
	]


	const columns4 = [
		{
			title: '门店名称',
			dataIndex: 'name',
			align: 'center'
		},
		{
			title: '门店编码',
			dataIndex: 'code',
			align: 'center'
		},
		{
			title: '消费',
			children: [
				{
					title: '订单数',
					dataIndex: 'orderCount',
					align: 'center',
				},
				{
					title: '账户消费糕点',
					dataIndex: 'accountMoney',
					align: 'center',
				},
				{
					title: '账户消费积分',
					dataIndex: 'voucherMoney',
					align: 'center',
				},
			]
		},
		/*{
			title: '注册会员数',
			dataIndex: 'userCount',
			align: 'center'
		},*/

	]


	const selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		// columns数字类型字段加入 needTotal: true 可以勾选自动算账
		alert: {
			show: true,
			clear: () => {
				selectedRowKeys.value = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}

	const totalMoney = ref(0)

	//各个门店消费记录
	const loadData4 = () => {
		const orgId = ref('')
		if(searchFormState.orgId == null || searchFormState.orgId== '' || searchFormState.orgId== 'undefined' ){

		}else{
			for(let i = 0;i<searchFormState.orgId.length;i++){
				orgId.value = orgId.value + searchFormState.orgId[i]+","
			}
			orgId.value = orgId.value.slice(0,orgId.value.length-1)
		}
		const param = {
			"orgId":orgId.value,
			"consumptionTimeBegin":searchFormState.startTime,
			"consumptionTimeEnd":searchFormState.endTime
		}
		consumptionRecordApi.queryEachStore(param).then((data)=>{
			data4.value = data.dataList
		})
	}


	//导出
	const exportTotal = () => {
		const orgId = ref('')
		if(searchFormState.orgId == null || searchFormState.orgId== '' || searchFormState.orgId== 'undefined' ){

		}else{
			for(let i = 0;i<searchFormState.orgId.length;i++){
				orgId.value = orgId.value + searchFormState.orgId[i]+","
			}
			orgId.value = orgId.value.slice(0,orgId.value.length-1)
		}
		const param = {
			"orgId":orgId.value,
			"consumptionTimeBegin":searchFormState.startTime,
			"consumptionTimeEnd":searchFormState.endTime
		}
		consumptionRecordApi.exportRecord(param).then((res)=>{
			downloadUtil.resultDownload(res)
		})
	}

	//会员折线图
	const customer = () => {
		const orgId = ref('')
		if(searchFormState.orgId == null || searchFormState.orgId== '' || searchFormState.orgId== 'undefined' ){

		}else{
			for(let i = 0;i<searchFormState.orgId.length;i++){
				orgId.value = orgId.value + searchFormState.orgId[i]+","
			}
			orgId.value = orgId.value.slice(0,orgId.value.length-1)
		}
		const param = {
			"orgId":orgId.value,
			"customerName":searchFormState.customerName,
			"startTime":searchFormState.startTime,
			"endTime":searchFormState.endTime
		}
		consumptionRecordApi.queryRechargeChar(param).then((res)=>{
			const xAxis = res.dateTime

			let series = [
				{
					name: '充值金额',
					type: 'line',
					//stack: '总量',
					showSymbol: false,
					itemStyle: {
					normal: {
						color: '#00FF00', //折线点自定义
						lineStyle: {
						color: '#00FF00'
						}
					}
					},
					data: res.payMoney
				},
				{
					name: '订单数',
					type: 'line',
					//stack: '总量',
					showSymbol: false,
					data: res.payCount
				},

			]
			drow("main2",xAxis, series)
		})
	}

	const drow = (id, xAxis, series) => {
	let myChart = echarts.init(document.getElementById(id))

	let option = {
		color: ['#1890FF', '#52C41A'],
		title: {
		//text: '会话量',
		},
		tooltip: {
		trigger: 'axis',
		},
		grid: {
		left: '40px',
		right: '40px',
		top: '50px',
		bottom: '30px'
		},
		legend: {
		itemWidth: 20, // 图例图形宽度
		itemHeight: 4,
		icon: 'roundRect',
		},
		xAxis: {
		type: 'category',
		boundaryGap: false, //x轴两边不留空白
		axisLabel: {
			color: 'rgba(0, 0, 0, 0.65)',
		},
		axisLine: {
			lineStyle: {
			color: '#D9D9D9',
			},
		},
		axisTick: {
			lineStyle: {
			color: '#D9D9D9',
			},
		},
		data: xAxis,
		},
		yAxis: {
		axisLine: {
			show: false,
			lineStyle: {
			color: 'rgba(0, 0, 0, 0.65)',
			},
		},
		splitLine: {
			lineStyle: {
			color: ['#E8E8E8'],
			type: 'dashed',
			},
		},
		axisLabel: {
			color: 'rgba(0, 0, 0, 0.65)',
		},
		axisTick: {
			show: false,
			lineStyle: { color: 'rgb(150,150,150)' }, //y轴坐标刻度颜色（与axisLabel.textStyle是相同的效果）
		},
		type: 'value',
		},
		series: series
	}
	myChart.setOption(option)
	}

	//消费金额值统计
	const loadData1 = () => {
		const orgId = ref('')
		if(searchFormState.orgId == null || searchFormState.orgId== '' || searchFormState.orgId== 'undefined' ){

		}else{
			for(let i = 0;i<searchFormState.orgId.length;i++){
				orgId.value = orgId.value + searchFormState.orgId[i]+","
			}
			orgId.value = orgId.value.slice(0,orgId.value.length-1)
		}
		const param = {
			"consumptionTime": dayjs(searchFormState.consumptionTime).format('YYYY-MM-DD')
		}
		consumptionRecordApi.queryRechargeTotal(param).then((data) => {
			payMoney.value = '￥ ' + data.payMoney
			payCount.value = data.payCount

			compareMoney.value = data.compareMoney
			compareOrder.value = data.compareOrder

			payMoneyFlag.value = data.payMoneyFlag
			payOrderFlag.value = data.payOrderFlag

		})
	}

	//账户余额值统计
	const loadData3 = () => {
		const orgId = ref('')
		if(searchFormState.orgId == null || searchFormState.orgId== '' || searchFormState.orgId== 'undefined' ){

		}else{
			for(let i = 0;i<searchFormState.orgId.length;i++){
				orgId.value = orgId.value + searchFormState.orgId[i]+","
			}
			orgId.value = orgId.value.slice(0,orgId.value.length-1)
		}
		const param = {
			"orgId":orgId.value,
			"consumptionTimeBegin":searchFormState.startTime,
			"consumptionTimeEnd":searchFormState.endTime
		}
		consumptionRecordApi.queryBalanceTotal(param).then((data)=>{
			userCount.value = data.userCount
			accountBalance.value = data.accountBalance
			voucherBalance.value = data.voucherBalance
		})
	}


	//切换
	const clickTab = () => {
		consumptionPage()
		userPage()
		couponPage()
	}

	const consumptionPage = () =>{
		const orgId = ref('')
		if(searchFormState.orgId == null || searchFormState.orgId== '' || searchFormState.orgId== 'undefined' ){

		}else{
			for(let i = 0;i<searchFormState.orgId.length;i++){
				orgId.value = orgId.value + searchFormState.orgId[i]+","
			}
			orgId.value = orgId.value.slice(0,orgId.value.length-1)
		}
		const param = {
			"orgId":orgId.value,
			"consumptionTimeBegin":searchFormState.startTime,
			"consumptionTimeEnd":searchFormState.endTime,
			"consumptionOperate":'3,4'
		}
		consumptionRecordApi.consumptionRecordPage(param).then((data) => {
			data1.value = data.records
		})
	}

	//会员列表
	const userPage = () => {
		const orgId = ref('')
		if(searchFormState.orgId == null || searchFormState.orgId== '' || searchFormState.orgId== 'undefined' ){

		}else{
			for(let i = 0;i<searchFormState.orgId.length;i++){
				orgId.value = orgId.value + searchFormState.orgId[i]+","
			}
			orgId.value = orgId.value.slice(0,orgId.value.length-1)
		}
		const param = {
			"orgId":orgId.value,
			"beginTime":searchFormState.startTime,
			"endTime":searchFormState.endTime
		}
		bizUserApi.memberPage(param).then((res) => {
			data3.value = res.records
		})
	}


	//优惠券列表
	const couponPage = () => {
		const orgId = ref('')
		if(searchFormState.orgId == null || searchFormState.orgId== '' || searchFormState.orgId== 'undefined' ){

		}else{
			for(let i = 0;i<searchFormState.orgId.length;i++){
				orgId.value = orgId.value + searchFormState.orgId[i]+","
			}
			orgId.value = orgId.value.slice(0,orgId.value.length-1)
		}
		const param = {
			"orgId":orgId.value,
			"beginTime":searchFormState.startTime,
			"endTime":searchFormState.endTime
		}
		bizCouponRecordApi.bizCouponRecordPage(param).then((data) => {
			data2.value = data.records
		})
	}


	//查询
	const refresh = () => {
		loadData1();
		loadData3();
		clickTab()
		loadData4()
	}

	//导出
	const exportReport = () => {
		if(activeKey.value == '1'){
			searchFormState.queryFlag = '1'
			console.log("searchFormState.queryFlag:"+searchFormState.queryFlag)
			reportApi.exportReport(searchFormState).then((res) => {
				downloadUtil.resultDownload(res)
			})

		}
	}

	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		searchFormState.times = []
		searchFormState.startTime = null
		searchFormState.endTime = null
		searchFormState.orgId = []
	}

</script>

<style lang="less" scoped>
.ant-table-thead > tr > th {
    text-align: center;
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: color .32s;
    color: black;
	height: 20px;
  }
}

#totalDiv #totalSpan{
	svg{
		width: 1.5em;
		height: 1.5em;
	}
}
</style>
