<template>
	<view class="view-page" :style="{backgroundImage: `url('${ThemeData?.app_bg || baseBgUrl}')`}">
		<headerHeight />
		<navBar :navTitle="`退出审核`">
		</navBar>
		<view class="content">
			<view class="box-line flex-line w-fill" v-for="(ele, index) in dataList">
				<view class="flex-line">
					<img style="width: 100rpx;height: 100rpx;border-radius: 50%;" :src="ele.avatar || logo" alt="" />
					<view class="ml-20">
						<view class="color-3 font-32 font-w500">
							{{ ele.nickname }}
						</view>
						<view class="color-6 font-24">
							ID: {{ ele.user_code }}
						</view>
					</view>
				</view>
				<view>
					<view :class="ele.status === 1 ? 'success-text' : 'error-text'" v-if="ele.status">
						{{ ele.status === 1 ? '已同意' : '已拒绝' }}
					</view>
					<view class="flex-line" v-else>
						<view class="no-button" @click="RefuseOrAgreeData(ele, 2)">
							拒绝
						</view>
						<view class="agree-button" @click="RefuseOrAgreeData(ele, 1)">
							同意
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
import headerHeight from '@/component/headerHeight.vue';
import config from '@/until/config.js';
import http from '@/until/http.js';
import logo from '@/static/image/logo.png';
import navBar from '@/component/nav.vue';
export default {
	components: {
		headerHeight,
		navBar
	},
	data() {
		return {
			logo,
			baseBgUrl:config.PRIMARY_BGURL,
			guildId: null,
			msgType: "",
			messageText: "",
			dataList: [],
			searchParams: {
				guild_id: 0,
				token: uni.getStorageSync('token') || ''
			},
			ThemeData: null
		}
	},
	onLoad(options) {
		const {
			id
		} = options
		this.searchParams.guild_id = id
		if (id) this.getList()
		if (uni.getStorageSync('Theme_Data')) {
			this.ThemeData = JSON.parse(uni.getStorageSync('Theme_Data'))
		}
	},
	methods: {
		async RefuseOrAgreeData(ele, type) {
			const {
				code,
				data,
				msg
			} = await http.post('/api/Guild/quit_apply_audit', {
				token: uni.getStorageSync('token') || '',
				apply_id: ele.id,
				type
			})
			if (code === 1) {
				this.msgType = 'success'
				this.messageText = `操作成功`
				this.$refs.message.open()
				this.getList()
			} else {
				this.messageText = msg
				this.msgType = 'error'
				this.$refs.message.open()
			}
		},
		async getList() {
			const {
				code,
				data
			} = await http.get('/api/Guild/quit_apply_list', this.searchParams)
			if (code) {
				this.dataList = data.list
			}
		}
	}
}
</script>

<style scoped lang="scss">
.view-page {
	min-height: 100vh;
	font-family: Source Han Sans CN, Source Han Sans CN;
	background-repeat: no-repeat;
	background-size: 100% 100%;

	.content {
		padding: 0 24rpx;
		width: calc(100vw - 48rpx);
		height: calc(100vh - 67px);

		.box-line {
			justify-content: space-between;
			margin-top: 24rpx;

			.success-text {
				color: var(--primary-color);
			}

			.error-text {
				color: #FC8871;
			}

			.agree-button,
			.no-button {
				width: 140rpx;
				height: 48rpx;
				background: var(--primary-color);
				color: var(--font-button-color);
				border-radius: 68rpx;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
			}

			.no-button {
				background-color: #333333;
				color: #fff;
				margin-right: 24rpx;
			}
		}
	}
}
</style>