<template>
	<view class="content">
		<view class="tit">应收对账单</view>
		<view class="con">
			<u-cell-group :border="false">
				<u-cell-item :title="item.paramName" v-for="(item, i) in systemList" :key="item.id">
					<u-input
						v-show="item.remarks != 'FLAG'"
						slot="right-icon"
						v-model="item.value"
						@click="openModal(item,i)"
						disabled
						placeholder="请选择"
						placeholder-style="text-align:right"
						:custom-style="inputStyle"
					/>
					<u-switch
						v-show="item.remarks == 'FLAG'"
						:size="40"
						:active-color="activeColor"
						slot="right-icon"
						:value="item.paramValue == 1"
						@change="
							status => {
								changeSwitch(status, i);
							}
						"
					></u-switch>
				</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="showModal0" @chooseItem="chooseCycle" @close="showModal0 = false"  code="sales_bill_period"></redioPicker>
		<!-- 类似于picker多选 -->
		<checkBoxPicker :showModal="showModal1" @chooseCon="chooseStatus" @close="showModal1 = false" code="SALES_BILL_STATUS"></checkBoxPicker>
		<checkBoxPicker :showModal="showModal2" @chooseCon="chooseStatus" @close="showModal2 = false" code="SALES_SOURCE"></checkBoxPicker>
		<checkBoxPicker :showModal="showModal3" @chooseCon="chooseStatus" @close="showModal3 = false" code="verify_default_customer"></checkBoxPicker>
	</view>
</template>

<script>
import redioPicker from '@/components/customPicker/redioPicker.vue';
import checkBoxPicker from '@/components/customPicker/checkBoxPicker.vue';
import { queryVerifySalesParams, updateParam } from '@/api/dealerBizParam.js';

export default {
	components: {
		redioPicker,
		checkBoxPicker
	},
	data() {
		return {
			systemList: null,
			
			showModal0: false,
			showModal1: false,
			showModal2: false,
			showModal3: false,
			
			siteNum:null,
			
			
			inputStyle: {
				'text-align': 'right'
			},
			activeColor: this.$config('primaryColor')
		};
	},
	onLoad() {
		this.getData();
	},
	methods: {
		getData() {
			queryVerifySalesParams({}).then(res => {
				this.systemList = res.data;
			});
		},
		openModal(code,index) {
			const newArr = ['sales_bill_period','verify_default_customer','SALES_BILL_STATUS','SALES_SOURCE']
			let i = newArr.findIndex(con=>{
				code.remarks==con
			})
			//打开弹窗
			this.siteNum=index;
			if(i!=-1){
				this['showModal' + i] = true;
			}
		},
		changeSwitch(status, i) {
			//是否参与对账单 0否 1是
			this.systemList[i].paramValue = status ? 0 : 1;
			let ajaxObj = {
				id: this.systemList[i].id,
				paramValue: this.systemList[i].paramValue
			};
			this.updateList(ajaxObj);
		},
		
		chooseCycle(con) {
			this.systemList[this.siteNum].value=con.dispName;
			let ajaxObj = {
				id: this.systemList[this.siteNum].id,
				paramValue: con.code
			};
			this.updateList(ajaxObj);
		},
		chooseStatus(arr) {
			this.systemList[this.siteNum].value='已选' + arr.length + '项';
			let newArr =arr.map(item=>{
				return item.code
			})
			let ajaxObj = {
				id: this.systemList[this.siteNum].id,
				paramValue: newArr.toString()
			};
			this.updateList(ajaxObj);
		},
		updateList(ajaxdata) {//修改系统参数
			updateParam(ajaxdata).then(res => {
				if (res.status == 200) {
					uni.showToast({
						title: res.message,
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			});
		}
	}
};
</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>
