<template>
    <div class="fix-height-subpage column no-wrap q-pa-md">
        <!-- 表格 -->
        <q-card class="light-shadow q-pa-md bg-white rounded-borders q-mb-md" flat>
            <div class="add">
                <div class="flex">
                    <q-input v-model="pages.UseCompName" @blur="refresh" class="col q-mr-md" reverse-fill-mask dense
                        standout :label="$t('v102.vehicle.list.s1')" />
                    <q-input v-model="pages.UseName" @blur="refresh" class="col q-mr-md" dense reverse-fill-mask
                        standout :label="$t('v102.vehicle.list.s2')" />
                    <q-input v-model="pages.TeamName" @blur="refresh" class="col q-mr-md" dense reverse-fill-mask
                        standout :label="$t('v102.vehicle.list.s3')" />
                    <q-field v-if="$q.platform.is.desktop" clearable v-model="dateRangeFormat"
                        :label="$t('v102.vehicle.list.s4')" standout class="col-2" style="min-width: 190px" dense>
                        <div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
                        <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
                            <q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape
                                @range-end="dateRangeHandler"></q-date>
                        </q-popup-proxy>
                    </q-field>
                </div>
                <div>
                    <q-btn class="col q-mr-md" color="primary" unelevated :label="$t('v102.vehicle.add')"
                        @click="mask(0)" />
                    <q-btn class="col q-mr-md" color="primary" unelevated :label="$t('query')" @click="refresh" />
                </div>
            </div>
            <div class="">
                <q-table v-if="$q.platform.is.desktop" separator="cell" :pagination="pages" dense :rows="hotels"
                    row-key="Id" bordered :columns="cols"
                    class="sticky-rightrowspan-column-table light-border col no-shadow sticky-rightrowspan-column-table2">
                    <template v-slot:body-cell-Id="props">
                        <!--未提交报价，可以修改-->
                        <q-td :prop="props">
                            <span @click="mask(props.row.Id)" v-if="props.row.Status == 0 && props.row.OfferState == 1">
                                <q-btn class="col q-mr-md" color="primary" unelevated
                                    :label="$t('v102.vehicle.list.s5')" />
                            </span>
                            <span @click="cancel(props.row.Id)">
                                <q-btn class="col q-mr-md" color="red" unelevated :label="$t('v102.vehicle.add3')" />
                            </span>
                            <!--申请报价-->
                            <span v-if="props.row.OfferState == 1 && props.row.Status == 0"
                                @click="ApplyTripBus(props.row)">
                                <q-btn class="col q-mr-md" unelevated color="primary"
                                    :label="$t('v102.vehicle.list.s8')" />
                            </span>
                            <!--弹窗显示详细信息-->
                            <span @click="details(props.row.Id)" v-if="props.row.OfferState == 3">
                                <q-btn class="col q-mr-md" color="primary" unelevated
                                    :label="$t('v102.vehicle.list.s9')" />
                            </span>
                            <!--确认报价-->
                            <span v-if="props.row.OfferState == 3 && props.row.Status == 0"
                                @click="sureBusPrice(props.row)">
                                <q-btn class="col q-mr-md" color="primary" unelevated
                                    :label="$t('v102.vehicle.list.s10')" />
                            </span>
                        </q-td>
                    </template>
                    <template v-slot:bottom>
                        <q-pagination class="full-width justify-end" v-model="pages.pageIndex" color="primary"
                            :max="pageCount" :input="true" @update:model-value="changePageHandler" />
                    </template>
                </q-table>
                <!-- 移动 -->
                <q-table hide-header v-else :rows="hotels" grid :columns="cols" row-key="Id"
                    card-class="no-shadow bg-primary text-white col" :pagination="pages" :loading="loading">
                    <template v-slot:body-cell-Id="props">
                        <q-td :prop="props">
                            <span @click="mask(props.row.Id)" v-if="props.row.Status == 0">
                                <q-btn class="col q-mr-md" color="primary" unelevated
                                    :label="$t('v102.vehicle.list.s5')" />
                            </span>
                            <span @click="cancel(props.row.Id)">
                                <q-btn color="red" unelevated :label="$t('v102.vehicle.add3')" />
                            </span>
                            <!--申请报价-->
                            <span v-if="props.row.OfferState == 1 && props.row.Status == 0"
                                @click="ApplyTripBus(props.row)">
                                <q-btn class="col q-mr-md" color="primary" unelevated
                                    :label="$t('v102.vehicle.list.s8')" />
                            </span>
                        </q-td>
                    </template>
                    <template v-slot:bottom>
                        <q-pagination class="full-width justify-end" v-model="pages.pageIndex" color="primary"
                            :max="pageCount" :input="true" @update:model-value="changePageHandler" />
                    </template>
                </q-table>
            </div>
        </q-card>
        <!-- 编辑 -->
        <q-dialog v-model="showPriceList">
            <vehicle-popover @close="close" :Id='Id' @refresh="refresh">
            </vehicle-popover>
        </q-dialog>
        <!-- 详情 -->
        <q-dialog v-model="showdetails">
            <vehicle-details @close="close" :Id='Id' @refresh="refresh">
            </vehicle-details>
        </q-dialog>
        <!-- 取消弹窗 -->
        <q-dialog v-model="cancelshow">
            <q-card flat class="" style="width: 40vw;">
                <q-card-section class="q-pa-sm">
                    <div class="text-h6">{{ $t('v102.vehicle.add3') }}</div>
                </q-card-section>
                <q-card-section>
                    <q-input v-model="CancelRemark" :label="$t('v102.vehicle.add4')" :rows="3" filled type="textarea" />
                </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="cancelshow = true"
                        v-close-popup />
                    <q-btn unelevated dense color="accent q-px-md" :label="$t('v102.vehicle.add5')"
                        @click="cancellations" />
                </q-card-actions>
            </q-card>
        </q-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, provide, onMounted, inject, watch, onBeforeUnmount, computed } from 'vue'
import useMetaModule from '../../module/meta/metaModule'
import { useI18n } from 'vue-i18n'
import { useQuasar } from 'quasar'
import { date } from 'quasar'
import vehiclePopover from '../../components/vehicle/vehiclePopover.vue'
import vehicleDetails from '../../components/vehicle/vehicleDetails.vue'//详情
import { DirtionmaryHelper } from '../../config/dictionary'
import useScrollModule from 'src/module/scrollbar/scrollModule'
import HotelService from '../../api/vehicle'
import message from 'src/utils/message'
import { ApiResult } from 'src/@types/enumHelper'
import { useRouter } from 'vue-router'
export default defineComponent({
    components: { vehiclePopover, vehicleDetails },
    setup() {
        const qDateProxy = ref(null) as any
        const { t } = useI18n()
        const $q = useQuasar()
        const $router = useRouter()
        let { setTitle } = useMetaModule()
        const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
        pageTitle.value = t('v102.vehicle.pageTitle')
        setTitle(pageTitle.value)
        const data = reactive({
            showdetails: false,
            cancelshow: false,
            CancelRemark: '',
            Id: 0,
            loading: false,
            showPriceList: false,
            pageTitle: '44' as (string | undefined),
            pages: {
                pageIndex: 1,
                pageSize: 12,
                rowsPerPage: 12,
                UseCompName: '',
                UseName: '',
                TeamName: '',
                StartTime: "",
                EndTime: '',
            },
            dateRangeFormat: '',
            dateRange: {} as any,
            pageCount: 0,
            hotels: [

            ] as Array<any>,
            cols: [
                { name: 'UseCompName', label: t('v102.vehicle.title1'), field: (row: any) => row.UseCompName, align: 'left' },
                { name: 'UseName', label: t('v102.vehicle.title2'), field: (row: any) => row.UseName, align: 'left' },
                { name: 'PickUpInfo', label: t('v102.vehicle.title3'), field: (row: any) => row.PickUpInfo, align: 'left' },
                { name: 'GoFlightInfo', label: t('v102.vehicle.title4'), field: (row: any) => row.GoFlightInfo, align: 'left' },
                { name: 'BackFlightInfo', label: t('v102.vehicle.title5'), field: (row: any) => row.BackFlightInfo, align: 'left' },
                { name: 'PeopleNum', label: t('v102.vehicle.title6'), field: (row: any) => row.PeopleNum, align: 'left' },
                { name: 'StartDate', label: t('v102.vehicle.title7'), field: (row: any) => row.StartDate, align: 'left' },
                { name: 'UseDayNum', label: t('v102.vehicle.title8'), field: (row: any) => row.UseDayNum, align: 'left' },
                { name: 'BusTypeName', label: t('v102.vehicle.title9'), field: (row: any) => row.GuideInfo, align: 'left' },
                { name: 'UseName', label: t('v102.vehicle.title10'), field: (row: any) => row.GuideInfo, align: 'left' },
                { name: 'TeamName', label: t('v102.vehicle.title11'), field: (row: any) => row.TeamName, align: 'left' },
                { name: 'CreateDate', label: t('v102.vehicle.title12'), field: (row: any) => row.CreateDate, align: 'left' },
                { name: 'OfferStateName', label: t('v102.vehicle.list.s6'), field: (row: any) => row.OfferStateName, align: 'left' },
                { name: 'IsSure', label: t('v102.vehicle.list.s10'), field: (row: any) => row.IsSure, align: 'left' },
                { name: 'Id', label: t('hotel.addRoomBtn'), field: (row: any) => row.Id, align: 'left' },
            ] as any,

        })
        // data.dateRange.to = date.formatDate(date.addToDate(new Date(), { days: 9 }), 'YYYY/MM/DD')
        // data.dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 8 }), 'YYYY/MM/DD')
        // data.dateRangeFormat = `${data.dateRange.from} - ${data.dateRange.to}`
        // data.pages.StartTime = data.dateRange.from
        // data.pages.EndTime = data.dateRange.to
        // data.pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY)
        const methods = {
            // 详情
            details(val: any) {
                data.Id = val
                data.showdetails = true
            },
            //申请报价
            ApplyTripBus(item: any) {
                HotelService.applyBusPricelation(item.Id)
                    .then(r => {
                        if (r.data.resultCode == ApiResult.SUCCESS) {
                            methods.refresh()
                        } else {
                            message.errorMsg(r.data.message)
                        }
                    })
                    .catch(e => {
                        message.errorMsg(e.message)
                    })
            },
            //确认报价
            sureBusPrice(item: any) {
                HotelService.sureBusPricelation(item.Id).then(r => {
                    if (r.data.resultCode == ApiResult.SUCCESS) {
                        methods.refresh()
                    } else {
                        message.errorMsg(r.data.message)
                    }
                }).catch(e => {
                    message.errorMsg(e.message)
                })
            },
            cancel(item: any) {
                data.cancelshow = true
                data.Id = item
            },
            // 取消用车
            cancellations() {
                HotelService.cancellation(data.Id, data.CancelRemark)
                    .then(r => {
                        if (r.data.resultCode == ApiResult.SUCCESS) {
                            data.cancelshow = false
                            methods.refresh()
                        } else {
                            message.errorMsg(r.data.message)
                        }
                    })
                    .catch(e => {
                        message.errorMsg(e.message)
                    })
            },
            // 获取列表数据
            initHotel() {
                HotelService.vehicleList(data.pages)
                    .then(r => {
                        if (r.data.resultCode == ApiResult.SUCCESS) {
                            data.hotels = r.data.data.pageData
                            data.pageCount = r.data.data.pageCount
                        } else {
                            message.errorMsg(r.data.message)
                        }
                    })
                    .catch(e => {
                        message.errorMsg(e.message)
                    })
            },
            // 获取时间选择
            dateRangeHandler(e: any) {
                data.pages.StartTime = `${e.from.year}-${e.from.month}-${e.from.day}`
                data.pages.EndTime = `${e.to.year}-${e.to.month}-${e.to.day} `
                data.dateRangeFormat = `${data.pages.StartTime} - ${data.pages.EndTime} `
                if (qDateProxy.value) {
                    qDateProxy.value.hide()
                    // methods.refresh()
                }
            },
            close() {
                data.showdetails = false
                data.showPriceList = false
            },
            // 刷新
            refresh() {
                // console.log('444')
                data.pages.pageIndex = 1
                methods.initHotel()
                data.showdetails = false
                data.showPriceList = false
            },
            // 翻页
            changePageHandler(n: any) {
                console.log(n)
                data.pages.pageIndex = n
                methods.initHotel()
            },
            mask(val: any) {
                data.Id = val
                $router.push({ path:`/vehicle/addEditVehicle/1${data.Id?'/'+data.Id:''}`})
                // data.showPriceList = true
            }
        }
        onMounted(() => {
            methods.initHotel()
        })
        return { ...toRefs(data), ...methods, qDateProxy }
    },
})
</script>
<style scoped>
.date-box :deep(.q-field__control) {
    height: 20px;
}

.add {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.shou {
    cursor: pointer;
}

.driver {
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px solid;
    margin-left: 50px;
}

.title {
    display: flex;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 10px;
}

.flex {
    display: flex;
    align-items: center;
}

th {
    padding: 10px 10px;
    font-size: 14px;
}

.table-title {
    font-size: 14px;
}

.sticky-rightrowspan-column-table2 th:last-child,
.sticky-rightrowspan-column-table2 tbody tr td {
    position: sticky !important;
    right: 0 !important;
    z-index: 1 !important;
    box-shadow: rgba(0, 0, 0, 0.05) -2px 0px 0px !important;
}
</style>
