<template>
	<view class="container flex flex_column">
		<view class="md-scroll">
			 <view class="roleContent" v-for="(item,index) in roleList" :key="item.id">
				<view class="roleItem" @click="editItem(item)">
					<view style="width: 80%;">{{item.name}}</view>
					<view>
						<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 class="footer">
			<u-button @click="addRole(null)" :throttle-time="100" :custom-style="{ background: '#066cff', color: '#fff',width:'400rpx' }" shape="circle" type="info">
				新增岗位
			</u-button>
		</view>
	</view>
</template>

<script>
	import { getPowerRoleList, updateEnableStatus } from '@/api/powerRole-md.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})
				})
			},
			// 添加岗位
			addRole(){
				uni.navigateTo({
					url:'/pages/storeManage/roleSetting/addRole?type=add'
				})
			},
			// 编辑修改
			editItem(item){
				this.$store.state.vuex_nowRoleInfo=item
				uni.navigateTo({
					url:'/pages/storeManage/roleSetting/addRole?type=edit&id='+item.id
				})
			},
			// 返回
			goBack(){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="less" scoped>
	.container{
		width:100%;
		height: 100vh;
		.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;
				}
			}
		}
		.footer{
			padding: 0.6rem;
			background: #ffffff;
		}
	}
</style>
