<template>
	<view>
		<uni-collapse>
			<uni-collapse-item :title="n.newName" v-for="n in list" :key="n.id" open>
				<view class="collapseBody">
					<view>
						<label>会员编号：</label>
						<text>{{n.memCode}}</text>
					</view>
					<view>
						<label>单位会员名称：</label>
						<view>
							{{n.oldName}}
								<text class="text-primary" v-if="n.oldName!=n.newName">变更为 </text>
								<text class="text-danger" v-if="n.oldName!=n.newName">{{ n.newName }}</text>
							
						</view>
					</view>

					<view v-if="n.fileUrl">
						<label>附件：</label>
						<text class="text-primary" @click="showImg(n)">
							查看附件
						</text>
					</view>
				</view>

			</uni-collapse-item>
		</uni-collapse>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import * as api from '@/common/api.js'
	import { parseAttachmentJson, previewAttachment } from '@/common/utils.js'
	const queryParams = ref({})
	const total = ref(0)
	const list = ref([])
	const popup = ref(null)
	const type = ref('')
	const form = ref({})
	onLoad((option) => {
		if (option.rangeId) {
			queryParams.value.rangeId = option.rangeId
			getList()
		}
	})

	function getList() {
		uni.showLoading({
			title: '加载中'
		})
		api.getChangeGroupByRangeId(queryParams.value).then(res => {
			list.value = res.rows
			list.value.forEach(item => {
				item.fileUrl = parseAttachmentJson(item.fileUrl)
			})
			total.value = res.total
			uni.hideLoading()
		})
	}

	function showImg(n) {
		previewAttachment(n.fileUrl, { title: '查看附件' })
	}
</script>
<style scoped lang="scss">
	.flexbox {
		padding: 30rpx 30rpx 0
	}

	.danger-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.collapseBody {
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;

		&>view {
			margin: 0 0 20rpx;display: flex;

			label {
				width: 7em;
				color: #999;
				display: inline-block;
				text-align: right;flex:0 0 auto;
			}
			view{flex:1 1 auto;}
		}
	}

	.popBody {
		background: #fff;
		padding: 30rpx;
	}
</style>