<template>
  <div class="roles_list">
    <apass-list
      @list-action="listAction"
      search-placeholder="请输入关键字"
      :list-header="listHeader"
      :list-data="listData"
      :list-total="listTotal"
    >
      <el-breadcrumb separator="/" slot="breadcrumb">
        <el-breadcrumb-item to="/authority">权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
      </el-breadcrumb>
      <template slot="header-left">
        <el-button type="primary" @click="$router.push('/authority/roles/add')">
          新建角色
        </el-button>
      </template>
    </apass-list>

    <apass-dialog
      ref="dialog"
      :title="dialogInfo.title"
      :msg="dialogInfo.msg"
      :submit="dialogInfo.submit"
    ></apass-dialog>
  </div>
</template>

<script>
import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog";

export default {
  components: { apassList, apassDialog },
  data: () => ({
    dialogInfo: {
      title: "",
      msg: "",
      submit: null,
    },
    listTotal: 300,
    listHeader: [],
    listData: [],
  }),
  methods: {
    listAction(value) {
      console.log(value);
    },
    showDialog() {
      this.$refs.dialog.show();
    },
    deleteItem(item) {
      this.dialogInfo.title = "";
      this.dialogInfo.msg = "确认删除当前角色";
      this.dialogInfo.cancelText = "";
      this.dialogInfo.sunbmitText = "";
      this.dialogInfo.submit = () => {
        console.log("deleteItem - " + item.name);
      };
      this.showDialog();
    },
  },
  mounted() {
    this.listHeader = [
      {
        label: "角色类型",
        prop: "name",
        type: "button",
        callback(item) {
          console.log("查看详情 - " + item.name);
        },
      },
      {
        label: "创建人",
        prop: "creator",
        type: "",
        align: "center",
      },
      {
        label: "创建日期",
        prop: "create_date",
        type: "",
        align: "center",
      },
      {
        label: "操作",
        type: "buttons",
        align: "center",
        width: 240,
        actionList: [
          {
            label: "分配权限",
            callback(item) {
              console.log("分配权限 - " + item.name);
            },
          },
          {
            label: "删除",
            callback: this.deleteItem,
          },
        ],
      },
    ];
    this.listData = [
      {
        id: 0,
        name: "普通用户",
        creator: "谢飞",
        create_date: "2020-04-27 13:24:19",
      },
      {
        id: 1,
        name: "组织管理员",
        creator: "谢飞",
        create_date: "2020-04-27 13:24:19",
      },
      {
        id: 2,
        name: "超级管理员",
        creator: "谢飞",
        create_date: "2020-04-27 13:24:19",
      },
      {
        id: 3,
        name: "普通用户-开发者",
        creator: "谢飞",
        create_date: "2020-04-27 13:24:19",
      },
      {
        id: 4,
        name: "测试用户",
        creator: "谢飞",
        create_date: "2020-04-27 13:24:19",
      },
    ];
  },
};
</script>

<style scoped>
.roles_list {
  height: 100%;
}
</style>
