<template>
	<view class="container">
		<view class="md-scroll">
		 <view class="roleContent" v-for="(item,index) in roleList" :key="item.id">
		 	<view class="roleItem">
		 		<view style="width: 80%;">{{item.name}}</view>
		 		<view @click="editItem(item)">
		 			<u-icon size="34" name="edit-pen"></u-icon>
		 		</view>
		 	</view>
		 </view>
		 <view style="padding:0 30upx 30upx;">
			 <u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="roleList.length==0 && status!='loading'" mode="list"></u-empty>
			 <u-loadmore v-if="(total>=roleList.length&&roleList.length)||status=='loading'" :status="status" />
		 </view>
		</view>
	</view>
</template>

<script>
	import { getPowerRoleList,delectRolePower, updateEnableStatus } from '@/api/powerRole-md.js'
	import { clzConfirm } from '@/libs/tools.js'
	export default{
		data(){
			return{
				status: 'loadmore',
				noDataText: '暂无数据',
				// 查询参数
				queryParam: {
				  name: '',
				  isEnable: ''
				},
				pageSize: 100,
				pageNo: 1,
				roleList:[],
				checked:true,
				nowId: '',	 // 当前员工 id
				loading:false,
				total:''	// 获取数据总数
			}
		},
		onLoad() {
		},
		onShow() {
			this.pageNo = 1
			this.getRoleList()
		},
		// 下一页
		onReachBottom() {
			console.log('next page')
			if(this.roleList.length < this.total){
				this.pageNo += 1
				this.getRoleList()
			}else{
				this.status = "nomore"
			}
		},
		methods:{
			// 获取列表数据
			getRoleList(){
				let _this = this
				this.status = "loading"
				 getPowerRoleList(Object.assign({pageNo: this.pageNo, pageSize: this.pageSize}, this.queryParam)).then(res => {
				   if (res.code == 200 || res.status == 204 || res.status == 200) {
				     if(_this.pageNo>1){
				   	  _this.roleList = _this.roleList.concat(res.data.list || [])
				     }else{
				   	  _this.roleList = res.data.list || []
				     }
				     _this.total = res.data.count || 0
					 _this.roleList.map(item => {
					 	item.roleState = item.isEnable == 1
					 })
				   } else {
				     _this.roleList = []
				     _this.total = 0
				     _this.noDataText = res.message
				   }
				   _this.status = "loadmore"
				 })
			},
			//  更改启用禁用状态
			roleStatusChange(item,index){
				const data={
					id:item.id,
					flag: item.roleState == true ? 1 :0
				}
				updateEnableStatus(data).then(res=>{
					if(res.status==200){
						item.roleState = data.flag == 1
						this.roleList.splice(index,1,item)
						console.log(this.roleList,data)
					}
					uni.showToast({icon: 'none', title: res.message})
				})
			},
			// 添加角色
			add(){
				uni.navigateTo({
					url:'/pages/roleSetting/addRole?type=add'
				})
			},
			// 删除角色
			delItem(item,index){
				let _this = this
				clzConfirm({
					title: "提示",
					content: "数据删除后无法恢复, 确认删除吗？",
					showCancel: true,
					success: function(e){
						if(e.confirm||e.index == 0){
							// 删除数据
							delectRolePower({id: item.id}).then(res=>{
								if(res.status == 200){
									uni.showToast({
										icon:'none',
										title:res.message
									})
									if(_this.roleList.length>_this.pageSize){
										// 刷新列表
										_this.roleList.splice(index,1)
									}else{
										_this.pageNo = 1
									}
									_this.total = _this.roleList.length
								}else{
									uni.showToast({icon: 'none', title: res.message})
								}
							})
						}
					},
				})
			},
			// 编辑修改
			editItem(item){
				this.$store.state.vuex_nowRoleInfo=item
				uni.navigateTo({
					url:'/pages/storeManage/roleSetting/addRole?type=edit'
				})
			},
			// 设置权限
			setAuths(item){
				uni.navigateTo({
					url:'/pages/storeManage/roleSetting/roleAuthSet?id='+item.id
				})
			},
			// 返回
			goBack(){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="less" scoped>
	.container{
		width:100%;
		.md-scroll{
			flex-grow: 1;
			overflow: auto;
			.roleContent{
				background-color: #fff;
				font-size: 28upx;
				margin: 20rpx;
				border-radius: 20upx;
				box-shadow: 1px 1px 3px #EEEEEE;
				.roleItem{
					padding:35upx 30upx;
					color: #666;
					border-bottom: 1px dashed #F8F8F8;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.uni-icons{
					margin-right: 6upx;
				}
			}
		}
	}
</style>
