<template>
  <view class="wrapper">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="员工详情"></uni-nav-bar>
	<view class="flex--justify" style="background-color: #ffa50033;padding: 24rpx 32rpx;font-size: 28rpx;">
		点击可以修改员工信息
	</view>
    <view class="qn-form-item">
      <view class="label"><text class="label__text">员工姓名：</text></view>
      <view class="value">
        <qn-easyinput
          :maxlength="20"
          @blur="showCompany"
          v-model="form.name"
          :inputBorder="false"
          text="left"
          placeholder="请填写员工姓名"
        ></qn-easyinput>
      </view>
    </view>
    <view class="qn-form-item">
      <view class="label"><text class="label__text">手机号码：</text></view>
      <view class="value">
        <qn-easyinput
          :maxlength="11"
          type="number"
          v-model="form.mobile"
          :inputBorder="false"
          text="left"
          placeholder="请填写手机号码"
        ></qn-easyinput>
      </view>
    </view>
	<view style="background-color: white;padding: 12rpx 32rpx;border-bottom: 2rpx solid #f3f3f3;">
		<view class="flex-row-center-space" style="font-size: 28rpx;">
			<view class="label__text" style="flex: 1;">设备权限：</view>
			<view>
				<uni-data-checkbox mode="tag" multiple v-model="flag" :localdata="[{text: '全部',value: 1}]" @change="onChange()"></uni-data-checkbox>
			</view>
		</view>
		<uni-data-checkbox mode="button" multiple v-model="machineIds" :localdata="hobby" @change="onChange2()"></uni-data-checkbox>
	</view>
    <view class="default-address">
      <view class="title">状态：</view>
      <uni-data-checkbox v-model="radio" :localdata="[{text: '启用',value: 1}, {text: '停用',value: 0}]"></uni-data-checkbox>
    </view>
    <view class="button-area" style="margin-top: 64rpx;">
      <view class="button button__submit" style="background-color: #ee0a24;" @click="delTap"><text class="text" style="color: white">删除</text></view>
    </view>
	<view class="button-area" style="margin-top: 36rpx;">
	  <view class="button button__submit" @click="addTap"><text class="text" style="color: white">保存</text></view>
	</view>
	<view style="height: 48rpx;"></view>
	<uni-popup ref="popup" type="center" :mask-click="false">
	  <view class="popup-box">
	    <view class="tip-title">确定要删除该员工吗？</view>
	    <view class="operation-row">
	      <view class="cancel-text" @tap="cancelTap">取消</view>
	      <view class="line"></view>
	      <view class="confirm-text" @tap="confirmTap">确定</view>
	    </view>
	  </view>
	</uni-popup>
  </view>
</template>

<script>
import { getMachinList } from '@/apis/factoryApi'
import { back } from '@/utils/hook.js'
import { deleteMember, getMemberInfo, updateMember } from '@/apis/enterpriseInfoApi.js'
export default {
  data() {
    return {
      form: {
		name: '',
		mobile: ''  
	  },
      id: null,
	  hobby: [],
	  machineIds: [],
	  flag: [],
	  radio: 0
    }
  },
  mounted() {
    var factoryId = uni.getStorageSync('factoryId')
    getMachinList({ factoryId, pageSize: 1000 }).then((res) => {
		var list = []
    	for (let i = 0; i < res.records.length; i++) {
			list.push({text: res.records[i].name, value: res.records[i].id})
		}
		this.hobby = list
    }).catch(err => {
    	console.log(err)    
    })
  },
  onLoad(option) {
    if (option.id) {
      this.id = option.id
      this.getDetail()
    }
  },
  methods: {
    back,
    // 通过id查询收货地址
    getDetail() {
      getMemberInfo({ orgMemberId: this.id }).then((res) => {
        if (res) {
          this.form = Object.assign({}, res)
		  if (res.machineList && res.machineList.length) {
			  var checks = []
			  for (let i = 0; i < res.machineList.length; i++) {
			  	checks.push(res.machineList[i].id)
			  }
			  this.machineIds = checks
		  }
		  this.radio = res.status ? 1 : 0
        }
      })
    },
	onChange(){
		if(this.flag.length){
			var checks = []
			for (let i = 0; i < this.hobby.length; i++) {
				checks.push(this.hobby[i].value)
			}
			
			this.machineIds = checks
		} else {
		    this.machineIds = []	
		}
	},
	onChange2(){
		if(this.machineIds.length == this.hobby.length){
			this.flag = [1]
		} else {
		    this.flag = []	
		}
	},
    // 保存
    addTap() {
	  var params = {id : this.form.id}
	  params.realName = this.form.name
	  params.machineIds = this.machineIds
	  params.status = this.radio ? true : false
	  updateMember(params).then((res) => {
	    if (res) {
	  	  uni.$emit('employee',{msg:'页面更新'})
	      uni.showToast({ title: '保存成功', icon: 'success' })
	      setTimeout(() => {
	        back()
	      }, 500)
	    }
	  })
    },
	delTap(){
		this.$refs.popup.open('center')
	},
	cancelTap() {
	  this.$refs.popup.close()
	},
	confirmTap(){
		deleteMember({idList: [this.form.id]}).then((res) => {
		  if (res) {
			uni.$emit('employee',{msg:'页面更新'})
		    uni.showToast({ title: '删除成功', icon: 'success' })
		    setTimeout(() => {
		      back()
		    }, 500)
		  }
		})
	}
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  .wrapper-title {
    width: 100%;
    font-size: 36rpx;
    color: #000000;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
  }
  .qn-form-item {
    width: 750rpx;
    padding: 0rpx 32rpx;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    // justify-content: space-between;
    border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
    min-height: 88rpx;
    .label {
      flex-grow: 0;
      flex-shrink: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      margin-right: 20rpx;
      .label__text {
        font-size: 28rpx;
        color: #000000;
      }
    }
    .value {
      flex-grow: 1;
      flex-shrink: 1;
      text-align: right;
    }
  }
  .default-address {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0rpx 32rpx;
    height: 100rpx;
    background: #ffffff;
    .title {
      font-size: 30rpx;
      color: #333333;
      letter-spacing: 0;
      font-weight: 400;
    }
    .tip {
      padding-top: 10rpx;
      font-size: 24rpx;
      color: #888888;
      letter-spacing: 0;
      font-weight: 400;
    }
  }
  .button-area {
    width: 750rpx;
    padding: 0 32rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    // justify-content: space-between;
    .button {
      flex-grow: 0;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10rpx;
      .text {
        font-size: 30rpx;
        font-weight: 500;
        text-align: center;
      }
    }
    .button__cancel {
      width: 270rpx;
      height: 88rpx;
      border: 2rpx solid #979797;
    }
    .button__submit {
      width: 100%;
      height: 88rpx;
      background: #007aff;
    }
  }
}
.popup-box {
    width: 540rpx;
    height: 226rpx;
    background: #ffffff;
    border-radius: 14rpx;
    .tip-title {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 126rpx;
      font-size: 32rpx;
      color: #333333;
      letter-spacing: 0;
      text-align: center;
      font-weight: 400;
    }
    .operation-row {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      height: 100rpx;
      background: #ffffff;
      border-top: 2rpx solid rgba(221, 221, 221, 0.5);
      .cancel-text {
        flex-grow: 1;
        flex-shrink: 1;
        font-size: 36rpx;
        color: #000000;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
      }
      .line {
        flex-grow: 0;
        flex-shrink: 0;
        width: 2rpx;
        height: 100rpx;
        border-left: 2rpx solid #dcdee3;
      }
      .confirm-text {
        flex-grow: 1;
        flex-shrink: 1;
        font-size: 36rpx;
        color: #108ee9;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
      }
    }
  }
</style>
