<template>
  <div>
    <el-card class="!border-none mb-4" shadow="never">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="概况" name="first">
          <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}}
            </el-descriptions-item>
            <el-descriptions-item label="ID">
              {{form.id}}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="订单" name="second">订单列表</el-tab-pane>
        <el-tab-pane label="报价信息" name="third">报价信息</el-tab-pane>
        <!-- <el-tab-pane label="详情3" name="fourth">Task</el-tab-pane> -->
      </el-tabs>
    </el-card>
  </div>
</template>

<script lang="ts" setup name="opurchaseclassLists">
import { usePaging } from "@/hooks/usePaging";
import { useDictData } from "@/hooks/useDictOptions";
import {
  apiOpurchaseclassLists,
  apiOpurchaseclassDelete,
  apiOpurchaseclassDetail,
} from "@/api/opurchaseclass";
import { useRoute } from "vue-router";
import type { TabsPaneContext } from "element-plus";

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

const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const getDetail = async () => {
  const data = await apiOpurchaseclassDetail({
    id: route.query.id,
  });
  console.log(data);
  form.value = data;
};
getDetail();
</script>
