<template>
  <div>
    <el-card class="!border-none mb-4" shadow="never">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabChange">
        <el-tab-pane label="概况" name="detail">
          <el-descriptions class="margin-top" :column="4" border>
            <!-- <template #extra>
              <el-button type="primary">Operation</el-button>
            </template> -->
            <el-descriptions-item :span="4" label="单据编号">
              {{ form.number }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="单据金额">
              {{ form.total }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="抵扣金额">
              {{ form.deduction_price }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="实际金额">
              {{ form.actual }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="实收金额">
              {{ form.money }}
            </el-descriptions-item>
            <el-descriptions-item label="所属商户">
              {{ form.merchant_name }}
            </el-descriptions-item>
          </el-descriptions>
          <el-table :data="pager.lists" border style="width: 100%; margin-top: 20px">
            <el-table-column prop="id" label="ID" width="120" />
            <el-table-column prop="goods_name" label="商品名称" />
            <el-table-column prop="price" label="单价(元)" />
            <el-table-column prop="unit_name" label="单位" />
            <el-table-column prop="nums" label="数量" />
            <el-table-column prop="total" label="合计(元)" />
            <el-table-column prop="nums_count" label="已采纳数量" />
            <el-table-column prop="is_push" label="推送状态">
              <template #default="{ row }">
                <span v-if="row.is_push == 0" style="color: #e6a23c;">未推送</span>
                <span v-else>已推送</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="摊贩订单" name="order">
          <subOrder ref="subOrderRef" />
        </el-tab-pane>
        <!-- <el-tab-pane label="报价列表" name="offer">
          <goodsOffer ref="goodsOfferRef" />
        </el-tab-pane>
        <el-tab-pane label="未推送商品" name="notPushedGoods">
          <el-button type="primary" @click="rePush">
            重新推送
          </el-button>
          <el-table :data="pager.lists">
            <el-table-column label="商品名称" prop="goods_name" show-overflow-tooltip />
            <el-table-column label="单位" prop="unit_name" show-overflow-tooltip />
            <el-table-column label="单价(元)" prop="price" show-overflow-tooltip />
            <el-table-column prop="nums" label="数量" />
            <el-table-column prop="total" label="合计(元)" />
            <el-table-column label="备注" prop="data" show-overflow-tooltip />
          </el-table>
        </el-tab-pane> -->
      </el-tabs>
    </el-card>
  </div>
</template>

<script lang="ts" setup name="opurchaseclassDetail">
import { usePaging } from "@/hooks/usePaging";
import { useDictData } from "@/hooks/useDictOptions";
import {
  apiOpurchaseclassLists,
  apiOpurchaseclassDelete,
  apiOpurchaseclassDetail,
  apiOpurchaseinfoListList,
} from "@/api/opurchaseclass";
import { useRoute } from "vue-router";
import subOrder from "./component/subOrder.vue";
import goodsOffer from "./component/goodsOffer.vue";

const route = useRoute();
const form = ref({});

const activeName = ref("detail");
const activeMap = ref(
  new Map([
    ["detail", true],
    ["order", false],
    ["offer", false],
    ["notPushedGoods", false],
  ])
);
const getDetail = async () => {
  const data = await apiOpurchaseclassDetail({
    id: route.query.id,
  });
  form.value = data;
};
getDetail();

const subOrderRef = ref(null);
const goodsOfferRef = ref(null);
const tabChange = (type: any) => {
  if (!activeMap.value.get(type)) {
    if (type == "order") subOrderRef.value?.getLists();
    if (type == "offer") goodsOfferRef.value?.getLists();
    activeMap.value.set(type, true);
  }
};


// 查询条件
const queryParams = reactive({
    id: route.query.id,
})

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

</script>
