<script setup lang="ts">
import { shallowRef } from 'vue'
import { useRouter } from "vue-router"
import { useDetail } from "/@/hooks/core/useDetail";
import { usePermission } from "/@/hooks/core/usePermission";
import ReconciliationForm from "/@/components/ReconciliationForm";
import { ElTabs, ElTabPane, ElCollapse, ElCollapseItem } from "element-plus"
import OrderForm from "./components/order-form.vue"

const pageName = "currentcyOrderRecordDetail"

const { id, title, isDetail, collapses } = useDetail({
  baseName: '通用订单对账',
  collapseLen: 2
});

const { push } = useRouter();
const { hasPermissionWithCode } = usePermission(pageName);
const loading = shallowRef(false);
</script>


<template>
  <div class="padding__container">
    <ElTabs>
      <ElTabPane :label="title">
        <ElCollapse v-model="collapses">
          <ElCollapseItem :title="title" name="1">
            <ReconciliationForm v-if="isDetail" :id="id" :loading="loading" :readonly="isDetail" isPurch />
            <OrderForm v-else @create="() => push('/InvoiceSales/currentcyOrderRecord')" />
          </ElCollapseItem>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
