<script setup lang="ts">
import { ref, computed } 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;
  isZx: boolean
}>();


const { hasPermissionWithCode } = usePermission(props.pageName)


const isBefore = computed(() => {
  let { spuCode = '' } = (props.detail || {})

  let code = ''
  spuCode = spuCode.slice(3)
  const year = spuCode.slice(0, 2)
  const month = spuCode.slice(2, 4)
  const date = spuCode.slice(4, 6)

  if(Number(year) < 24){ return true  }
  if(Number(year) === 24 && Number(month) < 8) { return true }
  if(Number(year) === 24 && Number(month) === 8 && Number(date) < 16){ return true }
  return false
})


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')) && isBefore"
        title="待采购设置类目"
        name="1"
      >
        <procure-setting
          :isZx="isZx"
          :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')) &&  isBefore"
        title="待财务设置类目"
        name="2"
      >
        <finance-setting
          :isZx="isZx"
          :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>
