<template>
	<view class="min-page bg-gray u-p-30 u-font-28 color-333">
		<view class="bg-fff  border-r-12 default-box-padding">
			<view class="font-bold">交班模式</view>
			<view class="u-m-t-24">
				<radio-group @change="jiaobanModelChange">
					<label class="radio u-m-r-60" v-for="(item,index) in jiaobanModel.list" :key="index">
						<radio :value="''+index" :checked="index == jiaobanModel.active" class="scale7 " />
						<text>{{item.label}}</text>
					</label>
				</radio-group>
			</view>
		</view>
		<template v-if="jiaobanModel.active==0">
			<view v-for="(item,index) in bancis.timeList" :key="index" >
				<view class="bg-fff  u-m-t-32 border-r-12 default-box-padding">
					<view class="color-666">班次</view>
					<view class="u-flex u-m-t-24 u-p-b-24 border-bottom u-row-between" @tap="addBanciOpen(item,index)">
						<view class="">
							<text>{{item.name}}</text>
							<text>，</text>
							<text>{{item.start}}</text>
							<text>-</text>
							<text>{{item.end}}</text>
						</view>
						<view class="u-flex">
							<uni-icons type="right" color="#999"></uni-icons>
						</view>
					</view>
					<view class="u-flex u-m-t-28" @tap="listDel(bancis.timeList,index)">
						<view class="u-flex">
							<uni-icons size="20" type="minus-filled" :color="$colorRed"></uni-icons>
						</view>
						<view class="u-m-l-12 red">删除</view>
					</view>
				</view>

			</view>
		</template>
		<template v-if="jiaobanModel.active==1">
			<view v-for="(item,index) in bancis.list" :key="index">
				<view class="bg-fff  u-m-t-32 border-r-12 default-box-padding">
					<view class="color-666">班次</view>
					<view class="u-flex u-m-t-24 u-p-b-24 border-bottom u-row-between" @tap="addBanciOpen(item,index)">
						<view class="">
							{{item.name}}
						</view>
						<view class="u-flex">
							<uni-icons type="right" color="#999"></uni-icons>
						</view>
					</view>
					<view class="u-flex u-m-t-28" @tap="listDel(bancis.list,index)">
						<view class="u-flex">
							<uni-icons size="20" type="minus-filled" :color="$colorRed"></uni-icons>
						</view>
						<view class="u-m-l-12 red">删除</view>
					</view>
				</view>

			</view>
		</template>
		<view class="bg-fff u-flex u-m-t-32 border-r-12 default-box-padding" @tap="addBanciOpen">
			<uni-icons type="plus-filled" :color="color.ColorMain" size="20"></uni-icons>
			<view class="u-m-l-16">添加选项</view>
		</view>

		<view class="bg-fff  u-m-t-32 border-r-18 default-box-padding">
			<view class="" v-for="(radios,index) in radioGroups" :key="index">
				<view class="font-bold">{{radios.title}}</view>
				<view class="u-m-t-24  u-p-b-24 u-m-b-24" :class="{'border-bottom':index<radioGroups.length-1}">
					<radio-group @change="radioGroupChange($event,radios)">
						<label class="radio u-m-r-60" v-for="(item,itemindex) in radios.list" :key="itemindex">
							<radio :value="''+itemindex" :checked="itemindex === radios.active" class="scale7 " />
							<text>{{item.label}}</text>
						</label>
					</radio-group>
				</view>

			</view>
		</view>
	</view>

	<view class="u-fixed bottom u-flex bg-fff ">
		<view class="u-flex-1">
			<my-button bgColor="#333" color="#fff" borderRadius="100rpx 0 0 100rpx" shape="circle" plain type="primary"
				@tap="back">返回</my-button>
		</view>
		<view class="u-flex-1">
			<my-button @tap="confirm" borderRadius="0 100rpx 100rpx 0" shape="circle" type="primary">确定</my-button>
		</view>
	</view>
	
	<add-banci @confirm="addBanciConfirm" :active="jiaobanModel.active" :title="refAddBanciTitle" ref="refAddBanci"></add-banci>
</template>

<script setup>
	import color from '@/commons/color.js'
	import myButton from '@/components/my-components/my-button';
	import addBanci from './components/add-banci';
	import {
		reactive, ref
	} from 'vue';
	
	const refAddBanci=ref(null)
	const refAddBanciTitle=ref('添加')
	
	function addBanciOpen(item,index){
		bancis.selIndex=index
		refAddBanciTitle.value=item.hasOwnProperty('name')?'编辑':'添加'
		refAddBanci.value.open(item.hasOwnProperty('name')?item:null)
	}
	function addBanciConfirm(e){
		console.log(e);
		if(refAddBanciTitle.value==='添加'){
			if(jiaobanModel.active==1){
				bancis.list.push(e)
			}else{
				bancis.timeList.push(e)
			}
		}
	}
	function listDel(list,index){
		uni.showModal({
			title: '提示',
			content: '确定删除【'+list[index].name+'】吗?',
			success: function (res) {
				if (res.confirm) {
					list.splice(index,1)
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
		
	}
	
	
	
	const $colorRed = '#EB4F4F'
	const bancis = reactive({
		selIndex:'',
		timeList: [{
			name: '测试',
			start: '6:00',
			end: '12:00'
		}],
		list: [{
				name: '早班'
			},
			{
				name: '中班'
			},
			{
				name: '晚班'
			}
		]
	})


	function back() {
		uni.navigateBack()
	}

	function confirm() {

	}

	const jiaobanModel = reactive({
		list: [{
				label: '按时间段',
				value: 0
			},
			{
				label: '自定义',
				value: 1
			},
		],
		active: 1
	})

	const radioBasicArr = [{
			label: '统计',
			value: 0
		},
		{
			label: '不统计',
			value: 1
		},
	]

	function returnRadioGroups(arr) {
		return arr.map(v => {
			return {
				title: v,
				active: 0,
				list: [...radioBasicArr],
			}
		})
	}
	const textlists = [
		'订单数', '订单额', '订单微信支付金额', '订单余额支付金额', '订单线下支付金额', '订单支付宝金额',
		'堂食订单数', '堂食订单金额', '自取订单数', '自取订单金额', '外卖订单数', '外卖订单金额', '退款订单数',
		'成功退款金额', '微信成功退款金额', '余额成功退款金额', '线下成功退款金额', '支付宝成功退款金额', '充值数',
		'充值金额', '开通会员数', '开通会员金额', '配送费', '收银笔数', '收银金额', '订单满减优惠金额', '订单积分兑换金额',
		'订单优惠券减免金额', '订单会员优惠金额', '充值赠送金额', '堂食退款金额', '外卖退款金额', '自取退款金额', '配送费退款',
		'配送费总额', '微信到账金额', '支付宝到账金额', '收银支付宝金额', '收银余额支付金额', '收银微信支付金额'
	]
	const radioGroups = reactive(returnRadioGroups(textlists))

	function radioGroupChange(e, item) {
		console.log(e);
		console.log(item);
		item.active = e.detail.value
		console.log(radioGroups);
	}

	function jiaobanModelChange(e) {
		jiaobanModel.active = e.detail.value
	}
</script>

<style scoped lang="scss">
	$red: #EB4F4F;

	.red {
		color: $red;
	}

	.bottom {
		background-color: transparent;
		bottom: 84rpx;
		left: 28rpx;
		right: 28rpx;
	}
</style>