<script setup lang="tsx">
  import SuperTable from '~/components/SuperTable.vue';
  import type { TableProps, TableRowData } from 'tdesign-vue-next';
  import PeopleForm from '~/pages/base/index/peopleManage/components/PeopleForm.vue';

  const store = usePeopleStore();

  const { peopleList, pagination, situation } = storeToRefs(usePeopleStore());

  const columns = ref<TableProps['columns']>([
    {
      colKey: 'index',
      title: '序号',
      cell: (_, { rowIndex }: { rowIndex: number }) => (
        <div>
          {(pagination.value!.current! - 1) * pagination.value!.pageSize! +
            rowIndex +
            1}
        </div>
      ),
    },
    {
      colKey: 'date',
      title: '日期',
    },
    {
      colKey: 'name',
      title: '姓名',
    },
    {
      colKey: 'province',
      title: '省份',
    },
    {
      colKey: 'city',
      title: '市区',
    },
    {
      colKey: 'address',
      title: '地址',
    },
    {
      colKey: 'zip',
      title: '邮编',
    },
    {
      colKey: 'operator',
      title: '操作',
      cell: (_, { row }) => (
        <div class="w-40 flex flex-row justify-evenly">
          <t-button onClick={() => editUser(row)}>编辑</t-button>
          <t-button onClick={() => deleteUser(row)}>删除</t-button>
        </div>
      ),
    },
  ]);

  onMounted(async () => {
    await store.getPeopleList();
  });

  onMounted(async () => {
    await store.getTotal();
  });

  function editUser(_row: TableRowData) {
    if (form.value) form.value.resetForm();
    store.currentForm = {
      ...peopleList.value.find((e) => e.id === _row.id)!,
    } as PeopleInfo;
    console.log(store.currentForm.province);
    form.value?.setProvinceIndexByName(store.currentForm.province);
    console.log(store.currentForm);
    store.showEditPeople = true;
  }

  function deleteUser(_row: TableRowData) {
    store.deletePeople(_row.id);
    console.log(_row);
  }

  function pageChange(x: { current: number; pageSize: number }) {
    if (pagination.value) {
      pagination.value.current = x.current;
      pagination.value.pageSize = x.pageSize;
      store.getPeopleList();
    }
    console.log(store.pagination);
  }

  async function doSearch() {
    await usePeopleStore().getTotal();
    await usePeopleStore().getPeopleList();
  }

  const form: Ref<typeof PeopleForm | null> = ref(null);
</script>

<template>
  <div class="p-6">
    <div class="flex justify-between p-4">
      <t-button
        @click="
          () => {
            if (form) form.resetForm();
            store.showAddPeople = true;
          }
        "
        >添加新人员</t-button
      >
      <t-input
        v-model="situation"
        placeholder="搜索"
        clearable
        class="max-w-60"
        @change="doSearch"
      >
        <template #suffixIcon>
          <search-icon :style="{ cursor: 'pointer' }" />
        </template>
      </t-input>
    </div>
    <super-table
      v-model:pagination="pagination"
      :data="peopleList"
      :columns="columns"
      :loading="false"
      @page-change="pageChange"
    ></super-table>
    <t-dialog
      :visible="store.showAddPeople || store.showEditPeople"
      :close-btn="true"
      :confirm-btn="store.showAddPeople ? '添加' : '修改'"
      cancel-btn="取消"
      @confirm="form?.submit"
      @close="
        () => {
          store.showAddPeople = false;
          store.showEditPeople = false;
        }
      "
    >
      <template #header>{{
        store.showAddPeople ? '添加新人员' : '修改人员信息'
      }}</template>
      <template #body>
        <people-form ref="form" />
      </template>
    </t-dialog>
  </div>
</template>

<style scoped lang="less"></style>