<template>
    <q-card class="bg-white q-pa-lg column" style="max-width: 600px; min-width: 375px; width: 50%;">
        <div class="row justify-between" :class="{'q-px-lg q-mb-lg':$q.platform.is.desktop,'q-mb-md':$q.platform.is.mobile}">
            <div class="text-weight-bold" :class="{'fz20':$q.platform.is.desktop,'fz16':$q.platform.is.mobile}">
                <span class="inline-block">{{ $t('v102.vehicle.list.s9') }}</span>
              </div>
            <q-icon class="text-grey-13 cursor-pointer" name="close" :size="$q.platform.is.desktop?'md':'sm'" v-close-popup></q-icon>
          </div>
        <div>
        <div class="row" :style="{'width':$q.platform.is.mobile?'80vw':'','overflow': $q.platform.is.mobile?'hidden':'auto'}">
            <q-table separator="cell" :hide-bottom="postMsg&&postMsg.details?true:false" :pagination="{ rowsPerPage: 100000 }" :rows="postMsg.details" bordered :columns="cols" class="sticky-right-column-table light-border col no-shadow">
                <template v-slot:body-cell-UseDate="props">
                    <q-td :props="props" style="width: 130px;">
                      <div class="room-item f12 text-grey-6">
                        <span class="q-mr-md">
                          {{ props.row.UseDate }}</span>
                        <span class="q-mr-md"> {{ $t('v102.vehicle.di') }}{{props.row.DayNum}}{{ $t('v102.vehicle.tian') }} </span>
                      </div>
                    </q-td>
                  </template>
              </q-table>
        </div>
          <div class="row justify-between q-py-lg">
            <span>
                <span class="text-grey-6">{{ $t('v102.vehicle.list2.s29') }}：</span>
                <span class="fz16 text-light-blue-6">
                    {{ postMsg.ShouPeiFee }}
                </span>
            </span>
            <span>
                {{ $t('v102.vehicle.list2.s25') }}：
                
                <span class="fz18 text-red"> {{ postMsg.TotalPrice }} </span>
                <span class="fz12 q-pl-sm">{{postMsg.CurrencyCode?postMsg.CurrencyCode:''}}</span>
            </span>
        </div>
        <div class="row">
            <span v-if="postMsg.Remark" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
                <span class="text-grey-6">{{ $t('v102.vehicle.list2.s26') }}：</span>
                {{ postMsg.Remark }}
            </span>
            <span v-if="postMsg.AttentionInfo"  :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
                <span class="text-grey-6">{{ $t('v102.vehicle.list2.s27') }}：</span>
                {{ postMsg.AttentionInfo }}
            </span>
        </div>
        </div>
        <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 'src/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({
            scrollStyle: {} as any,
            loading: false,
            subUnitPrice: 0 as any,
            subStopBusPrice: 0 as any,
            subRoomPrice: 0 as any,
            postMsg: {
            } as any,
            cols: [
                { name: 'UseDate', label: t('v102.vehicle.tatle.th1'), field: (row: any) => row.UseDate, align: 'left' },
                { name: 'UseType', label: t('v102.vehicle.tatle.th3'), field: (row: any) => row.UseTypeName, align: 'left' },
                { name: 'TripInfo', label: t('v102.vehicle.tatle.th4'), field: (row: any) => row.TripInfo, align: 'left' },
                { name: 'UnitPrice', label: t('v102.vehicle.list2.s21'), field: (row: any) => row.UnitPrice, align: 'left' },
                { name: 'StopBusPrice', label: t('v102.vehicle.list2.s22'), field: (row: any) => row.StopBusPrice, align: 'left' },
                { name: 'RoomPrice', label: t('v102.vehicle.list2.s23'), field: (row: any) => row.RoomPrice, align: 'left' }
            ] as any[],
        })
        data.scrollStyle = useScrollModule().scrollStyle
        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();
                        }else{
                            message.errorMsg(r.data.message)
                        }
                    })
                    .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>