<template>
	<view class="content">
		<no-none v-if='list.length<=0'></no-none>
		<block v-else>
			<view @click="enit(item.id)"  style="margin-top: 30rpx;"  class="item" v-for="(item,index) of list" :key='index'>
				<view class="border-b item-title flex-y-center">
					<text>{{item.name}}</text>
				</view>
				<view class="item-bottom flex-y-center">
					<view class="flex-grow-1">
						<view class="box-pack-between item-bottom-right">
							
							<!-- <view> -->
								<text class="item-bottom-number">首页播报：</text>
							       <text class="status"> {{item.status==1?'开启':'关闭'}}</text>
							<!-- </view> -->
							
						</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>
			</view>
		</block>
		<view style="height: 75px;"></view>
		<navigator style="margin-bottom:0" url='./add' 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() {
		},
		
		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]
				});
			},

			del(id,index){
				uni.showModal({
					title: '提示',
					content: '是否要删除？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if(res.confirm){
						this.request({
							url:'comment/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: () => {}
				});
			},
			
			http() {
				let url ="Smdcshop/voice_index";
				this.request({
					url,
					data: {
						admin_id: uni.getStorageSync("admin_id"),
					}, 
					showLoading:true,
				}).then(res => {
					console.log(res, "res")
					if (res.code === "200") {
						this.list = this.list.concat(res.data);
						// res.data.list.length==0?(this.is_load=true):(this.is_load=false)
					}
				});
			},
			
		},
	}
</script>

<style lang="scss">
	page {
		background: #F5F7FA;
	}
	.status{
    border: 1rpx solid #3387FF;
    color: #fff;
    padding: 0 10rpx;
    background: #3387FF;
	border-radius: 4rpx;
	font-size: 24rpx;
	}
	.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;
			}
	
			.item-type-one {
				background: linear-gradient(134deg, #FF8C1A 2%, #FF8C1A 98%);
			}
	
			.item-type-two {
				background: linear-gradient(134deg, #f06767 2%, #f58484 98%);
			}
	
			.item-type-three {
				background: linear-gradient(134deg, #febe07 2%, #ffcc3e 98%);
			}
	
		}
	
		.item-bottom {
			font-size: 26rpx;
			padding: 20rpx 0 10rpx 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;
				}
			}
	
		}
	
	}
	

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

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

	.bottom-bar button {
		text-align: center;
		width: 690rpx;
		height: 90rpx;
		background: linear-gradient(132deg, #3387FF 0%, #3387FF 100%);
		box-shadow: 0px 2rpx 12rpx #3387FF;
		opacity: 1;
		border-radius: 10rpx;
		color: #fff;
	}

	.label {
		min-width: 90rpx;
		height: 44rpx;
		line-height: 44rpx;
		padding: 0 10rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		background-color: #1E9FFF;
		margin-left: 20rpx;
		text-align: center;
	}
	
</style>
