<!-- 角色管理 -->
<template>
  <div class="detail_container">
    <div class="bg-breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> 系统管理 </el-breadcrumb-item>
        <el-breadcrumb-item> 角色管理 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main_container">
      <bg-filter-group 
        @search="changeSearch" 
        v-model="filter.search" 
        placeholder="请输入角色名称"
      >
        <template v-slot:left_action>
          <div class="apaas_button">
            <el-button class="register_btn" type="primary" @click="register">
              <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
                新建
            </el-button>
            <el-button class="register_btn" type="primary" @click="deleteRows">
                批量删除
            </el-button>
          </div>
        </template>
      </bg-filter-group>
      <div class="table_container">
        <div class="table bg-scroll">
          <bg-table 
            ref="bgTable" 
            :headers="headers" 
            :rows="tableRows" 
            :select="true" 
            :stripe="true" 
            canEdit
            canEditFlag='state' 
            @select="selectRows"
          >
            <template v-slot:state="{ row }">
              <bg-switch 
                @click="changeUseRow(row)" 
                :labels="['否','是']" 
                :values="[0,1]" 
                v-model="row.state" 
                :disabled="row.role_type == 1"
              />
            </template>
            <template v-slot:created_time="{ row }">
              {{ row.created_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
            </template>
            <template v-slot:action="{ row }">
              <bg-table-btn class="btn" :click="()=>{edit_row(row)}" :disabled="row.state == 1 || row.role_type == 1">
                编辑
              </bg-table-btn>
              <bg-table-btn class="btn" :click="()=>{edit_row(row)}" :disabled="row.role_type == 1">
                分配用户
              </bg-table-btn>
              <bg-table-btn class="btn" :click="()=>{delete_row(row)}" :disabled="row.state == 1 || row.role_type == 1">
                删除
              </bg-table-btn>
            </template>
          </bg-table>
        </div>
        <bg-pagination
          :page="filter.page"
          :size="filter.limit"
          :total="tableTotal"
          @change-page="changePage"
          @change-size="changeSize"
        >
        </bg-pagination>
      </div>
    </div>
     <!-- 删除弹窗 -->
    <el-dialog
      custom-class="dialog_box"
      title="提示"
      v-model="delDialog"
      width="400px"
      :before-close="
        () => {
          delDialog = false;
        }
      "
    >
      <div>确定要选中的数据吗？</div>
      <template v-slot:footer>
        <div class="apaas_button">
          <el-button type="default" @click="delDialog = false">取 消</el-button>
          <el-button type="primary" @click="deleteData">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, onBeforeMount, nextTick } from 'vue'
import axios from '../../../../request/http.js'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const state = reactive({
  filter: {
    page: 1,
    limit: 10,
    search: "",
  },
  
  headers: [
    {
      label: "角色名",
      prop: "role_name",
      
      width: 220
    },
    {
      label: "创建人",
      prop: "created_by",
      
      width: 220
    },
    {
      label: "创建时间",
      prop: "created_time",
      width: 276
    },
    {
      label: "账号数",
      prop: "user_count",
    },
    {
      label: "描述",
      prop: "role_desc",
      minWidth: 346
    },
    {
      label: "是否启用",
      prop: "state",
      width: 95
    },
    {
      label: "操作",
      prop: "action",
      width: 220,
      fixed: "right",
    },
  ],
  tableRows: [],
  tableTotal: 0,
  actionRow: {},
  selection: [],
  delDialog: false,
  delType: 1, // 删除类型  1-单条删除 2-批量删除
})
const getRoleRows = () => {
  let params = {...state.filter}
  console.log(params)
  axios
    .get(`/apaas/system/v5/role/list`,{params})
    .then((res) => {
      if (res.data.code == 200) {
        state.tableRows = res.data.data || []
        state.tableTotal = res.data.total
      }else {
        ElMessage.error(re.data.data)
      }
    })
} // 获取角色列表
const changePage = (val) => {
  state.filter.page = val
  getRoleRows()
} // 改变页码

const changeSize = (val) => {
  state.filter.limit = val
  changePage(1)
} // 改变每页条数

const changeSearch = (val) => {
  state.filter.search = val
  changePage(1)
} // 表格关键字筛选

const changeUseRow = (row) => {
  axios
    .post(`/apaas/system/v5/role/state/${row.id}/${row.state}`)
    .then((res) => {
      if (res.data.code == 200) {
        ElMessage.success(res.data.data)
        changePage(1)
      }else {
        ElMessage.error(res.data.data)
      }
    })
} // 更改启用禁用状态

const selectRows = (rows) => {
  state.selection = rows
}

const register = () => {
  console.log("新建角色")
  router.push("/system/role/add")
} // 新建角色

const edit_row = (row) => {
  console.log(row,"编辑角色")
  router.push({
    path: "/system/role/edit",
    query: {
      id: row.id
    }
  })
} // 编辑角色

const delete_row = (row) => {
  state.actionRow = row
  state.delType = 1
  state.delDialog = true
} // 删除角色

const deleteRows = () => {
  if (state.selection.length == 0) {
    ElMessage.error("请先选择要删除的数据")
  }else {
    state.delType = 2
    state.delDialog = true
  }
} // 批量删除按钮

const deleteData = () => {
  let ids = []
  if (state.delType == 1) {
    ids.push(state.actionRow.id)
  }else {
    state.selection.forEach(e => {
      ids.push(e.id)
    })
  }
  let params = {
    ids: [...ids]
  }
  console.log(params)
  axios
    .delete(`/apaas/system/v5/role/delete`,{data: {ids:[...ids]}})
    .then((res) => {
      if (res.data.code == 200) {
        ElMessage.success(res.data.data)
        state.delDialog = false
        changePage(1)
      }else {
        ElMessage.error(res.data.data)
      }
    })
}
onBeforeMount(() => {
  getRoleRows()
})
    
const {
  filter,
  headers,
  tableRows,
  tableTotal,
  delDialog,
} = toRefs(state)
</script>

<style lang="scss" scoped>
.detail_container {
  width: 100%;
  padding: 0 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  .main_container {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background-color: #fff;
    box-shadow: 0px 1px 4px 0px rgba(0,7,101,0.15);
    border-radius: 6px;
    margin: 0 0 16px;
    position: relative;
    height: calc(100% - 62px);
    .table_container {
      height: calc(100% - 70px);
      padding: 0 16px;
      .table {
        max-height: calc(100% - 64px);
      }
    }
  }
}

</style>