<script setup lang="ts">
import { useColumns } from "./columns";
import { httpList } from "/@/api/purchase/porder";
import { reactive, ref, onMounted } from "vue";
import { type FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { TableProBar } from "/@/components/ReTable";
import { type PaginationProps } from "@pureadmin/table";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { useNav } from "/@/layout/hooks/nav";
// import { statusList } from "/@/utils/status";
import PreviewDialog from "./preview-dialog.vue";
import { useUserStoreHook } from "/@/store/modules/user";
const { logout } = useNav();
defineOptions({
  name: "porder"
});

const selectList = ref([
  { value: "sequenceNo", label: "采购单编号" },
  { value: "companyNo", label: "业务公司编号" },
  { value: "companyName", label: "业务公司名称" },
  { value: "bkCode", label: "备库单号" },
  { value: "goodNo", label: "商品单号" },
  { value: "goodName", label: "商品名称" },
  { value: "supplierName", label: "供应商名称" },
  { value: "supplierNo", label: "供应商编号" }
]);
const form = reactive({
  input: "",
  select: "sequenceNo",
  status: "", //0 未对账1 对账
  page: 1,
  size: 15
});

const dataList = ref([]);
const powers = ref([]);
const loading = ref(true);
const { columns } = useColumns();
const formRef = ref<FormInstance>();
const PreviewDialogRef = ref<InstanceType<typeof PreviewDialog>>(null);

const pagination = reactive<PaginationProps>({
  total: 0,
  pageSize: 15,
  currentPage: 1,
  background: true
});

async function handleCurrentChange(val: number) {
  form.page = val;
  await onSearch();
}

async function handleSizeChange(val: number) {
  form.size = val;
  form.page = 1;
  await onSearch();
}

function handleSelectionChange(val) {
  console.log("handleSelectionChange", val);
}

async function onSearch() {
  loading.value = true;

  let model = {
    status: form.status, //0 未对账1 对账
    page: form.page,
    size: form.size
  };

  selectList.value.forEach(si => {
    model[si.value] = si.value === form.select ? form.input : "";
  });

  const { code, data, message } = await httpList({
    ...form,
    ...model
  });

  if (code === 0) {
    const { list, count } = data;
    dataList.value = list ?? [];
    pagination.total = count ?? 0;
    pagination.pageSize = form.size;
    pagination.currentPage = form.page;
  } else if (code > 100 && code < 140) {
    logout();
  } else {
    ElMessage.error(message);
  }
  loading.value = false;
}
async function resetSearch() {
  form.page = 1;
  await onSearch();
}
//新建/编辑/详情弹窗
function editItem(row) {
  PreviewDialogRef.value.onDisplay(row);
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  form.input = "";
  form.select = "sequenceNo";
  form.status = ""; //0 未对账1 对账
  form.size = 15;
  form.page = 1;
  onSearch();
};

onMounted(() => {
  powers.value = useUserStoreHook().getMenuActions("porder");
  // console.log("8888888888888888");
  // console.log(powers.value);
  if (powers.value.some(i => i == "001")) {
    onSearch();
  }
});
</script>

<template>
  <div class="main porder">
    <div v-show="powers.some(i => i == '001')">
      <el-form
        ref="formRef"
        :inline="true"
        :model="form"
        :label-width="0"
        class="bg-white w-99/100 pl-8 pt-4"
      >
        <el-form-item prop="status">
          <el-select
            v-model="form.status"
            style="width: 100%"
            placeholder="采购单状态"
            clearable
          >
            <!-- <el-option
              v-for="(si, sii) in statusList"
              :key="'status' + si.value + sii"
              :label="si.label"
              :value="si.value"
            /> -->
            <el-option value="0" label="未对账" />
            <el-option value="1" label="对账" />
          </el-select>
        </el-form-item>
        <el-form-item prop="input">
          <el-input
            v-model="form.input"
            placeholder="关键字"
            class="input-with-select"
            clearable
          >
            <template #prepend>
              <el-select
                v-model="form.select"
                placeholder="关键字类型"
                style="width: 130px"
              >
                <el-option
                  v-for="(si, sii) in selectList"
                  :key="'si' + si.value + sii"
                  :label="si.label"
                  :value="si.value"
                />
              </el-select>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :icon="useRenderIcon('search')"
            :loading="loading"
            @click="resetSearch"
          >
            搜索
          </el-button>
          <el-button
            :icon="useRenderIcon('refresh')"
            @click="resetForm(formRef)"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <TableProBar
        title="采购单管理"
        :loading="loading"
        :dataList="dataList"
        @refresh="onSearch"
      >
        <template #buttons />
        <template v-slot="{ size, checkList }">
          <PureTable
            border
            align="left"
            showOverflowTooltip
            table-layout="auto"
            :size="size"
            :data="dataList"
            :columns="columns"
            :checkList="checkList"
            :pagination="pagination"
            :paginationSmall="size === 'small' ? true : false"
            :header-cell-style="{ background: '#fafafa', color: '#606266' }"
            @selection-change="handleSelectionChange"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
            <template #operation="{ row }">
              <el-button
                class="reset-margin"
                link
                v-if="powers.some(i => i == '007')"
                type="primary"
                :size="size"
                @click="editItem(row)"
                :icon="useRenderIcon('eye-view')"
              />
            </template>
          </PureTable>
        </template>
      </TableProBar>

      <PreviewDialog ref="PreviewDialogRef" />
    </div>
    <NoAuth v-show="!powers.some(i => i == '001')" />
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
</style>
