<template>
  <d2-container>
    <div v-if="isExpend" class="d2-fl d2-tree-view" >
    	<el-tree highlight-current :data="treeData" :default-expanded-keys="['top']" node-key="alias" :props="defaultProps" @node-click="handleNodeClick" >
					<span class="icon-tree" slot-scope="{ node, data }">
						<div v-if="data.alias == 'top'">
							<i class="fa fa-university"></i>
							<span>&nbsp;{{node.label}}</span>
						</div>
						<div v-if="data.alias == 'JG001'">
							<i class="fa fa-building"></i>
							<span>&nbsp;{{node.label}}</span>
						</div>
						<div v-if="data.alias == 'JG002'">
							<i class="fa fa-users"></i>
							<span>&nbsp;{{node.label}}</span>
						</div>
				</span>
				</el-tree>
    </div>
   <div @click="isExpend = !isExpend" :class="[{'angle-view':isExpend},{'angle-view-none':!isExpend}]">
   	<i :class="['fa', {'fa-angle-left':isExpend},{'fa-angle-right':!isExpend}]"></i>
   </div>
   <div :class="[{'d2-fl':isExpend},{'d2-table-view':isExpend},{'d2-table-view-full':!isExpend}]" >
      <div class="d2-table-view-header">
        <el-form size="small" :inline="true" :model="filter" @keyup.enter.native="handleList" class="demo-form-inline">
          <el-form-item label="用户号">
            <el-input v-model="filter.userNo" placeholder="用户号"/>
          </el-form-item>
          <el-form-item>
            <el-button   type="primary" @click="handleList('1')">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="d2-table-view-content">
        <d2-crud
                title="数据权限列表"
                ref="d2Crud"
                :loading="loading"
                :columns="columns"
                :data="data"
                :options="tableOptions"
                :rowHandle="rowHandle"
								@edit="handleRowAdd"
								@delete="handleRowRemove">
        </d2-crud>
      </div>
      <div class="d2-table-view-footer">
        <el-pagination
        				@current-change="handleCurrentChange"
        				@size-change="handleSizeChange"
						:current-page.sync="currentPage"
        				:page-size="tableOptions.pageList[0]"
        				:page-sizes="tableOptions.pageList"
        				layout="total,sizes, prev, pager, next,jumper"
        				:total="pagination.total">
        </el-pagination>
      </div>
    </div>
		<el-dialog
				title="增加权限"
				:visible.sync="menuVisible"
				width="30%"
				:close-on-click-modal="false">
			<el-input
				  style="width: 60%"
				  placeholder="输入关键字过滤"
				  v-model="filterText">
			</el-input>
			<el-tree
			    style="height: 400px;overflow: auto"
					:props="defaultProps"
					:default-expanded-keys="['Y10001']" 
					node-key="id"
					check-strictly
					:data="menuTree"
					ref="menuTree"
					@node-click="handleNodeTClick"
				:filter-node-method="filterNode"
				show-checkbox>
				<span class="icon-tree" slot-scope="{ node, data }">
						<div v-if="data.alias == 'top'">
							<i class="fa fa-university"></i>
							<span>&nbsp;{{node.label}}</span>
						</div>
						<div v-if="data.alias == 'JG001'">
							<i class="fa fa-building"></i>
							<span>&nbsp;{{node.label}}</span>
						</div>
						<div v-if="data.alias == 'JG002'">
							<i class="fa fa-users"></i>
							<span>&nbsp;{{node.label}}</span>
						</div>
				</span>
			</el-tree>
			<span slot="footer" class="dialog-footer">
			<el-button :loading="menuLoading" @click="menuTreeSave()">确 定</el-button>
		</span>
		</el-dialog>
  </d2-container>
</template>

<script>
 import { getUserByPage, TreeNode, delUserAuthority, saveUserAuthority ,TreeXNode} from '../../../api/per/data'
  import { tableOptions } from '../../../assets/options'

  export default {
    name: 'permission-data',
    data () {
      return {
				filterText:'',
				menuLoading:false,
				func:{
					select:false,
					add:false,
					delete:false
				},
				menuCheckNode:[],
				menuVisible:false,
				isExpend:true,
        tableOptions,
        loading: false,
				menuTree:[],
        filter: {
          userNo: '',
          pageSize: 10,
          pageNum: 1,
					depId:'',
					userId:''
        },
        pagination: {
          total: 0
        },
        treeData: [],
        currentPage:1,
        defaultProps: {
        	children: 'children',
        	label: 'name'
        },
        columns: [
					{
					  title: '序号',
					  key: 'index',
					  minWidth: '50',
					  formatter (row, column, cellValue, index) {
					    return index + 1
					  }
					},
          {
            title: '用户号',
            key: 'userNo',
            minWidth: '180'
          },
					  {
					  title: '用户名',
					  key: 'userNm',
					  minWidth: '180'
					},
          {
            title: '用户类型',
            key: 'userTyp',
            minWidth: '180',
						 formatter (row, column, cellValue, index) {
						  if(cellValue === '1'){
								return '教工'
							}else if(cellValue === '0'){
								return '学生'
							}else{
								return cellValue
							}
						}
          },
          {
            title: '所属部门',
            key: 'depNm',
            minWidth: '180'
          },
          {
            title: '机构权限',
            key: 'levelName',
            minWidth: '180'
          },
        ],
        rowHandle: {
          columnHeader: '操作',
          minWidth: '180',
          align: 'center',
					custom: [
						{
							text: '增加',
							type: 'primary',
							size: 'small',
							emit: 'edit'
						},
						{
							text: '删除',
							type: 'danger',
							size: 'small',
							emit: 'delete'
						}
					],
        },
        data: []
      }
    },
		watch: {
		  filterText(val) {
		    this.$refs.menuTree.filter(val);
		  },
		},
    methods: {
			 filterNode(value, data) {
				 console.log(data)
			  if (!value) return true;
			  return data.name.indexOf(value) !== -1;
			},
      handleNodeClick (data) {
        this.filter.depId = data.id
        this.handleList()
      },
      handleTreeNode() {
        TreeNode({
          depType: "JG001"
        }).then(res => {
          this.treeData = JSON.parse(res.msgDat)
        })
      },
      handleList() {
        this.loading = true
        getUserByPage(this.filter).then(res => {
          this.loading = false
          this.data = res.list.list
          this.pagination.total = res.list.total
        }).catch(err => {
          this.loading = false
        })
      },
      handleCurrentChange (val) {
        this.filter.pageNum = val
        this.handleList()
      },
			handleSizeChange (val) {
			this.filter.pageNum = 1
			this.filter.pageSize = val
			this.handleList()
			},
      handleRowAdd ({index, row}) {
				 this.filter.userId=row.userId
         this.menuVisible=true
				 TreeNode(
				 {depType : ""} 
				 	/* isCompany: 1,
					userId:this.filter.userId */
				 ).then(res => {
				 	this.menuTree = JSON.parse(res.msgDat)
				 })
      },
			handleNodeTClick(data){
				this.filter.depId=data.id
			},
			menuTreeSave(){
				this.menuLoading=true
				let depIds = this.$refs.menuTree.getCheckedKeys().map(item => item).join(',')
				//console.log(orgIds)
				saveUserAuthority({
					depIds,
					userId:this.filter.userId
				}).then(res => {
					this.menuVisible = false
					this.$message({
						message: '新增权限成功',
						type: 'success'
					})
					this.filter.userId=''
					this.filter.depId=''
					this.menuLoading=false
					this.handleList()
					this.handleTreeNode()
				}).catch(err => {
          this.menuLoading=false
        })
			},
      handleRowRemove ({index, row}) {
				let userId=row.userId
				this.$confirm('确定删除此权限?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'error'
					}).then(() => {
						delUserAuthority({
							userId
						}).then(res => {
							this.$message({
								message: '删除成功',
								type: 'success'
							})
							this.handleList()
							this.handleTreeNode()
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
        
      },
      handleDialogCancel (done) {
        done()
      },
			 getFunction () {
			  this.$GetFunction({
			    menuUrl:this.$route.path
			  }).then(res=>{
			    res.data.forEach(item=>{
			        if(item.functionType === 'select') {
			        if (item.remarks === 'true') {
			          this.func.select = true
			        } else {
			          this.func.select = false
			        }
			      } else if(item.functionType === 'add') {
			        if (item.remarks === 'true') {
			          this.$set(this.rowHandle.custom,0,
			            {
			              text: '增加',
			              type: 'primary',
			              size: 'small',
			              emit: 'edit'
			            },
			          )
			
			        }
			      }else if(item.functionType === 'delete') {
			        if (item.remarks === 'true') {
			          this.$set(this.rowHandle.custom,this.rowHandle.custom.length,
			            {
			              text: '删除',
			              type: 'danger',
			              size: 'small',
			              emit: 'delete'
			            }
			          )
			        }
			      }
			    })
			  })
			}
    },
    mounted () {
			//this.getFunction () 
			this.filter.pageSize = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions,30)
      this.handleList()
      this.handleTreeNode()
    }
  }
</script>
