<script setup lang="ts">
import { onMounted, ref } from "vue"
import { usePermission } from "/@/hooks/core/usePermission";
import { useDetail } from "/@/hooks/core/useDetail";
import { httpDetail } from "/@/api/sellOut/project";
import GrossForm from "./components/grossForm.vue"
import BaseForm from "./components/baseForm.vue"
import Feedback from "./components/feedback.vue"
import MakeProject from "./components/makeProject.vue"

const pageName = 'projectDetail'
const { id, isDetail, title, collapses } = useDetail({
  baseName: "项目",
  collapseLen: 5
});

const loading = ref(false)
const detail = ref(null)

const { permissions } = usePermission(pageName)

async function requestProjectinfo(){
  loading.value = true
  const { data } = await httpDetail({ projectNo: id.value })
  loading.value = false
  const { companyNo, khNo, ladder, platform_id: platform,  project_name: name, budget_total, use_desc, arrtime, endtime, status, low_rate, projectNo } = data
  detail.value = {
    ladder:ladder
    .map(({ good_img, good_name, good_type, num, cat_info, budget_price, pgNo }) => ({ good_img, good_name, good_type, budget_price, can: cat_info, num, pgNo })),
    name,
    khNo,
    status,
    arrtime,
    endtime,
    use_desc,
    low_rate,
    platform,
    companyNo,
    projectNo,
    budget_total
  }
}

onMounted(async () => {
  if(!isDetail.value){ return }
  await requestProjectinfo()
})
</script>

<template>
  <div class="p-[10px] bg-white">
    <ElTabs v-loading="loading">
      <ElTabPane :label="title">
        <ElCollapse v-model="collapses">
          <ElCollapseItem :title="title" name="1">
            <BaseForm :detail="detail" />
          </ElCollapseItem>

          <template v-if="isDetail && detail">
            <ElCollapseItem title="设置项目毛利率" v-if="permissions.includes('061')" name="2">
              <GrossForm :rate="detail.low_rate" :id="id" @refresh="requestProjectinfo" />
            </ElCollapseItem>
          </template>
        </ElCollapse>
      </ElTabPane>

      <template v-if="isDetail && detail">
        <ElTabPane label="商品反馈详情" lazy>
          <Feedback :detail="detail" />
        </ElTabPane>
        
        <ElTabPane label="方案制作" v-if="['3','4','5','6'].includes(String(detail.status))" lazy>
          <MakeProject :detail="detail" />
        </ElTabPane>
      </template>
    </ElTabs>
  </div>
</template>
