<template>
	<view class="content">
		<view class="header">
			<image src="../../static/images/skm_fn_bg.png" mode="aspectFill" class="bg-img"></image>
			<view class="info-block">
				<view class="box-pack-between ft32 item flex-y-center flex-grow-1" style="margin: 0;">
					<navigator :url="'cash?money='+info.advertiser_money" hover-class="none">总收入
						<text class="ft24" style="margin-left: 10rpx;">提现</text>
						<text class="iconfont icon-prev ft22" style="font-size: 22rpx;"></text>
					</navigator>
					<view class="ft24 item-off flex">
						<view class="flex-grow-1 flex-center" @click="bindcheck" :data-index="index"
							v-for="(item,index) of switch_list" :key="index" :class="index==act_index?'act':''">
							{{item.name}}</view>
					</view>
				</view>
				<view class="ft60">
					{{info.money_total}}
				</view>
				<view class="flex-center item-content">
					<view class="flex-grow-1 tr">
						<view class="ft24 tr-title">
							待结算金额
						</view>
						<view class="ft30 mab-24 tr-title">
							{{!info.settlement?0:info.settlement}}
						</view>
					</view>
					<view class="line"></view>
					<view class="flex-grow-1 tr-title">
						<view class="ft24">
							可提现金额
						</view>
						<view class="ft30 mab-24 tc">
							{{!info.advertiser_money?0:info.advertiser_money}}
						</view>
					</view>
					<view class="line"></view>
					<view class="flex-grow-1 tr-title">
						<view class="ft24">
							已提现金额
						</view>
						<view class="ft30 mab-24 tc">
							{{!info.cash_money?0:info.cash_money}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main-home">
				<!-- <form @submit="Submit"> -->
				<view class="">
					<view class="box-pack-between ft32 main-item">
						<view>流量主记录池</view>
						<view class="flex-center add-home ft24" @click="addEnable">
							添加
						</view>
					</view>
				</view>
				<no-none v-if='power_list.length<=0'></no-none>
				<block v-if="power_list.length>0">
					<view class="item-bg" v-for="(item,index) in power_list" :data-index='index' :key="item.id">
						<view class="item flex-row box-pack-between">
							<view class="flex-grow-1 flex-y-center">
								<image src="../../static/images/icon_game.png" mode="aspectFit" class="type-img"
									v-if="item.type == 7"></image>
								<image src="../../static/images/icon_6.png" mode="aspectFit" class="type-img"
									v-if="item.type == 4"></image>
								<image src="../../static/images/icon_5.png" mode="aspectFit" class="type-img"
									v-if="item.type == 3"></image>
								<image src="../../static/images/icon_2.png" mode="aspectFit" class="type-img"
									v-if="item.type == 2"></image>
								<image src="../../static/images/icon_4.png" mode="aspectFit" class="type-img"
									v-if="item.type == 1"></image>
								<image src="../../static/images/icon_7.png" mode="aspectFit" class="type-img"
									v-if="item.type == 6"></image>
								<view class="info">
									<view class="title text-1" v-if="item.mid_title">{{item.mid_title}}</view>
									<view class="title text-1" v-if="item.short">{{item.short}}</view>
									<view class="title text-1" v-if="item.create_time">{{item.create_time}}</view>
								</view>
							</view>
							<image class="del" :data-index="index" :data-id="item.id" @click="del"
								src="../../static/images/del.png" mode=""></image>
						</view>
					</view>
				</block>
				<navigator url="flow-detail" class="box-pack-between">
					<view class="box-pack-between ft32 main-item">
						<view>流量主数据明细</view>
					</view>
					<view class="flex-center ft24 col">
						数据明细
						<view class="iconfont iconfont icon-prev"></view>
					</view>
				</navigator>
			</view>
		</view>
		<!-- <view class="rule flex-center col" @click="rule">
			流量主功能规则 <image class="zhiyin" src="/static/images/wen1.png" mode=""></image>
		</view> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				info: {},
				switch_list: [{
					name: "开启流量"
				}, {
					name: "关闭流量"
				}, ],

				act_index: 0,
				power_list: [],

			}
		},

		onLoad(e) {

		},

		onShow() {
			this.getExchange();
		},

		methods: {

			addEnable(e) {
				this.request({
					url: "user/funeng_list",
					data: {
						page: this.page,
						token: uni.getStorageSync("token"),
					},
					showLoading: true,
				}).then(res => {
					if (res.code === '200' && res.data.length > 0) {
						uni.navigateTo({
							url: "./record?type=2"
						})
					} else {
						uni.showToast({
							title: "没有记录",
							icon: 'none'
						})
					}
				})
			},

			rule(e) {
				// var arr = JSON.stringify(this.arr)
				// uni.navigateTo({
				// 	url: "./rule?arr=" + arr + "&id=" + this.info.id
				// })
			},

			getExchange() {
				this.request({
					url: "Advertiser/index",
					data: {
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.info = res.data;
						this.act_index = res.data.is_advertiser == "Y" ? 0 : 1;
						this.power_list = res.data.power_list;
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},


			bindcheck(e) {
				var index = e.currentTarget.dataset.index;
				this.act_index = index;
				this.request({
					url: "Advertiser/AdvertiserSwitch",
					data: {
						is_advertiser: index == 1 ? 'N' : 'Y',
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					this.act_index = 1;
				});
			},

			del(e) {
				let id = e.currentTarget.dataset.id,
					index = e.currentTarget.dataset.index;
				uni.showModal({
					title: '提示',
					content: '确定要删除此记录吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.request({
								url: "Advertiser/AdvertiserPowerSwitch",
								data: {
									token: uni.getStorageSync("token"),
									is_advertiser: "N",
									id: id,
								},
							}).then(res => {
								console.log(res, "res")
								if (res.code === '200') {
									this.power_list.splice(index, 1)
									uni.showToast({
										title: "删除成功",
										icon: 'none'
									})
								}
							}).catch((res) => {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		},
	}
</script>
<style>
	.rule {
		position: absolute;
		bottom: 40rpx;
		width: 100%;
		text-align: center;
		font-size: 24rpx;
	}

	.zhiyin {
		width: 28rpx;
		height: 28rpx;
		margin-left: 3px;
	}

	.ft60 {
		font-size: 60rpx;
		margin-bottom: 22rpx;
	}

	.item-content .tr-title {
		padding: 0 15px;
		text-align: left;
	}

	.item-bg-right {
		min-width: 207rpx;
	}

	.coh .rotate {
		transition: all 1.2s ease-out 0s;
		transform: rotate(360deg);
	}

	.tr-title {
		color: #D1E4FF;
	}

	.info-block {
		width: 670rpx;
		margin: 0 auto;
	}

	.info-block .item {
		padding: 30rpx 0 20rpx 0;
	}

	.item-off {
		width: 252rpx;
		height: 54rpx;
		border-radius: 8rpx;
		color: #ffff;
		border: 2rpx solid #3387ff;
		background: rgba(255, 255, 255, 0.2);
	}

	.item-off .act {
		background: #fff;
		color: #3387ff;
		border-radius: 8rpx;
	}

	.item-content {
		text-align: center;
	}

	.header {
		width: 100%;
		height: 334rpx;
		position: relative;
	}

	.header .bg-img {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		width: 100%;
		height: 334rrpx;

	}

	.header .info-block {
		/* padding: 0 40rpx 0 48rpx; */
		height: 198rpx;
		color: #FFFFFF;
	}

	.header .info-block .title {
		font-size: 36rpx;
		color: #fff;
		font-weight: 500;
		line-height: 50rpx;
	}

	.header .info-block .desc {
		font-size: 28rpx;
		font-weight: 500;
		color: #fff;
		line-height: 40rpx;
		margin-top: 8rpx;
	}

	.line {
		width: 2rpx;
		height: 46rpx;
		opacity: 0.5;
		background: #ffffff;
	}

	.mab-24 {
		margin-bottom: 24rpx;
	}

	.wen {
		width: 22rpx;
		height: 22rpx;
		margin-left: 8rpx;
	}

	.main-home {
		width: 670rpx;
		margin: 0 auto;
	}

	.main-item {
		margin: 20rpx 0 32rpx 0;
	}

	.add-home {
		color: #FFFFFF;
		width: 126rpx;
		height: 54rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
	}

	.item-bg .mar64:last-child {
		margin-bottom: 0rpx;
	}

	.item-bg {
		width: 670rpx;
		background: #f6f8fe;
		border-radius: 12rpx;
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #333333;
		padding: 36rpx 32rpx;
		margin-bottom: 20rpx;
	}

	.item-bg-time {
		width: 180rpx;
		height: 66rpx;
		background: #ffffff;
		border-radius: 8rpx;
		display: inline-block;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
	}

	.item {
		margin: 20rpx 0;
	}

	.info {
		width: 501rpx;
	}

	.item-bg .item-bg-time:nth-child(3n) {
		margin-right: 0rpx;
	}

	.item-bg-time .flex-center {
		height: 100%;
	}

	.type-img {
		display: block;
		flex: none;
		width: 40rpx;
		height: 40rpx;
		margin-right: 26rpx;
	}

	.del {
		width: 32rpx;
		height: 32rpx;
	}

	.maps {
		min-width: 31rpx;
		width: 31rpx;
		height: 31rpx;
		margin-right: 10rpx;
	}

	.iconzhongxindingwei {
		margin-right: 10rpx;
	}


	.model {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}

	.model_cotent {
		width: 600rpx;
		/* height: 300rpx; */
		text-align: center;
		border-radius: 16rpx;
		background: #fff;
	}

	.model_cotent_title {
		font-size: 34rpx;
		font-weight: 700;
		margin: 40rpx 0 40rpx 0;
	}

	.model_cotent_qd {
		font-size: 30rpx;
		padding-bottom: 65rpx;
		border-bottom: 1rpx solid #f1f1f1;
	}

	.model_cotent_shezhi {
		margin: 0;
		font-weight: 700;
		font-size: 30rpx;
		color: #4e6ef2;
		padding: 15rpx 0;
		background-color: #fff;
		border-radius: none;
		border: none;
	}
</style>
