<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import { orderGoodColumns } from "./config/columns";
import { useDetail } from "/@/hooks/core/useDetail";
import BasicDescriptions from "/@/components/BasicDescriptions";
import ChooseGoodModal from "./components/ChooseGoodModal/index.vue";
import ChildGoodEditModal from "./components/ChildGoodEditModal.vue";
import { httpDetail } from "/@/api/invoiceInOut/inOutManager";
import BaseForm from "./components/BaseForm/index.vue";

import { useTask } from "/@/hooks/core";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { httpProductDetail } from "/@/api/invoiceInOut/inventoryCheck";
import ProductDetail from "/@/components/ProductDetail/index.vue"
import { ElTableColumn } from "element-plus";

const { title, collapses, id, isDetail } = useDetail({ baseName: "C端无发票订单出库", collapseLen: 2 });

const visible = ref(false);
const detailTask = useTask();

const productVisible = ref(false)
const productIndex = ref(0)
const productDetailTask = useTask()

const state = reactive({ editVisible: false, index: -1, data: {} });

const searchParameter = computed(() => {
  return { status: '1,4' }
})

const formData = ref({ goods: [], month: "" });


function handleGoodComfirm(values: any[]) {
  const ids = formData.value.goods.map(({ id }) => id);
  const list = values.filter(item => !ids.includes(item.id));
  formData.value.goods = [...list, ...formData.value.goods];
}

function handleEditGood(index: number, data: any) {
  const { id } = formData.value.goods[index];
  formData.value.goods = formData.value.goods.map(item => {
    if (item.id === id) {
      const goodNum = data.goodNum;
      const childActionNum = item.childNum
        ? Number(item.childNum) * Number(goodNum)
        : undefined;

      return { ...item, goodNum, childActionNum };
    }
    return item;
  });
}



function handleShowDetail(id, index) {
  productVisible.value = true
  productIndex.value = index
  productDetailTask.run(httpProductDetail({ id }))
}

id.value && detailTask.run(httpDetail({ id: id.value }));
</script>

<template>
  <div class="padding__container" v-loading="detailTask.loading">
    <ElCollapse v-model="collapses">
      <ElCollapseItem :title="title" name="1">
        <BasicDescriptions v-if="isDetail && detailTask.data" :columns="orderGoodColumns(() => {})"
          :data="detailTask.data" />
        <BaseForm v-else />
      </ElCollapseItem>

      <ElCollapseItem title="商品信息" name="2" v-if="detailTask.data && detailTask.data.status != '1'">
        <ElTable size="small" border :data="detailTask.data.ProductRela">
          <ElTableColumn label="商品ID" prop="product_id" width="60px" show-overflow-tooltip />
          <ElTableColumn label="商品编号" prop="skuCode" show-overflow-tooltip />
          <ElTableColumn label="商品名称" prop="goodName" show-overflow-tooltip />
          <ElTableColumn label="操作数量" prop="num" show-overflow-tooltip />
          <ElTableColumn label="创建时间" prop="create_time" show-overflow-tooltip />
          <ElTableColumn label="操作" width="100px">
            <template #="scope">
              <ElTooltip content="查看详情">
                <ElButton type="primary" link :icon="useRenderIcon('eye-view')"
                  @click="handleShowDetail(scope.row.product_id, scope.$index)" />
              </ElTooltip>
            </template>
          </ElTableColumn>
        </ElTable>
      </ElCollapseItem>
    </ElCollapse>

    <ChooseGoodModal :otherSearchParameter="searchParameter" v-model:visible="visible" @submit="handleGoodComfirm" />

    <ChildGoodEditModal 
      v-model:visible="state.editVisible" 
      @submit="handleEditGood" 
      :index="state.index"
      :data="state.data" 
    />

    <ElDialog center title="商品详情" v-model="productVisible" style="overflow: hidden">
      <div v-loading="productDetailTask.loading">
        <ProductDetail 
          v-if="productDetailTask.data" 
          :data="productDetailTask.data"
          :num="detailTask.data.ProductRela[productIndex].num" 
          :name="detailTask.data.ProductRela[productIndex].apply_name"
          />
      </div>
    </ElDialog>
  </div>
</template>
