<template>
	<view class="content">
		<no-none v-if='list.length<=0'></no-none>
		<block v-else>
			
			<navigator  @click="bindDetail(index)" style="margin-top: 30rpx;" class="item" v-for="(item,index) of list" :key='index'>
				<view class="border-b item-title flex-y-center">
	<!-- 				<view class="item-type flex-center" :class="item.is_merge==1?'item-type-one':item.tikpush_type==1?'item-type-two':'item-type-three'">
						{{item.is_merge==1?'多码合一':item.tikpush_type==1?'某音':'视频号'}}
					</view> -->
					<text>{{item.nick_name}}</text>
				</view>

				<view class="item-bottom flex-y-center">
					<image @click="previewImg(item.url_code_path)" class="item-bottom-left"
						:src="URL+item.url_code_path" mode=""></image>
					<view class="flex-grow-1">
						<view class="box-pack-between item-bottom-right">
							<text><text class="item-bottom-number">发布次数</text>：{{item.transmit_num}}</text>
						</view>
						<view class="box-pack-between item-bottom-right flex-y-center">
							<text><text class="item-bottom-number">创建时间</text>：{{item.create_time}} </text>
							<text class="iconfont icongengduo"></text>
						</view>
					</view>
				</view>
			</navigator>
		</block>
		<view style="height: 75px;"></view>
		<navigator style="margin-bottom:0" url='./codeAdd' class="bottom-bar flex-center">
			<button formType="submit" class="flex-center ft28">+新增营销码</button>
		</navigator>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				defaultIndex: 0,
				list: [],
				page: 1,
				$test: this.$test.$test,
				URL: getApp().globalData.URL,
				is_load: false
			}
		},

		onLoad() {
			uni.setNavigationBarTitle({
				title: `${this.$test.$test}列表`
			})
		},

		onShow() {
			this.page = 1;
			this.list = [];
			this.http();
		},

		onReachBottom(e) {
			if (!this.is_load) {
				this.page = this.page + 1;
				this.http();
			}
		},

		methods: {
			enit(id) {
				uni.navigateTo({
					url: "./add?id=" + id
				})
			},
			previewImg(logourl) {
				let URL = this.URL + logourl;
				uni.previewImage({
					urls: [URL]
				});
			},
			bindDetail(index) {
				// uni.setStorageSync("shake-key", this.list[index])
				uni.navigateTo({
					url: "./codeAdd"
				})
			},
			del(id, index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.request({
								url: 'tag/delete',
								data: {
									id: id,
								},
							}).then(res => {
								console.log(res, "res")
								if (res.code === 200 || res.code === "200") {
									this.list.splice(index, 1);
								}
							}).catch(() => {
								uni.showToast({
									title: res.message,
									icon: "none",
								})
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});

			},

			http() {
				let url = "tikpush/lists";
				this.request({
					url,
					data: {
						token: uni.getStorageSync("token"),
						page: this.page,
						limit: 10,
					},
					showLoading:true,
				}).then(res => {
					console.log(res, "res")
					if (res.code === "200") {
						this.list = this.list.concat(res.data.list);
						if (res.data.list.length == 0) {
							this.is_load = true
						} else {
							this.is_load = false
						}
					}
				});
			},

			del(id, index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.request({
								url: "tikpush/del",
								data: {
									id: id,
								},
							}).then(res => {
								console.log(res, "res")
								if (res.code === 200 || res.code === "200") {
									this.list.splice(index, 1);
								}
							}).catch(() => {
								uni.showToast({
									title: res.message,
									icon: "none",
								})
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},


		},
	}
</script>

<style lang="scss">
	page {
		background: #F5F7FA;
	}

	.item {
		width: 690rpx;
		background: #ffffff;
		margin: 0 auto;
		padding: 0rpx 24rpx;
		opacity: 1;
		border-radius: 8rpx;
		box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(213, 213, 213, 0.04);

		.item-title {
			opacity: 1;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			color: #333333;
			padding: 24rpx 0;
			.item-type {
				margin-right: 16rpx;
				// width: 78rpx;
				height: 36rpx;
				font-size: 21rpx;
				opacity: 1;
				border-radius: 4rpx;
				color: #FFFFFF;
				border-bottom: 1rpx solid #F1F1F1;
				padding: 0 13rpx;
			}
			.item-type-one{
					background: linear-gradient(134deg, #FF8C1A 2%, #FF8C1A 98%);
			}
			.item-type-two{
				background: linear-gradient(135deg,#4992ff 2%, #61a8fc 97%);	
			}
			.item-type-three{
			     background: linear-gradient(134deg, #febe07 2%, #ffcc3e 98%);	
			}
			
		}

		.item-bottom {
			font-size: 26rpx;
			padding: 20rpx 0 24rpx 0;
			color: #666666;

			.item-bottom-left {
				width: 90rpx;
				height: 90rpx;
				margin-right: 24rpx;
				min-width: 90rpx;
				margin-bottom: 16rpx;
			}

			.item-bottom-right {
				margin-bottom: 16rpx;

				.item-bottom-number {
					color: #99A0AD;
				}
			}

		}

	}

	.color-ffa {
		color: #3387FF;
	}

	.icongengduo {
		color: #999;
		font-size: 24rpx;
	}

	.bottom-bar {
		position: fixed;
		bottom: 0px;
		width: 100%;
		z-index: 1000;
		background: #FFFFFF;
		padding: 30rpx 0;
	}

	.bottom-bar button {

		width: 690rpx;
		height: 98rpx;
		opacity: 1;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
		margin: 0 auto;
	
	
		opacity: 1;
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
	
		color: #ffffff;

	}

	.label {
		min-width: 70rpx;
		height: 44rpx;
		/* line-height: 44rpx; */
		padding: 0 10rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		background-color: #1E9FFF;
		margin-left: 20rpx;
		border-radius: 5rpx;
	}
</style>
