<template>
  <div>
    <el-card class="!border-none" shadow="never">
      <el-form class="mb-[-16px]" :model="queryParams" inline>
        <el-form-item label="商品名称" prop="company_name">
          <el-input class="w-[280px]" v-model="queryParams.keyword" clearable placeholder="请输入商品名称" />
        </el-form-item>
        <el-form-item label="商品编号" prop="company_type">
          <el-input class="w-[280px]" v-model="queryParams.no" clearable placeholder="商品编号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- <el-card class="!border-none" v-loading="pager.loading" shadow="never"> -->
    <el-card class="!border-none"  shadow="never">
      <div class="mt-4">
        <el-table ref="tableRef" :data="pager.lists" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column label="ID" property="product_id" />
          <el-table-column label="图片" property="image">
            <template #default="{ row }">
              <el-image :src="row.image" style="width: 80px; height: 80px" fit="cover"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" property="store_name" />
          <el-table-column label="价格" property="price" />
        </el-table>
      </div>
      <div class="flex justify-end mt-4">
        <pagination v-model="pager" @change="getLists" :pageSizes="[10]" />
      </div>
      <div class="flex justify-end mt-2">
        <el-button type="primary" @click="handleCurrentChange(changeList)">确认</el-button>
        <el-button @click="commodityClose">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup name="companyLists">
import { usePaging } from "@/hooks/usePaging";
import { useDictData } from "@/hooks/useDictOptions";
import { apiGetProductList } from "@/api/task_template";
import { defineEmits, computed, watch } from "vue";

const tableRef = ref(null);

// 当前类型
const props = defineProps({
  ids: {
    type: String,
    default: "",
  },
});

let goods_id = props?.ids?.split(",") || [];

// 查询条件
const queryParams = reactive({
  keyword: "",
  no: "",
});

// 选中数据
const emits = defineEmits(["customEvent", "close"]);

// 选中数据子父传递
const handleCurrentChange = (value: any) => {
  let arr: any = [];
  value.forEach((item: any) => {
    arr = [...arr, ...item];
  });
  // return console.log(value, arr);
  emits("customEvent", arr);
};

const changeList = ref([[]]);
let count = 0;
const handleSelectionChange = (value: any[]) => {
  // 在翻页时,上一页的数据会被清空, 不得已使用二维数组存取数据
  let index = pager.page ? pager.page - 1 : 0;
  // 同一页选择多个商品时, 每选择一次, 此方法都会被调用, 所以选择多个时此方法会被调用多次, 在翻页时会出现漏选, 使用此方法避免
  if (index != count && value.length < changeList.value[index].length) {
    console.log("加载中");
  } else {
    count = index;
    changeList.value[index] = JSON.parse(JSON.stringify(value));
    console.log("加载完成");
  }
}; // 多选

const commodityClose = () => {
  emits("close", null);
};

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
  fetchFun: apiGetProductList,
  params: queryParams,
  size: 10,
});

getLists().then(res=>{
  for(let i=0;i<Math.ceil(pager.count / pager.size)-1;i++){
    changeList.value.push([])
  }

});

// 监听数据变化进行勾选
watch(
  () => pager.lists,
  (n, o) => {
    // 进行勾选
    nextTick(() => {
      n.forEach((item: any) => {
        item.product_id += "";
        // console.log("过滤前", goods_id);
        let f_ids = new Set(); // 删除选中的id
        // 对选择过的列表进行回显
        if (goods_id.includes(item.product_id)) {
          let index = pager.page ? pager.page - 1 : 0;
          if (
            !changeList.value[index]?.find(
              (e: any) => e.product_id == item.product_id
            )
          ) {
            f_ids.add(item.product_id);
            changeList.value[index]?.push(item);
          }
        }
        goods_id = goods_id.filter((item: string) => !f_ids.has(item)); // 已选择过的进行删除
        // console.log("长度", goods_id);
        // console.log("已选", changeList.value);
        // 把changeList列表中的所有值进行勾选
        changeList.value.forEach((c: any) => {
          c.forEach((e: any) => {
            if (e.product_id == item.product_id) {
              tableRef.value.toggleRowSelection(item, true);
            }
          });
        });
      });
    });
  },
  { deep: true, immediate: true }
);
</script>
