<template>
  <div id="rolePower">
    <el-main>

      <div style="margin-bottom: 10px">
        <el-button size="medium" icon="el-icon-back" type="text">返回</el-button>
        <span style="margin-left: 20px; font-size: 18px">角色权限列表</span>
      </div>


      <el-button size="medium" icon="el-icon-search" style="margin-bottom: 15px" @click="search(searchFormData)">查询
      </el-button>
      <el-button size="medium" icon="el-icon-plus" @click="showAdd" style="margin-left: 0">新增</el-button>


      <div style="padding: 10px;background-color: white">
        <el-form :inline="true" :model="searchFormData" style="background-color: white;" size="mini">
          <el-row style="margin-top: 6px">
            <el-form-item label="角色标识">
              <el-select v-model="searchFormData.roleFlag" placeholder="角色标识" style="width: 180px" clearable>
                <el-option :value="item.flag" v-for="item in roles" :label="item.flag" :key="item.flag"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="权限标识">
              <el-select v-model="searchFormData.powerFlag" placeholder="权限标识" clearable>
                <el-option :value="item.flag" v-for="item in powers" :label="item.flag" :key="item.flag"></el-option>
              </el-select>
            </el-form-item>
          </el-row>


          <el-dialog title="关联角色权限" :visible.sync="dialogFormVisible" style="width: 65% ; margin-left: 350px ;">
            <el-form label-position="left" :model="formData">
              <el-row style="margin-top: 6px">
                <el-form-item label="角色标识">
                  <el-select v-model="formData.roleFlag" placeholder="角色标识" style="width: 180px" clearable>
                    <el-option :value="item.flag" v-for="item in roles" :label="item.flag" :key="item.flag"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="权限标识">
                  <el-select v-model="formData.powerFlag" placeholder="权限标识" clearable>
                    <el-option :value="item.flag" v-for="item in powers" :label="item.flag" :key="item.flag"></el-option>
                  </el-select>
                </el-form-item>
              </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer" style="text-align: center">
              <el-button @click="cancel()">取 消</el-button>
              <el-button type="primary" @click="addOrEditMehtond()">确 定</el-button>
            </div>
          </el-dialog>

        </el-form>


        <el-table :data="tableData">
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="roleFlag" label="角色标识"></el-table-column>
          <el-table-column prop="powerFlag" label="权限标识"></el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="showEdit(scope.row)">修改</el-button>
              <el-button type="text" size="medium" @click="del(scope.row)" style="color: #c01920">删除</el-button>
            </template>
          </el-table-column>

        </el-table>


        <el-pagination
            style="margin-top: 15px;text-align: center"
            background
            layout="prev, pager, next"
            :page-size="pager.pageSize"
            :current-page="pager.pageIndex"
            :total="pager.itemCount"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>

    </el-main>
  </div>

</template>

<script>
export default {
  name: 'rolePower',
  data() {
    return {
      roles: [],
      powers: [],

      api: {
        list: this.$api.rolePower.list,
        delete: this.$api.rolePower.delete,
        add: this.$api.rolePower.add,
        update: this.$api.rolePower.update,
      },

      addOrEdit: 1,

      dialogFormVisible: false,

      pager: {
        pageSize: 2,
        pageIndex: 1,
        itemCount: 0,
      },

      tableData:
          [{
            roleFlag: '',
            powerFlag: '',
          }],

      formData: {
        roleFlag: '',
        powerFlag: '',
      },

      searchFormData:
          {
            roleFlag: '',
            powerFlag: '',
          }
    }
  },

  created: function () {
    this.loadData();
    this.getRole();
    this.getPower();
  },

  methods: {
    getRole() {
      const vm = this;
      vm.$http.get(vm.$api.role.list).then((resp) => {
        vm.roles = resp.data.data.roles
      })
    },
    getPower() {
      const vm = this;
      vm.$http.get(vm.$api.power.list).then((resp) => {
        vm.powers = resp.data.data.powers
      })
    },


    //切换页码
    handleCurrentChange(index) {
      this.loadData(index)
    },

    loadData(index) {
      const vm = this;
      vm.$http.get(vm.api.list, {
        params: {
          pageSize: 5,
          pageIndex: index ? index : 1,

          roleFlag: this.searchFormData.roleFlag,
          powerFlag: this.searchFormData.powerFlag,
        }
      })
          .then((response) => {
            // vm.paper = response.data.data.paper;
            console.log(response.data.data);

            vm.pager = response.data.data.pager

            vm.tableData = response.data.data.rolePowers;
          })
    },

    search() {
      this.loadData();
    },

    showAdd() {
      this.dialogFormVisible = true;

      this.formData.roleFlag = '';
      this.formData.powerFlag = '';
      this.addOrEdit = 1
    },

    showEdit(row) {
      console.log(row)

      this.dialogFormVisible = true;

      this.editRow = JSON.parse(JSON.stringify(row));
      this.formData = this.editRow

      this.addOrEdit = 2
    },


    addOrEditMehtond() {
      const vm = this;
      if (this.addOrEdit == 2) {
        vm.$http.get(vm.api.update, {
          params: {
            code: this.editRow.code,
            roleFlag: this.formData.roleFlag,
            powerFlag: this.formData.powerFlag,
          }
        })
            .then((response) => {
              console.log(response)

              if (response.data.status == 200) {

                this.$message({
                  type: 'success',
                  showClose: true,
                  message: response.data.desc
                })
              }

              this.dialogFormVisible = false;

              this.loadData();

            })
            .catch(() => {
            });
      }

      if (this.addOrEdit == 1) {
        vm.$http.get(vm.api.add, {
          params: {
            roleFlag: this.formData.roleFlag,
            powerFlag: this.formData.powerFlag,
          }
        })
            .then((response) => {
              if (response.data.status == 200) {

                this.dialogFormVisible = false;

                this.$message({
                  type: 'success',
                  showClose: true,
                  message: response.data.desc
                })

                this.loadData();
              }
            })
      }
    },

    del(row) {
      const vm = this;
      this.$confirm('确认删除', '提示', {
        type: 'warning'
      }).then(() => {
        vm.$http.get(vm.api.delete, {
          params: {
            code: row.code,
          }
        })
            .then((response) => {
              console.log(response)
              if (response.data.status == 200) {
                this.$message({
                  type: 'success',
                  showClose: true,
                  message: response.data.desc
                })

              }
              this.loadData();
            })
      })
          .catch(() => {
            this.$message({
              type: 'info',
              showClose: true,
              message: '取消删除'
            })
          });
    },
    cancel() {
      this.$message({
        message: '操作取消',
        showClose: true,
        type: 'info'
      });

      this.dialogFormVisible = false;

    },

  }
}
</script>

<style scoped>
.el-form-item {
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  margin-top: 0px;
}

</style>
