<script setup lang="ts">
import { ElTable } from "element-plus";
import { reactive, ref, unref, nextTick } from "vue";
import { goodTypes } from "../../config/configs";
import { useResponseHandle } from "/@/hooks";
import { httpCgdList } from "/@/api/purchase/orderRecord";
import { send_status_list } from "/@/utils/status";

const emit = defineEmits(["saveBtnClick"]);
const props = defineProps<{
  supplierNo?: number;
  companyNo?: number;
}>();

const visible = ref(false);
const loading = ref(false);

const responseHandle = useResponseHandle();
const formData = ref<Record<string, string>>({});
const tableRef = ref<InstanceType<typeof ElTable>>(null);
const selection = ref<Array<any>>([]);
const tableData = ref<Array<any>>([]);
const pagination = reactive({
  pageSize: 10,
  currentPage: 1,
  total: 0
});

async function handleSearch() {
  loading.value = true;
  const { currentPage: page, pageSize: size } = pagination;
  const { supplierNo, companyNo } = props;

  const { code, data, message } = await httpCgdList({
    ...unref(formData),
    supplierNo,
    companyNo,
    page,
    size
  });

  responseHandle({
    code,
    message,
    handler: () => {
      tableData.value = data.list;
      pagination.total = data.count;
    }
  });

  loading.value = false;
}

//重置搜索
function handleReset() {
  pagination.currentPage = 1;
  formData.value = {};
  handleSearch();
}

//表格节点选中
function handleSelection(val: any) {
  selection.value = val;
}

//派发保存
function handleSave() {
  visible.value = false;
  emit("saveBtnClick", unref(selection));
}

//显示添加采购单的dialog 选中传入的节点
function onDisplay(items) {
  visible.value = true;
  selection.value = items;
  nextTick(() =>
    items.forEach(item => tableRef.value.toggleRowSelection(item, true))
  );
}

defineExpose({
  onDisplay
});
</script>

<template>
  <el-dialog
    v-model="visible"
    title="选择采购商品"
    center
    destroy-on-close
    @open="handleSearch"
  >
    <div flex justify-between>
      <div flex mb-2 gap-2>
        <div flex mb-2 w-400px gap-2>
          <el-select
            placeholder="发货状态"
            v-model="formData.sendStatus"
            cleable
          >
            <el-option
              v-for="status in send_status_list"
              :key="status.value"
              :label="status.label"
              :value="status.value"
            />
          </el-select>
          <el-input placeholder="采购单编号" v-model="formData.sequenceNo">
            <template #append>
              <el-button @click="handleSearch">搜索</el-button>
            </template>
          </el-input>
        </div>
      </div>

      <el-button @click="handleReset">重置</el-button>
    </div>

    <el-table
      ref="tableRef"
      row-key="id"
      size="small"
      :data="tableData"
      v-loading="loading"
      @selection-change="handleSelection"
    >
      <el-table-column type="selection" width="55" reserve-selection />
      <el-table-column label="采购单编号" prop="sequenceNo" width="180" />
      <el-table-column label="采购单信息">
        <el-table-column
          label="供货商"
          prop="supplierName"
          width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="采购员"
          prop="ownerName"
          width="80"
          show-overflow-tooltip
        />
        <el-table-column
          label="发货状态"
          prop="sendStatus"
          width="90"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <el-tag>{{
              send_status_list.find(s => s.value === row.sendStatus)?.label
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="开票编号" width="90" />
        <el-table-column
          label="开票公司"
          prop="companyName"
          width="140"
          show-overflow-tooltip
        />
      </el-table-column>
      <el-table-column label="商品信息">
        <el-table-column
          label="商品名称"
          prop="goodName"
          width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="商品类型"
          prop="goodType"
          width="90"
          show-overflow-tooltip
        >
          <template #="{ row }">
            <el-tag>
              {{ goodTypes.find(t => t.value === row.goodType)?.label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="商品数量"
          prop="goodNum"
          width="90"
          show-overflow-tooltip
        />
      </el-table-column>
    </el-table>

    <!-- 分页器  -->
    <div flex justify-between mt-2>
      <ElPagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        :page-sizes="[10, 15, 20]"
        @current-change="handleSearch"
      />

      <div>
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button @click="visible = false">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>
