<template>
	<view class="ecl-container">
		<picker @change="bindPickerChange" :value="index" :range="array">
			<view class="bars">
				<text>导出类型</text>
				<view class="right">
					<view class="uni-input">{{ array[index] }}</view>
					<view class="iconfont icon-xiangyou1"></view>
				</view>
			</view>
		</picker>
		<uni-datetime-picker v-model="range" type="daterange" @change="changeDateTime" v-if="index == 0">
			<view class="bars" @click="changPwd">
				<text>选择时间</text>
				<view class="right">
					<view class="uni-input">{{ dateStr }}</view>
					<view class="iconfont icon-xiangyou1"></view>
				</view>
			</view>
		</uni-datetime-picker>
		<view class="bars" @click="selectOrder" v-if="index == 0">
			<text>选择订单</text>
			<view class="iconfont icon-xiangyou1"></view>
		</view>
	</view>

	<uni-popup ref="popup" type="bottom">
		<scroll-view scroll-y class="popup-content">
			<uni-search-bar :focus="true" v-model="searchValue" @cancel="clickCancel" placeholder="订单号" cancelButton="always" cancelText="搜索" />
			<view class="content" v-for="(item, i) in list" :key="i">
				<!-- <checkbox-group>
					<label>
						<checkbox value="cb" :checked="checkOrder" />
						订单号：961973496748
					</label>
				</checkbox-group> -->
				<checkbox-group @change="checkSelectItem($event, item)">
					<label>
						<checkbox :value="item.value" :checked="item.checked" />
						{{ item.order }}
					</label>
				</checkbox-group>
				<view class="divider" />
				<view class="order-item" v-for="(list, i) in 5" :key="i">
					<image src="/static/msjf-picture/msjf-17.jpg" mode="widthFix" style="width: 80rpx; margin-right: 20rpx"></image>
					<view class="order-title">巷子浅大师版</view>
				</view>
			</view>
		</scroll-view>
		<view class="popup-footer">
			<checkbox-group>
				<label>
					<checkbox value="cb" :checked="checkTrue" />
					全选
				</label>
			</checkbox-group>
			<view @click="clickConfirm">确定</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let popup = ref();
let index = ref<any>(0);
let array = ref(['自定义导入', '导出全部']);
let startDate = ref();
let endDate = ref();
let range = ref();
let dateStr = ref();
let searchValue = ref();
// 全部选中
let checkTrue = ref();

let list = ref([
	{
		order: '订单号：961973496748',
		value: '1',
		checked: false
	},
	{
		order: '订单号：145463121654',
		value: '2',
		checked: true
	}
]);

let checkSelectItem = (e: any) => {
	console.log(e.detail.value);
};

// 导出类型
let bindPickerChange = (e: any) => {
	index.value = e.detail.value;
};

// 选择时间
let changeDateTime = (e: any) => {
	let date1 = e[0];
	let date2 = e[1];
	dateStr.value = date1 + '至' + date2;
};

// 选择订单
let selectOrder = () => {
	popup.value.open('bottom');
};

// 搜索订单
let clickCancel = (e: any) => {
	console.log(e.value);
};

// 确定按钮
let clickConfirm = () => {
	popup.value.close();
};
</script>

<style lang="scss" scoped>
.ecl-container {
	min-height: 100vh;
	background-color: #eceff6;
	margin-top: 20rpx;
	.bars {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100rpx;
		font-size: 28rpx;
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 6rpx;
		.right {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.uni-input {
				font-size: 24rpx;
				color: #ccc;
				margin-right: 10rpx;
			}
		}
	}
}

.popup-content {
	box-sizing: border-box;
	background-color: #eceff6;
	padding: 20rpx;
	height: 80vh;
	.content {
		box-sizing: border-box;
		width: 100%;
		background-color: #fff;
		padding: 40rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		.divider {
			background: #ebedf0;
			width: 100%;
			height: 1rpx;
			margin: 20rpx 0;
		}
		.order-item {
			display: flex;
			flex-direction: row;
			margin-bottom: 10rpx;
		}
	}
}
.popup-footer {
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	background-color: #fff;
	width: 100%;
	height: 120rpx;
	padding: 20rpx 40rpx 0 40rpx;
}
</style>
