<template>
  <div class="data-list">
    <el-table
      :data="dataList"
      style="width: 100%"
      header-row-class-name="headerBg"
      empty-text="没有角色信息"
    >
      <el-table-column prop="id" label="ID" align="center" width="80" />
      <el-table-column prop="name" label="角色名称" align="left" width="180" />
      <el-table-column
        prop="intro"
        label="角色介绍"
        align="center"
        min-width="150"
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        width="150"
      />
      <el-table-column
        prop="status"
        label="角色状态"
        align="center"
        width="150"
      >
        <template #default="scope">
          <div v-if="scope.row.status == 5">启用</div>
          <div v-if="scope.row.status == 6">禁用</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="180">
        <template #default="scope">
          <div class="btns">
            <el-button
              type="primary"
              size="small"
              @click="btnEdit(scope.row.id)"
              ><svg-icon icon-class="edit" />编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="btnDelete(scope.row.id)"
              ><svg-icon icon-class="delete" />删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="page-info">
      <el-pagination
        v-model:currentPage="queryForm.page"
        :page-size="queryForm.pageSize"
        :total="recordCount"
        :page-count="pageTotal"
        background
        layout="prev, pager, next"
        @current-change="ChangePage"
      >
      </el-pagination>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      append-to-body
      v-el-drag-dialog
      width="80%"
      custom-class="prod-verify"
      title="创建项目信息"
    >
      <dataInfo :id="dataId" @onClose="onClose"></dataInfo>
    </el-dialog>
  </div>
</template>

<script>
import { searchAdminRole, deleteAdminRole } from "@/api/AdminRole";
import dataInfo from "./dataInfo.vue";
import elDragDialog from "@/directive/el-drag-dialog";
export default {
  components: {
    dataInfo,
  },
  directives: { elDragDialog },
  props: {
    queryForm: {
      type: Object,
      default: () => {
        return {
          page: 1,
          pageSize: 10,
          name: "",
          status: "",
        };
      },
    },
  },
  watch: {
    queryForm: {
      handler: function (val) {
        this.search();
      },
      // immediate: true,//立即执行
      deep: true,
    },
  },
  data() {
    return {
      dialogVisible: false, //控制产品审核
      dataId: 0,
      recordCount: 0,
      pageTotal: 1,
      dataList: [],
      currentData: {},
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    btnDelete(e) {
      let _this = this;
      let par = {
        id: e,
      };
      _this
        .$confirm("您是否确认删除该记录？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then((res) => {
          // console.log("AAA")
          deleteAdminRole(par).then((res) => {});
          _this.search();
        })
        .catch(() => {});
    },

    onChangeVal(e) {
      let _this = this;
      let par = {
        id: _this.currentDataId,
        val: e,
      };
    },

    onClose() {
      let _this = this;
      _this.dialogVisible = false;
      _this.search();
    },

    //编辑
    btnEdit(e) {
      this.dataId = e;
      this.$router.push({ path: "/system/role/edit", query: { id: e } });
    },

    handleClose() {
      let _this = this;
      _this.dataId = 0;
      _this.dialogVisible = false;
    },

    //搜索
    search() {
      let _this = this;
      searchAdminRole(_this.queryForm).then((res) => {
        if (!res) return;
        _this.dataList = res.data.dataList;
        _this.recordCount = res.data.totalRecord;
        _this.pageTotal = res.data.totalPage;
      });
    },
    //修改分页
    ChangePage(e) {
      let _this = this;
      _this.queryForm.page = e;
      _this.search();
    },
  },
};
</script>

<style lang="scss">
@import "./dataList.scss";
</style>
