<template>
    <div>
        <el-descriptions :column="4">
            <el-descriptions-item :label="$t('客户编号')">{{detail.customerNumber}}</el-descriptions-item>
            <el-descriptions-item :label="$t('客户名称')">{{detail.customerName}}</el-descriptions-item>
            <el-descriptions-item :label="$t('跟进客服')">{{detail.followUpSalesmanName}}</el-descriptions-item>
            <el-descriptions-item :label="$t('创建时间')">{{parseTime(detail.customerCreateTime)}}</el-descriptions-item>

            <el-descriptions-item :span="2" :label="$t('客户原计划掉入公海池时间')">{{parseTime(detail.orgEstimateEnterOpenSeaTime)}}</el-descriptions-item>
            <el-descriptions-item :span="2" :label="$t('申请延期后时间')">{{parseTime(detail.estimateEnterOpenSeaTime)}}</el-descriptions-item>
            <el-descriptions-item :label="$t('申请凭证')" :span="4">
                <el-image v-for="(item, index) in pictures" :key="index" :src="item" style="width:100px; height:100px" :preview-src-list="pictures"></el-image>
            </el-descriptions-item>

            <el-descriptions-item :label="$t('申请原因')" :span="4">{{detail.reason}}</el-descriptions-item>
        </el-descriptions>
    </div>
</template>
<script>
import { getApproval } from '@/api/ecw/customer';
import {parseTime} from '@/utils/ruoyi'
export default {
    props:{
        id: [String, Number]
    },
    data(){
        return {
            info: null
        }
    },
    computed:{
        detail(){
            if(!this.info) return null
            return JSON.parse(this.info.details)
        },
        pictures(){
            if(!this.detail || !this.detail.voucher) return []
            return this.detail.voucher.split(',').filter(item => !!item)
        }
    },
    created(){
        parseTime,
        getApproval(this.id).then(res => {
            this.info = res.data
        })
    }
}
</script>