<template>
    <d2-container>
        <div v-if="isExpend" class="d2-fl d2-tree-view">
            <el-tree
                    ref="tree"
                    default-expand-all
                    highlight-current
                    :data="treeData"
                    :default-expanded-keys="['mTop']"
                    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-building"></i>
          	<span>&nbsp;{{node.label}}</span>
          </div>
          <div v-if="data.alias == 'JG003'">
          	<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"
                        labelPosition="right"
                >
                    <el-form-item label="学号">
                        <el-input v-model.trim="filter.userNo"/>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model.trim="filter.userNm"/>
                    </el-form-item>
                    <!--<el-form-item label="部门">-->
                        <!--<department-tree v-model="filter.depId"></department-tree>-->
                    <!--</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">
                <div class="d2-table-view-handle">
                    <el-button @click="onCreateClick" size="small" icon="el-icon-plus">新增设置</el-button>
                </div>
                <d2-crud
                        title="功能设置列表"
                        ref="d2Crud"
                        :options="tableOptions"
                        :loading="loading"
                        :columns="columns"
                        :data="data"
                        :rowHandle="rowHandle"
                        @edit="handleRowEdit"
                        @delete="handleRowRemove"
                        selection-row
                        @selection-change="handleSelectionChange"
                >
                </d2-crud>
            </div>
            <div class="d2-table-view-footer">
                <el-pagination
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        :page-size="tableOptions.pageList[0]"
                        :page-sizes="tableOptions.pageList"
                        :current-page.sync="currentPage"
                        layout="total,sizes, prev, pager, next,jumper"
                        :total="pagination.total"
                ></el-pagination>
            </div>
        </div>
        <el-dialog
                :title="diaLogName"
                :visible.sync="operVisible"
                @close="clearForm"
                width="40%"
                :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" label-width="80px" labelPosition="right" :rules="rules">
                <el-row :gutter="15">
                    <el-col :span="18">
                        <el-form-item label="员工" prop="userId">
                            <staff-tree  ref="saffTree" :depType="type" :strr="form.userNm" v-model="form.userId" :isCreatOrEdit="isEdit"></staff-tree>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-checkbox-group v-model="cardPurCode1">
                           <el-row>
                               <el-col :span="8" v-for="(item,index) in checkList" :key="index" style="margin-top: 8px">
                                   <el-checkbox :label="item.cardPurCode">{{item.cardPurName}}</el-checkbox>
                               </el-col>
                           </el-row>
                        </el-checkbox-group>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button :loading="staLoading" @click="operInstance()">保存</el-button>
      </span>
        </el-dialog>
    </d2-container>
</template>
<script>
  import { tableOptions } from '../../../assets/options'
  import {getFuncList,saveOrUpdateFunc,treeNode,getAllFunc,getFuncById,onDeleteClick} from '../../../api/card/setFunc'
  export default {
    name: 'system-staff',
    components: {

    },
    data () {
      return {
        isEdit:true,
        type:'teacher',
        cardPurCode1:[],
        checkList:[],
        // classVisible:false,
        staLoading: false,
        multipleSelection:[],
        func: {
          add: false,
          delete: false,
          update: false,
          select: false
        },
        falg: true,
        isExpend: true,
        tableOptions,
        loading: false,
        operVisible: false,
        diaLogName: '新增',
        lanuchs: [],
        form: {
          userId:"",
          cardPurCode:"",
          userNm:"",
        },
        filter: {
          pageSize: 10,
          pageNum: 1,
          userNo: '',
          userNm:""
        },
        pagination: {
          total: 0
        },
        currentPage: 1,
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        columns: [
          {
            title: '工号/学号',
            key: 'userNo',
            minWidth: '120',
            showOverflowTooltip: true
          },
          {
            title: '姓名',
            key: 'userNm',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '所属部门',
            key: 'depNm',
            minWidth: '90',
            showOverflowTooltip: true
          },
          {
            title: '卡功能',
            key: 'cardPurName',
            minWidth: '180'
          },
        ],
        rowHandle: {
          columnHeader: '操作',
          minWidth: '180',
          align: 'center',
          custom: [
            {
              text: '功能设置',
              type: 'primary',
              size: 'small',
              emit: 'edit'
            },
            {
              text: '删除',
              type: 'danger',
              size: 'small',
              emit: 'delete'
            }
          ]
        },
        data: [],
        rules: {
          userId: [{required: true, message: '员工不能为空', trigger: 'blur'}],
        }
      }
    },

    methods: {
      onCreateClick(){
        this.operVisible = true
      },
      handleNodeClick (data, node, com) {
        // if(data.alias === 'JG003'){
        //   this.falg = false
        //   // this.form.depId = data.id
        //   // this.form.depNm = data.name
        // }else{
        //   this.falg = true
        // }
        this.filter.depId = data.id
        this.handleList()
      },
      handleTreeNode () {
        treeNode({
          depType:""
        }).then(res => {
          this.treeData = JSON.parse(res.msgDat)
        })
        this.handleList()
      },
      handleList (val) {
        if (val) {
          this.filter.pageNum = 1
          this.currentPage = 1
        }
        this.loading = true
        getFuncList(this.filter)
          .then(res => {
            this.loading = false
            this.data = res.page.list
            this.pagination.total = res.page.total
          })
          .catch(err => {
            this.loading = false
          })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleCurrentChange (val) {
        this.filter.pageNum = val
        this.handleList()
      },
      handleSizeChange (val) {
        this.filter.pageNum = 1
        this.filter.pageSize = val
        this.handleList()
      },
      operInstance () {
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (!this.cardPurCode1.length) {
              this.$message({
                message: '请选择功能',
                type: 'warning'
              })
              return
            }
            this.staLoading = true
            this.form.cardPurCode = this.cardPurCode1.join(",")
            saveOrUpdateFunc(this.form).then(res => {
              this.staLoading = false
              this.operVisible = false
              this.clearForm()
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.handleTreeNode()
              this.clearForm()
            }).catch(err => {
              this.staLoading = false
            })
          }
        })
      },
      handleRowEdit ({index, row}) {
  // if(!row.cardPurName){
  //   this.$message({
  //     message: '暂时无功能，不能修改',
  //     type: 'warning'
  //   })
  //   return
  // }
        this.diaLogName = '修改'
        this.isEdit=false
        // this.form.userId=row.userId
        getFuncById({userId:row.userId}).then(res => {
          this.form = res.userVO
          this.cardPurCode1=this.form.cardPurCode.split(",")
         this.form.userNm=res.userVO.userNm
         //  console.log(res.userVO.userNm)
         //  console.log(this.form.userNm)
         //  this.$set(this.form,"userNm",res.userVO.userNm)
        })
        this.operVisible = true
      },
      handleRowRemove ({index, row}) {
        // console.log(row)
        // if(!row.cardPurName) {
        //   this.$message({
        //     message: '暂时无功能，不能删除',
        //     type: 'warning'
        //   })
        //   return
        // }
        this.$confirm(`确定要删除吗?`, '确认操作', {
          confirmButtonText: '确定',
          cancelButtonText: '放弃',
          type: 'warning'
        }).then(() => {
          this.userId=row.userId
          onDeleteClick({userId:this.userId}).then(res=>{
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.handleTreeNode()
          })
        })
      },
      clearForm () {
        if (this.$refs['form']!==undefined) {
          this.$refs['form'].resetFields()
        }
        this.cardPurCode1=[]
        this.form = {}
        this.$refs.saffTree.cleanName()
        this.diaLogName = '新增'
        this.isEdit=true
      },
      getFunc(){
        getAllFunc().then(res=>{
          // console.log(res)
          this.checkList=res.cardPur
        })
      }
    },
    mounted () {
      this.filter.limit = this.tableOptions.pageList[0]
      this.tableOptions = this.$calcTableHeight(tableOptions,40)
      this.handleTreeNode()
     this.getFunc()
    }
  }
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .timeLabel label{
        width: 110px !important;
    }
    .bankLabel label{
        font-size: 13px;
    }
    .el-form-item__label {
        text-align: left !important;
    }
    .d2-table-view{
        overflow: hidden;
    }
</style>