<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>
            <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;cursor: pointer;" @click="activeName='notPushedGoods';tabChange('notPushedGoods')">未推送</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">
          <noPush ref="noPushRef" />
        </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";
import noPush from "./component/noPush.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 noPushRef = ref(null);
const tabChange = (type: any) => {
  if (!activeMap.value.get(type)) {
    activeMap.value.set(type, true);
    if (type == "order") subOrderRef.value?.getLists();
    if (type == "offer") goodsOfferRef.value?.getLists();
    if (type == "notPushedGoods") noPushRef.value?.getLists();
  }
};

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

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