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

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

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

const responseHandle = useResponseHandle();
const tableRef = ref<InstanceType<typeof ElTable>>(null);
const selection = ref<Array<any>>([]);
const tableData = ref<Array<any>>([]);

const formData = ref<Record<string, string>>({
  code: "",
  codeType: "sequenceNo",
  sendstatus: "",
  cgdsource: "",
  cgdtype: ""
});

const pagination = reactive({
  pageSize: 10,
  currentPage: 1,
  total: 0
});

const selectList = ref([
  { value: "sequenceNo", label: "采购单编号" },
  { value: "goodNo", label: "商品编号" },
  { value: "goodName", label: "商品名称" },
  { value: "cgder", label: "采购员名称" }
]);

const cgd_type = [
  {
    value: "1",
    label: "库存"
  },
  {
    value: "2",
    label: "非库存"
  },
  {
    value: "3",
    label: "咨询"
  }
];

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

  const { code, data, message } = await httpCgdList({
    ...restParams,
    [codeType]: keyword,
    status: "0",
    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: () => (visible.value = true)
});
</script>

<template>
  <el-dialog
    v-model="visible"
    title="选择采购商品"
    center
    destroy-on-close
    width="1054x"
    @open="handleSearch"
  >
    <div flex justify-between>
      <div flex mb-2 gap-2 w-full>
        <div flex mb-2 gap-2>
          <el-input
            v-model="formData.code"
            placeholder="关键字"
            class="input-with-select"
            :maxlength="INPUT_MAX_LENGTH"
            style="width: 340px"
            clearable
          >
            <template #prepend>
              <el-select
                v-model="formData.codeType"
                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-select
            placeholder="发货状态"
            v-model="formData.sendstatus"
            clearable
            w-200px
          >
            <el-option
              v-for="status in send_status_list"
              :key="status.value"
              :label="status.label"
              :value="status.value"
            />
          </el-select>

          <el-select
            v-model="formData.cgdsource"
            placeholder="订单来源"
            clearable
          >
            <el-option
              v-for="c in cg_order_source_options"
              :key="c.value"
              :label="c.label"
              :value="c.value"
            />
          </el-select>

          <el-select
            v-model="formData.cgdtype"
            w-200px
            placeholder="商品来源"
            clearable
          >
            <el-option
              v-for="c in cgd_type"
              :key="c.value"
              :label="c.label"
              :value="c.value"
            />
          </el-select>

          <el-button @click="handleSearch" type="primary">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </div>
    </div>

    <el-table
      ref="tableRef"
      size="small"
      :data="tableData"
      v-loading="loading"
      @selection-change="handleSelection"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="采购单编号" prop="sequenceNo" width="150" />
      <el-table-column label="采购单信息">
        <el-table-column
          label="供货商"
          prop="supplierName"
          width="160"
          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="业务公司"
          prop="companyName"
          width="180"
          show-overflow-tooltip
        />
        <el-table-column
          label="订单来源"
          prop="cgdSource"
          width="100"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <el-tag>
              {{
                cg_order_source_options.find(t => t.value === row.cgdSource)
                  ?.label
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="总货款"
          prop="totalPrice"
          width="80"
          show-overflow-tooltip
        />
      </el-table-column>
      <el-table-column label="商品信息">
        <el-table-column
          label="商品编号"
          prop="goodNo"
          width="140"
          show-overflow-tooltip
        />
        <el-table-column
          label="商品名称"
          prop="goodName"
          width="180"
          show-overflow-tooltip
        />
        <el-table-column
          label="商品来源"
          prop="cgdType"
          width="90"
          show-overflow-tooltip
        >
          <template #="{ row }">
            <el-tag>
              {{ cgd_type.find(t => t.value === String(row.cgdType))?.label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="商品数量"
          prop="goodNum"
          width="90"
          show-overflow-tooltip
        />
      </el-table-column>
      <el-table-column
        label="采购员"
        prop="ownerName"
        width="75"
        show-overflow-tooltip
      />
    </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>
