<template>
    <div class="fix-height-subpage row justify-center q-pa-md no-wrap">
        <q-card flat class="" style="width: 60vw;">
            <q-card-section>
                <div class="flex2">
                    <q-input style="width: 172px;" v-if="$q.platform.is.desktop" class="q-mr-md"
                        v-model="search.UseCompName" dense standout :label="$t('v102.vehicle.title1')" />
                    <div class="flex2">
                        <q-input class="q-mr-md" v-model="search.UseName" dense standout
                            :label="$t('v102.vehicle.title2')" />
                    </div>
                    <div class="flex2" style="">
                        <q-input class="q-mr-md" v-model="search.PickUpInfo" dense standout
                            :label="$t('v102.vehicle.title3')" />
                    </div>
                    <div class="flex2">
                        <q-input class="q-mr-md" style='' v-model="search.GoFlightInfo" dense standout
                            :label="$t('v102.vehicle.title4')" />
                    </div>
                    <div class="flex2">
                        <q-input class="q-mr-md" style='' v-model="search.BackFlightInfo" dense standout
                            :label="$t('v102.vehicle.title5')" />
                    </div>
                    <div class="flex2">
                        <q-input v-model="search.PeopleNum" style="width: 172px" class="q-mr-md" dense mask="#.##"
                            reverse-fill-mask ftype="text" standout :label="$t('v102.vehicle.title6')" />
                    </div>
                    <div class="q-my-md" style="margin-right: 16px;">
                        <q-field stack-label :label="$t('v102.vehicle.title7')" standout class="col-2"
                            style="min-width: 177px" dense>
                            <div class="self-center full-width no-outline" tabindex="0">{{ search.StartDate }}</div>
                            <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>
                    </div>
                    <q-input @blur="checkInteger()" v-model="search.UseDayNum" class="q-mr-md" dense mask="#.##"
                        reverse-fill-mask ftype="text" standout :label="$t('v102.vehicle.title8')" />
                    <q-input class="q-mr-md" style='' v-model="search.GuideInfo" dense standout
                        :label="$t('v102.vehicle.title10')" />
                    <q-input class="q-mr-md" style='' v-model="search.TeamName" dense standout
                        :label="$t('v102.vehicle.title11')" />
                    <div class="q-my-md" style="margin-top: 0px;">
                        <q-select style="width: 170px;" v-model="search.BusType" dense :options="vehicletop" emit-value
                            option-label="Name" option-value="Id" map-options clearable
                            :label="$t('v102.vehicle.title13')" standout />
                    </div>
                </div>
                <!-- 表格 -->
                <div style="max-height:600px;overflow: auto;" v-if="search.details && search.details.length > 0">
                    <table width="100%" height='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="10%" align="center" class="td-title">{{ $t('v102.vehicle.tatle.th2') }}</th>
                            <th width="30%" align="center" class="td-title">{{ $t('v102.vehicle.tatle.th3') }}</th>
                            <th width="45%" align="center" class="td-title">{{ $t('v102.vehicle.tatle.th4') }}</th>
                        </tr>
                        <template v-for="(item, i) in search.details" :key="i">
                            <tr>
                                <td>
                                    {{ item.UseDate }}
                                </td>
                                <td>
                                    DAY{{ item.DayNum }}
                                </td>
                                <td>
                                    <div class="q-my-md">
                                        <q-select style="width: 180px;" v-model="item.UseType" dense
                                            :options="listvehicle" emit-value option-label="Name" option-value="Id"
                                            map-options clearable :label="$t('v102.vehicle.tatle.th3')" standout />
                                    </div>
                                    <!-- 用车时间 -->
                                    <div v-if="item.UseType == 3 || item.UseType == 4">
                                        <q-input dense standout v-model="item.UseTime" mask="time"
                                            :label="$t('v102.vehicle.title14')" style="width:180px;">
                                            <template v-slot:append>
                                                <q-icon name="access_time" class="cursor-pointer">
                                                    <q-popup-proxy transition-show="scale" transition-hide="scale">
                                                        <q-time v-model="item.UseTime">
                                                            <div class="row items-center justify-end">
                                                                <q-btn v-close-popup :label="$t('v102.vehicle.add5')"
                                                                    color="primary" flat />
                                                            </div>
                                                        </q-time>
                                                    </q-popup-proxy>
                                                </q-icon>
                                            </template>
                                        </q-input>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <q-input class="q-mr-md" style='' v-model="item.TripInfo" dense standout
                                            :label="$t('v102.vehicle.tatle.th4')" />
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </table>
                </div>

                <!-- 表格 -->
            </q-card-section>
            <q-card-actions align="right" class="bg-white">
                <q-btn flat dense color="dark" :label="$t('v102.vehicle.close')" class="q-mr-sm" @click="down"
                    v-close-popup />
                <q-btn unelevated dense color="accent q-pa-lg" :label="$t('v102.to.m.s')" @click="join" />
            </q-card-actions>
        </q-card>
    </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 { 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({
            loading: false,
            search: {
                Id: 0,
                UseCompName: "",//订车单位
                UseName: "",//订车人
                PickUpInfo: "",//接机信息
                GoFlightInfo: "",//去程航班
                BackFlightInfo: "",//回程航班
                PeopleNum: '',//用车人数
                UseDayNum: null,//行程天数
                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 = r.data.data.PeopleNum
                            data.search.UseDayNum = 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
                            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: null as any,//用车类型（接口返下拉列表）
                                    UseTime: '',//接送机时间
                                    TripInfo: "",//行程信息
                                })
                            })
                            data.search.details = details2
                        }
                    }
                }
                // console.log('时间差2', details2)
            },
            // 关闭
            down() {
                $router.push({ path: `/vehicle/order/0` })
            },
            // 确定
            join() {
                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: 0 }), 'YYYY/MM/DD')
            },
        }
        return { ...toRefs(data), ...methods, qDateProxy }
    }

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

}

.td-title {
    font-size: 12px;
    font-weight: 400;
    color: #a8a8b3;
}
</style>