<template>
  <a-modal v-model:visible="visible" title="选择业务员" @ok="handleOk" width="800px">
    <a-form
      :model="formData"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 14 }"
      autocomplete="off"
      ref="formRef"
      layout="inline"
      class="ant-row"
    >
      <a-form-item label="用户名" name="username">
        <a-input v-model:value="formData.username"></a-input>
      </a-form-item>
      <a-form-item label="姓名" name="realName">
        <a-input v-model:value="formData.realName"></a-input>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 24 }">
        <a-button @click="handleReset">重置</a-button>
        <a-button type="primary" @click="getSaleUser">查询</a-button>
      </a-form-item>
    </a-form>

    <a-table
      :dataSource="dataSource"
      :columns="columns"
      :pagination="pagination"
      childrenColumnName="productList"
      rowKey="uuid"
      :scroll="{ y: 450 }"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'active'">
          <a-button type="link" @click="handleChange(record)">选择</a-button>
        </template>
      </template>
    </a-table>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, defineExpose, watch, reactive, defineEmits } from 'vue';
  import * as UserApi from '/@/api/system/userApi';
  import { RoleEnum } from '/@/views/system/role/enum';
  import { StatusValEnum as UserStatusValEnum } from '/@/views/system/user/enum';
  import { useUserStore } from '/@/store/modules/user';
  import { usePagination } from '/@/hooks/myhooks/index';

  const userStore = useUserStore();
  const emits = defineEmits(['handleChange']);
  const formRef = ref();
  const visible = ref<boolean>(false);
  const dataSource = ref<any>([]);
  const tableLoading = ref(false);
  const formData = reactive({
    username: undefined,
    realName: undefined,
  });

  const columns = [
    {
      title: '编号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '姓名',
      dataIndex: 'realName',
      key: 'realName',
    },
    {
      title: '操作',
      key: 'active',
    },
  ];

  const handleOk = () => {
    visible.value = false;
    formRef.value.resetFields();
  };

  const getSaleUser = () => {
    tableLoading.value = true;
    UserApi.search(
      Object.assign(
        {
          role: RoleEnum.SALESMAN,
          status: UserStatusValEnum.PASSED,
          distributorId: userStore.getIsDistributor ? userStore.getDistributorId : undefined,
          pageSize: pagination.pageSize,
          pageNum: pagination.current,
        },
        formData,
      ),
    )
      .then((res) => {
        pagination.total = res.total;
        dataSource.value = res.records;
      })
      .finally(() => {
        tableLoading.value = false;
      });
  };

  const pagination = usePagination(getSaleUser);

  const handleChange = (record) => {
    emits('handleChange', record);
    handleOk();
  };

  const handleReset = () => {
    formRef.value.resetFields();
  };

  watch(
    () => visible.value,
    (n) => {
      if (n) getSaleUser();
    },
  );

  defineExpose({ visible });
</script>

<style lang="less" scoped>
  @import url('/@/style/index.less');
  .ant-row {
    margin-bottom: 20px;

    .ant-btn {
      margin-right: 10px;
    }
  }
</style>
