<template>
  <div class="user-mgmt">
    <biz-table
      :operations="operations"
      :filters="filters"
      :loading="loading"
      :columns="columns"
      :data="tableData"
      :pagination="pagination"
      :row-key="rowKey"
      :checked-row-keys="checkedRowKeys"
      @operate="onOperate"
      @filter-change="onFilterChange"
      @update:checked-row-keys="onCheckedRow"
      @update:page="onUpdatePage"
      @update:page-size="onUpdatePageSize"
    />
    <user-item :show="showModel" :item-id="itemId" @model-show-change="onModelShowChange" @refresh-list="queryList" />
  </div>
</template>

<script setup name="user-mgmt">
import { h, ref, computed } from 'vue';
import urls from '@/common/urls';
import dayjs from 'dayjs';
import { NButton } from 'naive-ui';
import BizTable from '@/components/table/BizTable.vue';
import UserItem from './UserItem.vue';
import useQueryList from '@/composables/useQueryList';
import useDeleteList from '@/composables/useDeleteList';
import useChangeUserActiveState from './useChangeUserActiveState';

// 自定義列數(shù)據(jù)
const columns = [
  {
    type: 'selection'
  },
  {
    title: '姓',
    key: 'firstName'
  },
  {
    title: '名',
    key: 'lastName'
  },
  {
    title: '是否激活',
    key: 'isActive',
    render(row) {
      return row.isActive ? '已激活' : '未激活';
    }
  },
  {
    title: '創(chuàng)建時(shí)間',
    key: 'createdAt'
  },
  {
    title: '更新時(shí)間',
    key: 'updatedAt'
  },
  {
    title: '操作',
    key: 'actions',
    render(row) {
      return [
        h(
          NButton,
          {
            size: 'small',
            onClick: () => onEdit(row),
            style: { marginRight: '5px' }
          },
          { default: () => '編輯' }
        ),
        h(
          NButton,
          {
            size: 'small',
            onClick: () => onChangeUserActiveState(row),
            style: { marginRight: '5px' }
          },
          { default: () => '改變狀態(tài)' }
        )
      ];
    }
  }
];

// 自定義右上角篩選
const filters = ref([
  {
    label: '是否激活',
    type: 'select',
    value: '0',
    class: 'filter-select',
    options: [
      {
        label: '全部',
        value: '0'
      },
      {
        label: '已激活',
        value: '1'
      },
      {
        label: '未激活',
        value: '2'
      }
    ]
  },
  {
    label: '',
    type: 'input',
    placeholder: '請(qǐng)輸入姓氏',
    value: ''
  }
]);

// 篩選變化，需要重新查詢列表
const onFilterChange = ({ index, type, value }) => {
  filters.value[index].value = value;
  queryList();
};

// 自定義查詢列表參數(shù)
const parmas = computed(() => {
  return {
    isActive: filters.value[0].value,
    like: filters.value[1].value
  };
});

// 封裝好的查詢列表方法和返回的數(shù)據(jù)
const { data, loading, pagination, onUpdatePage, onUpdatePageSize, queryList } = useQueryList(urls.user.user, parmas);

// 經(jīng)過(guò)處理的列表數(shù)據(jù)，用于在 table 中展示
const tableData = computed(() =>
  data.value.list.map(item => {
    return {
      ...item,
      createdAt: dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss'),
      updatedAt: dayjs(item.updatedAt).format('YYYY-MM-DD HH:mm:ss')
    };
  })
);

// 刪除列表相關(guān)邏輯封裝
const { checkedRowKeys, onCheckedRow, deleteList } = useDeleteList({
  content: '確定刪除選中的用戶？',
  url: urls.user.userDelete,
  callback: () => {
    queryList();
  }
});

// 列表中的快捷操作
const operations = computed(() => {
  return [
    {
      name: 'create',
      label: '新增',
      type: 'primary'
    },
    {
      name: 'delete',
      label: '刪除',
      disabled: checkedRowKeys.value.length === 0
    }
  ];
});

// 觸發(fā)操作函數(shù)
const onOperate = function (name) {
  operationFucs.get(name)();
};

// 新創(chuàng)建 item
const create = () => {
  showModel.value = true;
  itemId.value = 0;
};

const onModelShowChange = () => {
  showModel.value = !showModel.value;
};

const itemId = ref(0);

// 控制模態(tài)對(duì)話框
const showModel = ref(false);

// 編輯 item
const onEdit = row => {
  itemId.value = row.id;
  showModel.value = true;
};

const { changeUserActiveState } = useChangeUserActiveState();

// 改變激活狀態(tài)
const onChangeUserActiveState = row => {
  changeUserActiveState({
    id: row.id,
    isActive: !row.isActive,
    loading,
    callback: () => {
      queryList();
    }
  });
};

// 指定 table 的 rowKey
const rowKey = row => row['id'];

// operation 函數(shù)集合
const operationFucs = new Map();
operationFucs.set('create', create);
operationFucs.set('delete', deleteList);
</script>

<style lang="scss">
.user-mgmt {
  height: 100%;
  .filter-select {
    .biz-select {
      width: 100px;
    }
  }
}
</style>