<template>
    <div class="fix-height-subpage column no-wrap">
        <div class="row q-pa-md" style="min-width: 375px; margin: 0 auto" :style="{ width: $q.screen.lt.xl ? '100%' : '1320px' }" :class="{'row':$q.screen.width>=1200 && $q.platform.is.desktop,'column':$q.screen.width<1200 || $q.platform.is.mobile}">
          <div class="col">
            <q-card class="q-pa-md" flat>
              <div class="text-h6 q-mb-md">{{$t('v102.vehicle.tuanduixinxi')}}</div>
              <div class="row q-pb-md q-mb-md" style="border-bottom: 1px solid #f1f1f1">
                <div class="col">
                  <div class="fz14 text-grey-600">
                    {{ $t('v102.CharteredBus.ordertip') }}
                  </div>
                </div>
              </div>
              <div>
                  <div :class="{'row items-center':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
                    <q-input dense standout v-model="search.UseCompName" class="col" :class="{'q-mr-md':$q.platform.is.desktop}" :placeholder="$t('v102.vehicle.title1')"  :rules="[ val => val && val.length > 0 || ' ']" ref="guestUseCompName"/>
                    <q-input dense standout v-model="search.UseName" class="col" :class="{'q-mr-md':$q.platform.is.desktop}"  :placeholder="$t('v102.vehicle.title2')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestUseName"/>
                    <q-input dense standout v-model="search.PickUpInfo" class="col" :class="{'q-mr-md':$q.platform.is.desktop}"  :placeholder="$t('v102.vehicle.title3')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestPickUpInfo"/>
                    <q-input dense standout v-model="search.GoFlightInfo" class="col"  :placeholder="$t('v102.vehicle.title4')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestGoFlightInfo"/>
                  </div>
                  <div :class="{'row items-center':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
                    <q-input dense standout v-model="search.BackFlightInfo" class="col" :class="{'q-mr-md':$q.platform.is.desktop}" :placeholder="$t('v102.vehicle.title5')"  :rules="[ val => val && val.length > 0 || ' ']" ref="guestBackFlightInfo"/>
                    <q-input type="number" dense standout v-model="search.PeopleNum" class="col" :class="{'q-mr-md':$q.platform.is.desktop}" :placeholder="$t('v102.vehicle.title6')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestPeopleNum"/>
                    <q-field :class="{'q-mr-md':$q.platform.is.desktop}" standout :model-value="search.StartDate" class="col height text-dark cursor-pointer q-pb-md" ref="guestStartDate">
                    <template v-slot:control>
                        <div class="self-center full-width no-outline" tabindex="0">
                        <template v-if="search.StartDate">{{search.StartDate}}</template>
                        <span v-else class="text-grey-6">{{$t('v102.vehicle.title7') }}</span>
                        </div>
                    </template>
                    <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
                        <q-date v-model="search.StartDate" :options="optionsFn" mask="YYYY-MM-DD"
                            @update:model-value="dateRangeHandler">
                        </q-date>
                    </q-popup-proxy>
                    </q-field>
                    <q-input type="number" dense standout v-model="search.UseDayNum" class="col"  :placeholder="$t('v102.vehicle.title8')" :rules="[ val => val && val.length > 0 || ' ']" @update:model-value="checkInteger" ref="guestUseDayNum"/>
                  </div>
                  <div :class="{'row items-center':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
                    <q-input dense standout v-model="search.GuideInfo" class="col" :class="{'q-mr-md':$q.platform.is.desktop}" :placeholder="$t('v102.vehicle.title1')"  :rules="[ val => val && val.length > 0 || ' ']" ref="guestGuideInfo"/>
                    <q-input dense standout v-model="search.TeamName" class="col" :class="{'q-mr-md':$q.platform.is.desktop}"  :placeholder="$t('v102.vehicle.title2')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestTeamName"/>
                    <q-select class="col q-pb-md" :class="{'q-mr-md':$q.platform.is.desktop}"  unelevated v-model="search.BusType" dense :options="vehicletop" emit-value option-label="Name" option-value="Id" map-options :label="$t('v102.vehicle.title13')" standout ref="guestUseBusType">
                    </q-select>
                    <div class="col"></div>
                  </div>
              </div>
            </q-card>
    
            <q-card class="q-pa-md q-mt-lg" flat>
              <div>
                <div class="text-h6 q-mb-md">{{ $t('v102.vehicle.dindanxinxi') }}</div>
                <template v-if="search.details.length>0">
                <div class="row items-center q-mt-md text-grey-600 q-mb-md" v-if="$q.platform.is.desktop">
                    <div class="col q-mr-md">{{ $t('v102.vehicle.tatle.th1') }}</div>
                    <div class="col q-mr-md">{{ $t('v102.vehicle.tatle.th2') }}</div>
                    <div class="col q-mr-md">{{ $t('v102.vehicle.tatle.th3') }}</div>
                    <div class="col">{{ $t('v102.vehicle.tatle.th4') }}</div>
                  </div>
                  
                  <div v-for="(x,index) in search.details" style="border-top: 1px dashed #eee" :class="{'row items-center':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
                        <div class="col col" :class="{'q-mr-md':$q.platform.is.desktop}">
                            {{x.UseDate}}
                        </div>
                        <div class="col col" :class="{'q-mr-md':$q.platform.is.desktop}">
                            {{x.DayNum}}
                        </div>
                        <q-select class="col" :class="{'q-mr-md':$q.platform.is.desktop}"  unelevated v-model="x.UseType" dense :options="listvehicle" emit-value option-label="Name" option-value="Id" map-options :label="$t('v102.vehicle.title9')" standout ref="guestUseType">
                        </q-select>
                        <q-input dense standout v-model="x.TripInfo" class="col q-mt-md"  :placeholder="$t('v102.CharteredBus.sjcp.c9')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestTripInfo"/>
                  </div>
                </template>
                <div v-else class="col row justify-center items-center q-pa-md">
                    <span class="text-center text-grey-600 q-py-lg">{{ $t('v102.vehicle.nt') }}</span>
                </div>
                <!-- <div class="q-mt-md">
                  <q-input v-model="search.Remark" standout autogrow :label="$t('v102.ticket.or') " />
                </div> -->
              </div>
            </q-card>
    
          </div>
    
          <div class="" :class="{'q-ml-lg':!($q.screen.width<1200 || $q.platform.is.mobile),'q-mt-lg':($q.screen.width<1200 || $q.platform.is.mobile)}">
            <div class="rounded-borders bg-white q-pa-md" style="width: 300px" :style="{'width':($q.screen.width<1200 || $q.platform.is.mobile)?'100%':'300px'}">
              <div class="text-h6 text-grey-900">{{ $t('v102.vehicle.ms') }}</div>
              <div class="q-pt-md q-mb-lg" style="border-top: 1px dashed #eee">
                <div v-if="isCheck">
                  <template v-for="x in search.details">
                    <div class="row items-center q-mt-md">
                      <q-badge color="grey-3" style="padding: 5px 8px" text-color="info" :label="`${x.UseDate}${x.UseType&&listvehicle.length>0&&listvehicle.filter(y => y.Id==x.UseType)[0].Name}`" />
                      <div class="col f12 text-right">
                        {{ $t('v102.vehicle.di') }}{{x.DayNum}}{{ $t('v102.vehicle.tian') }}
                      </div>
                    </div>
                  </template>
                </div>
                <div v-else class="text-center text-grey-600 q-py-lg">{{ $t('v102.vehicle.nt') }}</div>
              </div>
              <div class="q-pt-md q-mb-lg text-right" style="border-top: 1px dashed #eee">
                <span class="f12 text-dark q-mr-md">
                  {{ $t('v102.vehicle.ds') }}：
                </span>
                <span class="text-h6 text-negative">
                  {{ search.details.length }}
                </span>
              </div>
              <div class="text-right">
                <q-btn color="primary" unelevated class="q-px-lg" :disable="!isCheck" :label="`${!search.Id?$t('v102.ticket.sb'):$t('v102.CharteredBus.bianji')}`" @click="submit"/>
              </div>
            </div>
          </div>
    
        </div>
      </div>
</template>
<script lang="ts">
import useMetaModule from '../../module/meta/metaModule'
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'
import { currentRouter } from 'src/router'
import { useRouter } from 'vue-router'
export default defineComponent({
    // props: {
    //     Id: {
    //         type: Number,
    //         default: 0,
    //         require: true
    //     }
    // },
    setup(props, context) {
        const $router = useRouter()
        const qDateProxy = ref(null) as any
        const guestUseCompName = ref(null) as any
        const guestUseName = ref(null) as any
        const guestPickUpInfo = ref(null) as any
        const guestGoFlightInfo = ref(null) as any
        const guestBackFlightInfo = ref(null) as any
        const guestPeopleNum = ref(null) as any
        const guestStartDate = ref(null) as any
        const guestUseDayNum = ref(null) as any
        const guestGuideInfo = ref(null) as any
        const guestTeamName = ref(null) as any
        const guestUseBusType = ref(null) as any
        const guestUseType = ref(null) as any
        const guestTripInfo = ref(null) as any


        const { t } = useI18n()
        let { setTitle } = useMetaModule()
        const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
        pageTitle.value = t('v102.vehicle.pageTitle2')
        setTitle(pageTitle.value)
        const data = reactive({
            isCheck: false,
            timeData: null,
            loading: false,
            carTypes: [] as any,
            search: {
                Id: 0,
                UseCompName: "",//订车单位
                UseName: "",//订车人
                PickUpInfo: "",//接机信息
                GoFlightInfo: "",//去程航班
                BackFlightInfo: "",//回程航班
                PeopleNum: null as Number,//用车人数
                UseDayNum: null as Number,//行程天数
                StartDate: "",//开始日期
                BusType: null,//用车类型(接口返下拉列表)
                GuideInfo: "",//导游信息
                TeamName: "",//团队信息
                details: [
                    // {
                    //     DayNum: null,//第几天
                    //     UseDate: "",//日期
                    //     UseType: null,//用车类型（接口返下拉列表）
                    //     TripInfo: "",//行程信息
                    // }
                ] as Array<any>
            },
            vehicletop: [],//上面车辆
            listvehicle: [],//车辆类型
            OpenTime: '',
            dateRangeFormat: '',
            h: {} as any,
            scrollStyle: {} as any,
            pages: ''
        })
        if (currentRouter.currentRoute && currentRouter.currentRoute.value.params.Id) {
            data.search.Id = currentRouter.currentRoute.value.params.Id
        }

        // data.pages = currentRouter.currentRoute.value.params.pages
        // 获取车型下拉
        onMounted(() => {
            methods.vehicleinit()
            methods.vehicleList()
            if (data.search.Id && data.search.Id > 0) {
                methods.details()
            }
        })
        const methods = {
            // 获取修改详情
            details() {
                HotelService.VehicleDetails(data.search.Id)
                    .then(r => {
                        if (r.data.resultCode == ApiResult.SUCCESS) {
                            data.search.UseCompName = r.data.data.UseCompName
                            data.search.UseName = r.data.data.UseName
                            data.search.PickUpInfo = r.data.data.PickUpInfo
                            data.search.GoFlightInfo = r.data.data.GoFlightInfo
                            data.search.BackFlightInfo = r.data.data.BackFlightInfo
                            data.search.PeopleNum = String(r.data.data.PeopleNum)
                            data.search.UseDayNum = String(r.data.data.UseDayNum)
                            data.search.StartDate = r.data.data.StartDate.slice(0, 10)
                            data.search.BusType = r.data.data.BusType
                            data.search.GuideInfo = r.data.data.GuideInfo
                            data.search.TeamName = r.data.data.TeamName
                            data.search.details = r.data.data.details
                            data.isCheck = true
                        }else{
                            message.errorMsg(r.data.message)
                        }
                    })
                    .catch(e => {
                        message.errorMsg(e.message)
                    })
            },
            // 获取车型下拉
            vehicleinit() {
                HotelService.TypeVehicle({})
                    .then(r => {
                        if (r.data.resultCode == ApiResult.SUCCESS) {
                            data.vehicletop = r.data.data
                        } else {
                            message.errorMsg(r.data.message)
                        }
                    })
                    .catch(e => {
                        message.errorMsg(e.message)
                    })
            },
            // 获取列表用车类型
            vehicleList() {
                HotelService.listTypeVehicle({})
                    .then(r => {
                        if (r.data.resultCode == ApiResult.SUCCESS) {
                            data.listvehicle = r.data.data
                        } else {
                            message.errorMsg(r.data.message)
                        }
                    })
                    .catch(e => {
                        message.errorMsg(e.message)
                    })
            },
            // 获取时间
            getDay(set: any, day: any) {
                var today = new Date(set);
                var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
                today.setTime(targetday_milliseconds); //注意，这行是关键代码

                var tYear = today.getFullYear();
                var tMonth = today.getMonth();
                var tDate = today.getDate();
                tMonth = methods.doHandleMonth(tMonth + 1);
                tDate = methods.doHandleMonth(tDate);
                return tYear + "-" + tMonth + "-" + tDate;
            },
            doHandleMonth(month: any) {
                var m = month;
                if (month.toString().length == 1) {
                    m = "0" + month;
                }
                return m;
            },
            // 时间计算
            getDiffDate(start: any, end: any) {
                const startTime = methods.getDate(start);
                const endTime = methods.getDate(end);
                const dateArr = [];
                while ((endTime.getTime() - startTime.getTime()) > 0) {
                    const year = startTime.getFullYear();
                    const month = startTime.getMonth().toString().length === 1 ? '0' + (parseInt(startTime.getMonth().toString(), 10) + 1) : (startTime.getMonth() + 1);
                    const day = startTime.getDate().toString().length === 1 ? '0' + startTime.getDate() : startTime.getDate();
                    dateArr.push(year + '-' + month + '-' + day);
                    startTime.setDate(startTime.getDate() + 1);
                }
                return dateArr;
            },
            getDate(datestr: any) {
                const temp = datestr.split('-');
                if (temp[1] === '01') {
                    temp[0] = parseInt(temp[0], 10) - 1;
                    temp[1] = '12';
                } else {
                    temp[1] = parseInt(temp[1], 10) - 1;
                }
                const date = new Date(temp[0], temp[1], temp[2]);
                return date;
            },
            // 点击时间选项
            dateRangeHandler(e: any) {
                if (qDateProxy.value) qDateProxy.value.hide()
                methods.checkInteger()
            },
            // 测试
            // 天数失去焦点时间
            checkInteger() {
                let details2 = [] as any
                let timelist = [] as any
                if (data.search.UseDayNum && data.search.UseDayNum > 0) {
                    let list = methods.getDay(data.search.StartDate, data.search.UseDayNum)
                    if (list) {
                        timelist = methods.getDiffDate(data.search.StartDate, list)
                        if (timelist && timelist.length > 0) {
                            timelist.forEach((item: any, i: any) => {
                                details2.push({
                                    DayNum: i + 1,
                                    UseDate: item,//日期
                                    UseType: '' as any,//用车类型（接口返下拉列表）
                                    // UseTime: '',//接送机时间
                                    TripInfo: "",//行程信息
                                })
                            })
                            data.search.details = details2
                        }
                    }
                }
                if(data.search.details.length>0){
                    data.isCheck = true
                }
                // console.log('时间差2', details2)
            },
            // 关闭
            down() {
                $router.push({ path: `/vehicle/order/0` })
            },
            // 确定
            submit() {
                let flag = false
                flag = !guestUseCompName.value.hasError && !guestUseName.value.hasError && !guestPickUpInfo.value.hasError && !guestGoFlightInfo.value.hasError && !guestBackFlightInfo.value.hasError && !guestPeopleNum.value.hasError && !guestStartDate.value.hasError && !guestUseDayNum.value.hasError && !guestGuideInfo.value.hasError && !guestTeamName.value.hasError && !guestUseBusType.value.hasError && !guestUseType.value.hasError && !guestTripInfo.value.hasError
                if(!flag) return
                HotelService.vehicletripbus(data.search)
                    .then(r => {
                        if (r.data.resultCode == ApiResult.SUCCESS) {
                            context.emit('refresh')
                            $router.push({ path: '/vehicle/order' })
                        } else {
                            message.errorMsg(r.data.message)
                        }
                    })
                    .catch(e => {
                        message.errorMsg(e.message)
                    })

            },
            optionsFn(cd: any) {
                return cd >= date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
            },
        }
        return { ...toRefs(data), ...methods, 
            qDateProxy,
            guestUseCompName,
            guestUseName,
            guestPickUpInfo,
            guestGoFlightInfo,
            guestBackFlightInfo,
            guestPeopleNum,
            guestStartDate,
            guestUseDayNum,
            guestGuideInfo,
            guestTeamName,
            guestUseBusType,
            guestUseType,
            guestTripInfo,
        }
    }

})
</script>
<style scoped>
.flex2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

}

.td-title {
    font-size: 12px;
    font-weight: 400;
    color: #a8a8b3;
}
:deep(.height.q-field--auto-height .q-field__control){
    min-height: 40px !important;
}
:deep(.height.q-field--auto-height .q-field__native){
    min-height: 40px !important;
}
</style>