<template>
  <div class="workSpace">
    <searchForm :keys="['userName']" ref="searchForm" @on-search="onSearch"></searchForm>
    <VaCard tag="b" class="table">
      <div class="va-table-responsive">
        <!--        <table class="va-table">-->
        <!--          <thead>-->
        <!--          <tr>-->
        <!--            <th>用户名称</th>-->
        <!--            <th>联系方式</th>-->
        <!--            <th>角色名称</th>-->
        <!--            <th>状态</th>-->
        <!--            <th>设置</th>-->
        <!--          </tr>-->
        <!--          </thead>-->
        <!--          <tbody>-->
        <!--          <tr-->
        <!--            v-for="user in users"-->
        <!--            :key="user.id"-->
        <!--          >-->
        <!--            <td>{{ user.userName }}</td>-->
        <!--            <td>{{ user.userName }}</td>-->
        <!--            <td>{{ user.userName }}</td>-->
        <!--            <td>-->
        <!--              <VaChip-->
        <!--                size='small'-->
        <!--                :color="'success'"-->
        <!--                class="mr-6 mb-2"-->
        <!--              >-->
        <!--                使用中-->
        <!--              </VaChip>-->
        <!--            </td>-->
        <!--            <td>-->
        <!--              <editUserBtn></editUserBtn>-->
        <!--              <deleteUserBtn></deleteUserBtn>-->
        <!--            </td>-->
        <!--          </tr>-->
        <!--          </tbody>-->
        <!--        </table>-->

        <VaDataTable :items="users" :columns="columns" :loading="loading">
          <template #cell(setting)="{ rowData }">
            <editUserBtn :params="rowData"></editUserBtn>
            <deleteUserBtn @after-op="afterOp" :params="rowData"></deleteUserBtn>
          </template>
          <template #cell(birthDate)="{ value }">
            <VaChip size="small" :color="'success'" class="mr-6 mb-2"> {{value}} </VaChip>
          </template>
        </VaDataTable>
      </div>
      <div class="pagination">
        <VaPagination
          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'
  export default {
    name: 'workSpace',
    components: {
      searchForm,
      editUserBtn,
      deleteUserBtn,
    },
    methods: {
      afterOp() {
        this.getList()
      },
      onSearch() {
        this.pageInfo.pageNum = 1
        this.getList()
      },
      getList() {
        this.loading = true
        let params = {
          userName: this.$refs.searchForm.form.userName,
          pageNum: this.pageInfo.pageNum,
          pageSize: this.pageInfo.pageSize,
          orgId: this.orgId || '',
        }
        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: 'gender', label: '性别' },
          { key: 'phone', label: '联系方式' },
          { key: 'status', label: '状态' },
          { key: 'setting', label: '设置' },
        ],
        pageInfo: {
          ...dict.pageInfo,
        },
        users: [],
      }
    },
  }
</script>

<style scoped lang="less">

</style>
