<template>
  <div class="staff-info">
    <div class="title-header">
      <h2 class="name">角色管理</h2>
    </div>
    <!--search-->
    <div id="search-container">
      <div class="fl">
        <el-button type="primary" class="legacy" @click="addUserBtn">新增</el-button>
      </div>
      <div class="fr">
        <el-button type="text" @click="showSearch">
          高级搜索
          <i class="el-icon-arrow-down" v-if="this.isHide"></i>
          <i class="el-icon-arrow-up" v-if="!this.isHide"></i>
        </el-button>
      </div>
    </div>

    <div id="advanced-search" :class="{hide: isHide}">
      <el-row>
        <el-col :span="2"><span class="search-label">角色名称:</span></el-col>
        <el-col :span="3">
          <el-input type="text" v-model="name" placeholder="请输入角色名称"></el-input>
        </el-col>
        <el-col :span="2"><span class="search-label"> 角色编码:</span></el-col>
        <el-col :span="3">
          <el-input type="text" v-model="code" placeholder="请输入角色编码"></el-input>
        </el-col>
        <el-col :span="2"><span class="search-label"> 角色类型:</span></el-col>
        <el-col :span="3">
          <el-select id="s-state" v-model="labelName">
            <el-option
              v-for="item in search_options"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-col>
        <div class="fr">
          <el-button @click="search">搜索</el-button>
        </div>
      </el-row>
    </div>

    <!-- 角色信息列表 -->
    <div id="staff-list">
    <div id="staff-detail" style="font-size: 0px;">
    <div id="tpl-container" style="height: 400px; position:relative;">
      <el-table
      :max-height="400"
      :data="tableData"
      style="width: 100%">
        <el-table-column
          v-for="column in tableColumn"
          :prop="column.prop"
          :label="column.title"
          v-if="column.display"
          >
          <template scope="scope"><span :title="scope.row[column.prop]">{{scope.row[column.prop]}}</span></template>
        </el-table-column>
        <el-table-column
          label="操作"
          >
          <template scope="scope">
             <el-tooltip class="item" effect="dark" placement="top-start" content="编辑">
              <i  class="el-icon-edit" type="primary" @click="editRow(scope.row)" v-show="tableData.length>0"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" placement="top-start" content="删除">
              <i class="el-icon-delete" type="primary" @click="deleteTableRow(scope.row)" v-show="tableData.length>0"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
      <!--pagination-->
      <el-pagination
        id="staff-pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalElements">
      </el-pagination>
    </div>


  <el-dialog :title="dialogTitle" v-model="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="角色编码:" :label-width="formLabelWidth">
        <el-input v-model="form.code" auto-complete="off" v-if="isEdit"></el-input>
        <el-button v-model="form.code" type="text" v-else>{{form.code}}</el-button>
      </el-form-item>
       <el-form-item label="角色名称:" :label-width="formLabelWidth">
        <el-input v-model="form.name" auto-complete="off" v-if="isEdit"></el-input>
        <el-button v-model="form.name" type="text" v-else>{{form.name}}</el-button>
      </el-form-item>
      <el-form-item label="角色类型:" :label-width="formLabelWidth">
         <el-select id="s-state" v-model="form.labelCode" v-if="isEdit">
            <el-option
              v-for="item in search_options"
              :label="item.name"
              :value="item.code">
            </el-option>
        </el-select>
        <el-button v-model="form.labelName" type="text" v-else>{{form.labelName}}</el-button>
      </el-form-item>
      <el-form-item label="备注:" :label-width="formLabelWidth">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="form.textarea" v-if="isEdit">
        </el-input>
        <el-button v-model="form.textarea" type="text" v-else>{{form.textarea}}</el-button>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="editDialog" v-if='!isEdit'>修 改</el-button>
      <el-button type="primary" @click="saveBtn" v-else>确 定</el-button>
    </div>
  </el-dialog>

    <el-dialog
      title="提示"
      v-model="delDialogVisible"
      :modal="true"
      size="tiny">
      <span>确认删除该角色？删除后无法恢复。</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data(){
      return {
      isSureEdit:false,
      editObj:[],
      isEdit:true,
      dialogTitle:'编辑角色',
      dialogFormVisible: false,
      textarea:'',
      form: {
        name: '',
        code: '',
        labelName:'',
        labelCode:'',
        textarea:''
      },
      formLabelWidth: '120px',
      tableData:[],
      tableColumn: [{
        title: '角色名称',
        prop: 'roleName',
        display: true
      },{
        title: '角色编码',
        prop: 'roleCode',
        display: true
      },
        {
        title: '角色类型',
        prop: 'labelName',
        display: true
      },
      {
        title: '备注',
        prop: 'remark',
        display: true
      },
      {
        title: 'id',
        prop: 'id',
        display: false
      }],
        isHide: true,
        size: 10,
        currentPage: 1,
        totalElements: 0,
        sortType:'',
        labelName:'',
        code: '',
        name: '',
        search_options: [

        ],
        delDialogVisible: false,
        delId:'',
      };
    },
    created(){
      /**
       *   获取列表
       **/
      this.request();
      this.getSelection();
    },
    mounted(){
      
    },
    methods: {
      editDialog(){
        this.isEdit=true;
        this.isSureEdit=true;
      },
      resetform(){
        this.form={
          name: '',
          code: '',
          labelName:'',
          labelCode:'',
          textarea:''
        }
      },

      /**
       *   获取列表请求
       **/
      request(n, s) {
        var url;
        var search = '&sortType=' + this.sortType + '&search_LIKE_roleName=' + this.name + '&search_LIKE_roleCode=' + this.code + '&search_EQ_label=' + this.labelName;
        if(n===undefined){
          url = '/wbalone/roleMGT/listRolePage?pn=1&ps=10' + search;
        } else {
          url = '/wbalone/roleMGT/listRolePage?pn='+ n +'&ps=' + s + search;
        }
        this.$http({
          url: url,
          method: 'get',
          dataType: 'json'
        }).then((res) => {
          if(res.data.status === 1){
              this.totalElements = res.data.data.totalElements ;       // 总条数
              this.size = res.data.data.size;                          // 每页的条数
              this.tableData=res.data.data.content;
          }
        }).catch(() => {
          this.$message({
            message: '列表获取失败',
            type: 'error'
          });
          // this.$refs.staffTableRef.setTableData(json.data.content);
        });
      },
      getSelection(){
        var url='/wbalone/label/listByGroup?group=person'
        this.$http({
          url: url,
          method: 'get',
          dataType: 'json'
        }).then((res) => {
          if(res.data.status === 1){
             this.search_options=res.data.data;
            //  this.search_options.unshift({
            //   name:"全部类型",
            //   code:''
            //  });
          }
        }).catch(() => {
          this.$message({
            message: '角色类型获取失败',
            type: 'error'
          });
        });
      },
      handleSizeChange(val) {
        this.request(1, val);
      },
      handleCurrentChange(val) {
        this.request(val, this.size);
      },
      // 高级搜索
      showSearch() {
        this.isHide = !this.isHide;
      },
      search() {
        this.request();
      },
      // 新增
      addUserBtn() {
        this.dialogTitle='新增角色';
        this.dialogFormVisible = true;
        this.resetform();
        this.isSureEdit=false;
      },
      // 保存
      saveBtn(){
        if(!this.isSureEdit){
         var vm=this;
         this.search_options.forEach(function(item,index){
            if(item.code==vm.form.labelCode){
              vm.form.labelName=item.name;
            }
         })
         var params={
          isActive:'',
          labelName:this.form.labelName,
          label:this.form.labelCode,
          remark:this.form.textarea,
          roleCode:this.form.code,
          roleName:this.form.name,
          roleType:'',
          _class:'com.yonyou.ifbp.wb.entity.extend.WBRole'
         };
          this.$http({
            url: '/wbalone/roleMGT/create',
            method: 'post',
            data: params
          }).then((res) => {
            console.log(res.data.status);
            if(res.data.status==1){
              this.$message({
                message: '新增成功',
                type: 'success'
              });
              vm.dialogFormVisible=false;
              vm.request();
              vm.resetform();
            }else{
              vm.$message({
                message: res.data.msg,
                type: 'error'
              });
            }
          }).catch(() => {
            this.$message.error('新增失败');
          });
        }else{
           var vm=this;
           this.search_options.forEach(function(item,index){
              if(item.code==vm.form.labelCode){
                vm.form.labelName=item.name;
              }
           })
           this.editObj.label=this.form.labelCode;
           this.editObj.labelName=this.form.labelName;
           this.editObj.remark=this.form.textarea;
           this.editObj.roleCode=this.form.code;
           this.editObj.roleName=this.form.name;
           this.editObj.sort=null;
           this.editObj.tenantId=null;
           this.editObj._class='com.yonyou.ifbp.wb.entity.extend.WBRole';
            this.$http({
              url: '/wbalone/roleMGT/update',
              method: 'post',
              data: vm.editObj
            }).then((res) => {
              console.log(res.data.status);
              if(res.data.status==1){
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
                vm.dialogFormVisible=false;
                vm.request();
                vm.resetform();
              }else{
                vm.$message({
                  message: res.data.msg,
                  type: 'error'
                });
              }
            }).catch(() => {
              vm.resetform();
              this.$message.error('修改失败');
            });
        }
      },
      deleteTableRow(scope) {
        this.delDialogVisible = true;
        this.delId = scope.id;
      },
      deleteClick() {
        this.$http({
          url: '/wbalone/roleMGT/delete/' + this.delId,
          method: 'post'
        }).then((res) => {
          if (res.data.status === 1) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.delDialogVisible = false;
            this.request();
          } else {
            this.$message({
              message: res.data.error.errorMessage,
              type: 'error'
            });
          }
        }).catch(() => {
          this.$message({
            message: 'Network error',
            type: 'error'
          });
        });
      },
      editRow(row){
        console.log(row);
        this.editObj=row;
        this.form={
          name: row.roleName,
          code: row.roleCode,
          labelName:row.labelName,
          textarea:row.remark,
          labelCode:''
        };
        this.form.labelCode=row.labelName;
        this.isEdit=false;
        this.dialogFormVisible = true;
      }
    }
  };

</script>
<style>
  .staff-info{
    margin: 20px 30px;
  }
  #search-container{
    height: 56px;
    padding: 10px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e3e3e3;
  }
  #advanced-search{
    display: block;
    height: 56px;
    padding: 10px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e3e3e3;
    position: relative;
  }
  #advanced-search .el-col{
    text-align: center;
  }
  #advanced-search.hide{
    display: none;
    transition: all .5s ease;
  }
  #staff-list{
    overflow: auto;
    padding: 5px 20px;
  }
  #staff-list, #staff-detail{
    margin-top: 20px;
    background: #ffffff;
    position: relative;
    padding: 0 20px;
  }

  .search-label{
    line-height: 36px;
    font-size: 14px;
    margin-left: 10px;
  }
  /* 重置表格字体及表头背景，参考友人才 */
  #staff-list .el-table__header th{
    font-size: 15px;
    font-weight: 400;
    color: #333;
  }
  #staff-list .el-table__body .cell{
    font-size: 13px;
    font-weight: normal;
    color: #333;
  }
  #staff-list .el-table thead tr, #staff-list .el-table thead tr th {
    background-color: #eee;
  }
  #staff-list .el-table__footer-wrapper thead div, #staff-list .el-table__header-wrapper thead div {
    background-color: #eee;
    color: #333;
  }
  .legacy{
  padding-left:20px;
  padding-right:20px;
  }
</style>
