<template>
  <div class="AccountManagement-page BaseApp-page">
    <header class="BaseApp-page-header">
      <div class="AccountManagement-header-title">用户管理</div>
    </header>
    <main class="BaseApp-page-main">
      <div class="AccountManagement-inner">
        <div class="AccountManagement-table-wrapper">
          <vxe-table class="BaseApp-table" :data="tableData" show-overflow stripe>
            <vxe-column field="user_name" title="账号" min-width="200"></vxe-column>
            <vxe-column field="real_name" title="姓名" min-width="200"></vxe-column>
            <vxe-column field="user_sex" title="性别" min-width="200">
              <template #default="{ row }">
                {{ row.user_sex === 1 ? '男' : '女' }}
              </template>
            </vxe-column>
            <vxe-column field="速度" title="角色" min-width="200">
              <template #default="{ row }">
                {{ getRoleName(row.role_id) }}
              </template>
            </vxe-column>
            <vxe-column title="操作" min-width="300">
              <template #default="{ row }">
                <div class="BaseApp-table-btn-group">
                  <div class="BaseApp-table-btn" @click="editRow(row)">编辑</div>
                  <div class="BaseApp-table-btn" @click="showFaceDialog(row)">录入人脸</div>
                  <div class="BaseApp-table-btn BaseApp-table-btn--red" @click="delUser(row)">
                    删除
                  </div>
                </div>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <CommonPage
          class="BaseApp-pagination"
          :maxNum="queryObj.maxPage"
          @changePage="loadData4Page"
          :page_no="queryObj.page_no" />
      </div>
    </main>
    <footer class="BaseApp-page-footer">
      <div class="BaseApp-btn" @click="goBack">返回</div>
      <div class="BaseApp-btn BaseApp-btn--primary" @click="goAddUser">添加用户</div>
    </footer>
  </div>
  <FaceDialog
    v-if="faceDialogConfig.visible"
    oprType="FACE_SET"
    :faceBindId="faceDialogConfig.user_id"
    @cancel="faceDialogConfig.visible = false"
    @submit="faceDialogConfig.visible = false"></FaceDialog>
</template>

<script setup>
import { ref, reactive, onBeforeUnmount, onMounted, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { notify } from '@/utils/message.js';
import { getUserList, deleteUserApi } from '@/api/user.js';
import { showConfirmDialog } from 'vant';
import FaceDialog from '../../components/FaceDialog/index.vue';

const route = useRoute();
const router = useRouter();
let tableData = reactive([]);
let queryObj = reactive({
  page_no: 1,
  page_size: 5,
  maxPage: 1
});
let roleList = reactive([
  { value: '35efee88-f4bc-11ee-9341-8cc84ba8982e', label: '管理员' },
  { value: '34efee88-f4bc-11ee-9341-8cc84ba8982e', label: '普通用户' }
]);
let faceDialogConfig = reactive({
  visible: false,
  user_id: ''
});

/**
 * 加载数据
 */
const loadData = async () => {
  const res = await getUserList({
    ...queryObj,
    real_name: ''
  });
  let { code, desc, pagination } = res?.data || {};
  if (code !== 200) {
    notify(desc);
    return;
  }
  tableData.length = 0;
  tableData.push(...res.data.data);
  console.log(pagination, res);
  queryObj = Object.assign(queryObj, {
    ...pagination,
    maxPage:
      Math.floor(pagination.total_count / pagination.page_size) +
      (pagination.total_count % pagination.page_size ? 1 : 0)
  });
};

/**
 *
分页 */
const loadData4Page = (type) => {
  if (type === 'pre') {
    if (queryObj.page_no == 1) return;
    queryObj.page_no--;
    queryObj.page_no = Math.max(queryObj.page_no, 1);
  } else if (type === 'next') {
    if (queryObj.page_no == queryObj.maxPage) return;
    if (queryObj.page_no < queryObj.maxPage) {
      queryObj.page_no = queryObj.page_no + 1;
    }
  }
  loadData();
};

/**
 * 获取角色名称
 */
const getRoleName = (roleId) => {
  console.log(roleId);
  let foundItem = roleList.find((item) => item.value === roleId);
  return foundItem ? foundItem.label : '';
};

/**
 * 编辑用户
 */
const editRow = (rowObj) => {
  router.push({
    path: '/addUser',
    query: {
      oprType: 'edit',
      ...rowObj
    }
  });
};

/**
 * 删除用户
 */
const delUser = (rowObj) => {
  showConfirmDialog({
    title: '提示',
    message: `确定删除账号：[${rowObj.user_name}]吗？`,
    className: 'BaseApp-MessageBox-Confirm'
  })
    .then(async () => {
      const res = await deleteUserApi(rowObj.user_id);
      let { code, desc } = res.data;
      if (code != 200) {
        notify(desc);
        return;
      }
      notify(desc, 'success ');

      loadData();
    })
    .catch(() => {
      
    });
};

const goAddUser = () => {
  router.push({ path: '/addUser', query: { oprType: 'add' } });
};

const goBack = () => {
  router.go(-1);
};

const showFaceDialog = (rowObj) => {
  faceDialogConfig.visible = true;
  faceDialogConfig.user_id = rowObj.user_id;
};

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

<style lang="less" scoped>
.AccountManagement-page {
  font-size: 20px;
  color: #666666;
  .BaseApp-page-header {
    margin: 40px 0 0 40px;
    .AccountManagement-header-title {
      font-weight: bold;
      font-size: 28px;
      color: #3a3a3a;
    }
  }
  .AccountManagement-inner {
    background: #f6f6f6;
    box-shadow: 0px 3px 9px 1px rgba(0, 0, 0, 0.16);
    border-radius: 12px 12px 12px 12px;
    border: 1px solid #cccccc;
  }
  .AccountManagement-inner + .AccountManagement-inner {
    margin-top: 20px;
  }
  .AccountManagement-table-wrapper {
    padding: 20px;
  }
  .BaseApp-pagination {
    margin: 0 0 15px 0;
  }
}
</style>
