<template>
    <q-card flat class="" style="width: 60vw;">
        <q-card-section class="q-pa-sm">
            <div class="text-h6">{{ $t('v102.vehicle.list.s9') }}</div>
        </q-card-section>
        <q-card-section>
            <div class="flex">
                <span class="flex2">
                    <span>{{ $t('v102.vehicle.list2.s1') }}</span>
                    {{ postMsg.CustomerName }}
                </span>
                <span class="flex2">
                    <span>{{ $t('v102.vehicle.list2.s2') }}</span>
                    {{ postMsg.CreateDate }}
                </span>
                <span class="flex2">
                    <span>{{ $t('v102.vehicle.list2.s3') }}</span>
                    {{ postMsg.UseCompName }}
                </span>
                <span class="flex2">
                    <span>{{ $t('v102.vehicle.list2.s4') }}</span>
                    {{ postMsg.UseName }}
                </span>

                <span class="flex2">
                    <span>{{ $t('v102.vehicle.list2.s30') }}</span>
                    {{ postMsg.DriverInfo }}
                </span>
                <span class="flex2">
                    <span>{{ $t('v102.vehicle.list2.s31') }}</span>
                    {{ postMsg.BusNo }}
                </span>
                <span class="flex2">
                    <span>{{ $t('v102.vehicle.list2.s5') }}</span>
                    {{ postMsg.TeamName }}
                </span>
                <span class="flex2">
                    <span>{{ $t('v102.vehicle.list2.s6') }}</span>
                    {{ postMsg.PeopleNum }}
                </span>
                <span class="flex2">
                    <span>{{ $t('v102.vehicle.list2.s7') }}</span>
                    {{ postMsg.StartDate }}
                </span>
                <span class="flex2">
                    <span>{{ $t('v102.vehicle.list2.s8') }}</span>
                    {{ postMsg.UseDayNum }}
                </span>
                <span class="flex2">
                    <span>{{ $t('v102.vehicle.list2.s9') }}</span>
                    {{ postMsg.GoFlightInfo }}
                </span>
                <span class="flex2">
                    <span>{{ $t('v102.vehicle.list2.s10') }}</span>
                    {{ postMsg.BackFlightInfo }}
                </span>
                <span class="flex2">
                    <span>{{ $t('v102.vehicle.list2.s11') }}</span>
                    {{ postMsg.BusTypeName }}
                </span>
                <span class="flex2">
                    <span>{{ $t('v102.vehicle.list2.s12') }}</span>
                    {{ postMsg.GuideInfo }}
                </span>
                <span class="flex2">
                    <span>{{ $t('v102.vehicle.list2.s15') }}</span>
                    <p v-if="postMsg.SureId == 0" style="max-width: 205px;">{{ $t('v102.vehicle.list2.s16') }}
                    </p>
                    <p v-if="postMsg.SureId != 0">
                        {{ $t('v102.vehicle.list2.s17') }}
                        {{ $t('v102.vehicle.list2.s18') }}
                        {{ postMsg.SureByName }}
                        {{ $t('v102.vehicle.list2.s19') }}
                        {{ postMsg.SureTime }}</p>
                </span>
                <span class="flex2">
                    <span>{{ $t('v102.vehicle.list2.s14') }}</span>
                    {{ postMsg.PickUpInfo }}
                </span>
            </div>
            <div style="font-weight: bold;
                font-size: 18px;
                display: inline-block;
                margin-bottom: 20px;">
                {{ $t('v102.vehicle.list2.s20') }}
            </div>
            <!-- 表格 -->
            <table width="100%" border="1" style="text-align:left;              border-collapse:collapse;table-layout:fixed;word-break:break-all;border: 1px solid rgba(0, 0, 0, 0.12);
            margin: auto;">
                <tr>
                    <th width="15%" align="center" class="td-title">{{ $t('v102.vehicle.tatle.th1') }}</th>
                    <th width="15%" align="center" class="td-title">{{ $t('v102.vehicle.tatle.th2') }}</th>
                    <th width="15%" align="center" class="td-title">{{ $t('v102.vehicle.tatle.th3') }}</th>
                    <th width="23%" align="center" class="td-title">{{ $t('v102.vehicle.tatle.th4') }}</th>
                    <th width="10%" align="center" class="td-title">{{ $t('v102.vehicle.list2.s21') }}</th>
                    <th width="10%" align="center" class="td-title">{{ $t('v102.vehicle.list2.s22') }}</th>
                    <th width="12%" align="center" class="td-title">{{ $t('v102.vehicle.list2.s23') }}</th>
                </tr>
                <template v-for="(item, i) in postMsg.details" :key="i">
                    <tr>
                        <td align="center">
                            {{ item.UseDate }}
                        </td>
                        <td align="center">
                            DAY{{ item.DayNum }}
                        </td>
                        <td align="center">
                            {{ item.UseTypeName }}
                        </td>
                        <td>
                            {{ item.TripInfo }}
                        </td>
                        <td align="center">
                            {{ item.UnitPrice }}
                        </td>
                        <td align="center">
                            {{ item.StopBusPrice }}
                        </td>
                        <td align="center">
                            {{ item.RoomPrice }}
                        </td>
                    </tr>
                </template>
                <tr>
                    <th align="center">{{ $t('v102.vehicle.list2.s24') }}</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <th align="center"> {{ subUnitPrice }}</th>
                    <th align="center"> {{ subStopBusPrice }}</th>
                    <th align="center"> {{ subRoomPrice }}</th>
                </tr>
            </table>
            <!-- 表格结束 -->
            <div class="total">
                <span>
                    {{ $t('v102.vehicle.list2.s29') }}
                    <span>
                        {{ postMsg.ShouPeiFee }}
                    </span>
                    <span style="margin-left: 10px;">
                        {{ $t('v102.vehicle.list2.s25') }}{{ postMsg.TotalPrice }}
                    </span>
                </span>
            </div>
            <!-- 状态 -->
            <div class="flex">
                <span class="flex2">
                    <span style="width: 42px;">{{ $t('v102.vehicle.list2.s26') }}</span>
                    {{ postMsg.Remark }}
                </span>
                <span class="flex2">
                    <span>{{ $t('v102.vehicle.list2.s27') }}</span>
                    {{ postMsg.AttentionInfo }}
                </span>
                <span class="flex2">
                    <span style="width: 42px;">{{ $t('v102.vehicle.list2.s28') }}</span>
                    {{ postMsg.OfferStateName }}
                </span>
            </div>
        </q-card-section>
        <q-card-actions align="right" class="bg-white">
            <q-btn flat dense color="dark" :label="$t('close')" class="q-mr-sm" @click="down()" v-close-popup />
        </q-card-actions>
    </q-card>
</template>
<script lang="ts">
import HotelService from '../../api/vehicle'
import { DirtionmaryHelper } from '../../config/dictionary'
import { defineComponent, toRefs, watch, reactive, inject, ref, onMounted } from 'vue'
import { ApiResult } from '../../@types/enumHelper'
import useScrollModule from '../../module/scrollbar/scrollModule'
import { date } from 'quasar'
import { useI18n } from 'vue-i18n'
import message from '../../utils/message'
export default defineComponent({
    props: {
        Id: {
            type: Number,
            default: 0,
            require: true
        }
    },
    setup(props, context) {
        const qDateProxy = ref(null) as any
        const { t } = useI18n()
        const data = reactive({
            loading: false,
            subUnitPrice: 0 as any,
            subStopBusPrice: 0 as any,
            subRoomPrice: 0 as any,
            postMsg: {
            } as any
        })
        onMounted(() => {
            if (props.Id && props.Id > 0) {
                methods.detailsinit()
            }
        })
        const methods = {
            //计算价格
            calcPrice() {
                var tempUnitPrice = 0;
                var tempStopBusPrice = 0;
                var tempRoomPrice = 0;
                var tempTotalPrice = 0;
                if (data.postMsg && data.postMsg.details && data.postMsg.details.length > 0) {
                    data.postMsg.details.forEach((item: any, i: any) => {
                        if (item.UnitPrice) {
                            tempUnitPrice += Number(item.UnitPrice);
                            tempTotalPrice += Number(item.UnitPrice);
                        }
                        if (item.StopBusPrice) {
                            tempStopBusPrice += Number(item.StopBusPrice);
                            tempTotalPrice += Number(item.StopBusPrice);
                        }
                        if (item.RoomPrice) {
                            tempRoomPrice += Number(item.RoomPrice);
                            tempTotalPrice += Number(item.RoomPrice);
                        }
                    });
                }
                data.subUnitPrice = tempUnitPrice.toFixed(2);
                data.subStopBusPrice = tempStopBusPrice.toFixed(2);
                data.subRoomPrice = tempRoomPrice.toFixed(2);
                if (data.postMsg.ShouPeiFee) {
                    tempTotalPrice += Number(data.postMsg.ShouPeiFee);
                }
                data.postMsg.TotalPrice = tempTotalPrice.toFixed(2);
            },
            // 获取报价详情
            detailsinit() {
                HotelService.DetailsQuotation(props.Id)
                    .then(r => {
                        if (r.data.resultCode == ApiResult.SUCCESS) {
                            data.postMsg = r.data.data
                            methods.calcPrice();
                            message.errorMsg(r.data.message)
                            // console.log('444', data.postMsg.details)
                        }
                    })
                    .catch(e => {
                        message.errorMsg(e.message)
                    })
            },
            // 关闭
            down() {
                context.emit('close')
            },
        }
        return { ...toRefs(data), ...methods, qDateProxy }
    }
})
</script>
<style scoped>
.total {
    display: flex;
    width: 100%;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 20px;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

.flex2 {
    width: 48%;
    margin-bottom: 20px;
    display: flex;
}

.flex2 span {
    width: 72px;
    display: inline-block;
    text-align: right;
}
</style>