<!-- 订单管理-详情 -->
<template>
    <teleport to="#appMainTeleport">
        <app-view class="app-details" v-bind="$attrs">
            <template #header>
                <div>
                    <el-button @click="$emit('closed')">返回</el-button>
                </div>
            </template>
            <el-descriptions title="基本信息" :column="2">
                <el-descriptions-item label="关联单号">{{ selectedRow.relatedorderid }}</el-descriptions-item>
                <el-descriptions-item label="履约商品">{{ selectedRow.goodsno }}</el-descriptions-item>
                <el-descriptions-item label="履约金额">{{ selectedRow.amount }}</el-descriptions-item>
                <el-descriptions-item label="付款方式">{{ selectedRow.paymenttype }}</el-descriptions-item>
                <el-descriptions-item label="对手方">{{ selectedRow.accountname }}</el-descriptions-item>
                <el-descriptions-item label="买方冻结">{{ selectedRow.buyerfreezeamount }}</el-descriptions-item>
                <el-descriptions-item label="卖方冻结">{{ selectedRow.sellerfreezeamount }}</el-descriptions-item>
                <el-descriptions-item label="买方冻结剩余">{{ selectedRow.buyerfreezeamountremain }}</el-descriptions-item>
                <el-descriptions-item label="卖方冻结剩余">{{ selectedRow.sellerfreezeamountremain }}</el-descriptions-item>
                <el-descriptions-item label="买方今日付款">{{ selectedRow.buytodayamount }}</el-descriptions-item>
                <el-descriptions-item label="卖方今日收款">{{ selectedRow.selltodayamount }}</el-descriptions-item>
                <el-descriptions-item label="买方联络信息">{{ selectedRow.buyerinfo }}</el-descriptions-item>
                <el-descriptions-item label="卖方联络信息">{{ selectedRow.sellerinfo }}</el-descriptions-item>
            </el-descriptions>
            <app-table :data="dataList" :columns="columns" :show-header="false" :row-style="rowStyle" border>
                <!-- 步骤值 -->
                <template #stepvalue="{ value }">
                    {{ (value * 100).toFixed(1) }}
                </template>
                <template #isauto="{ value }">
                    {{ value ? '是' : '否'}}
                </template>
                <!-- 启动类型 -->
                <template #steplanchtype="{ value }">
                    {{ value === 1 ? '系统自动' : '手动' }}
                </template>
                <!-- 步骤状态 -->
                <template #stepstatus="{ value }">
                    {{ getStepStatusName(value) }}
                </template>
            </app-table>
        </app-view>
    </teleport>
</template>

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

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

const { dataList, columns, getPlanStepList } = usePerformancePlanStep(props.selectedRow.performanceplanid)
const currentStepIndex = computed(() => dataList.value.findIndex((e) => e.performancestepid === props.selectedRow.curstepid)) // 当前步骤索引位置

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

getPlanStepList()
</script>