<template>
  <div>
    <el-card style="margin-bottom:8px">
      <el-row>
        <el-col :span="8">
          <span>角色：</span>
          <el-input style="width:70%" size="mini" v-model="search.name" clearable placeholder="请输入角色">
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-button size="mini" type="primary" icon="el-icon-search" @click="searchClick(1)">搜索</el-button>
          <el-button size="mini" type="info" icon="el-icon-refresh" @click="searchClick(2)">重置</el-button>
          <el-button size="mini" type="success" icon="el-icon-plus" @click="searchClick(3)" v-if="true">新增
          </el-button>
        </el-col>
      </el-row>
    </el-card>
    <t-table :showButtons='showButtons' :tableLoading='tableLoading' :tableData='tableData' @btnclick='btnclick' />
    <page-total :page="page" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" />
    <add-role :title="title" :form="form" :addStatus="addStatus" :rules="rules" @cancel='cancel' @getData='getData' />
  </div>
</template>
<script>
  import tTable from "./components/table.vue"
  import addRole from "./components/addRole.vue"
  import {
    clearObjValue
  } from "@/utils/common";
  import {
    mixin
  } from "@/mixins/common";
  import {
    mapState,
    mapGetters,
    mapActions
  } from "vuex";
  export default {
    mixins: [mixin],
    data() {
      return {
        search: {
          name: ""
        },
        params: {},
        title: "新增",
        form: {
          id: "",
          roleName: "",
          roleCode: "",
        },
        rules: {}
      }
    },
    components: {
      tTable,
      addRole
    },
    computed: {
      ...mapState({
        tableData: (state) => state.role.tableData,
        page: (state) => state.role.page,
        showButtons: (state) => state.role.showButtons,
      }),
      tableLoading: {
        get() {
          return this.$store.state.role.tableLoading;
        },
        set(val) {
          this.$store.state.role.tableLoading = val;
        },
      },
      addStatus: {
        get() {
          return this.$store.state.role.addStatus;
        },
        set(val) {
          this.$store.state.role.addStatus = val;
        },
      },
    },
    methods: {
      getData() {
        this.params = {
          roleName: this.search.name,
          page: this.page.pageNum,
          limit: this.page.pageSize,
        }
        this.tableLoading = true
        this.$store.dispatch('role/getRoles', this.params).catch(err => {
          this.tableLoading = false
        })
      },
      searchClick(val) {
        switch (val) {
          case 1:
            this.getData();
            break;
          case 2:
            clearObjValue(this.search);
            break;
          case 3:
            for (let key in this.form) {
              if (key != "state") {
                this.form[key] = "";
              }
            }
            this.addStatus = true;
            this.title = "新增";
            break;
        }
      },
      btnclick(val, valkey) {
        if (valkey === 1) {
          for (let key in this.form) {
            for (let index in val) {
              if (key == index) {
                this.form[key] = val[index]
              }
            }
          }
          this.title = '编辑'
          this.addStatus = true
        } else {
          this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$store.dispatch('role/deleteRole', {
              ids: val.id
            }).then(res => {
              this.getData()
            })
          })
        }
      },
      handleCurrentChange(val) {
        this.page.pageNum = val;
        this.getData();
      },
      handleSizeChange(val) {
        this.page.pageSize = val;
        this.getData();
      },
      cancel() {
        clearObjValue(this.form)
        this.addStatus = false
      },
    },
    created() {
      clearObjValue(this.showButtons)
      let btnData = {
        menuid: this.$getMenuId(sessionStorage.getItem("routerIdList"), this.$route.path),
        roleid: sessionStorage.getItem("roleId"),
      }
      this.$store.dispatch("role/getButtonList", btnData);
      this.getData()
    }
  }

</script>
