<template>
	<view class="content">
		<view class="tit">
			应收对账单
		</view>
		<view class="con">
			<u-cell-group :border="false">
				<u-cell-item title="对账周期默认值">
					<u-input slot="right-icon" v-model="billCycle" @click="showModal=true" disabled placeholder="请选择对账周期" placeholder-style="text-align:right" :custom-style="inputStyle"/>
				</u-cell-item>
				<u-cell-item title="参与对账的销售单业务状态">
					<u-input slot="right-icon" v-model="billStatus" @click="showCheckBoxModal=true" disabled placeholder="请选择参与对账的销售单业务状态" placeholder-style="text-align:right" :custom-style="inputStyle"/>
				</u-cell-item>
				<u-cell-item title="参与对账的销售单来源">
					<u-input slot="right-icon" v-model="billCycle" @click="showModal=true" disabled placeholder="请选择参与对账的销售单来源" placeholder-style="text-align:right" :custom-style="inputStyle"/>
				</u-cell-item>
				<u-cell-item  title="铺货销售单是否参与对账">
					<u-switch :size="40" :active-color="activeColor" slot="right-icon" v-model="checked"></u-switch>
				</u-cell-item>
				<u-cell-item title="对账单选择客户默认页签" :border-bottom="false">
					<u-input slot="right-icon" v-model="billCycle" @click="showModal=true" disabled placeholder="请选择对账单客户" placeholder-style="text-align:right" :custom-style="inputStyle"/>
				</u-cell-item>
			</u-cell-group>
		</view>
		<!-- 类似于picker单选 -->
		<redioPicker :showModal="showModal" @chooseItem="chooseCycle"  @close="showModal=false" :dataList="cycleList"></redioPicker>
		<!-- 类似于picker多选 -->
		<checkBoxPicker :showModal="showCheckBoxModal" @chooseCon="chooseStatus"  @close="showCheckBoxModal=false" :dataList="statusList"></checkBoxPicker>
	</view>
</template>

<script>
	import redioPicker from '@/components/customPicker/redioPicker.vue'
	import checkBoxPicker from '@/components/customPicker/checkBoxPicker.vue'
	export default{
		components:{
			redioPicker,
			checkBoxPicker
		},
		data(){
			return{
				showModal:false,
				cycleList:[
					{id:1,name:'全部'},
					{id:2,name:'昨日'},
					{id:3,name:'今日'},
					{id:4,name:'上周'},
					{id:5,name:'本周'},
					{id:6,name:'上月'},
					{id:7,name:'本月'}
				],
				billCycle:'',
				checked:false,
				inputStyle:{
					'text-align':'right'
				},
				activeColor:this.$config('primaryColor'),
				showCheckBoxModal:false,
				statusList:[
					{id:1,isChecked:false,name:'待提交'},
					{id:1,isChecked:false,name:'待审核'},
					{id:1,isChecked:false,name:'待出库'},
					{id:1,isChecked:false,name:'已完结'}
				],
				billStatus:'',
				originList:[
					{id:1,isChecked:false,name:'自建'},
					{id:1,isChecked:false,name:'下级创建'},
					{id:1,isChecked:false,name:'数字货架'}
				],
				customlist:[
					{id:1,isChecked:false,name:'最近开单用户（月）'},
					{id:1,isChecked:false,name:'最近开单用户（日）'},
					{id:1,isChecked:false,name:'全部客户'}
				],
			}
		},
		onLoad() {
		
		},
		methods:{
			chooseCycle(con){
				this.billCycle = con.name
			},
			chooseStatus(arr){
				this.billStatus = '已选'+arr.length+'项'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100vh;
		.tit{
			padding:30rpx 20rpx 16rpx;
		}
		.con{
			box-sizing: border-box;
			width: calc(100% - 40rpx);
			margin:0 auto;
			border-radius: 30rpx;
			overflow: hidden;
			.u-cell{
				padding:14rpx 26rpx;
				color:#333;
				/deep/.u-cell_right{
					max-width: 40% !important;
				}
			}
			
		}
	}
</style>