<template>
  <ADetailPanel
    ref="detailPanel"
    class="book-detail-panel"
    v-bind="detailPanelProps">
    <template #default="detailData">
      <ElDescriptions :column="3" border title="项目详情">
        <ElDescriptionsItem label="项目名称">
          {{ detailData.projectName }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="运输方企业">
          {{ detailData?.transOrgInfo?.orgName }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="产废方/购买方企业">
          {{ detailData.fringeOrgInfo?.orgName }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="区县">
          {{ detailData.areaName }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="乡镇街道">
          {{ detailData.townName }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="详细地址">
          {{ detailData.address }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="合同有效期">
          {{ detailData.contractStartDate }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="合同有效期">
          {{ detailData.contractEndDate }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="创建时间">
          {{ detailData.createTime }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="修改时间">
          {{ detailData.modifyTime }}
        </ElDescriptionsItem>
        <!-- <ElDescriptionsItem label="合同">
          <img :src="AppApi.fileUrl(detailData.contractPicture)" alt="合同" style="width: 4rem; height: 4rem; object-fit: cover; border-radius: 4px" />
        </ElDescriptionsItem> -->

        <ElDescriptionsItem label="合同">
          <ElImage :preview-src-list="[AppApi.fileUrl(detailData.contractPicture)]" :src="AppApi.fileUrl(detailData.contractPicture)" show-progress style="width: 100px;height: 100px;"></ElImage>
        </ElDescriptionsItem>
        <!-- <ElDescriptionsItem>
          <el-tag size="small">School</el-tag>
        </ElDescriptionsItem> -->
      </ElDescriptions>
    </template>
  </ADetailPanel>
</template>

<script lang="ts" setup>
import ProjectApi from '@/pages/cst/project/project-api.ts'
import AppApi from '@/common/app/app-api.ts'
import ADetailPanel, {
  type ADetailPanelInstance,
  buildDetailPanelProps,
} from '@/components/a-detail-panel/ADetailPanel.tsx'

const detailPanelIns = useTemplateRef<ADetailPanelInstance<ProjectTypes.SearchProjectResult>>('detailPanel')
const detailPanelProps = buildDetailPanelProps<ProjectTypes.SearchProjectResult>({
  title: '项目详情',
  width: '80vw',
  detailsLoader: ProjectApi.detail,
})

defineExpose({
  open(data: ProjectTypes.SearchProjectResult) {
    detailPanelIns.value?.open(data)
  },
})
</script>

<style lang="stylus" scoped>
.form-panel {
  padding 20px
}
</style>
