cat-power/pages/home/index.vue

<template>
	<view class="container" style="position: relative;">
		
		<!-- 首屏广告 -->
		<div style="margin-bottom: 8px;min-height: 130px">
			<ad-custom v-if="isShow" unit-id="adunit-f8a0fb31ae0f3569" bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</div>
		
		<!-- 侧边广告 -->
		<div style="position: absolute;top:400px;right:0px;z-index:999;opacity: 0.5">
			<ad-custom v-if="isShow" unit-id="adunit-2768960e9f32db36" bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</div>
		
		<div style="display: flex;flex-direction: column;">
			<div style="display: flex;justify-content: space-between;margin-bottom:8px">
				<button plain="true" class="primary-btn" style="padding:5px;width:70px;margin:2px" @click="viewExplam">
					{{ isMockData ? '清除' : '查看' }}示例
				</button>
		
		
				<button  plain="true" class="primary-btn" style="padding:5px;width:70px;margin:2px" @click="switchRoles">
					交换角色
				</button>
				
				<button  plain="true" class="primary-btn" style="padding:5px;width:135px;margin:2px" @click="calculateBestMatch">
					点击获取最佳搭配
				</button>
			</div>

			<uni-table border stripe>
						<uni-tr>
							<uni-th  align="left" width="65px">
								<div style="display: flex;flex-direction: column;color:#989ba1">
									<p style="text-wrap:nowrap;text-align:center">角色</p>
								</div>
							</uni-th>
							
							<uni-th >
								<div style="display: flex;flex-direction: column;color:#989ba1">
									<p style="text-align:left">数量_性别: 势力</p>
								</div>
							</uni-th>
							<!-- <uni-th width="40px" ></uni-th> -->
						</uni-tr>
				
				
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in computedInputData" :key="index">
					<uni-td width="50px"  >
						<div style="display: flex;flex-direction: column;">
							<p style="text-wrap:nowrap;text-align:center">{{ item.role }}</p>
							<!-- <p  style="text-align:center">—</p> -->
							<p  style="text-align:center">{{ item.role === '目标' ?  totalTarget :  totalBackup }}</p>
						</div>
					</uni-td>
					
					
					<uni-td>
						<div style="display: flex;flex-direction: column;">
							<div style="display:flex">
								<p style="width:50px;min-width:50px ;white-space: nowrap;text-align: right;">{{item.gender.male.length}}_公：</p>
								
								<div style="display: flex;flex-wrap:wrap;flex:1">
									<p 
										:style="`margin-right: 5px;width:25px;text-align: center;color:${item.role === '备选' && picks.male.includes(index) ? '#67c23a' : ''}`" 
										v-for="(power, index) in item.gender.male"
									>
									{{ power }}
									</p>
								</div>
								
								<div type="primary" link style="margin-left: 0px;" @click="editRow(item.role)">
									<!-- <uni-icons style="color: #409eff" size="14" type="compose" /> -->
									
									<image src="./edit.png" style="width:15px;height:15px" />
								</div>
							</div>
							
							<div style="display:flex">
								<p style="width:50px;min-width:50px ;white-space: nowrap;text-align: right;">{{item.gender.female.length}}_母：</p>
								
								<div style="display: flex;flex-wrap:wrap">
									<p :style="`margin-right: 5px;width:25px;text-align: center;color:${item.role === '备选' && picks.female.includes(index) ? '#67c23a' : ''}`"  v-for="(power, index) in item.gender.female">{{ power }}</p>
								</div>
							</div>
						</div>
					</uni-td>
					
					
					<!-- <uni-td> -->
							
					<!-- </uni-td> -->
				</uni-tr>
			</uni-table>
			
<!-- 			<div style="border:1px #ebeef5 solid;padding: 10px;text-align:center;color:#909399;margin-top:-1px" v-if="com">
				暂无数据
			</div -->




			<view class="section" v-if="outputData.length > 0" style="flex: 1;margin-bottom: 0px">
				<div style="display: flex;justify-content: space-between;margin-top:10px">
					<text class="section-title" style="color: #303133;font-weight: 500;">最佳搭配方案</text>
					<text  style="color:red">差额：{{ powerDifference }}</text>
				</div>


				<uni-table border stripe style="width:100%">
					<uni-tr  class="has-bg" style="background: #f2f2f2">
						<uni-th align="left" width="65px">
							<div style="display: flex;flex-direction: column;border-bottom: 0px !important;position: absolute;top:26px;left: 2px;width:62px;background: #f5f7fa;">
								<p style="text-wrap:nowrap;text-align:center;color:#989ba1">角色</p>
								<!-- <p style="text-align:center">—</p> -->
							</div>
						</uni-th>
						<uni-th align="left" style="border-right:0px !important">
							<div style="display: flex;flex-direction: column;">
								<p style="text-align:left;color:#989ba1">搭配结果</p>
								<div style="position: absolute;height:42px;left:223px;background:#f5f7fa;top:1px;width:10px"></div>
							</div>
						</uni-th>
						<uni-th align="left" style="border-left:0px !important"></uni-th>
					</uni-tr>
					
					<div class="uni-table-tr no-padding" style="display: table-row;">
								<uni-th align="left" width="50px">
								</uni-th>
								<!-- <uni-th align="center" width="70px"></uni-th> -->
								<uni-th :width="1000 + 'px'" class="uni-table-th table--border no-padding" style="text-align: left;color:#989ba1;">
									{{ outputData[1].femalePowers.length }}对
								</uni-th>
								
								<uni-th :width="1000 + 'px'" class="uni-table-th table--border no-padding" style="text-align: left;color:#989ba1">
									{{ outputData[1].malePowers.length }}对
								</uni-th>
					</div>
					
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in outputData" :key="index">
						<uni-td width="50px" >
						<div style="display: flex;flex-direction: column;">
							<p style="text-wrap:nowrap;text-align:center">{{ item.role }}</p>
							<!-- <p  style="text-align:center">—</p> -->
							<p  style="text-align:center">{{ item.role === '目标' ?  totalTarget :  totalPick }}</p>
						</div>
						</uni-td>
						
						<uni-td >
							<div style="display: flex;">
								<!-- <p style="width: 25px;min-width:25px">{{  index === 0 ? '公' : '母' }}:</p> -->
								
								<div style="display:flex;flex-wrap:wrap">
									<p :style="`margin-right: 5px;width:25px;text-align: center;color: ${index === 0 ? 'rgb(103, 194, 58)' : '#e6a23c'}`" v-for="power in (index ===0 ? item.malePowers : item.femalePowers)">{{ power }}</p>
								</div>
							</div>
						</uni-td>
						
				<uni-td>
					<div style="display: flex;">
						<!-- <p style="width: 25px;min-width:25px">{{  index === 0 ? '母' : '公' }}:</p> -->
						
						<div style="display:flex;flex-wrap:wrap">
							<p :style="`margin-right: 5px;width:25px;text-align: center;color: ${index === 1 ? 'rgb(103, 194, 58)' : '#e6a23c'}`" v-for="power in (index === 0 ? item.femalePowers : item.malePowers)">{{ power }}</p>
						</div>
					</div>
				</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</div>

		<uni-popup ref="batchRef" :is-mask-click="false">
			<div
				style="display: flex;flex-direction: column;justify-content: center;padding: 10px; width: 95%;background: #fff;border-radius: 10px;padding: 10px;">
				<div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
					<h4 style="margin-bottom: 10px"> 编辑{{ role }}</h4>
					<uni-icons type="closeempty" size="18" @click="batchRef.close()"></uni-icons>
				</div>


				<div style="display: flex;justify-content: space-between; align-items: center;">
					<span class="dialog-title">猫咪势力(公)</span>
					<uni-icons type="close" size="18" @click="malePowers = ''"></uni-icons>
				</div>

				<textarea v-model="malePowers" placeholder="用逗号或顿号隔开，如:200,150,100"
					style="height: 70px;border: 1px solid #dfe2e5" />

				<div style="display: flex;justify-content: space-between; align-items: center;">
					<span class="dialog-title">猫咪势力(母)</span>
					<uni-icons type="close" size="18" @click="feMalePowers = ''"></uni-icons>
				</div>

				<textarea v-model="feMalePowers" placeholder="用逗号或顿号隔开，如:200,150,100"
					style="height: 70px;border: 1px solid #dfe2e5" />

				<div style="display: flex;justify-content: flex-end;">
					<button size='mini' type="primary" @click="handleConfirm">保存</button>
				</div>
			</div>
		</uni-popup>



		<uni-popup ref="messageRef" type="message">
			<uni-popup-message type="error" :message="messageText" :duration="5000"></uni-popup-message>
		</uni-popup>


		<uni-popup ref="helpRef" :is-mask-click="false">
			<div class="help-modal"
				style="display: flex; justify-content: center;flex-direction: column;padding: 10px; width: 90vw;background: #fff;border-radius: 10px;padding: 30px;box-sizing: border-box;">
				<div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
					<span></span>
					<h4 style="margin-bottom: 10px">使用说明</h4>
					<uni-icons type="closeempty" size="18" @click="helpRef.close()"></uni-icons>
				</div>

				<div style="margin-bottom: 10px;">
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“喵缘礼堂”是一款专注于为猫咪结婚提供解决方案的应用。它以所有目标角色猫咪的势力总和作为基准，通过筛选备选角色猫咪，为用户匹配出其势力总和最接近目标角色猫咪势力总和的方案。
				</div>

				<div>
					<p style="font-weight: bold;margin-bottom: 10px">使用方法：</p>
					<p style="margin-bottom: 10px">1.录入目标猫咪势力数据，总数≤20 只，依次准确填写。</p>
					<p style="margin-bottom: 10px">2.输入备选猫咪势力数据，不同性别数均≤20 只，详细填写。</p>
					<p>3.点击 “计算最佳匹配方案”，系统将据此算出最适配方案。</p>
				</div>
			</div>
		</uni-popup>


		<div class="loading" v-if="loading">
			<div class="loading-wrapper">
				<image src="./cat-load.gif" style="width:260px;height:260px" />
			</div>
		</div>
	</view>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue';


const helpRef = ref(null)
const messageText = ref('')
const messageRef = ref(null)

const loading = ref(false)
const isMockData = ref(false)
const index = ref(-1)
const time = ref("")
const role = ref("")
const type = ref('')
const gender = ref("")
const powers = ref("")
const malePowers = ref('')
const feMalePowers = ref('')

const totalTarget = ref(0)
const totalBackup =  ref(0)

const totalPick = ref(0)


const picks = ref({
	male: [],
	female: []
})

const isShow = ref(true)

setInterval(() => {
	isShow.value = false
	
	nextTick(() => isShow.value = true)
}, 10000)

const mockData = [
{
	   role: '目标', num: 11, gender: '公',
	   power: '153, 91, 77, 138, 90, 80, 60, 54, 52, 52, 52'
	},
	{
	   role: '目标', num: 9, gender: '母',
	   power: '121, 118, 115, 86, 84, 84, 59, 53, 51'
	},
	{
	   role: '备选', num:12, gender: '公',
	   power: '174, 152, 147, 102, 101, 98, 98, 97, 62, 60, 58, 19'
	},
	{
	   role: '备选', num: 20, gender: '母',
	   power: '180, 165, 158, 154, 152, 151, 150, 150, 102, 101, 101, 93, 61, 30, 30, 29, 29, 29, 27, 10'
	}
]

const mockOutData = [
    {
        "role": "目标",
        "malePowers": [
            "153",
            " 138",
            " 91",
            " 90",
            " 80",
            " 77",
            " 60",
            " 54",
            " 52",
            " 52",
            " 52"
        ],
        "femalePowers": [
            "121",
            " 118",
            " 115",
            " 86",
            " 84",
            " 84",
            " 59",
            " 53",
            " 51"
        ]
    },
    {
        "role": "备选",
        "malePowers": [
            102,
            101,
            98,
            98,
            97,
            62,
            60,
            58,
            19
        ],
        "femalePowers": [
            180,
            165,
            158,
            154,
            101,
            93,
            29,
            29,
            29,
            27,
            10
        ]
    }
]

const inputData = ref([	
	{ role: '目标', num: 0, gender: '公', power: '' },
	{ role: '目标', num: 0, gender: '母', power: '' },
	{ role: '备选', num: 0, gender: '公', power: '' },
	{ role: '备选', num: 0, gender: '母', power: '' }
]);


const computedInputData = computed(() => {
	const target = inputData.value.slice(0, 2)
	const backup = inputData.value.slice(2)
	
	
	return [
		{
			role: '目标',
			gender: {
				male: target[0].power.split(',').filter(item => !!item).sort((a, b) => b - a),
				female: target[1].power.split(',').filter(item => !!item).sort((a, b) => b - a),
			}
		},
		{
			role: '备选',
			gender: {
				male: backup[0].power.split(',').filter(item => !!item).sort((a, b) => b - a),
				female: backup[1].power.split(',').filter(item => !!item).sort((a, b) => b - a),
			}
		}
	]
})

const computedOutputData = computed(() => {
	console.log(outputData.value)
})
	
const outputData = ref([]);
const batchRef =  ref(null)

function editRow(_role) {
	type.value = 'edit'
	role.value = _role
	// index.value = _index

	if(_role === '目标'){
		
		inputData.value[1].power = inputData.value[1].power.split(',').sort((a,b) => b - a).join(',')
		inputData.value[0].power = inputData.value[0].power.split(',').sort((a,b) => b - a).join(',')
		
		feMalePowers.value = inputData.value[1].power
		malePowers.value = inputData.value[0].power
	} else {
		inputData.value[3].power = inputData.value[3].power.split(',').sort((a,b) => b - a).join(',')
		inputData.value[2].power = inputData.value[2].power.split(',').sort((a,b) => b - a).join(',')
		feMalePowers.value = inputData.value[3].power
		malePowers.value = inputData.value[2].power
	}

	batchRef.value.open()
}

function viewExplam(){
	if(!isMockData.value){
		inputData.value = JSON.parse(JSON.stringify(mockData))
		outputData.value  = JSON.parse(JSON.stringify(mockOutData))
		totalTarget.value = 1670
		totalBackup.value = 3070
		totalPick.value = 1670
		
		
		picks.value = {
    "male": [
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11
    ],
    "female": [
        0,
        1,
        2,
        3,
        9,
        11,
        15,
        16,
        17,
        18,
        19
    ]
}
		
	} else {
		picks.value = { male: [], female: [] }
		inputData.value = [
			{ role: '目标', num: 0, gender: '公', power: '' },
			{ role: '目标', num: 0, gender: '母', power: '' },
			{ role: '备选', num: 0, gender: '公', power: '' },
			{ role: '备选', num: 0, gender: '母', power: '' }
		]

		outputData.value = []
		totalTarget.value = 0
		totalBackup.value = 0
	}
	
	isMockData.value = !isMockData.value
}



function switchRoles(){
	outputData.value = []
	const [t1, t2, b1, b2] = inputData.value
	
	picks.value.male = []
	picks.value.female = []
	
	const temp = totalBackup.value
	totalBackup.value = totalTarget.value
	totalTarget.value = temp
	
	inputData.value[0] = { ...b1 }
	inputData.value[1] = { ...b2 }
	inputData.value[2] = { ...t1 }
	inputData.value[3] = { ...t2 }
	
	isMockData.value = false
}

const powerDifference = ref(0)

function isPositiveInteger(str) {
    return /^[1-9]\d*$/.test(str);
}

function generatePowers(){
	const melePowers = malePowers.value.replace(/，|、|,/g, ',')
	const femalePowers = feMalePowers.value.replace(/，|、|,/g, ',')
	
	const malePowerSet = melePowers.split(',').map(item => item.trim()).filter(item => item !== '')
	const femalePowerSet =  femalePowers.split(',').map(item => item.trim()).filter(item => item !== '')
	
	const isOk = malePowerSet.every(num => isPositiveInteger(num))
	const isFeOk = femalePowerSet.every(num => isPositiveInteger(num))
	if ((!isOk && malePowerSet.length !== 0) && (!isFeOk && femalePowerSet.length === 0)) return false
	
	
	const isTaget = role.value === '目标'
	
	
	if(isTaget){
		if(malePowerSet.length + femalePowerSet.length > 20){
			messageRef.value.close()
			messageRef.value.open()
			messageText.value = '目标角色总数不能超过20只'
			return 'overflow'
		}
		
		inputData.value[0].num = malePowerSet.length;
		inputData.value[0].power = malePowerSet.join(',')
		inputData.value[1].num = femalePowerSet.length;
		inputData.value[1].power = femalePowerSet.join(',')
		const total1 = inputData.value[0].power.split(',').reduce((prev, current) => Number(current) + prev, 0)
		const total2 = inputData.value[1].power.split(',').reduce((prev, current) => Number(current) + prev, 0)
		totalTarget.value = total1 + total2
	} else {
		if(malePowerSet.length === 0 && femalePowerSet.length === 0){
			messageRef.value.close()
			messageRef.value.open()
			messageText.value = '至少输入一个势力！'
			return 'overflow'
		}
		
		inputData.value[2].num = malePowerSet.length;
		inputData.value[2].power = malePowerSet.join(',')
		inputData.value[3].num = femalePowerSet.length;
		inputData.value[3].power = femalePowerSet.join(',')
		const total1 = inputData.value[2].power.split(',').reduce((prev, current) => Number(current) + prev, 0)
		const total2 = inputData.value[3].power.split(',').reduce((prev, current) =>  Number(current) + prev,0)
		totalBackup.value = total1 + total2
	}
}


function handleConfirm(){	
	messageRef.value.close()

	const isMaleOk = generatePowers()
	const isFemaleOk = generatePowers()
	
	if(isMaleOk === 'overflow'){ return }
	
	
	if (typeof isMaleOk === 'boolean' && !isMaleOk){
		messageRef.value.close()
		messageRef.value.open()
		messageText.value = '势力必须为数字'
		return
	} else if (typeof isFemaleOk === 'boolean' && !isFemaleOk) {
		messageRef.value.close()
		messageRef.value.open()
		messageText.value = '势力必须为数字'
		return
	}

	outputData.value = []
	picks.value.male = []
	picks.value.female = []
	batchRef.value.close()
	
	isMockData.value = false
}

 function adLoad() {
    console.log('原生模板广告加载成功')
  }
  
function adError(err) {
    console.error('原生模板广告加载失败', err)
  }
  
function adClose() {
    console.log('原生模板广告关闭')
  }

// 生成数组的所有组合（辅助函数，用于生成指定个数元素的组合情况）
function getCombinations(arr, num) {
    const result = [];
	if (num === 0) { return [[]]; }

    for (let i = 0; i < arr.length; i++) {
        const element = arr[i];

        const remainingCombos = getCombinations(arr.slice(i + 1), num - 1);

		for (const combo of remainingCombos) {
            result.push([element].concat(combo));
        }
    }

    return result;
}


function stop(delay) {
	return new Promise((resolve) => setTimeout(() => { resolve(true) }, delay))
}

let videoAd = null

	if (process.env.UNI_PLATFORM.toUpperCase() === 'MP-WEIXIN') {
		if (wx.createRewardedVideoAd) {
		  videoAd = wx.createRewardedVideoAd({
		    adUnitId: 'adunit-c90f984d29d8d175'
		  })
		  videoAd.onLoad(() => {
			  loading.value = false
			  console.log('激励视频家加载....')
		  })
		  videoAd.onError((err) => {
			  loading.value = false
			 console.error('激励视频光告加载失败', err)
		  })

		}
		
	}
	function onShareAppMessage(res){
		return{
			title:"喵缘礼堂",
			path:"/pages/index/index",
			imageUrl:"https://example.com/share-image.png",
		}
	}
	
function onShareTimeline(res){
	return{
		title:"喵缘礼堂",
		query:"path/to/page?param=value",
		imageUrl:"https://example.com/share-timeline-image.png"
	}
}

function calculateBestMatch() {
	// loading.value = true
	if (outputData.value.length !== 0) {
		loading.value = false
		messageRef.value.open()
		messageText.value = '请编辑猫咪势力后,再匹配方案'
		return
	}


	const result =  handleDataSync()
	if(!result){ return }
	
	if (process.env.UNI_PLATFORM.toUpperCase() === 'MP-WEIXIN') {
		videoAd.onClose((res) => {
			 if(res.isEnded){
				console.log('加载完成', result)
				outputData.value = result
			} else {
				picks.value.male = []
				picks.value.female = []
				outputData.value = []
			}
		})
		
		// 用户触发广告后，显示激励视频广告
		if (videoAd) {
		  videoAd.show().catch((res) => {
		    // 失败重试
		    videoAd.load()
		      .then(() => {
				  console.log('拉取失败')
				  loading.value = false
				  videoAd.show()
			  })
		      .catch(err => {
		        console.error('激励视频 广告显示失败', err)
				loading.value = false
		      })
		  })
		}
	} else {
		 outputData.value = result
		 loading.value = false
	}
	
}

function handleDataSync(){
			let startTime = new Date().getTime()
			let endTime = null
					
			outputData.value = []
			
			const targetMale = inputData.value[0].power.split(',').filter(item => item !== '').map(Number)
			const targetFemale = inputData.value[1].power.split(',').filter(item => item !== '').map(Number)
			const backupMale = inputData.value[2].power.split(',').filter(item => item !== '').map(Number)
			const backupFemale = inputData.value[3].power.split(',').filter(item => item !== '').map(Number)
			
			if (targetMale.length === 0 && targetFemale.length === 0) {
				loading.value = false
				messageRef.value.open()
				messageText.value = '至少输入一个势力！'
				return
			}
			
			if(targetFemale.length + targetFemale.length > 20){
				loading.value = false
				messageRef.value.open()
				messageText.value = '目标角色的猫咪总数不能超过20只！'
				return
			}
			
			if(backupMale.length > 20){
				loading.value = false
				messageRef.value.open()
				messageText.value = '备选角色的公猫咪不能超过20只！'
				return
			}
			
			if(backupFemale.length > 20){
				loading.value = false
				messageRef.value.open()
				messageText.value = '备选角色的母猫咪不能超过20只！'
				return
			}
			
			
			if (targetFemale.length > backupMale.length && backupMale.length !== 0){
				loading.value = false
				messageRef.value.open()
				messageText.value = '备选角色的公猫咪数量应不少于目标角色的母猫咪数量！'
				return
			}
			
			if (targetMale.length > backupFemale.length && backupFemale.length !== 0) {
				loading.value = false
				messageRef.value.open()
				messageText.value = '备选角色的母猫咪数量应不少于目标角色的公猫咪数量！'
				return
			}
			
			
			const targetMaleLen = targetMale.length;
			const targetFemaleLen = targetFemale.length;
			
			
			let targetWeight = 0
			if (backupMale.length === 0){
				targetWeight =  targetMale.reduce((acc, val) => acc + val, 0);
			} else if(backupFemale.length === 0){
				targetWeight = targetFemale.reduce((acc, val) => acc + val, 0)
			} else if(backupMale.length !== 0 && backupFemale.length !== 0){
				targetWeight = targetMale.reduce((acc, val) => acc + val, 0) + targetFemale.reduce((acc, val) => acc + val, 0);
			}
			
			let minDifference = Infinity; 
			let bestfemaleCombination = null;
			let bestMaleCombination = null;
			const femaleCombinations = getCombinations(backupFemale, targetMaleLen);
			const maleCombinations = getCombinations(backupMale, targetFemaleLen);
			
			if (femaleCombinations.length !== 0 && maleCombinations.length !== 0){
				for (const femaleComb of femaleCombinations) {
					for (const maleComb of maleCombinations) {
						const totalWeight = femaleComb.reduce((acc, val) => acc + val, 0) + maleComb.reduce((acc, val) => acc + val, 0);
						const difference = Math.abs(totalWeight - targetWeight);
						if (difference < minDifference) {
							minDifference = difference;
							bestfemaleCombination = femaleComb;
							bestMaleCombination = maleComb;
							if (minDifference == 0) {
								break;
							}
						}
					}
				}
			}
			
			
			// 备选数据的母为空
			if (femaleCombinations.length === 0 && maleCombinations.length !== 0) {
				for (const maleComb of maleCombinations) {
					const totalWeight = maleComb.reduce((acc, val) => acc + val , 0);
					const difference = Math.abs(totalWeight - targetWeight);
					if (difference < minDifference) {
						minDifference = difference;
						bestMaleCombination = maleComb;
						if (minDifference == 0) {
							break;
						}
					}
				}
			}
			
			// 备选数据的公为空
			if (femaleCombinations.length !== 0 && maleCombinations.length === 0) {
				for (const femaleComb of femaleCombinations) {
						const totalWeight = femaleComb.reduce((acc, val) => acc + val, 0)
						const difference = Math.abs(totalWeight - targetWeight);
						if (difference < minDifference) {
							minDifference = difference;
							bestfemaleCombination = femaleComb;
							// bestMaleCombination = maleComb;
							if (minDifference == 0) {
								break;
							}
						}
				}
			}
			
			bestMaleCombination && bestMaleCombination.sort((a, b) => b - a)
			bestfemaleCombination && bestfemaleCombination.sort((a, b) => b - a)
			targetMale.sort((a, b) =>  b - a)
			targetFemale.sort((a, b) =>  b - a)
			if (!bestMaleCombination && !bestfemaleCombination){ return }
		
			const result = [
				{
					role: '目标',
					malePowers: computedInputData.value[0].gender.male.sort((a, b) => b - a),
					femalePowers: computedInputData.value[0].gender.female.sort((a, b) => b - a),
				},
				{
					role: '备选',
					malePowers: bestMaleCombination.sort((a, b) => b - a),
					femalePowers: bestfemaleCombination.sort((a, b) => b - a),
				}
			]
			
			
			bestMaleCombination.forEach(power => {
				const index = backupMale.findIndex(p => p === power)
				backupMale[index] = null
				picks.value.male.push(index)
			})
			
			
			bestfemaleCombination.forEach(power => {
				const index = backupFemale.findIndex(p => p === power)
				backupFemale[index] = null
				picks.value.female.push(index)
			})
			
			
			totalPick.value = bestfemaleCombination.reduce((prev, current) => Number(current) + prev, 0)
			totalPick.value += bestMaleCombination.reduce((prev, current) => Number(current) + prev, 0)
			
			
			powerDifference.value = totalTarget.value - totalPick.value
			endTime = new Date().getTime()
			time.value = endTime - startTime
			
			return result
			// resolve(result)
} 



function handleData(){
	return new Promise(async (resolve) => {
		setTimeout(async () => {
			
			let startTime = new Date().getTime()
			let endTime = null
					
			outputData.value = []
			
			const targetMale = inputData.value[0].power.split(',').filter(item => item !== '').map(Number)
			const targetFemale = inputData.value[1].power.split(',').filter(item => item !== '').map(Number)
			const backupMale = inputData.value[2].power.split(',').filter(item => item !== '').map(Number)
			const backupFemale = inputData.value[3].power.split(',').filter(item => item !== '').map(Number)
			
			if (targetMale.length === 0 && targetFemale.length === 0) {
				loading.value = false
				messageRef.value.open()
				messageText.value = '至少输入一个势力！'
				return
			}
			
			if(targetFemale.length + targetFemale.length > 20){
				loading.value = false
				messageRef.value.open()
				messageText.value = '目标角色的猫咪总数不能超过20只！'
				return
			}
			
			if(backupMale.length > 20){
				loading.value = false
				messageRef.value.open()
				messageText.value = '备选角色的公猫咪不能超过20只！'
				return
			}
			
			if(backupFemale.length > 20){
				loading.value = false
				messageRef.value.open()
				messageText.value = '备选角色的母猫咪不能超过20只！'
				return
			}
			
			
			if (targetFemale.length > backupMale.length && backupMale.length !== 0){
				loading.value = false
				messageRef.value.open()
				messageText.value = '备选角色的公猫咪数量应不少于目标角色的母猫咪数量！'
				return
			}
			
			if (targetMale.length > backupFemale.length && backupFemale.length !== 0) {
				loading.value = false
				messageRef.value.open()
				messageText.value = '备选角色的母猫咪数量应不少于目标角色的公猫咪数量！'
				return
			}
			
			
			const targetMaleLen = targetMale.length;
			const targetFemaleLen = targetFemale.length;
			
			
			let targetWeight = 0
			if (backupMale.length === 0){
				targetWeight =  targetMale.reduce((acc, val) => acc + val, 0);
			} else if(backupFemale.length === 0){
				targetWeight = targetFemale.reduce((acc, val) => acc + val, 0)
			} else if(backupMale.length !== 0 && backupFemale.length !== 0){
				targetWeight = targetMale.reduce((acc, val) => acc + val, 0) + targetFemale.reduce((acc, val) => acc + val, 0);
			}
			
			let minDifference = Infinity; 
			let bestfemaleCombination = null;
			let bestMaleCombination = null;
			const femaleCombinations = getCombinations(backupFemale, targetMaleLen);
			const maleCombinations = getCombinations(backupMale, targetFemaleLen);
			
			if (femaleCombinations.length !== 0 && maleCombinations.length !== 0){
				for (const femaleComb of femaleCombinations) {
					for (const maleComb of maleCombinations) {
						const totalWeight = femaleComb.reduce((acc, val) => acc + val, 0) + maleComb.reduce((acc, val) => acc + val, 0);
						const difference = Math.abs(totalWeight - targetWeight);
						if (difference < minDifference) {
							minDifference = difference;
							bestfemaleCombination = femaleComb;
							bestMaleCombination = maleComb;
							if (minDifference == 0) {
								break;
							}
						}
					}
				}
			}
			
			
			// 备选数据的母为空
			if (femaleCombinations.length === 0 && maleCombinations.length !== 0) {
				for (const maleComb of maleCombinations) {
					const totalWeight = maleComb.reduce((acc, val) => acc + val , 0);
					const difference = Math.abs(totalWeight - targetWeight);
					if (difference < minDifference) {
						minDifference = difference;
						bestMaleCombination = maleComb;
						if (minDifference == 0) {
							break;
						}
					}
				}
			}
			
			// 备选数据的公为空
			if (femaleCombinations.length !== 0 && maleCombinations.length === 0) {
				for (const femaleComb of femaleCombinations) {
						const totalWeight = femaleComb.reduce((acc, val) => acc + val, 0)
						const difference = Math.abs(totalWeight - targetWeight);
						if (difference < minDifference) {
							minDifference = difference;
							bestfemaleCombination = femaleComb;
							// bestMaleCombination = maleComb;
							if (minDifference == 0) {
								break;
							}
						}
				}
			}
			
			bestMaleCombination && bestMaleCombination.sort((a, b) => b - a)
			bestfemaleCombination && bestfemaleCombination.sort((a, b) => b - a)
			targetMale.sort((a, b) =>  b - a)
			targetFemale.sort((a, b) =>  b - a)
			if (!bestMaleCombination && !bestfemaleCombination){ return }
		
			
			loading.value = false
			
			
			const result = [
				{
					role: '目标',
					malePowers: computedInputData.value[0].gender.male.sort((a, b) => b - a),
					femalePowers: computedInputData.value[0].gender.female.sort((a, b) => b - a),
				},
				{
					role: '备选',
					malePowers: bestMaleCombination.sort((a, b) => b - a),
					femalePowers: bestfemaleCombination.sort((a, b) => b - a),
				}
			]
			
			

			
			bestMaleCombination.forEach(power => {
				const index = backupMale.findIndex(p => p === power)
				backupMale[index] = null
				picks.value.male.push(index)
			})
			
			
			bestfemaleCombination.forEach(power => {
				const index = backupFemale.findIndex(p => p === power)
				backupFemale[index] = null
				picks.value.female.push(index)
			})
			
			
			totalPick.value = bestfemaleCombination.reduce((prev, current) => Number(current) + prev, 0)
			totalPick.value += bestMaleCombination.reduce((prev, current) => Number(current) + prev, 0)
			
			
			powerDifference.value = totalTarget.value - totalPick.value
			endTime = new Date().getTime()
			time.value = endTime - startTime
			
			resolve(result)
		}, 0)
	})
} 

const width = ref(0)
function getInner(){
	uni.getSystemInfo({
		success: function (res) {
			const windowWidth = res.windowWidth;   // 窗口宽度
			width.value = (windowWidth - 40 - 85) / 2
		}
	});
}

onMounted(() => {
	getInner()
})



// uni.onWindowResize(getInner)

viewExplam()
</script>
<style>



</style>
<style>
/* 	uni-button {
		margin: 2px !important;
	}
	 */
	uni-button::after {
		/* display: none; */
		/* border: 0px solid rgb(224.6, 242.8, 215.6) !important; */
		/* border: 2px solid transparent !important; */
	}
	button {
		border: none !important;
		background: rgb(239.8, 248.9, 235.3) !important;
		color: #67c23a !important;
		outline: none !important;
	}
	
	.primary-btn {

	}
	
	
	.no-padding .uni-table-th {
		padding: 0px !important;
		padding-left: 10px !important;
	}
	
	.uni-table-th {
		background: #f5f7fa !important;
		/* margin-left: -1px !important; */
		/* border: 1px solid rgb(226, 226, 226) !important; */
		/* margin-bottom: -1px !important; */
	}
	
	.uni-table-td {
		/* border: 1px solid rgb(226, 226, 226) !important; */
	}

	.edit-button {
		color: #409eff !important;
		cursor: pointer;
	}
	
	textarea {
		font-size: 13px;
		padding: 8px;
	}
	
	.text-power {
		overflow-wrap: anywhere;
		text-wrap: wrap;
	}
	
	.help-modal {
		line-height: 24px;
		color: #2c3e50;
	}
	
.u-table{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 80px;
	justify-content: flex-start;
	font-size: 14px !important;
	height: auto;

	border-top: 1px solid #ebeef5;
	border-left: 1px solid #ebeef5;
	/* background: red */
}

.u-table-tr {
	display: flex;
	color: #909399;
	height: 40px !important;
	margin-top: -1px;
}

.u-table-body {
	height: calc(100% - 80px);
	overflow: auto;
}


.u-table-th {
	display: flex;
	border: 1px solid #ebeef5;
	padding: 8px 10px;
	margin-left: -1px;
	font-weight: bold;
}


.u-table-td {
	display: flex;
	border: 1px solid #ebeef5;
	padding: 8px 10px;
	margin-left: -1px;
}


.u-table-th-custom {
	display: flex;
	border: 1px solid #ebeef5;
	margin-left: -1px;
}

	
.edit-btn {
	padding: 0px !important;
	border: 0px !important;
	display: block;
	background: #fff !important;
}

.edit-btn:after {
	border: 0px !important;
}


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader {
  animation: spin 2s linear infinite; /* 应用旋转动画 */
}

textarea {
	font-size: 13px;
	padding: 8px;
}

	
	.uni-table-loading {
		display: none !important;
	}
</style>


<style lang="scss" scoped>

		

button {
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	text-wrap: nowrap !important;
	
	width: 85px;
	// padding: 13px 10px;
}


.dialog-title {
	line-height: 30px;
	padding-left: 10px;
	font-size: 14px;
}


.table-wrapper {
	font-size: 14px !important;
}


.custom-picker {
    border: 1px solid #e3e3e3;
    padding: 3px 5px;
    text-align: center;
	width: 100%;
	
    
    div {
        display: flex;
        justify-content: space-between;
        
        text {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}

.container {
    padding: 10px 20px;
}

.section {
    margin-bottom: 20px;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
	text-wrap: nowrap;
}

.input {
    width: 100%;
    text-align: center;
    border: 1px solid #ddd;
    padding: 5px;
}

button {
    margin: 5px;
}

.add-btn,
.calculate-btn {
    background-color: #007bff;
    color: white;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    border-radius: 5px;
}

.delete-btn {
    background-color: #ff4d4f;
    color: white;
    padding: 5px;
    font-size: 14px;
    border-radius: 5px;
}

.summary {
    margin-top: 20px;
    font-size: 14px;
    text-align: right;
    font-weight: bold;
}

.loading {
	position: fixed;
	top: 0px;
	left: 0px;

	width: 100vw;
	height: 100vh;

	background: rgba(0, 0, 0, .6);

	display: flex;
	justify-content: center;
	align-items: center;


	.loading-wrapper {
		height: 260px;
		width: 260px;
		border-radius: 100%;
		overflow: hidden;
		display: flex;

		justify-content: center;
		align-items: center;

		img {
			height: 260px;
			width: 260px;
		}
	}
}

.uni-table-th-content {
	text-wrap: nowrap;
}

.uni-table-loading {
	display: block !important;
}

.uni-table-scroll {
	border: 1px solid #EBEEF5;
}
</style>