<!-- 交易服务-出境检测-详情 -->
<template>
    <app-drawer class="customs-exit-details" title="详情" :width="960" v-model:show="show">
        <el-steps class="customs-exit-details__steps" :active="stepActive" finish-status="success" align-center>
            <el-step v-for="item in gzcjStatusList" :title="item.label" :key="item.value" />
        </el-steps>
        <div class="customs-exit-details__info">
            <p>*若货物由广州钻石交易中心经快递发送，快递员揽件时即视为委托方已收货，广州钻石交易中心不承担后续货物安全责任。</p>
            <p>本表将作为委托方委托广州钻石交易中心办理出境检测业务申请使用，敬请务必如实填写公司信息、货物资料，并盖章确认。广州钻石交易中心根据此表确认信息，作为接受委托办理该批货物出境检测业务的凭证，仅对数量负责。</p>
        </div>
        <el-descriptions title="委托方信息" :column="2" border>
            <el-descriptions-item width="120" label="单据编号">{{ handleNoneValue(selectedRow.orderno) }}</el-descriptions-item>
            <el-descriptions-item width="120" label="送检账户" v-if="selectedRow.gzcjaccounttype === 1">{{
                selectedRow.gzcjaccount
            }}</el-descriptions-item>
            <el-descriptions-item width="120" label="公司名称(中文)">{{ selectedRow.companynamecn }}</el-descriptions-item>
            <el-descriptions-item width="120" label="公司名称(英文)">{{ selectedRow.companynameen }}</el-descriptions-item>
            <el-descriptions-item width="120" label="地址(中文)">{{ selectedRow.addresscn }}</el-descriptions-item>
            <el-descriptions-item width="120" label="地址(英文)">{{ selectedRow.addressen }}</el-descriptions-item>
            <el-descriptions-item width="120" label="联系人姓名">{{ selectedRow.contactname }}</el-descriptions-item>
            <el-descriptions-item width="120" label="联系人职位">{{ selectedRow.contactposition }}</el-descriptions-item>
            <el-descriptions-item width="120" label="联系人电话">{{ selectedRow.contactphoneno }}</el-descriptions-item>
            <el-descriptions-item width="120" label="邮箱">{{ selectedRow.email }}</el-descriptions-item>
            <el-descriptions-item width="120" label="货物品类">{{ selectedRow.gzcjcategorytypedisplay }}</el-descriptions-item>
            <el-descriptions-item width="120" label="成品钻石加工国">{{ selectedRow.processingcountry }}</el-descriptions-item>
            <el-descriptions-item width="120" label="天然钻石毛坯原产地">{{ selectedRow.zsorigin }}</el-descriptions-item>
            <el-descriptions-item width="120" label="完成检测后收货方式">{{ selectedRow.gzcjdeliverytypedisplay
            }}</el-descriptions-item>
        </el-descriptions>
        <h3 class="el-descriptions__header">
            <span class="el-descriptions__title">批次信息</span>
        </h3>
        <app-table :data="detailList" :columns="columns" :loading="loading" :show-toolbar="false" border>
            <!-- 形状 -->
            <template #gzcjshapetype="{ value }">
                {{ getGZCJShapeTypeName(value) }}
            </template>
            <!-- 刻印服务(证书号/ 其他/ 无) -->
            <template #gzcjmarktype="{ value }">
                {{ getGZCJMarkTypeName(value) }}
            </template>
        </app-table>
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, PropType } from 'vue'
import { handleNoneValue } from '@/filters'
import { getGZCJMarkTypeName, getGZCJStatusList, getGZCJShapeTypeName } from '@/constants/customs'
import { useGZCJJCOrderDetail } from '@/business/customs/exit'
import AppDrawer from '@pc/components/base/drawer/index.vue'
import AppTable from '@pc/components/base/table/index.vue'

const props = defineProps({
    selectedRow: {
        type: Object as PropType<Ermcp.GZCJJCOrderRsp>,
        required: true
    },
})

const { loading, detailList, columns, getGZCJJCOrderDetailList } = useGZCJJCOrderDetail(props.selectedRow)
const show = shallowRef(true)

const gzcjStatusList = getGZCJStatusList().filter((e) => {
    const status = [21, 22, 23] // 审核拒绝、未提交、已撤销 只显示单个状态
    if (status.includes(props.selectedRow.gzcjstatus)) {
        return e.value === props.selectedRow.gzcjstatus
    }
    return !status.includes(e.value)
})

const stepActive = gzcjStatusList.findIndex((e) => e.value === props.selectedRow.gzcjstatus)

getGZCJJCOrderDetailList()
</script>

<style lang="less">
@import './index.less';
</style>