<template>
  <div class="opBtn">
    <VaButton color="info" :round="false" size="small" icon="preview" class="mr-6 mb-2" @click="goSee">
      查看角色用户
    </VaButton>
    <VaModal
      :model-value="showModal"
      max-height="600px"
      hide-default-actions
      :noDismiss="true"
      max-width="800px"

    >
      <template #header>
        <h3 class="va-h3">用户列表</h3>
      </template>
      <template #footer>
        <VaButton @click='showModal=false'>关闭</VaButton>
      </template>

      <VaDataTable :items="items" :columns='columns'>
        <template #cell(img)="{ rowData }">
          <VaAvatar :src="rowData.img" />
        </template>
      </VaDataTable>
      <div class="pagination">
        <VaPagination
          @click="update"
          v-model="pageInfo.pageNum"
          :total="pageInfo.total"
          :page-size="pageInfo.pageSize"
          :visible-pages="4"
          class="justify-center sm:justify-start"
        />
      </div>
    </VaModal>
  </div>
</template>

<script>
  import dict from '../../../../common/dict'
  export default {
    name: 'previewManByRoleBtn',
    props:{
      params:{
        default:()=>{}
      }
    },
    methods:{
      goSee(){
        this.showModal = true
        this.getList()
      },
      update(){
        getList()
      },
      getList(){
        let params = {
          pageNum: Math.ceil(this.pageInfo.pageNum / this.pageInfo.pageSize),
          pageSize: this.pageInfo.pageSize,
          roleIds: this.params.id,
        }
        this.$api.getUserList(params).then((res) => {
          this.loading = false
          this.pageInfo.total = res.result.total
          this.items = res.result.records
        })
      },
    },
    data() {
      return {
        showModal: false,
        pageInfo:dict.pageInfo,
        items: [],
        columns: [
          { key: 'userName', label: 'userName' },
          { key: 'name', label: 'name' },
          { key: 'phone', label: 'phone' },
          { key: 'gender', label: 'gender' },
        ],
      }
    },
  }
</script>

<style scoped></style>
