<template>
    <!-- 砼申请表里程信息, 3+地方复用 -->
    <uni-section title="里程信息" type="line">
        <tui-list-cell :unlined="true" :hover="false" :arrow="false">
            <view class="base-item">
                <view class="label"> 工号起止里程 </view>
                <view class="content"> {{ applicationData.start_position }}m - {{ applicationData.end_position }}m </view>
            </view>
        </tui-list-cell>
        <tui-list-cell :unlined="true" :hover="false" :arrow="false">
            <view class="base-item">
                <view class="label"> 工号总工程量 </view>
                <view class="content">
                    {{
                        isNaN(applicationData.end_position - applicationData.start_position)
                            ? 0
                            : applicationData.end_position - applicationData.start_position
                    }}m
                </view>
            </view>
        </tui-list-cell>
        <tui-list-cell :unlined="true" :hover="false" :arrow="false">
            <view class="base-item">
                <view class="label"> 已完成工程量 </view>
                <view class="content">
                    {{ applicationData.complete_end_position === null ? 0 : applicationData.complete_end_position - applicationData.apply_start_position }}m
                </view>
            </view>
        </tui-list-cell>
        <tui-list-cell :unlined="true" :hover="false" :arrow="false">
            <view class="base-item">
                <view class="label"> 已完成设计量 </view>
                <view class="content"> {{ applicationData.complete_design_amount ? applicationData.complete_design_amount : 0 }} m³ </view>
            </view>
        </tui-list-cell>
        <tui-list-cell :unlined="true" :hover="false" :arrow="false">
            <view class="base-item">
                <view class="label"> 本次申请起止历程 </view>
                <view class="content">{{ applicationData.apply_start_position }}m - {{ applicationData.apply_end_position }}m </view>
            </view>
        </tui-list-cell>
    </uni-section>
</template>
<script>
export default {
    props: ["applicationData"],
};
</script>
<style lang="scss">
::v-deep .uni-section {
    margin: 20rpx auto;
    padding-bottom: 20rpx;
    width: 95%;
}
::v-deep .tui-list-cell {
    height: 60rpx;
}
.base-item {
    display: flex;
    height: 100%;

    &.col {
        flex-direction: column;
    }

    .label {
        width: 230rpx;
        font-size: 20rpx;
    }

    .content {
        margin-left: 50rpx;
        font-size: 20rpx;
    }
}
</style>
