<template>
  <a-form
    :label-col="{ xl: 7, lg: 5, md: 7, sm: 4 }"
    :wrapper-col="{ xl: 17, lg: 19, md: 17, sm: 20 }"
  >
    <a-row :gutter="8">
      <a-col
        :xl="6"
        :lg="12"
        :md="12"
        :sm="24"
        :xs="24"
      >
        <a-form-item label="角色名称">
          <a-input
            v-model:value.trim="queryform.roleName"
            placeholder="请输入角色名称"
            allow-clear
          ></a-input>
        </a-form-item>
      </a-col>
      <a-col
        :xl="6"
        :lg="12"
        :md="12"
        :sm="24"
        :xs="24"
      >
        <a-form-item
          class="ele-text-right"
          :wrapper-col="{ span: 24 }"
        >
          <a-space>
            <a-button
              type="primary"
              style="background-color: #5cc750"
              @click="search"
            >查询</a-button>
            <a-button @click="reset">重置</a-button>
          </a-space>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
  <!-- 数据操作 -->
  <a-space style="margin-bottom: 10px">
    <a-button
      style="background-color: #5cc750"
      type="primary"
      class="ele-btn-icon"
      @click="handleAdd('新增角色')"
    >
      <template #icon>
        <plus-outlined />
      </template>
      <span>新增</span>
    </a-button>
  </a-space>
  <a-table
    bordered
    :pagination="pagination"
    :columns="columns"
    :dataSource="dataSource"
    :scroll="{ x: 'max-content' }"
  >
    <template #bodyCell="{ column ,record}">
      <template v-if="column.key === 'action'">
        <a-space>
          <a>排序</a>
          <a-divider type="vertical" />
          <a @click="handleAdd('编辑角色',record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm
            title="请确认您是否要删除该角色"
            ok-text="确定"
            cancel-text="取消"
            placement="top"
            @confirm="handleDel(record)"
          >
            <a href="#">删除</a>
          </a-popconfirm>
        </a-space>
      </template>
    </template>
  </a-table>
  <!-- 角色信息 -->
  <a-modal
    v-model:open="open"
    :title="openTitle"
    @ok="handleOkModal"
    @cancel="handleCancelModal"
    width="800px"
    :maskClosable="false"
  >
    <RoleManage
      :key="modalKey"
      ref="formModel"
    ></RoleManage>
  </a-modal>
</template>
<script setup>
import { ref, onMounted, reactive, nextTick } from 'vue';
import { message } from 'ant-design-vue'
import { callUser } from '@/apis/call.js'
import config from '@/utils/config.js'
import RoleManage from '@/views/form/rolemanage/RoleManage.vue';
import { getGUID } from '@/utils/tools'
const open = ref(false);
const openTitle = ref('');
const modalKey = ref(getGUID())
const formModel = ref(null);

const columns = [
  {
    title: '品牌商名称',
    dataIndex: 'orgName',
    width: 200,
    key: 'orgName',
    align: 'center'
  },
  {
    title: '角色名称',
    dataIndex: 'roleName',
    width: 200,
    key: 'roleName',
    align: 'center'
  },
  {
    title: '角色描述',
    dataIndex: 'roleDescription',
    width: 200,
    key: 'roleDescription',
    align: 'center'
  },
  {
    title: '员工数量',
    dataIndex: 'staffCount',
    width: 200,
    key: 'staffCount',
    align: 'center'
  },
  {
    title: 'PC权限数量',
    dataIndex: 'webCount',
    width: 200,
    key: 'webCount',
    align: 'center'
  },
  {
    title: '小程序权限数量',
    dataIndex: 'appletCount',
    width: 200,
    key: 'appletCount',
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    align: 'center',
    fixed: 'right',
  }
];

const queryform = ref({
  roleName: '',
  pageNum: config.pageParam.pageNum,
  pageSize: config.pageParam.pageSize
})
// 表格行数据
const dataSource = ref([])

let pagination = reactive({
  total: dataSource.value.length,
  current: config.pageParam.pageNum,
  pageSize: config.pageParam.pageSize,
  showSizeChanger: true,
  pageSizeOptions: config.pageParam.pageSizeOptions,
  showQuickJumper: true
})

onMounted(() => {
  getData();
})

const search = () => {
  getData()
}

const reset = () => {
  queryform.value = {
    roleName: '',
    pageNum: config.pageParam.pageNum,
    pageSize: config.pageParam.pageSize
  }
  getData()
}

const getData = async () => {
  callUser("/roles/pageQueryRoles", queryform.value).then((res) => {
    if (res.code != 200) {
      message.error(res.message)
      dataSource.value = []
      return
    }
    dataSource.value = res.data.records
  });
}

const handleAdd = async (title, record) => {
  modalKey.value = getGUID();
  openTitle.value = title;
  open.value = true;
  nextTick(() => {
    if (formModel.value) {
      const params = record == null ? {} : {
        roleName: record['roleName'],
        roleDescription: record['roleDescription'],
        roleId: record['roleId'],
        orgId: record['orgId']
      }
      formModel.value.openForm(params);
    } else {
      console.log('formModel is not ready yet');
    }
  });
}

const handleDel = async (record) => {
  callUser("/roles/rolePermissionsDel/" + record['roleId'], {}, "get").then((res) => {
    if (res.code != 200) {
      message.error(res.message)
      dataSource.value = []
      return
    }
    message.success(res.message)
    getData();
  });
}
const handleOkModal = () => {
  formModel.value.formSave(bres => {
    open.value = false;
    if (bres.code == 200) {
      getData()
    }
  });
}

const handleCancelModal = () => {
  formModel.value.resetAll(bres => {
    if (bres) open.value = false;
  });
}

</script>