<template>
	<view>
		<view class="nav_area"></view>
		<view class="setPage">
			<view v-for="(item,index) in setList" :key="index" class="set_item">
				<view class="icon_new"><image :src="item.image" mode=""></image></view>
				<view style="flex:1;" class="flex-col">
					<view class="box3"><text>轮播名称：</text>{{item.title}}</view>
					<view class=""><text>排序：</text>{{item.sort}}</view>
				</view>
				<view style="" class="flex-col">
					<view class="red" @click="edit(item,index)">编辑</view>
					<text class="" @click="remove(item,index)">删除</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import API from '@/common/js/api.js'
	export default {
		data() {
			return {
				setList: [
					{title:'诚邀你一起中百胜多负少的',sort:'1'},
					{title:'0万元',sort:'2'},
					{title:'10万元',sort:'3'},
					{title:'20000万元',sort:'4'}
					
				],
				page: 1
			}
		},
		methods: {
			edit(val, i){
				uni.navigateTo({
					url: './addBanner?id='+val.id+'&image='+val.image+'&title='+val.title+'&sort='+val.sort
				})
			},
			remove(val, i){
				let _this = this;
				uni.showModal({
					title:'温馨提示',
					content:"确定是否删除该信息",
					success(res) {
						if(res.confirm){
							API.request('/rotationChart/delete', {id: val.id}, res=>{
								uni.showToast({
									title: res.msg
								})
								_this.setList.splice(i, 1);
							})
						}
					}
				})
			},
			getList(){
				API.request('/rotationChart/list', {page:this.page, limit: 10}, res=>{
					this.setList = res.data.list;
				})
				
			}
		},
		onShow() {
			this.getList();
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: './addBanner'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.nav_area {
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 99;
		background-color: #fff;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
		width: 700rpx;
		padding: 0px 25rpx;
		/*  #ifdef H5  */
		height: 88rpx;padding-top: var(--status-bar-height);
		/*  #endif  */
		/*  #ifdef APP-PLUS  */
		height: 2px;
		/*  #endif  */
		box-sizing: content-box;
		color: #b0b0b0;
		font-size: 14px;
	}
	.setPage{
		padding: 0px 40rpx;
		font-size: 14px;
		color: #444;
	}
	.set_item{
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 0px;
		// border-bottom: 1px solid #ebebeb;
		
		.icon_new{
			width: 220rpx;
			height: 96rpx;
			margin-right: 18rpx;
			image{
				width: 220rpx;
				height: 96rpx;
				border-radius: 10px;
				background-color: #000;
			}
		}
		text{
			color: #999;
		}
		.box3{
			display: -webkit-box;//将盒子转换为弹性盒子
			-webkit-box-orient: vertical;//文本显示方式，默认水平
			-webkit-line-clamp: 1;//设置显示多少行
			overflow: hidden;
		}
		.flex-col{
			height: 100%;
			display: flex;flex-direction: column;
			justify-content: space-between;
		}
		.red{
			color: #E33837;
		}
	}
	
</style>
