<template>
	<view class="info-wrapper">
		<view class="dev-title" v-if="dev" @tap="devType.open(vdata.devTitle.value)">
			{{ vdata.devTitle.label }}
			<image src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" />
		</view>
		<view class="info-title" :class="{ 'fixed-header': fixed }">
			<block v-for="(v, i) in vdata.titleList" :key="i">
				<view class="info-item" :class="{ 'active-title': vdata.selected == v.value }" @tap="selectedTitle(v)">
					{{ v.title }}
					<view class="stat-sort" :class="[calcClassName(v)]"></view>
				</view>
			</block>
		</view>
		<!-- 默认插槽位置  -->
		<slot />
	</view>
	<JSinglePopup :list="devTypeList" ref="devType" @confirm="confirmType" />
</template>

<script setup>
import { reactive, ref } from 'vue';
const props = defineProps({
	dev: { type: Boolean, default: false }, //是否展示设备类型切换标题
	fixed: { type: Boolean, default: false } //是否固定头部 默认 false
});
const emits = defineEmits(['device', 'sortClick']);
const vdata = reactive({
	selected: 'totalSuccAmt',
	devTitle: {
		label: '全部设备类型',
		value: ''
	},
	titleList: [
		{ title: '成交金额', value: 'totalSuccAmt', sort: 'ascend' },
		{ title: '退款金额', value: 'totalRefundAmt', sort: 'ascend' },
		{ title: '成交笔数', value: 'totalSuccNum', sort: 'ascend' },
		{ title: '成功率', value: 'succRate', sort: 'ascend' }
	]
});
const devType = ref(null);
const selectedTitle = (val) => {
	if (vdata.selected != val.value) {
		vdata.selected = val.value;
		emits('sortClick', val);
		return;
	}
	val.sort = val.sort == 'ascend' ? 'descend' : 'ascend';
	emits('sortClick', val);
};
const devTypeList = reactive([
	{ label: '全部', value: '' },
	{ label: '电子码牌', value: '0' },
	{ label: '实体码牌', value: '1' },
	{ label: '实体立牌', value: '2' },
	{ label: '云音响码牌', value: '3' },
	{ label: '扫码POS', value: 'scan_pos"' },
	{ label: '智能POS', value: 'auto_pos"' },
	{ label: '收银插件', value: 'cash_plugin' }
]);
// 计算需要展示的上下箭头
const calcClassName = (val) => {
	// 判断 选中  与 集合中的 value 值是否相等 不相等 则不添加类名
	if (vdata.selected == val.value) {
		// 返回上箭头 下箭头类名
		return val.sort == 'descend' ? 'asc-sort' : 'des-sort';
	}
	return '';
};
const confirmType = (val) => {
	vdata.devTitle = val;
	emits('device', val.value);
};
</script>

<style lang="scss" scoped>
.info-wrapper {
	margin: 0 35rpx 40rpx 35rpx;
	border-radius: $J-b-r32;
	background-color: $J-bg-ff;
	.dev-title {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		height: 100rpx;
		font-size: 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #ededed;
		image {
			margin-left: 10rpx;
			width: 40rpx;
			height: 40rpx;
			transform: rotate(180deg);
		}
	}
	.info-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		height: 102rpx;
		font-size: 24rpx;
		color: $J-color-t80;
		background-color: #fff;
		border-bottom: 1rpx solid #ededed;
		.active-title {
			font-weight: 500;
			color: #2980fd;
			border-bottom: 5rpx solid #2980fd;
		}
		.info-item {
			display: flex;
			align-items: center;
			height: 100%;
			.stat-sort {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-left: 10rpx;
				&::before,
				&::after {
					content: '';
					display: block;
					width: 0px;
					height: 0px;
					border: 8rpx solid;
					border-color: #d9d9d9 transparent transparent transparent;
				}
				&::before {
					margin-bottom: 4rpx;
					transform: rotate(180deg);
				}
			}
			.asc-sort::before {
				border-color: #2980fd transparent transparent transparent;
			}
			.des-sort::after {
				border-color: #2980fd transparent transparent transparent;
			}
		}
	}
}
.fixed-header {
	position: sticky;
	top: 112rpx;
	z-index: 10;
	left: 0;
	right: 0;
}
</style>
