<template>
	<el-form ref="form" :model="form" :disabled="disabled" inline>
		<el-card class="rate-card">
			<div class="item-header">
				<div>微信费率</div>
				<div class="item-switch">
					<div v-if="form.WXPAY.status">
						<el-checkbox v-model="form.WXPAY.D0.status" :true-value="1" :false-value="0" class="item-check">
							D0
						</el-checkbox>
						<el-checkbox v-model="form.WXPAY.D1.status" :true-value="1" :false-value="0" class="item-check">
							D1
						</el-checkbox>
						<el-checkbox v-model="form.WXPAY.T0.status" :true-value="1" :false-value="0" class="item-check">
							T0
						</el-checkbox>
						<el-checkbox v-model="form.WXPAY.T1.status" :true-value="1" :false-value="0" class="item-check">
							T1
						</el-checkbox>
					</div>
					<div>
						是否开通：
						<el-switch v-model="form.WXPAY.status" :active-value="1" :inactive-value="0"/>
					</div>
				</div>
			</div>
			<div class="item-content" v-if="form.WXPAY.status">
				<el-form-item v-if="form.WXPAY.D0.status === 1" label="D0成本费率" :rules="rateRule"
							  prop="WXPAY.D0.rate">
					<el-input v-model="form.WXPAY.D0.rate">
						<template #append>%</template>
					</el-input>
				</el-form-item>
				<el-form-item v-if="form.WXPAY.D1.status === 1" label="D1成本费率" :rules="rateRule"
							  prop="WXPAY.D1.rate">
					<el-input v-model="form.WXPAY.D1.rate">
						<template #append>%</template>
					</el-input>
				</el-form-item>
				<el-form-item v-if="form.WXPAY.T0.status === 1" label="T0成本费率" :rules="rateRule"
							  prop="WXPAY.T0.rate">
					<el-input v-model="form.WXPAY.T0.rate">
						<template #append>%</template>
					</el-input>
				</el-form-item>
				<el-form-item v-if="form.WXPAY.T1.status === 1" label="T1成本费率" :rules="rateRule"
							  prop="WXPAY.T1.rate">
					<el-input v-model="form.WXPAY.T1.rate">
						<template #append>%</template>
					</el-input>
				</el-form-item>
			</div>
		</el-card>

		<el-card class="rate-card">
			<div class="item-header">
				<div>支付宝费率</div>
				<div class="item-switch">
					<div v-if="form.ALIPAY.status">
						<el-checkbox v-model="form.ALIPAY.D0.status" :true-value="1" :false-value="0"
									 class="item-check">D0
						</el-checkbox>
						<el-checkbox v-model="form.ALIPAY.D1.status" :true-value="1" :false-value="0"
									 class="item-check">D1
						</el-checkbox>
						<el-checkbox v-model="form.ALIPAY.T0.status" :true-value="1" :false-value="0"
									 class="item-check">T0
						</el-checkbox>
						<el-checkbox v-model="form.ALIPAY.T1.status" :true-value="1" :false-value="0"
									 class="item-check">T1
						</el-checkbox>
					</div>
					<div>
						是否开通：
						<el-switch v-model="form.ALIPAY.status" :active-value="1" :inactive-value="0"/>
					</div>
				</div>
			</div>
			<div class="item-content" v-if="form.ALIPAY.status">
				<el-form-item v-if="form.ALIPAY.D0.status === 1" label="D0成本费率" :rules="rateRule"
							  prop="ALIPAY.D0.rate">
					<el-input v-model="form.ALIPAY.D0.rate">
						<template #append>%</template>
					</el-input>
				</el-form-item>
				<el-form-item v-if="form.ALIPAY.D1.status === 1" label="D1成本费率" :rules="rateRule"
							  prop="ALIPAY.D1.rate">
					<el-input v-model="form.ALIPAY.D1.rate">
						<template #append>%</template>
					</el-input>
				</el-form-item>
				<el-form-item v-if="form.ALIPAY.T0.status === 1" label="T0成本费率" :rules="rateRule"
							  prop="ALIPAY.T0.rate">
					<el-input v-model="form.ALIPAY.T0.rate">
						<template #append>%</template>
					</el-input>
				</el-form-item>
				<el-form-item v-if="form.ALIPAY.T1.status === 1" label="T1成本费率" :rules="rateRule"
							  prop="ALIPAY.T1.rate">
					<el-input v-model="form.ALIPAY.T1.rate">
						<template #append>%</template>
					</el-input>
				</el-form-item>
			</div>
		</el-card>

		<el-card class="rate-card">
			<div class="item-header">
				<div>银联费率</div>
				<div class="item-switch">
					<div v-if="form.UNIONPAY.status">
						<el-checkbox v-model="form.UNIONPAY.D0.status" :true-value="1" :false-value="0"
									 class="item-check">D0
						</el-checkbox>
						<el-checkbox v-model="form.UNIONPAY.D1.status" :true-value="1" :false-value="0"
									 class="item-check">D1
						</el-checkbox>
						<el-checkbox v-model="form.UNIONPAY.T0.status" :true-value="1" :false-value="0"
									 class="item-check">T0
						</el-checkbox>
						<el-checkbox v-model="form.UNIONPAY.T1.status" :true-value="1" :false-value="0"
									 class="item-check">T1
						</el-checkbox>
					</div>
					<div>
						是否开通：
						<el-switch v-model="form.UNIONPAY.status" :active-value="1" :inactive-value="0"/>
					</div>
				</div>
			</div>
			<div class="item-content" v-if="form.UNIONPAY.status">
				<el-table :data="form.UNIONPAY.D0.table" v-if="form.UNIONPAY.D0.status" border>
					<el-table-column prop="label" label="类型" align="center"/>
					<el-table-column prop="rate_2" label="交易>1000" align="center">
						<template #default="scope">
							<el-form-item :rules="rateRule" :prop="'UNIONPAY.D0.table.' + scope.$index + '.rate_2'">
								<el-input v-model="scope.row.rate_2">
									<template #append>%</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="rate" label="交易<1000" align="center">
						<template #default="scope">
							<el-form-item :rules="rateRule" :prop="'UNIONPAY.D0.table.' + scope.$index + '.rate'">
								<el-input v-model="scope.row.rate">
									<template #append>%</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
				</el-table>

				<el-table :data="form.UNIONPAY.D1.table" style="margin-top: 20px" v-if="form.UNIONPAY.D1.status" border>
					<el-table-column prop="label" label="类型" align="center"/>
					<el-table-column prop="rate_2" label="交易>1000" align="center">
						<template #default="scope">
							<el-form-item :rules="rateRule" :prop="'UNIONPAY.D1.table.' + scope.$index + '.rate_2'">
								<el-input v-model="scope.row.rate_2">
									<template #append>%</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="max_fee" label="封顶" align="center">
						<template #default="scope">
							<el-form-item v-if="scope.row.card_type === 'DEBIT'" :rules="feeRule"
										  :prop="'UNIONPAY.D1.table.' + scope.$index + '.max_fee'">
								<el-input v-model="scope.row.max_fee">
									<template #append>元</template>
								</el-input>
							</el-form-item>
							<div v-else>
								——
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="rate" label="交易<1000" align="center">
						<template #default="scope">
							<el-form-item :rules="rateRule" :prop="'UNIONPAY.D1.table.' + scope.$index + '.rate'">
								<el-input v-model="scope.row.rate">
									<template #append>%</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
				</el-table>

				<el-table :data="form.UNIONPAY.T0.table" style="margin-top: 20px" v-if="form.UNIONPAY.T0.status" border>
					<el-table-column prop="label" label="类型" align="center"/>
					<el-table-column prop="rate_2" label="交易>1000" align="center">
						<template #default="scope">
							<el-form-item :rules="rateRule" :prop="'UNIONPAY.T0.table.' + scope.$index + '.rate_2'">
								<el-input v-model="scope.row.rate_2">
									<template #append>%</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="rate" label="交易<1000" align="center">
						<template #default="scope">
							<el-form-item :rules="rateRule" :prop="'UNIONPAY.T0.table.' + scope.$index + '.rate'">
								<el-input v-model="scope.row.rate">
									<template #append>%</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
				</el-table>

				<el-table :data="form.UNIONPAY.T1.table" style="margin-top: 20px" v-if="form.UNIONPAY.T1.status" border>
					<el-table-column prop="label" label="类型" align="center"/>
					<el-table-column prop="rate_2" label="交易>1000" align="center">
						<template #default="scope">
							<el-form-item :rules="rateRule" :prop="'UNIONPAY.T1.table.' + scope.$index + '.rate_2'">
								<el-input v-model="scope.row.rate_2">
									<template #append>%</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="max_fee" label="封顶" align="center">
						<template #default="scope">
							<el-form-item v-if="scope.row.card_type === 'DEBIT'" :rules="feeRule"
										  :prop="'UNIONPAY.T1.table.' + scope.$index + '.max_fee'">
								<el-input v-model="scope.row.max_fee">
									<template #append>元</template>
								</el-input>
							</el-form-item>
							<div v-else>
								——
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="rate" label="交易<1000" align="center">
						<template #default="scope">
							<el-form-item :rules="rateRule" :prop="'UNIONPAY.T1.table.' + scope.$index + '.rate'">
								<el-input v-model="scope.row.rate">
									<template #append>%</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-card>
	</el-form>
</template>

<script>
import {verifyRate, verifyFee} from "@/utils/verificate";

export default {
	name: "piRate",
	props: {
		data: { type: Array, default: () => [] },
		modelValue: { type: Array, default: () => [] },
		disabled: { type: Boolean, default: false },
	},
	data() {
		return {
			//表单数据
			rateRule: [
				{validator: verifyRate, trigger: 'change'},
			],
			feeRule: [
				{validator: verifyFee, trigger: 'change'},
			],
			form: {
				WXPAY: {
					D0: {
						card_type: "",
						rate: "",
						rate_2: "",
						min_fee: "0",
						max_fee: "99999",
						status: 0
					},
					D1: {
						card_type: "",
						rate: "",
						rate_2: "",
						min_fee: "0",
						max_fee: "99999",
						status: 1
					},
					T0: {
						card_type: "",
						rate: "",
						rate_2: "",
						min_fee: "0",
						max_fee: "99999",
						status: 0
					},
					T1: {
						card_type: "",
						rate: "",
						rate_2: "",
						min_fee: "0",
						max_fee: "99999",
						status: 0
					},
					status: 0
				},
				ALIPAY: {
					D0: {
						card_type: "",
						rate: "",
						rate_2: "",
						min_fee: "0",
						max_fee: "99999",
						status: 0
					},
					D1: {
						card_type: "",
						rate: "",
						rate_2: "",
						min_fee: "0",
						max_fee: "99999",
						status: 1
					},
					T0: {
						card_type: "",
						rate: "",
						rate_2: "",
						min_fee: "0",
						max_fee: "99999",
						status: 0
					},
					T1: {
						card_type: "",
						rate: "",
						rate_2: "",
						min_fee: "0",
						max_fee: "99999",
						status: 0
					},
					status: 0
				},
				UNIONPAY: {
					D0: {
						table: [
							{
								label: "借记卡",
								card_type: "DEBIT",
								rate: "",
								rate_2: "",
								min_fee: "0",
								max_fee: "99999",
							},
							{
								label: "贷记卡",
								card_type: "CREBIT",
								rate: "",
								rate_2: "",
								min_fee: "0",
								max_fee: "99999",
							},
						],
						status: 0
					},
					D1: {
						table: [
							{
								label: "借记卡",
								card_type: "DEBIT",
								rate: "",
								rate_2: "",
								min_fee: "0",
								max_fee: "99999",
							},
							{
								label: "贷记卡",
								card_type: "CREBIT",
								rate: "",
								rate_2: "",
								min_fee: "0",
								max_fee: "99999",
							},
						],
						status: 1
					},
					T0: {
						table: [
							{
								label: "借记卡",
								card_type: "DEBIT",
								rate: "",
								rate_2: "",
								min_fee: "0",
								max_fee: "99999",
							},
							{
								label: "贷记卡",
								card_type: "CREBIT",
								rate: "",
								rate_2: "",
								min_fee: "0",
								max_fee: "99999",
							},
						],
						status: 0
					},
					T1: {
						table: [
							{
								label: "借记卡",
								card_type: "DEBIT",
								rate: "",
								rate_2: "",
								min_fee: "0",
								max_fee: "99999",
							},
							{
								label: "贷记卡",
								card_type: "CREBIT",
								rate: "",
								rate_2: "",
								min_fee: "0",
								max_fee: "99999",
							},
						],
						status: 0
					},
					status: 0
				},
			},
			rates: []
		}
	},
	watch:{
		modelValue: {
			handler(){
				if (JSON.stringify(this.rates) !== JSON.stringify(this.modelValue)) {
					this.rates = this.modelValue
					this.setData()
				}
			},
			deep: true,
			immediate: true
		},
		form: {
			handler(){
				this.getData()
				this.$emit('update:modelValue', this.rates);
			},
			deep: true,
			immediate: false

		}
	},
	methods: {
		//显示
		setData() {
			if (!this.rates || this.rates.length <= 0) return false;
			this.rates.forEach((item) => {
				if (item.mode === "WXPAY") {
					this.form.WXPAY[item.period] = {
						card_type: item.card_type,
						rate: item.rate,
						rate_2: item.rate_2,
						min_fee: item.min_fee,
						max_fee: item.max_fee,
						status: 1
					}
					this.form.WXPAY.status = 1
				}
				if (item.mode === "ALIPAY") {
					this.form.ALIPAY[item.period] = {
						card_type: item.card_type,
						rate: item.rate,
						rate_2: item.rate_2,
						min_fee: item.min_fee,
						max_fee: item.max_fee,
						status: 1
					}
					this.form.ALIPAY.status = 1
				}
				if (item.mode === "UNIONPAY") {
					if (item.card_type === "DEBIT") {
						this.form.UNIONPAY[item.period].table[0] = {
							label: "借记卡",
							card_type: item.card_type,
							rate: item.rate,
							rate_2: item.rate_2,
							min_fee: item.min_fee,
							max_fee: item.max_fee
						}
					}
					if (item.card_type === "CREBIT") {
						this.form.UNIONPAY[item.period].table[1] = {
							label: "贷记卡",
							card_type: item.card_type,
							rate: item.rate,
							rate_2: item.rate_2,
							min_fee: item.min_fee,
							max_fee: item.max_fee
						}
					}
					this.form.UNIONPAY[item.period].status = 1
					this.form.UNIONPAY.status = 1
				}
			})
		},
		//表单提交方法
		getData() {
			// 数据处理
			var formData = []
			if (this.form.WXPAY.status === 1) { // 微信费率
				if (this.form.WXPAY.D0.status === 1) {
					formData.push({
						'mode': 'WXPAY',
						'period': 'D0',
						'card_type': '',
						'rate': this.form.WXPAY.D0.rate,
						'rate_2': this.form.WXPAY.D0.rate_2,
						'min_fee': this.form.WXPAY.D0.min_fee,
						'max_fee': this.form.WXPAY.D0.max_fee
					})
				}
				if (this.form.WXPAY.D1.status === 1) {
					formData.push({
						'mode': 'WXPAY',
						'period': 'D1',
						'card_type': '',
						'rate': this.form.WXPAY.D1.rate,
						'rate_2': this.form.WXPAY.D1.rate_2,
						'min_fee': this.form.WXPAY.D1.min_fee,
						'max_fee': this.form.WXPAY.D1.max_fee,
					})
				}
				if (this.form.WXPAY.T0.status === 1) {
					formData.push({
						'mode': 'WXPAY',
						'period': 'T0',
						'card_type': '',
						'rate': this.form.WXPAY.T0.rate,
						'rate_2': this.form.WXPAY.T0.rate_2,
						'min_fee': this.form.WXPAY.T0.min_fee,
						'max_fee': this.form.WXPAY.T0.max_fee,
					})
				}
				if (this.form.WXPAY.T1.status === 1) {
					formData.push({
						'mode': 'WXPAY',
						'period': 'T1',
						'card_type': '',
						'rate': this.form.WXPAY.T1.rate,
						'rate_2': this.form.WXPAY.T1.rate_2,
						'min_fee': this.form.WXPAY.T1.min_fee,
						'max_fee': this.form.WXPAY.T1.max_fee,
					})
				}
			}
			if (this.form.ALIPAY.status === 1) { // 支付宝费率
				if (this.form.ALIPAY.D0.status === 1) {
					formData.push({
						'mode': 'ALIPAY',
						'period': 'D0',
						'card_type': '',
						'rate': this.form.ALIPAY.D0.rate,
						'rate_2': this.form.ALIPAY.D0.rate_2,
						'min_fee': this.form.ALIPAY.D0.min_fee,
						'max_fee': this.form.ALIPAY.D0.max_fee,
					})
				}
				if (this.form.ALIPAY.D1.status === 1) {
					formData.push({
						'mode': 'ALIPAY',
						'period': 'D1',
						'card_type': '',
						'rate': this.form.ALIPAY.D1.rate,
						'rate_2': this.form.ALIPAY.D1.rate_2,
						'min_fee': this.form.ALIPAY.D1.min_fee,
						'max_fee': this.form.ALIPAY.D1.max_fee,
					})
				}
				if (this.form.ALIPAY.T0.status === 1) {
					formData.push({
						'mode': 'ALIPAY',
						'period': 'T0',
						'card_type': '',
						'rate': this.form.ALIPAY.T0.rate,
						'rate_2': this.form.ALIPAY.T0.rate_2,
						'min_fee': this.form.ALIPAY.T0.min_fee,
						'max_fee': this.form.ALIPAY.T0.max_fee,
					})
				}
				if (this.form.ALIPAY.T1.status === 1) {
					formData.push({
						'mode': 'ALIPAY',
						'period': 'T1',
						'card_type': '',
						'rate': this.form.ALIPAY.T1.rate,
						'rate_2': this.form.ALIPAY.T1.rate_2,
						'min_fee': this.form.ALIPAY.T1.min_fee,
						'max_fee': this.form.ALIPAY.T1.max_fee,
					})
				}
			}
			if (this.form.UNIONPAY.status === 1) { // 银联费率
				if (this.form.UNIONPAY.D0.status === 1) {
					this.form.UNIONPAY.D0.table.forEach((item) => {
						formData.push({
							'mode': 'UNIONPAY',
							'period': 'D0',
							'card_type': item.card_type,
							'rate': item.rate,
							'rate_2': item.rate_2,
							'min_fee': item.min_fee,
							'max_fee': item.max_fee,
						})
					})
				}
				if (this.form.UNIONPAY.D1.status === 1) {
					this.form.UNIONPAY.D1.table.forEach((item) => {
						formData.push({
							'mode': 'UNIONPAY',
							'period': 'D1',
							'card_type': item.card_type,
							'rate': item.rate,
							'rate_2': item.rate_2,
							'min_fee': item.min_fee,
							'max_fee': item.max_fee,
						})
					})
				}
				if (this.form.UNIONPAY.T0.status === 1) {
					this.form.UNIONPAY.T0.table.forEach((item) => {
						formData.push({
							'mode': 'UNIONPAY',
							'period': 'T0',
							'card_type': item.card_type,
							'rate': item.rate,
							'rate_2': item.rate_2,
							'min_fee': item.min_fee,
							'max_fee': item.max_fee,
						})
					})
				}
				if (this.form.UNIONPAY.T1.status === 1) {
					this.form.UNIONPAY.T1.table.forEach((item) => {
						formData.push({
							'mode': 'UNIONPAY',
							'period': 'T1',
							'card_type': item.card_type,
							'rate': item.rate,
							'rate_2': item.rate_2,
							'min_fee': item.min_fee,
							'max_fee': item.max_fee,
						})
					})
				}
			}
			this.rates = formData
		}
	}
}
</script>

<style lang="scss" scoped>
.rate-card {
	margin-bottom: 20px;

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 17px;
		font-weight: bold;

		.item-switch {
			display: flex;
			align-items: center;

			.item-check {
				margin-right: 10px;
			}
		}
	}

	.item-content {
		margin-top: 20px;
	}
}
</style>
