<template>
  <div id="power">
    <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;">
        <el-form-item label="权限名称">
          <el-input placeholder="权限名称" size="small" v-model="searchFormData.name"></el-input>
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input placeholder="权限标识" size="small" v-model="searchFormData.flag"></el-input>
        </el-form-item>
        <el-form-item label="权限类型">
          <el-input placeholder="权限类型" size="small" v-model="searchFormData.type"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input placeholder="描述" size="small" v-model="searchFormData.description"></el-input>
        </el-form-item>


        <el-dialog title="权限" :visible.sync="dialogFormVisible">
          <el-form label-position="left" :model="formData">
            <el-form-item label="权限名称">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="权限标识">
              <el-input v-model="formData.flag"></el-input>
            </el-form-item>
            <el-form-item label="权限类型">
              <el-input v-model="formData.type"></el-input>
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="formData.description"></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <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="name" label="权限名称"></el-table-column>
        <el-table-column prop="flag" label="权限标识"></el-table-column>
        <el-table-column prop="type" label="权限类型"></el-table-column>
        <el-table-column prop="description" 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: 'power',
  data() {
    return {
      api: {
        list: this.$api.power.list,
        delete: this.$api.power.delete,
        add: this.$api.power.add,
        update: this.$api.power.update,
      },

      addOrEdit: 1,

      dialogFormVisible: false,

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

      tableData:
        [{
          name: '',
          flag: '',
          type: '',
          description: '',
        }],
      formData: {
        name: '',
        flag: '',
        type: '',
        description: '',
      },
      searchFormData:
        {
          name: '',
          flag: '',
          type: '',
          description: '',
        }
    }
  },

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

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

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

          name: this.searchFormData.name,
          flag: this.searchFormData.flag,
          type: this.searchFormData.type,
          description: this.searchFormData.description,

        }
      })
        .then((response) => {
          // vm.paper = response.data.data.paper;
          //console.log(response.data.data);

          vm.pager = response.data.data.pager

          vm.tableData = response.data.data.powers;
        })
    },
    search() {
      //console.log(this.searchFormData)
      this.loadData();
    },
    showAdd() {
      this.dialogFormVisible = true;

      this.formData.name = '';
      this.formData.description = '';
      this.formData.type = '';
      this.formData.flag = '';


      this.addOrEdit = 1
    },

    showEdit(row) {

      console.log(row)

      this.dialogFormVisible = true;

      this.formData = row

      this.addOrEdit = 2
    },


    addOrEditMehtond() {
      const vm = this;
      if (this.addOrEdit == 2) {
        vm.$http.get(vm.api.update,  {
          params: {
            name: this.formData.name,
            flag: this.formData.flag,
            type: this.formData.type,
            description: this.formData.description,

          }
        })
          .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: {
            name: this.formData.name,
            flag: this.formData.flag,
            type: this.formData.type,
            description: this.formData.description,
          }
        })
          .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>
