<script setup lang="ts">
import { ref } from "vue";
import BasicDescriptions, { type DescriptionColumn } from "/@/components/BasicDescriptions";
import FinanceSetting from "./_component/finance-setting.vue";
import ProcureSetting from "./_component/procure-setting.vue";
import { usePermission } from "/@/hooks/core/usePermission";

const emit = defineEmits(["refresh"]);

const props = defineProps<{
  columns: Array<DescriptionColumn>;
  canChange?: boolean;
  backRoute: string;
  title: string;
  name?: string;
  detail: any;
  pageName: string;
}>();


const { hasPermissionWithCode } = usePermission(props.pageName)

const actives = ref(["1", "2"]);
</script>

<template>
  <div class="settings__content" bg-white>
    <h1 mb-2 font-bold>{{ title }}</h1>
    <BasicDescriptions
      v-if="detail"
      :data="detail"
      :columns="columns"
      label-width="130px"
      :col-number="2"
    />

    <div v-else v-loading="true" h-100px>详情加载中...</div>
    <ElCollapse v-model="actives">
      <ElCollapseItem
        v-if="detail && Number(detail.status) < 2 && hasPermissionWithCode('043')"
        title="待采购设置类目"
        name="1"
      >
        <procure-setting
          :name="name"
          :detail="detail"
          :columns="columns"
          :back-route="backRoute"
          :can-change="canChange"
          @refresh="emit('refresh')"
        />
      </ElCollapseItem>

      <ElCollapseItem
        v-if="detail && Number(detail.status) >= 1 && hasPermissionWithCode('044')"
        title="待财务设置类目"
        name="2"
      >
        <finance-setting
          :name="name"
          :detail="detail"
          :columns="columns"
          :back-route="backRoute"
          :can-change="canChange"
          @refresh="emit('refresh')"
        />
      </ElCollapseItem>
    </ElCollapse>
  </div>
</template>

<style lang="scss" scoped>
.settings__content {
  padding: 20px !important;
}
</style>
