<template>
  <en-table-layout :tableData="tableData.data" :loading="loading">
    <template #toolbar>
      <div class="inner-toolbar w-11/12 flex justify-between">
        <div class="toolbar-btns">
          <el-button size="small" type="primary" :icon="CirclePlus" v-if="checkPermission(['roleManage:add'])&& store.state.user.user.founder!==1" @click="handleAddRole"
            >{{$t('add')}}</el-button
          >
        </div>
        <div class="toolbar-search">
          <en-table-search @search="searchEvent" :placeholder="$t('search_placeholde')" />
        </div>
      </div>
    </template>

    <template #table-columns>
      <el-table-column prop="role_name" :label="$t('role_names')" />
      <el-table-column prop="role_describe" :label="$t('role_describe')" />
      <el-table-column :label="$t('operate')">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEditRole(scope.row)" v-if="checkPermission(['roleManage:edit'])&& store.state.user.user.founder!==1">{{$t('edit')}}</el-button>
          <el-button size="small" type="danger" @click="handleDeleteRole(scope.row)" v-if="checkPermission(['roleManage:del'])&& store.state.user.user.founder!==1">{{$t('delete')}}</el-button>
        </template>
      </el-table-column>
    </template>

    <template #pagination>
      <el-pagination
        v-if="tableData"
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
        :current-page="tableData.page_no"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="tableData.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.data_total"
      >
      </el-pagination>
    </template>
  </en-table-layout>
</template>
  
  <script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Share, Upload, CirclePlus } from '@element-plus/icons-vue';
import * as API_Auth from '@/api/auth';
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

const store = useStore();
const router = useRouter();
const loading = ref(false);
const params = ref({
  page_no: 1,
  page_size: 10,
  keyword: '',
  company_id: store.state.companId,
});
const tableData = ref<any>({});

const checkPermission = (permissions: string[]): boolean => {
  return true;
};

const handlePageSizeChange = (size: number) => {
  params.value.page_size = size;
  GET_RoleList();
};

const handlePageCurrentChange = (page: number) => {
  params.value.page_no = page;
  GET_RoleList();
};

const handleAddRole = () => {
  router.push({ name: 'roleManageAdd', query: { id: 0 } });
};

const handleEditRole = (row: any) => {
  router.push({ name: 'roleManageAdd', query: { id: row.role_id } });
};

const handleDeleteRole = (row: any) => {
  ElMessageBox.confirm(t('del_info'), t('prompt'), { type: 'warning' })
    .then(() => {
      API_Auth.deleteRole(row.role_id).then(() => {
        ElMessage.success(t('del_success'));
        GET_RoleList();
      });
    })
    .catch(() => {});
};

const searchEvent = (data: string) => {
  params.value.keyword = data;
  params.value.page_no = 1;
  GET_RoleList();
};

const GET_RoleList = () => {
  loading.value = true;
  API_Auth.getRoleList(params.value)
    .then((response) => {
      loading.value = false;
      tableData.value = response;
    })
    .catch(() => {
      loading.value = false;
    });
};

onMounted(() => {
  GET_RoleList();
});
</script>