<script setup lang="ts">
import { useDetail } from "/@/hooks/core/useDetail";
import { httpFzList } from "/@/api/invoiceInOut/summary";
import { useTask } from "/@/hooks/core";
import { useRoute } from "vue-router";
import { ref } from "vue";

import {
  ElCollapseItem,
  ElTableColumn,
  ElDatePicker,
  ElPagination,
  ElFormItem,
  ElCollapse,
  ElTabPane,
  ElInput,
  ElTable,
  ElForm,
  ElTabs,
  ElRow,
  ElCol
} from "element-plus";

// 列表数据加载任务
const listTask = useTask();
const route = useRoute();

// 页面基础信息
const { title, collapses } = useDetail({
  baseName: "收发存汇总",
  collapseLen: 2
});

// 表单数据
const formData = ref({
  // 记账月份
  fz_date: "",
  // 公司编码



  company_code: "",
  // 公司名称
  company_name: ""
});


/***
 *   origin     target
 *  us CDN  =\=>  cn CND
 *          <==
 *          ==>
 *          <==
*/

// 初始化数据
(() => {
  try {
    const data = JSON.parse(route.query.data as string) ?? {};
    const { fz_date, company_code, company_name } = data;
    // 更新表单数据
    formData.value = { fz_date, company_code, company_name };
    // 加载列表数据
    if (fz_date && company_code) {
      listTask.run(httpFzList({ fz_date, company_code }));
    }
  } catch (err) {
    console.error("初始化数据失败:", err);
  }
})();
</script>

<template>
  <div class="padding__container" v-loading="listTask.loading">
    <ElTabs>
      <ElTabPane :label="title">
        <ElCollapse v-model="collapses">
          <ElCollapseItem :title="title" name="1">
            <ElForm>
              <ElRow :gutter="10">
                <ElCol :span="12">
                  <ElFormItem label="记账月份">
                    <ElDatePicker disabled type="month" style="width: 100%" :modelValue="formData.fz_date" />
                  </ElFormItem>
                </ElCol>

                <ElCol :span="12">
                  <ElFormItem label="公司名称">
                    <ElInput :modelValue="formData.company_name" disabled />
                  </ElFormItem>
                </ElCol>

                <ElCol :span="24">
                  <ElTable
                    size="small" 
                    :data="listTask.data?.list" border stripe>
                    <ElTableColumn label="存货" align="center">
                      <ElTableColumn prop="skuCode" label="编码" width="120" show-overflow-tooltip />
                      <ElTableColumn prop="goodName" label="名称" width="150" show-overflow-tooltip />

                      <ElTableColumn prop="spec" label="规格" width="60" show-overflow-tooltip />

                      <ElTableColumn prop="unit" label="单位" width="60" show-overflow-tooltip />

                      <ElTableColumn prop="weight" label="重量" width="100" show-overflow-tooltip>
                        <template #="{ row }">
                          {{ row.Porduct.unit_weight }}
                        </template>
                      </ElTableColumn>

                      <ElTableColumn prop="light" label="分光" width="80" show-overflow-tooltip>
                        <template #="{ row }">
                          {{ row.Porduct.spectral }}
                        </template>
                      </ElTableColumn>
                    </ElTableColumn>

                    <ElTableColumn label="期初" align="center">
                      <ElTableColumn prop="begin_num" label="数量" show-overflow-tooltip />
                      <ElTableColumn prop="unit_price" label="单价" show-overflow-tooltip />
                      <ElTableColumn prop="begin_total_price" label="金额" show-overflow-tooltip />
                    </ElTableColumn>

                    <ElTableColumn label="收入" align="center">
                      <ElTableColumn prop="in_num" label="数量" show-overflow-tooltip />
                      <ElTableColumn prop="unit_price" label="单价" show-overflow-tooltip />
                      <ElTableColumn prop="in_total_price" label="金额" show-overflow-tooltip />
                    </ElTableColumn>

                    <ElTableColumn label="发出" align="center">
                      <ElTableColumn prop="out_num" label="数量" show-overflow-tooltip />
                      <ElTableColumn prop="unit_price" label="单价" show-overflow-tooltip />
                      <ElTableColumn prop="out_total_price" label="金额" show-overflow-tooltip />
                    </ElTableColumn>

                    <ElTableColumn label="结存" align="center">
                      <ElTableColumn prop="balance_num" label="数量" show-overflow-tooltip />
                      <ElTableColumn prop="unit_price" label="单价" show-overflow-tooltip />
                      <ElTableColumn prop="balance_total_price" label="金额" show-overflow-tooltip />
                    </ElTableColumn>
                  </ElTable>
                </ElCol>
              </ElRow>
            </ElForm>
          </ElCollapseItem>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
