<template>
    <q-card flat class="" style="width: 60vw;">
        <q-card-section class="q-pa-sm">
            <div class="text-h6" v-if='search.Id == 0'>{{ $t('v102.vehicle.add') }}</div>
            <div class="text-h6" v-if='search.Id != 0'>{{ $t('v102.vehicle.add2') }}</div>
        </q-card-section>
        <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">
                    <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>
            <!-- 表格 -->
            <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="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>
            <!-- 表格 -->
        </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-btn unelevated dense color="accent q-px-md" :label="$t('v102.to.m.s')" @click="join" />
        </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,
            search: {
                Id: props.Id,
                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
        })
        // 获取车型下拉
        onMounted(() => {
            methods.vehicleinit()
            methods.vehicleList()
            if (props.Id && props.Id > 0) {
                methods.details()
            }
        })
        const methods = {
            // 获取修改详情
            details() {
                HotelService.VehicleDetails(props.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
                        }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: null as any,//用车类型（接口返下拉列表）
                                    UseTime: '',//接送机时间
                                    TripInfo: "",//行程信息
                                })
                            })
                            data.search.details = details2
                        }
                    }
                }
                // console.log('时间差2', details2)
            },
            // 关闭
            down() {
                context.emit('close')
            },
            // 确定
            join() {
                HotelService.vehicletripbus(data.search)
                    .then(r => {
                        if (r.data.resultCode == ApiResult.SUCCESS) {
                            context.emit('refresh')
                        } else {
                            message.errorMsg(r.data.message)
                        }
                    })
                    .catch(e => {
                        message.errorMsg(e.message)
                        data.loading = false
                    })

            },
            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>