<script setup lang="ts">
import { computed, reactive, ref } from "vue";

import { importOrderGoodColumns, importInvoiceGoodColumns ,orderGoodColumns } from "./config/columns"
import { useDetail } from "/@/hooks/core/useDetail";
import BasicDescriptions from "/@/components/BasicDescriptions";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import ChooseGoodModal from "./components/ChooseGoodModal/index.vue"
import ChildGoodEditModal from "./components/ChildGoodEditModal.vue";

import { httpDetail, httpStatus } from "/@/api/invoiceInOut/inOutManager";
import { httpDetail as httpProductDetail } from "/@/api/invoiceInOut/productManager";
import { ElButton, ElCollapse, ElCollapseItem, ElForm, ElMessage, ElTable, ElTableColumn, ElTooltip } from "element-plus";
import ProductDetail from "/@/components/ProductDetail/index.vue"
import { useTask } from "/@/hooks/core";
import BasicProducts from "/@/components/BasicProducts/index.vue"
import SealMonthPicker from "/@/components/SealMonthPicker/index.vue"
import { useUserInfo } from "/@/hooks/core/useUser";



const { title, collapses, id } = useDetail({ baseName: '入库', collapseLen: 5 });
const visible = ref(false)

// httpList


const { isSuperUser } = useUserInfo()
const productDetailTask = useTask()

const orderProductDetailTask = useTask()

const detailTask = useTask({ success(data) {
  const { ProductRela } = data
  const { product_id } = ProductRela[0]
  productDetailTask.run(httpProductDetail({ id: product_id }))
  // orderProductDetailTask.run(httpProductDetail)
}})


const productDetail = computed(() => {
  if (detailTask.data && detailTask.data.ProductRela){
    return detailTask.data.ProductRela[0]
  }
  return {}
})



const searchParameter = computed(() => {
  // 入库、入库红冲和出库红冲 只能选择真实成本的商品，出库类型可以选择预估成本商品
  if (!detailTask.data) return {}
  return { good_type: String(detailTask.data?.goodType), status: '1', basic_status: '1', good_source: String(detailTask.data?.source) }
})


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

const loading = ref(false)
const formRef = ref<InstanceType<typeof ElForm> | null>(null)


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

const rules = {
  goods: [{ required: true, message: '请选择操作商品' }],
  month: [{ required: true, message: '请选择入账月份' }]
}

function handleGoodComfirm(values: any[]){
  const ids = formData.value.goods.map(({ id }) => id)
  const list = []

  values.forEach(item => {
    if(!ids.includes(item.id)){ list.push(item) }
  })

  formData.value.goods = [...list,  ...formData.value.goods]
}

function handleChildGoodEdit(index: number){
  state.index = index
  state.editVisible = true
  state.data = { ...formData.value.goods[index] }
}

function getSpanNumber(data, prop) {
  let length = Array.isArray(data) ? data.length : 0;
  if (length > 0) {
    let position = 0;
    let temp = data[0][prop];
    let result = [1];
    for (let i = 1; i < length; i++) {
      if (data[i][prop] == temp) {
        result[position] += 1;
        result[i] = 0;
      } else {
        position = i;
        result[i] = 1;
        temp = data[i][prop];
      }
    }
    return result;
  } else {
    return [0];
  }
}

function spanMethod({ row:_1, column:_2, rowIndex, columnIndex }: any){
  if ([0, 1, 2, 7].includes(Number(columnIndex))){
      let nameSpan = getSpanNumber(formData.value.goods, "id");
      return { rowspan: nameSpan[rowIndex], colspan: 1 };
    }
}

async function onSubmit(){
  try{
    await formRef.value.validate()
    
    const relaArrCopy = formData.value.goods.map(({ id, goodNum, unit_price, subunit_price }) => ({ id, num: goodNum, unit_price, subunit_price }))

    const relaArr = []
    const mapId = {}
    
    for(const item of relaArrCopy){
      if (!mapId[item.id]){
        relaArr.push(item)
        mapId[item.id] = true
      } 
    }

    loading.value = true
    const { code, message } = await httpStatus({ relaArr, manager_id: id.value })
    loading.value = false

    if (code == 0) {
      ElMessage.success('操作完成')
      detailTask.run(httpDetail({ id: id.value }))
    } else {
      ElMessage.warning(message)
    }
  }catch(err){
    console.log(err)
  }
}

function handleEditGood(index, data){
  const { id } = formData.value.goods[index]
  formData.value.goods.forEach((item, index) => {
    if(item.id === id){
      formData.value.goods[index].goodNum = data.goodNum
      if(formData.value.goods[index].childNum){ formData.value.goods[index].childActionNum = formData.value.goods[index].childNum * data.goodNum }
    }
  })
}

function handleDelete(index){
  const { id } = formData.value.goods[index]
  formData.value.goods = formData.value.goods.filter((item) => item.id !== 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 :columns="orderGoodColumns" :data="detailTask.data" v-if="detailTask.data" />
      </ElCollapseItem>

      <ElCollapseItem :title="'订单详情'" name="2">
        <BasicDescriptions v-if="detailTask.data" :columns="importOrderGoodColumns" :data="detailTask.data" />
      </ElCollapseItem>

      <ElCollapseItem :title="'发票详情'" name="3">
        <BasicDescriptions v-if="detailTask.data" :columns="importInvoiceGoodColumns" :data="detailTask.data" />
      </ElCollapseItem>


      <ElCollapseItem title="商品信息" name="4" v-if="productDetailTask.data && detailTask.data.ProductRela.length !== 0">
        <!-- <ProductDetail :data="productDetailTask.data" :num="productDetail?.num" :time="productDetail?.create_time" :name="productDetail?.apply_name" /> -->
        <BasicProducts :ProductRela="detailTask.data.ProductRela" />
      </ElCollapseItem>

      
      <ElCollapseItem title="出入库信息确认" name="5"   v-if="!isSuperUser && detailTask.data && detailTask.data.status == '1' || detailTask.data.status == '4'">
        <ElForm ref="formRef" :rules="rules" :model="formData">
          <ElFormItem label="操作商品" prop="goods">
            <ElTable :span-method="spanMethod" border size="small" :data="formData.goods">
              <ElTableColumn label="商品编号" prop="skuCode" show-overflow-tooltip />
              <ElTableColumn label="商品名称" prop="goodName" show-overflow-tooltip />
              <ElTableColumn label="操作数量" prop="goodNum" show-overflow-tooltip />
              <ElTableColumn label="子商品编号" prop="childCode" show-overflow-tooltip />
              <ElTableColumn label="销售方公司纳税识别号" width="140px" prop="seller_code" show-overflow-tooltip />
              <ElTableColumn label="子商品比例" prop="childNum" show-overflow-tooltip />
              <ElTableColumn label="子商品操作数量" prop="childActionNum" show-overflow-tooltip />

              <ElTableColumn width="70px" label="操作">
                <template #header>
                  <div class="w-full flex justify-between">
                    <span>操作</span>
                    <ElTooltip content="添加" placement="top">
                      <ElButton link size="small" type="primary" :icon="useRenderIcon('add')" @click="visible = true" />
                    </ElTooltip>
                  </div>
                </template>

                <template #="{ $index }">
                  <ElTooltip content="编辑" placement="top">
                    <ElButton :icon="useRenderIcon('edits')" type="primary" size="small" link
                      @click="handleChildGoodEdit($index)" />
                  </ElTooltip>


                  <ElTooltip content="删除" placement="top">
                    <ElButton :icon="useRenderIcon('delete')" @click="handleDelete($index)" type="danger" size="small"
                      link />
                  </ElTooltip>
                </template>
              </ElTableColumn>
            </ElTable>
          </ElFormItem>

          <!-- {{ detailTask.data.seller_code }} -->
          <ElFormItem label="入账月份" prop="month">
            <SealMonthPicker placeholder="入账月份" v-model="formData.month" :company_code="detailTask.data.inv_buyer_code" />
          </ElFormItem>
        </ElForm>

        <div class="flex w-full justify-end">
          <ElButton type="primary" @click="onSubmit">保存</ElButton>
        </div>
      </ElCollapseItem>
    </ElCollapse>

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

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