<template>
  <div>
    <d2-container>
      <!-- <template slot="header">首页/数据查询</template> -->
      <div class="main">
        <div class="zt_right">
          <!-- <template slot="header">首页/数据查询</template> -->
          <div class="nav">当前所在位置:首页>角色管理</div>
          <div class="right_main">
            <div class="right_title">
              <i class="fa fa-bar-chart" aria-hidden="true" style="padding-right: 5px"></i>
              角色管理
            </div>
            <div class="right_table">
              <el-form :inline="true" :model="formInline" class="demo-form-inline" id="formLabel">
                <div class="float-left">
                  <el-form-item label="角色名称">
                    <el-input v-model="formInline.roleName" placeholder="请输入关键词"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" icon="el-icon-refresh-left" @click="reset">重置</el-button>
                  </el-form-item>
                </div>
                <div class="float-right">
                  <el-form-item>
                    <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">新建角色</el-button>
                  </el-form-item>
                </div>
              </el-form>
              <el-table :data="tableData" ref='dataTreeList' style="width: 100%" :header-cell-style="{ background: '#0064b9', color: '#c9f5fa' }" row-key="id" border>
                <el-table-column prop="roleName" label="角色名称" align="center">
                </el-table-column>
                <el-table-column prop="roleState" label="角色状态" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.roleState ==0">
                      <span class="off">停用</span>
                    </div>
                    <div v-if="scope.row.roleState ==1">
                      <span class="on">启用</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="roleDescription" label="角色描述" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.roleDescription !==''">
                      {{scope.row.roleDescription}}
                    </div>
                    <div v-else>
                      <span>暂无相关描述</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="bulidTime" label="更新时间" align="center">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="300" align="center">
                  <template slot-scope="scope">
                    <el-button @click="handleEdit(1, scope.$index, scope.row)" type="editbtn" class="fa fa-edit" size="mini">编辑</el-button>
                    <el-button @click="delecheck( scope.$index, scope.row)" type="delebtn" class="fa fa-remove" size="mini">删除</el-button>
                    <el-button @click="handleCheck(scope.$index, scope.row)" type="detailbtn" class="fa fa-info-circle" size="mini">查看</el-button>
                    <!-- <el-switch v-model="value" on-text='启用' off-text='禁用' active-value='启用' inactive-value='禁用' active-color="#13ce66" inactive-color="#ff4949"> -->
                    </el-switch>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1" :page-sizes="[10, 20, 30, 40]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <el-dialog title="新建角色" :visible.sync="dialogFormVisible" id="dialogStyle">
        <el-form :model="addRoleForm" :rules="rules" ref="addRoleForm">
          <el-form-item label="角色名称" prop="roleCode" :label-width="formLabelWidth">
            <!-- <el-input v-model="addRoleForm.roleName" style="width:500px"></el-input> -->
            <el-select v-model="addRoleForm.roleCode" placeholder="请选择角色">
              <el-option v-for="item in roleLists" :key="item.enumCode" :label="item.enumName" :value="item.enumCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="机构状态" prop="roleState" :label-width="formLabelWidth">
            <el-radio-group v-model="addRoleForm.roleState" size="small">
              <el-radio label="1" border>启用</el-radio>
              <el-radio label="0" border>停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDescription" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="addRoleForm.roleDescription" rows="5" style="width:500px"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm(1,'addRoleForm')">立即创建</el-button>
          <el-button @click="resetForm('addRoleForm')">重置</el-button>
        </div>
      </el-dialog>

      <el-dialog title="编辑角色" :visible.sync="dialogFormVisible1" id="dialogStyle">
        <el-form :model="editRoleForm" :rules="rules" ref="editRoleForm">
          <el-form-item label="角色名称" prop="roleCode" :label-width="formLabelWidth">
            <!-- <el-input v-model="addRoleForm.roleName" style="width:500px"></el-input> -->
            <el-select v-model="editRoleForm.roleCode" placeholder="请选择角色">
              <el-option v-for="item in roleLists" :key="item.enumCode" :label="item.enumName" :value="item.enumCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="机构状态" prop="roleState" :label-width="formLabelWidth">
            <el-radio-group v-model="editRoleForm.roleState" size="small">
              <el-radio label="1" border>启用</el-radio>
              <el-radio label="0" border>停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDescription" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="editRoleForm.roleDescription" rows="5" style="width:500px"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm(2,'editRoleForm')">修改</el-button>
          <el-button @click="dialogFormVisible1 = false">取消</el-button>
        </div>
      </el-dialog>
      <!-- 查看角色 -->
      <el-dialog title="查看角色" :visible.sync="dialogFormVisible2" id="dialogStyle">
        <el-form :model="checkRoleForm" ref="checkRoleForm" disabled>
          <el-form-item label="角色名称" prop="roleCode" :label-width="formLabelWidth">
            <!-- <el-input v-model="addRoleForm.roleName" style="width:500px"></el-input> -->
            <el-select v-model="checkRoleForm.roleCode" placeholder="请选择角色">
              <el-option v-for="item in roleLists" :key="item.enumCode" :label="item.enumName" :value="item.enumCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="机构状态" prop="roleState" :label-width="formLabelWidth">
            <el-radio-group v-model="checkRoleForm.roleState" size="small">
              <el-radio label="1" border>启用</el-radio>
              <el-radio label="0" border>停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDescription" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="checkRoleForm.roleDescription" rows="5" style="width:500px"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <!-- <el-button type="primary" @click="submitForm(2,'editRoleForm')">立即创建</el-button> -->
          <el-button @click="dialogFormVisible2 = false">取消</el-button>
        </div>
      </el-dialog>
    </d2-container>
  </div>
</template>
<script>
import api from "@/api";
export default {
  name: 'roleManagement',
  data () {
    return {
      value: 'true',//启用开关默认值
      roleName: '',// 角色名称-搜索
      //查询条件
      formInline: {
        orgId: "",
        roleName: "",
      },

      // 表格字段

      dataSearchList: [
        {
          directLibrary: '',
          subTreasury: '',
          cfName: '',
          scanStart: '',
          scanEnd: '',
          cfState: ''
        }
      ],
      tableData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,//新建角色
      dialogFormVisible1: false,//编辑角色
      dialogFormVisible2: false,//查看角色

      formLabelWidth: '120px',
      // 弹窗校验
      rules: {
        roleCode: [
          { required: true, message: '请选择角色名称', trigger: 'blur' },
        ],
        roleState: [
          { required: true, message: '请选择角色启用状态', trigger: 'blur' },
        ],
      },
      // 新增时角色下拉菜单
      roleLists: [],
      // 新增角色弹窗form
      addRoleForm: {
        orgId: 1,
        roleCode: '',
        roleName: '',//角色名称
        roleState: '',//角色状态
        roleDescription: '',//角色描述
        roleAuth: null,
      },
      // 编辑弹窗form
      editRoleForm: {
        id: '',
        orgId: 1,
        roleCode: '',
        roleName: '',//角色名称
        roleState: '',//角色状态
        roleDescription: '',//角色描述
        roleAuth: null,
      },
      //查看弹窗form
      checkRoleForm: {},
      form: {
        name: '',
        region: ''
      },
      pagination: {
        // 每页显示的条数
        pageSize: 10,
        // 当前页
        curPage: 1,
        // 总数
        total: 20
      }
    }
  },
  watch: {
    filterTest (val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted () {
    //获取页面数据
    this.getList()
    // 异步加载角色列表
    setTimeout(() => {
      this.roleList();
    }, 100);
  },
  methods: {
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    search () {
      console.log(this.formInline, 'this.formInline')
      this.getList()
    },
    reset () { },
    // 重置表单
    resetForm () {
      this.addRoleForm.roleCode = '',
        this.addRoleForm.roleName = '',//角色名称
        this.addRoleForm.roleState = '',//角色状态
        this.addRoleForm.roleDescription = ''//角色描述
    },
    //新增时角色下拉选
    roleList () {
      var condition = {
        enumName: "",
        enumCode: 210000,
      };
      condition = JSON.stringify(condition);
      var data = {
        condition: condition,
      };
      api.dataDic(data).then((res) => {
        if (res.code == 200) {
          res.data.forEach((ele) => {
            if (ele.enumCode === "210000") {
              console.log(ele, "ele.enumCode");
              this.roleLists = ele.children;
              console.log(this.roleLists, "this.roleLists");
            }
          });
        }
      })
        .catch((err) => {
          console.log(err);
        });
    },
    // 编辑数据展示
    handleEdit (type, index, row) {
      this.editRoleForm = row
      this.dialogFormVisible1 = true

    },
    //新建机构校验弹窗form  根据type 判断是新增还是修改
    submitForm (type, formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // type 1 是新增，2是编辑, 3是查看
          if (type == 1) {
            console.log(this.addRoleForm, 'addroleform')
            this.roleLists.forEach(item => {
              if (item.enumCode == this.addRoleForm.roleCode) {
                this.addRoleForm.roleName = item.enumName
              }
            })
            let data = this.addRoleForm
            api.addRole(data).then(res => {
              console.log(res, '新增角色res')
              if (res.code == 200) {
                this.dialogFormVisible = false
                this.getList()
                this.$message({
              type: 'success',
              message: '新建成功!'
            })
              }
            })
          } else if (type == 2) {
            /*             console.log(this.editRoleForm, 'editform')
                          console.log(this.editRoleForm.roleCode) */
            this.roleLists.forEach(item => {
              if (item.enumCode == this.editRoleForm.roleCode) {

                this.editRoleForm.roleName = item.enumName
              }
            })
            // 
            api.editRoleInfo(this.editRoleForm).then(res => {
              if (res.code == 200) {
                console.log(res, '修改角色成功')
                this.dialogFormVisible1 = false
                this.getList()
                this.$message({
              type: 'success',
              message: '修改成功!'
            })
              }
            }).catch(err => {
              console.log(err)
            })
          }

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 获取页面数据
    getList () {
      let condition = {
        orgId: this.formInline.orgId,
        roleName: this.formInline.roleName,
      }
      let data = {
        pageIndex: this.pagination.curPage,
        pageSize: this.pagination.pageSize,
        condition: JSON.stringify(condition)
      }
      api.getRolePageList(data).then(res => {
        // console.log(res, 'res')
        if (res.code == 200) {
          this.tableData = res.data.records
          this.pagination.limit = res.data.size
          this.pagination.total = res.data.total

        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 每页条数改变
    handleSizeChange (val) {
      this.pagination.pageSize = val;
      this.getList();
    },
    // 当前页改变
    handleCurrentChange (val) {
      this.pagination.curPage = val;
      this.getList();
    },
    // 查看
    handleCheck (index, row) {
      // console.log(index, row, '查看rows')
      this.checkRoleForm = row
      this.dialogFormVisible2 = true
    },
    // 删除
    delecheck (index, row) {
      this.$confirm('确定删除该角色?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.deleRole(row.id).then(res => {
          if (res.code == 200) {
            // console.log(res, '删除成功')
            this.getList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        }).catch(err => {
          console.log(err)

        })
      })

    },
    querySearch (queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },

    handleSelect (item) {
      console.log(item);
    },
    handleIconClick (ev) {
      console.log(ev);
    },


  }
}
</script>
<style lang="scss" scoped>
/* .main .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  border-bottom: none ;
} */
// 组织机构输入框
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}

.main {
  height: 100%;
  display: flex;
 
  .zt_right {
    width: 100%;
    // margin-left: 20px;
    // width: calc(100% - 250px);
    .nav {
      padding: 10px 0 10px 10px;
      color: #fff;

      font-size: 14px;

      background: #004a93;
    }
    .right_main {
      border: 1px solid #67a7df;
      background: #112f5d;

      margin-top: 10px;
      .right_title {
        color: #fff;
        border-bottom: 1px solid #67a7df;
        padding: 10px;
        font-size: 14px;
      }
      .right_table {
        padding: 20px;
      }
    }
  }
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.off::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  padding: 5px;
  color: red;
  background-color: red;
  border-color: red;
  margin-right: 8px;
}
.on::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  padding: 5px;
  color: #5cb85c;
  background-color: #5cb85c;
  border-color: #5cb85c;
  margin-right: 8px;
}
</style>
