<!-- 订单管理-详情 -->
<template>
    <teleport :to="teleportTo">
        <app-view class="g-details">
            <div style="text-align: right;">
                <el-icon size="28px" color="#999" @click="$emit('closed')" style="cursor: pointer;">
                    <CircleClose />
                </el-icon>
            </div>
            <app-table-details title="基本信息" :label-width="180" :data="selectedRow" :cell-props="detailProps" :column="2">
                <!-- 付款方式 -->
                <template #paymenttype="{ value }">
                    {{ value === 1 ? '冻结' : '扣款' }}
                </template>
                <!-- 买方冻结 -->
                <template #buyerfreezeamount="{ value }">
                    {{ handleNumberValue(value) }}
                </template>
                <!-- 卖方冻结 -->
                <template #sellerfreezeamount="{ value }">
                    {{ handleNumberValue(value) }}
                </template>
                <!-- 买方冻结剩余 -->
                <template #buyerfreezeamountremain="{ value }">
                    {{ handleNumberValue(value) }}
                </template>
                <!-- 卖方冻结剩余 -->
                <template #sellerfreezeamountremain="{ value }">
                    {{ handleNumberValue(value) }}
                </template>
                <!-- 买方今日付款 -->
                <template #buytodayamount="{ value }">
                    {{ handleNumberValue(value) }}
                </template>
                <!-- 卖方今日收款 -->
                <template #selltodayamount="{ value }">
                    {{ handleNumberValue(value) }}
                </template>
                <!-- 已付金额 -->
                <template #buypaidamount="{ value }">
                    {{ handleNumberValue(value) }}
                </template>
                <!-- 已收金额 -->
                <template #sellreceivedamount="{ value }">
                    {{ handleNumberValue(value) }}
                </template>
                <!-- 买方联络信息 -->
                <template #buyerInfo>
                    {{ buyerInfo }}
                </template>
                <!-- 卖方联络信息 -->
                <template #sellerInfo>
                    {{ sellerInfo }}
                </template>
            </app-table-details>
            <app-table :data="dataList" :columns="columns" :show-toolbar="false" :row-style="rowStyle" border>
                <template #header>
                    <h3 class="g-details__title">步骤列表</h3>
                </template>
                <!-- 步骤值 -->
                <template #stepvalue="{ value }">
                    {{ (value * 100).toFixed(1) }}
                </template>
                <!-- 步骤状态 -->
                <template #stepstatus="{ value }">
                    {{ getStepStatusName(value) }}
                </template>
            </app-table>
        </app-view>
    </teleport>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    inheritAttrs: false,
})
</script>

<script lang="ts" setup>
import { PropType, computed } from 'vue'
import { handleNumberValue, handleNoneValue } from '@/filters'
import { getStepStatusName } from '@/constants/order'
import { usePerformancePlanStep } from '@/business/order'
import AppTable from '@pc/components/base/table/index.vue'
import AppTableDetails from '@pc/components/base/table-details/index.vue'

const props = defineProps({
    code: String,
    teleportTo: {
        type: String,
        default: '#appPageTeleport'
    },
    selectedRow: {
        type: Object as PropType<Ermcp.MyPerformancRsp>,
        default: () => ({})
    }
})

const { dataList, columns, getPlanStepList } = usePerformancePlanStep(props.selectedRow.performanceplanid)

const detailProps = [
    { prop: 'relatedorderid', label: '关联单号：' },
    { prop: 'goodsno', label: '履约商品：' },
    { prop: 'amount', label: '履约金额：' },
    { prop: 'paymenttype', label: '付款方式：' },
    { prop: 'accountname', label: '对手方：' },
    { prop: 'buyerfreezeamount', label: '买方冻结：' },
    { prop: 'buytodayamount', label: '买方今日付款：' },
    { prop: 'sellerfreezeamount', label: '卖方冻结：' },
    { prop: 'selltodayamount', label: '卖方今日收款：' },
    { prop: 'buyerfreezeamountremain', label: '买方冻结剩余：' },
    { prop: 'buypaidamount', label: '已付金额：' },
    { prop: 'sellerfreezeamountremain', label: '卖方冻结剩余：' },
    { prop: 'sellreceivedamount', label: '已收金额：' },
    { prop: 'sellerInfo', label: '卖方联络信息：' },
    { prop: 'buyerInfo', label: '买方联络信息：' },
]

// 当前步骤索引位置
const currentStepIndex = computed(() => dataList.value.findIndex((e) => e.performancestepid === props.selectedRow.curstepid))

// 买方联络信息
const buyerInfo = computed(() => {
    if (props.selectedRow.buyerinfo) {
        const obj = JSON.parse(props.selectedRow.buyerinfo)
        const content: string[] = []
        Object.entries(obj).forEach(([key, value]) => {
            if (value) {
                switch (key) {
                    case 'ContactInfo': {
                        content.push('联络信息：' + value)
                        break
                    }
                    case 'ReceiveInfo': {
                        content.push('收货地址：' + value)
                        break
                    }
                    case 'ReceiptInfo': {
                        content.push('发票信息：' + value)
                        break
                    }
                }
            }
        })
        return content.join('\n')
    }
    return handleNoneValue()
})

// 卖方联络信息
const sellerInfo = computed(() => {
    const obj = JSON.parse(props.selectedRow.sellerinfo || '{}')
    return obj.ContactInfo || handleNoneValue()
})

const rowStyle = ({ rowIndex }: { rowIndex: number }) => {
    if (currentStepIndex.value > rowIndex) {
        return {
            color: 'green'
        }
    }
    if (currentStepIndex.value === rowIndex) {
        return {
            color: 'red'
        }
    }
    return {
        color: '#999'
    }
}

getPlanStepList()
</script>

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