<template>
  <div class="workSpace">
    <searchForm :keys="['userName','roleId']" ref="searchForm" @on-search="onSearch"></searchForm>
    <VaCard tag="b" class="table">
      <div class="va-table-responsive">
        <VaDataTable :items="users" :columns="columns" :loading="loading">
          <template #cell(setting)="{ rowData }">
            <editUserBtn :params="rowData"  @after-op="afterOp"></editUserBtn>
            <deleteUserBtn  @after-op="afterOp" :params="rowData"></deleteUserBtn>
          </template>
          <template #cell(birthDate)="{ value }">
            {{value?getTime(value):'-'}}
<!--            <VaChip size="small" :color="'success'" class="mr-6 mb-2"> {{value}} </VaChip>-->
          </template>
        </VaDataTable>
      </div>
      <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>
    </VaCard>
  </div>
</template>

<script>
  import searchForm from '../../module/searchForm.vue'
  import editUserBtn from './editUserBtn.vue'
  import deleteUserBtn from './deleteUserBtn.vue'
  import dict from '../../../../common/dict'
  import moment from 'moment'
  export default {
    name: 'workSpace',
    components: {
      searchForm,
      editUserBtn,
      deleteUserBtn,
    },
    methods: {
      update(v) {
        this.getList()
      },
      getTime(time){
        return moment(new Date(parseInt(time))).format('yyyy-MM-DD')
      },
      afterOp() {
        this.getList()
      },
      onSearch() {
        this.pageInfo.pageNum = 1
        this.getList()
      },
      getList() {
        this.loading = true
        let params = {
          userName: this.$refs.searchForm.form.userName,
          pageNum: Math.ceil(this.pageInfo.pageNum / this.pageInfo.pageSize),
          pageSize: this.pageInfo.pageSize,
          orgId: this.orgId || '',
          roleIds: this.$refs.searchForm.form.roleId.join(','),
        }
        this.$api.getUserList(params).then((res) => {
          this.loading = false
          this.pageInfo.total = res.result.total
          this.users = res.result.records
        })
      },
    },
    mounted() {
      this.getList()
    },
    data() {
      return {
        loading: false,
        orgId: '',
        columns: [
          { key: 'userName', label: '用户名' },
          { key: 'roleName', label: '角色' },
          { key: 'gender', label: '性别' },
          { key: 'phone', label: '联系方式' },
          { key: 'birthDate', label: '生日' },
          { key: 'setting', label: '设置' },
        ],
        pageInfo: {
          ...dict.pageInfo,
        },
        users: [],
      }
    },
  }
</script>

<style scoped lang="less">

</style>
