<template>
  <div class="full-box zhglcss" style="overflow: hidden">
    <div class="" style="width: 100%;height:100%;"  v-show="iShowDetail===0">
      <div class="top-tip-box t-title">当前位置：后台系统管理 > 企业用户人员管理</div>
      <div class="table-info-box">
        <div class="table-search-box onerow">
          <div class="search-info-box" style="">
            <div class="search-item" v-if="false">
              <div class="search-item-label">所属科室</div>
              <el-select v-model="filter.orgn" clearable filterable placeholder="请选择" style="width: 260px">
                <el-option label="全部" value=""></el-option>
                <el-option  v-for="item in typeList" :key="item.id" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </div>
            <div class="search-item">
              <div class="search-item-label">姓名</div>
              <el-input style="width: 250px;" v-model="filter.realName" clearable autofocus placeholder="请输入内容" @keyup.enter.native="submit"></el-input>
            </div>
            <el-button class="search-btn" type="primary" @click="searchResult">查询</el-button>
            <el-button class="operate-btn" type="primary" style="float:left" @click="showAdd" v-if="false">新增</el-button>
          </div>
          <div class="search-border-box">
            <div class="sbb-line"></div>
            <div class="sbb-role"></div>
          </div>
        </div>
        <div class="table-result-boxx" style="height: calc(100% - 100px)">
          <div class="table-container-style">
            <el-table :data="tableData.list" height="200">
              <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
              <el-table-column property="account" label="用户名" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column property="name" label="姓名" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column property="sexString" label="性别" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column property="birthday" label="出生日期" align="center"  show-overflow-tooltip></el-table-column>
              <el-table-column property="deptname" label="企业名称" align="center"show-overflow-tooltip></el-table-column>
              <el-table-column fixed="right" label="操作" align="center" width="160" v-if="false">
                <template slot-scope="scope">
                  <div class="table-edit-btn" @click="setPrivilege(scope.row)">权限设置</div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination @current-change="handlePageChange" background layout="total, prev, pager, next" :total="tableData.total" :current-page="tableData.pageNum" :page-size="tableData.pageSize" :page-count="tableData.pages" style="text-align: right;"></el-pagination>
          </div>
        </div>
      </div>
      <!--修改密码-->
      <el-dialog class="multiColDialog users" :title="type===0?'新增':'修改'" :visible.sync="dialogVisible" width="800px" :close-on-click-modal=false>
        <el-form :model="addForm" :rules="addRules" ref="addForm">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="用户名" prop="userName">
                <el-input v-model="addForm.userName" clearable auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名" prop="realName">
                <el-input v-model="addForm.realName" clearable auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="addForm.idCard" clearable auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系方式" prop="phone">
                <el-input v-model="addForm.phone" clearable auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="addForm.sex" clearable filterable placeholder="请选择">
                  <el-option  v-for="item in sexList" :key="item.id" :label="item.name" :value=item.name></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="年龄" prop="age" class="small">
                <el-input v-model.number="addForm.age" clearable auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生日期" prop="birthday">
                <el-date-picker v-model="addForm.birthday" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="所属科室" prop="orgn">
                <el-select v-model="addForm.orgn" clearable filterable placeholder="请选择">
                  <el-option  v-for="item in typeList" :key="item.id" :label="item.name" :value=item.name></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职务" prop="duty">
                <el-input v-model="addForm.duty" clearable auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateModule('addForm')">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!--权限设置-->
    <transition name="el-zoom-in-bottom">
      <div class="full-box" v-show="iShowDetail===1">
        <div class="top-tip-box t-title">当前位置：后台系统管理 > 用户人员管理 > 权限设置{{currentUser === "" ? "" : " -- "+currentUser}}</div>
        <div style="width:calc(100% - 75px);margin: 0 80px 10px 80px;height: 25px;line-height: 25px;color: white;" v-if="false">
          <el-row :gutter="0">
            <el-col :span="24">
              <div style="margin-right: 20px;border-bottom: 1px solid white;">功能权限</div>
            </el-col>
            <el-col :span="12" v-if="false">
              <div style="border-bottom: 1px solid white;">数据权限</div>
            </el-col>
          </el-row>
        </div>
        <div class="form-body privilege-body" style="max-height: calc(100% - 75px);padding-top: 0;overflow-y: auto">
          <el-row :gutter="40">
            <el-col :span="24">
              <el-tree :data="treeData" :props="defaultProps" ref="treeRef" node-key="id" show-checkbox default-expand-all :default-checked-keys="treeCheckedList"></el-tree>
            </el-col>
            <el-col :span="12" v-if="false">
              <div class="privilege-header"></div>
              <el-checkbox-group v-model="checkedList">
                <template v-for="item in checkGroupList">
                  <el-checkbox :label="item.id">{{item.name}}</el-checkbox>
                </template>
              </el-checkbox-group>
            </el-col>
          </el-row>
        </div>
        <div class="form-footer">
          <el-row >
            <el-col :span="24" style="text-align: center;">
              <div class="btn-normal" @click="handleSave">保存</div>
              <div class="btn-normal" @click="handleBack" style="margin-left: 10px;">返回</div>
            </el-col>
          </el-row>
        </div>
      </div>
    </transition>

  </div>
</template>

<script>
  let month = new Date().getMonth()==0?0:new Date().getMonth();
  let year = month<10?new Date().getFullYear()+"-0"+month :new Date().getFullYear()+"-"+month;
  export default {
    name: 'yjManage',
    data () {
      return {
        iShowDetail:0,
        currentUser: "",
        type: 0,//标示弹出框类型：0为新增，1为修改
        timeFilter:[new Date().format("yyyy-")+"01",new Date(year).format("yyyy-MM")],
        filter:{
          realName:'',
          orgn: "",
        },
        typeList: [],
        tableData:{
          list: [],
          pageNum: 1,
          pageSize: 10,
          pages: 0,
          total: 0,
        },
        dialogVisible:false,
        addRules:{
          userName: [{ required: true, validator: this.$Util.checkUsername, trigger: 'blur' }],
          realName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          idCard: [{ required: true, validator: this.$Util.checkIDCard, trigger: 'blur' }],
          phone: [{ required: true, validator: this.$Util.checkPhone, trigger: 'blur' }],
          sex: [{ required: true, message: '请选择性别', trigger: 'blur,change' }],
          age: [
            { required: true, message: '请输入年龄', trigger: 'blur' },
            { type: 'number', message: '年龄为数字值', trigger: 'blur' }
          ],
          birthday: [{ required: true, message: '请选择出生日期', trigger: 'blur,change' }],
          duty: [{ required: true, message: '请输入职务', trigger: 'blur' }],
          orgn :[{ required: true, message: '请选择所属科室', trigger: 'blur,change' },],
        },
        addForm: {userName: "",realName: "",sex: "男",idCard: "",phone: "",birthday: "",age: "",duty: "",orgn:''},
        sexList: [{id:1,name:"男"},{id:0,name:"女"}],
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        treeCheckedList: [],
        checkGroupList: [],
        checkedList: [],
        aaaa:false
      }
    },
    mounted (){},
    created(){
      this.getTypeList();
      this.getDataList()
    },
    methods:{
      searchResult(){
        this.getDataList();
      },
      getTypeList: function (pager) {
        let _this = this;
        _this.tableData.pageNum = _this.$Util.isEmpty(pager) ? _this.tableData.pageNum : pager;
        _this.$http.get('/dx-economy-api/department').then(function (resp) {
          let _data = resp.data;
          if (_data.code === 200 && !_this.$Util.isEmpty(_data.data)) {
            let _list = [];
            if(!_this.$Util.isEmpty(_data.data)){
              _data.data.forEach(function (item) {
                _list.push({id:item.id,name:item.name});
              });
            }
            _this.typeList = _list;
          } else {
            _this.$message.error(_data.message);
          }
        });
      },
      getDataList: function (pager) {
        let _this = this;
        _this.tableData.pageNum = _this.$Util.isEmpty(pager) ? _this.tableData.pageNum : pager;
        _this.$http.get('/dx-economy-api/enterpriseUser/page', {
          params: {
            deptname: _this.filter.orgn,
            name: _this.filter.realName,
            pageNum: _this.tableData.pageNum,
            pageSize: _this.tableData.pageSize
          }
        }).then(function (resp) {
          let _data = resp.data;
          if (_data.code === 200 && !_this.$Util.isEmpty(_data.data)) {
            _data.data.list.forEach(function (item) {
              item.sexString = item.sex == 1 ? "男" : item.sex == 2 ? "女" : item.sex;
              _this.$Util.dateToString(item,["entryDate","joinPartyDate","workDate","preFistDate","middleDate","presentDate"],"yyyy-MM-dd");
            });
            console.log(_data.data.list)
            _this.tableData.list = _data.data.list;
            _this.tableData.pageNum = _data.data.pageNum;
            _this.tableData.pageSize = _data.data.pageSize;
            _this.tableData.pages = _data.data.pages;
            _this.tableData.total = _data.data.total;
          } else {
            _this.$message.error(_data.message);
          }
        });
      },
      handlePageChange: function (page) {
        this.getDataList(page);
      },
      resetForm(formName) {
        var _this = this;
        if(!_this.$Util.isEmpty(_this.$refs[formName])){
          _this.$refs[formName].resetFields();
          _this.addForm =  {userName: "",realName: "",sex: 1,idCard: "",phone: "",birthday: "",age: "",duty: "",orgn:''};
        }
      },
      showAdd(){
        this.type = 0;
        this.resetForm("addForm");
        this.dialogVisible = true;
      },
      updateModule: function (formName) {
        var _this = this;
        _this.$refs[formName].validate((valid) => {
          if (valid) {
            var _form = _this.addForm;
            if(_this.type === 0) { // 新增
              _this.$http.post('/dx-economy-api/user', _form).then(function (resp) {
                var _data = resp.data;
                if (_data.code === 200) {
                  _this.$message.success("新增用户成功！")
                  _this.getDataList(1);
                } else {
                  _this.$message.error(_data.message);
                }
              });
            }else{ // 修改
              _this.$http.put('/dx-economy-api/user/'+_form.id, _form).then(function (resp) {
                var _data = resp.data;
                if (_data.code === 200) {
                  _this.$message.success("修改用户成功！")
                  _this.getDataList(1);
                } else {
                  _this.$message.error(_data.message);
                }
              });
            }
            _this.dialogVisible = false;
          } else {
            return false;
          }
        });
      },
      setPrivilege(rowData){
        let _this = this;
        if(_this.$Util.isEmpty(rowData.id)) return;
        _this.iShowDetail = 1;
        _this.$http.get('/dx-economy-api/menu/menuTree').then(function (resp) {
          let _data = resp.data;
          if (_data.code === 200 && !_this.$Util.isEmpty(_data.data)) {
            let _temp_data1 = _data.data;
            _this.treeData = _temp_data1;
            /**/
            _this.$http.get('/dx-economy-api/user/'+rowData.id+'/menu').then(function (resp) {
              let _data = resp.data;
              if (_data.code === 200) {
                let _temp_data = _data.data;
                _this.iShowDetail = 1;
                _this.treeCheckedList = _temp_data;
                _this.currentUser = _this.$Util.isEmpty(rowData.realName) ? "" : rowData.realName;
                _this.currentUserID = rowData.id;
              } else {
                _this.$message.error(_data.message);
              }
            });
            /**/
          } else {
            _this.$message.error(_data.message);
          }
        });
      },
      handleBack() {
        let _this = this;
        _this.iShowDetail = 0;
      },
      handleSave() {
        let _this = this,_form = {};
        if(_this.$Util.isEmpty(_this.currentUserID))
          return;
        _form.menuIds = _this.$refs.treeRef.getCheckedKeys();
        _form.halfMenuIds = _this.$refs.treeRef.getHalfCheckedKeys();
        _this.$http.put('/dx-economy-api/user/'+_this.currentUserID+'/menu', _form).then(function (resp) {
          let _data = resp.data;
          if (_data.code === 200) {
            _this.$notify({
              title: '提示',
              message: '保存权限成功！',
              type: 'success'
            });
            _this.handleBack();
          } else {
            _this.$message.error(_data.message);
          }
        });
      }
    }
  }
</script>
<style>
  .multiColDialog.users .el-dialog__body{height: auto}
</style>
<style scoped>
  .table-result-boxx{height:calc(100% - 95px);}
  .el-form-item{margin-bottom:15px;}
  .el-form-item label{width: 90px;}
  .privilege-body{width: calc(100% - 160px);padding: 0 80px;}
  .privilege-body .el-checkbox{display: block;margin-left: 0;height: 26px;}
  .serving-main .system-settings-query-element{margin-left: 20px;}
  .serving-main .system-settings-row .system-settings-query-element:first-child{margin-left: 0;}
</style>