<template>
  <div class="h-full">
    <my-card title="搜索条件" search>
      <n-form ref="formRef" inline label-width="auto" :model="searchForm" size="medium">
        <n-form-item label="采购订单编号">
          <n-input v-model:value="searchForm.poCode" placeholder="请输入采购订单编号" />
        </n-form-item>
        <n-form-item label="供应商名称">
          <n-input v-model:value="searchForm.vendorName" placeholder="请输入供应商名称" />
        </n-form-item>
        <n-form-item label="单据状态">
          <n-select v-model:value="searchForm.status" class="w-180px" :options="wms_item_recpt_status"></n-select>
          <!-- <n-input v-model:value="searchForm.status" placeholder="请选择单据状态" /> -->
        </n-form-item>
        <n-form-item>
          <component :is="useSearchBtn(search, reset)"></component>
        </n-form-item>
      </n-form>
    </my-card>
    <my-card title="采购入库列表">
      <template #right>
        <div class="flex-center">
          <component
            :is="useDelBtn(delSelect, undefined, '确定要删除所有已选中的数据吗？', Boolean(!selectKeys.length))"
            v-hasPermi="['wms:recpt:remove']"
          ></component>
          <!-- <component :is="useAddBtn(handleAddTable, undefined, '新增')" v-hasPermi="['wms:recpt:add']"></component>
          <component :is="useDownBtn(handleExport)"></component> -->
          <n-button size="small" class="mr-5px" type="primary" @click="getWmsItemRecptData">
            <icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
            刷新表格
          </n-button>
        </div>
      </template>
      <div>
        <n-data-table
          :row-key="row => row.recptId"
          :columns="columns"
          :data="data"
          :loading="loading"
          :scroll-x="1000"
          @update-checked-row-keys="handleSelect"
        />
        <my-pagination v-model:search-form="searchForm" @init="init"></my-pagination>
      </div>
      <table-action-modal
        v-model:visible="showModal"
        :type="modalType"
        :edit-data="editData"
        :get-list="getWmsItemRecptData"
      />
    </my-card>
  </div>
</template>

<script lang="tsx" setup>
import { ref, getCurrentInstance } from 'vue';
import type { Ref } from 'vue';
import { useRouter } from 'vue-router';
import { useMessage } from 'naive-ui';
import type { DataTableColumns, DataTableRowKey } from 'naive-ui';
import { useLoading, useBoolean } from '@/hooks';
// import { deepClone } from '@/utils';
import { selectWmsItemRecptList, delWmsItemRecpt } from '@/service/api/wms/recpt';
import { useSearchBtn, useDelBtn, useBtn, useEditBtn } from '@/hooks/common/useBtn';
// import { download } from '@/service/request/helpers';
import type { ModalType } from './components/table-action-modal.vue';
import TableActionModal from './components/table-action-modal.vue';
const router = useRouter();
const { proxy } = getCurrentInstance() as any;
const { wms_item_recpt_status } = proxy.useDict('wms_item_recpt_status', 'wms_item_recpt_type');

// const collapseFlag = ref<boolean>(false);
const { bool: showModal } = useBoolean();
const modalType = ref<ModalType>('add');
// const menuOptions = ref();
const message = useMessage();

// const delIds = ref();
// const show = ref(false);
const total = ref();
const page = ref(1);
const searchForm = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  poCode: undefined,
  vendorName: undefined,
  attr1: 'YL',
  status: null
});

const editData = ref<wms.recptRawType.columns>({
  recptId: null,
  recptCode: null,
  recptName: null,
  iqcId: null,
  iqcCode: null,
  poCode: null,
  vendorId: null,
  vendorCode: null,
  vendorName: null,
  vendorNick: null,
  warehouseId: null,
  warehouseCode: null,
  warehouseName: null,
  locationId: null,
  locationCode: null,
  locationName: null,
  areaId: null,
  areaCode: null,
  areaName: null,
  recptDate: null,
  status: null,
  remark: null,
  attr1: null,
  attr2: null,
  attr3: null,
  attr4: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  type: null,
  fromBillId: null,
  fromBillCode: null,
  fromBillName: null,
  snidCode: null,
  createByNick: null,
  manageBy: null,
  manageByNick: null,
  headBy: null,
  headByNick: null,
  salseDeptId: null,
  salseDeptName: null,
  salseBy: null,
  salseByNick: null
});

const selectKeys = ref<DataTableRowKey[]>([]);
function handleSelect(keys: DataTableRowKey[]) {
  selectKeys.value = keys;
}
const data = ref<wms.recptRawType.columns[]>([]);
const columns: Ref<DataTableColumns<wms.recptRawType.columns>> = ref([
  {
    type: 'selection',
    align: 'center'
  },
  {
    title: '入库单编号',
    key: 'recptCode',
    align: 'center',
    width: 110,
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '入库单名称',
    key: 'recptName',
    align: 'center',
    width: 110,
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '采购订单编号',
    key: 'poCode',
    align: 'center',
    width: 110,
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '供应商名称',
    key: 'vendorName',
    align: 'center',
    width: 110,
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '仓库名称',
    key: 'warehouseName',
    align: 'center',
    width: 110,
    ellipsis: {
      tooltip: true
    }
  },
  // {
  //   title: '库区名称',
  //   key: 'locationName',
  //   align: 'center',
  //   width: 110
  // },
  // {
  //   title: '库位名称',
  //   key: 'areaName',
  //   align: 'center',
  //   width: 110
  // },
  {
    title: '入库日期',
    key: 'recptDate',
    align: 'center',
    width: 110,
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '单据状态',
    key: 'status',
    align: 'center',
    render: row => {
      return <dict-tag options={wms_item_recpt_status.value} value={row.status}></dict-tag>;
    },
    width: 110,
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '来源单据编码',
    key: 'fromBillCode',
    align: 'center',
    width: 110,
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '负责人简称',
    key: 'headByNick',
    align: 'center',
    width: 110,
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
    width: 220,
    align: 'center',
    render: row => {
      console.log(wms_item_recpt_status.value, row.status, '----');
      const Btn: JSX.Element[] = [];
			if (row.status !== 'FINISHED') {
				Btn.push(
					useEditBtn(
						() => {
							router.push({
								name: 'storage_auxiliaryProduceinfo',
								query: { id: row.recptId, warehouseId: row.warehouseId }
							});
						},
						'tiny',
						'执行入库'
					)
				);
			}
      // Btn.push(
      //   useInfoBtn(
      //     () => {
      //       router.push({
      //         name: 'storage_auxiliaryProduceinfo',
      //         query: { id: row.recptId, warehouseId: row.warehouseId, info: 'true' }
      //       });
      //     },
      //     'tiny',
      //     '查看详情'
      //   )
      // );

      // Btn.push(
      //   useDelBtn(() => {
      //     delWmsItemRecpt(row.recptId as number).then(res => {
      //       if (res.code === 200) {
      //         window.$message?.success('删除成功');
      //         init();
      //       }
      //     });
      //   }, 'tiny')
      // );
      return Btn;
    }
  }
]) as Ref<DataTableColumns<any>>;

const { loading, startLoading, endLoading } = useLoading(false);
// const { setTrue: openModal } = useBoolean();

// function setModalType(type: ModalType) {
//   modalType.value = type;
// }
// 重置
function reset() {
  searchForm.value.pageNum = 1;
  page.value = 1;
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const { pageNum, pageSize, ...rest } = searchForm.value;
  for (const key in rest) {
    if (searchForm.value[key] !== '' && searchForm.value[key] !== 'YL') {
      searchForm.value[key] = null;
    }
  }
  getWmsItemRecptData();
}

async function handleEditTable(issueId: number) {
	console.log("执行部入库操作", issueId)
}

function search() {
  searchForm.value.pageNum = 1;
  init();
}

// 新增
// function handleAddTable() {
//   setModalType('add');

//   openModal();
// }
// 编辑
// async function handleEditTable(recptId: number) {
//   getWmsItemRecpt(recptId).then(res => {
//     for (const key in res.data) {
//       if ((key.includes('Date') || key.includes('Time')) && key !== 'createTime' && key !== 'updateTime') {
//         res.data[key] = new Date(res.data[key] as unknown as string).getTime();
//       }
//     }
//     editData.value = deepClone(res.data);
//     editData.value.recptDate = new Date(editData.value.recptDate as unknown as string).getTime();
//     setModalType('edit');
//     openModal();
//   });
// }

// 获取信息
function getWmsItemRecptData() {
  startLoading();
  selectWmsItemRecptList({ params: searchForm.value }).then(res => {
    data.value = res.rows;
    total.value = res.total;
    searchForm.value.total = res.total;
    if (data.value) {
      setTimeout(() => {
        endLoading();
      }, 200);
    }
  });
}
// 删除
function delSelect() {
  delWmsItemRecpt(selectKeys.value.join(',') as string).then(() => {
    getWmsItemRecptData();
    message.success('删除成功');
  });
}

// function handleExport() {
//   show.value = true;
// }
function init() {
  getWmsItemRecptData();
  // 获取供应商列表
}
init();
</script>
