<template>
	<view class="container flex flex_column">
		<view class="md-scroll">
			<view class="userInfo">
				设置<text>{{userInfo.name}}</text>为新的负责人后，您将不再是门店负责人，
				请为自己选择一个新的岗位
			</view>
			 <view class="check-order-list">
				<u-radio-group wrap @change="radioGroupChange">
					<u-radio 
						v-model="item.checked" 
						v-for="(item, index) in roleList" :key="item.id" 
						:name="item.id"
					>
					<view class="u-name">
						{{item.name}}
					</view>
					</u-radio>
				</u-radio-group>
			 </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>
			 </view>
		</view>
		<view class="footer">
			<u-button @click="save" :loading="loading" :throttle-time="100" :custom-style="{ background: '#066cff', color: '#fff',width:'400rpx' }" shape="circle" type="info">
				确定
			</u-button>
		</view>
	</view>
</template>

<script>
	import { getPowerRoleList } from '@/api/powerRole-md.js'
	import {saveEmployee,setManager} from '@/api/employee'
	import { getCurrUserInfo } from '@/api/data.js';
	export default{
		data(){
			return{
				status: 'loadmore',
				noDataText: '暂无数据',
				// 查询参数
				queryParam: {
				  name: '',
				  isEnable: ''
				},
				formData:{},
				pageSize: 100,
				pageNo: 1,
				roleList:[],
				checked:true,
				nowId: '',	 // 当前员工 id
				loading:false,
				total:''	,// 获取数据总数
				userInfo: null,
			}
		},
		onLoad(opts) {
			this.userInfo = this.$store.state.vuex_nowStaffData
			this.getCurrUserInfo()
		},
		// 下一页
		onReachBottom() {
			console.log('next page')
			if(this.roleList.length < this.total){
				this.pageNo += 1
				this.getRoleList()
			}else{
				this.status = "nomore"
			}
		},
		methods:{
			radioGroupChange(e){
				this.formData.roleIds = e;
				const roleNames = this.roleList.find(item => item.id == e);
				this.formData.roleNames = roleNames?roleNames.name:'';
			},
			// 获取列表数据
			getRoleList(){
				let _this = this
				this.status = "loading"
				 getPowerRoleList(Object.assign({pageNo: this.pageNo, pageSize: this.pageSize}, this.queryParam)).then(res => {
				   uni.hideLoading()
				   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"
				 })
			},
			getCurrUserInfo(){
				uni.showLoading({
					mask:true,
					title: '正在加载...'
				})
				getCurrUserInfo().then(res => {
					if(res.data){
						this.formData = Object.assign({},this.formData,{id:res.data.id})
						this.pageNo = 1
						this.getRoleList()
					}else{
						uni.hideLoading()
					}
				})
			},
			//  保存
			save(name){
				if(!this.formData.roleIds){
					uni.showToast({icon: 'none', title: '请选择岗位'})
				}else{
					this.loading = true
					// 先更换负责人
					setManager({id: this.userInfo.id}).then(res => {
					  console.log(res)
					  if (res.status == 200){
						  this.saveRole()
					  }else{
						  uni.showToast({
						  	title:res.message
						  })
						  this.loading = false
					  }
					})
				}
			},
			// 设置岗位
			saveRole(){
				saveEmployee(this.formData).then(res=>{
					console.log(res)
					if(res.status == 200){
						uni.showToast({icon: 'none', title:'保存成功'})
						this.quitOut()
					}else{
						uni.showToast({icon: 'none', title: res.message})
					}
					this.loading = false
				})
			},
			quitOut(){
				this.$store.dispatch('userLogout');
				uni.redirectTo({
					 url: '/pages/login/login?showModal=1'
				});
			}
		}
	}
</script>

<style lang="less">
	.container{
		width:100%;
		height: 100vh;
		background: #ffffff;
		.md-scroll{
			flex-grow: 1;
			overflow: auto;
			.userInfo{
				padding: 20upx 50upx;
				text-align: center;
				text{
					color: coral;
				}
			}
			.check-order-list{
				padding: 10upx 20upx;
				u-radio{
					> view{
						background: #ffffff;
						border-radius: 20upx;
						box-shadow: 1px 1px 3px #EEEEEE;
						border:1px solid #eee;
						margin: 10rpx 0;
						padding: 20rpx;
						>view:last-child{
							flex-grow: 1;
						}
					}
				}
			}
		}
		.footer{
			padding: 0.6rem;
			background: #ffffff;
		}
	}
</style>
