<template>
  <div>
    <q-card class="light-shadow q-pa-md bg-white rounded-borders q-mb-md" flat v-for="(x,index) in orders">
      <!-- <div class="row items-center desktop-only">
        <div class="q-mr-md">
          <q-btn :color="search.OrderType == 1 ?'cyan' : (search.OrderType == 2 ?'negative':'positive')" unelevated disable size="sm">
            <template v-if="search.OrderType == 1">{{$t('v102.CharteredBus.baochetype1')}}</template>
            <template v-if="search.OrderType == 2">{{$t('v102.CharteredBus.baochetype2')}}</template>
            <template v-if="search.OrderType == 3">{{$t('v102.CharteredBus.baochetype3')}}</template>
          </q-btn>
        </div>
        <div class="f12 text-grey-6">{{ $t('hotelorder.search.orderNum') }}：{{ x.OrderNo }}</div>
        <div class="q-ml-md">
          <q-btn color="dark" flat size="sm" :label="$t('hotelorder.copy')" v-if="copyId != x.OrderId" @click="setCopyHandler(x)" />
          <q-btn color="cyan" icon="check" outline size="sm" :label="$t('hotelorder.copyed')" v-else></q-btn>
        </div>
        <div class="col text-center f12 text-grey-6">
          <span>{{ $t('v102.ticket.sj') }}：{{ x.SurName }}{{ x.Name }}/{{ x.Mobile }}</span>
        </div>
        <div class="f12 text-grey-6">{{ $t('hotelorder.createTime') }}：{{ x.CreateTime }}</div>
        <div class="q-ml-md f12" :class="[x.typeInfo.Color]">
          <q-icon :name="x.typeInfo.Icon" />
          <span class="q-ml-sm">{{ x.typeInfo.StatusName }}</span>
        </div>
      </div>
      <div class="mobile-only">
        <div class="row justify-between">
          <div class="q-mr-md">
            <q-btn :color="x.MailingState == 1 ? 'cyan' : 'negative'" unelevated disable size="sm" :label="`${x.MailingState == 1 ? $t('hotelorder.orderType.guest') : $t('hotelorder.orderType.tour')}`"></q-btn>
          </div>
          <div class="q-ml-md f12" :class="[x.typeInfo.Color]">
            <q-icon :name="x.typeInfo.Icon" />
            <span class="q-ml-sm">{{ x.typeInfo.StatusName }}</span>
          </div>
        </div>
        <div class="bg-grey-2 rounded-borders q-pa-sm q-mt-md">
          <div class="row items-center justify-between">
            <div class="f12 text-grey-6">{{ $t('hotelorder.search.orderNum') }}：{{ x.OrderNo }}</div>
            <div class="q-ml-md">
              <q-btn color="dark" flat size="sm" :label="$t('hotelorder.copy')" v-if="copyId != x.OrderId" @click="setCopyHandler(x)" />
              <q-btn color="cyan" outline size="sm" :label="$t('hotelorder.copyed')" v-else></q-btn>
            </div>
          </div>
          <div class="f12 text-grey-6">
            <span v-if="x.MailingState">{{ $t('hotelorder.search.contactInfo') }}：{{ x.Name }}({{ x.EName }})/{{ x.ContactPhone }}</span>
          </div>
          <div class="f12 text-grey-6">{{ $t('hotelorder.createTime') }}：{{ x.CreateTime }}</div>
        </div>
      </div> -->

      <div class="q-mt-md row">
        <q-table separator="cell" :hide-bottom="!x.Remark" :pagination="{ rowsPerPage: 100 }" :rows="[x]" bordered :columns="cols" class="sticky-rightrowspan-column-table light-border col no-shadow">
          <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 fz12" color="primary" unelevated
                        :label="$t('v102.vehicle.list.s5')" />
                </span>
                <span @click="cancel(props.row.Id)">
                    <q-btn class="col q-mr-md fz12" color="grey-6" 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 fz12" 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 fz12" 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 fz12" color="primary" unelevated
                        :label="$t('v102.vehicle.list.s10')" />
                </span>
            </q-td>
          </template>
        </q-table>
      </div>

      <!-- <div class="q-mt-md" v-if="x.OrderStatus != 3" :class="{ row: $q.platform.is.desktop, 'column reverse': $q.platform.is.mobile }">
        <div class="pay row text-grey rounded-borders" :class="{ 'bg-grey-2 q-mt-md': $q.platform.is.mobile, col: $q.platform.is.desktop }">
        </div>
        <div class="col desktop-only"></div>
        <div class="rounded-borders bg-grey-2 q-pa-md" :class="{ 'q-mx-md': $q.platform.is.desktop, 'q-mt-md': $q.platform.is.mobile }">
          <div class="row items-center justify-between q-mb-sm q-pb-sm" style="border-bottom: 1px dashed #ddd">
            <div class="f12 text-grey">{{ $t('hotelorder.orderMoney') }}</div>
            <div class="dark q-ml-xl">
              <span class="din text-subtitle1">{{ moneyFormat(x.Money) }}</span>
              <span class="f12">{{ x.CurrencyCode }}</span>
            </div>
          </div>
          <div class="text-right">
            <q-btn dense outline color="accent" size="sm" class="q-mt-sm" :label="$t('hotelorder.payinfo')" @click="ViewPayment"></q-btn>
          </div>
        </div>
        <div class="rounded-borders q-pa-sm justify-between" :class="{ column: $q.platform.is.desktop, 'row items-center': $q.platform.is.mobile, 'bg-green-1': x.OrderStatus != 1, 'bg-grey-2': x.OrderStatus == 1 }">
          <q-list dense v-if="x.OrderStatus == 1" :class="{ 'row items-center justify-between full-width': $q.platform.is.mobile }">
            <q-item class="text-negative" clickable v-close-popup @click="cancelConfirmHandler(x.OrderId)">
              <q-item-section>
                <q-item-label>{{ $t('hotelorder.opera.cancel') }}</q-item-label>
              </q-item-section>
            </q-item>
            <q-item class="text-primary" clickable v-close-popup @click="editOrder(x)">
              <q-item-section>
                <q-item-label>{{ $t('hotelorder.opera.edit') }}</q-item-label>
              </q-item-section>
            </q-item>
            <q-item class="text-positive" clickable v-close-popup>
              <q-item-section>
                <q-item-label>{{ $t('v101.Listofquotation.baojiadan') }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
          <div v-else>
            <div class="f12 text-green-4">{{ $t('hotelorder.payed') }}</div>
            <div class="text-subtitle1 din text-green-14">
              {{ x.Money.toFixed(2) }}
              <span class="text-green-4 f12">{{ $t('unit.jp') }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="x.OrderStatus == 3">
        <div class="q-mt-md q-pa-sm row items-center rounded-borders bg-orange-1" style="border-width: 0 5px; border-style: solid; border-color: #ffb74d">
          <div class="text-subtitle2 text-weight-bolder text-grey-900">{{ $t('v101.cancelRemark') }}：</div>
          <div class="f12 text-grey-600 q-ml-sm col">{{ x.CancelRemark ? x.CancelRemark : $t('v101.selfCancle') }}</div>
          <div class="f12 text-grey-900">{{ x.CancelEmpName }} {{ x.CancelTime }}</div>
        </div>
      </div> -->
    </q-card>
    <q-card class="light-shadow q-pa-md bg-white rounded-borders q-mb-md" v-if="pages.pageCount > 0" flat>
      <q-pagination class="full-width justify-end" v-model="pages.pageIndex" color="primary" :max="pages.pageCount" :input="true" @update:model-value="changePageHandler" />
    </q-card>
    <q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
  </div>
  <div class="text-center q-mt-xl" v-if="(!orders || orders.length == 0) && !loading">
    <svg-icon :size="50" color="nav" icon="General/Clipboard.svg"></svg-icon>
    <div class="q-mt-md f12 text-grey-6">{{ $t('noneData') }}</div>
  </div>
  <!-- 详情 -->
  <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="q-px-lg" style="width: 30vw;">
          <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>
</template>

<script lang="ts">
  import vehiclePopover from '..//vehiclePopover.vue'
import vehicleDetails from '../vehicleDetails.vue'//详情
import { date } from 'quasar'
import { ApiResult } from '../../../@types/enumHelper'
import { useQuasar } from 'quasar'
import HotelService from '../../../api/vehicle'
import message from '../../../utils/message'
import { DirtionmaryHelper } from 'src/config/dictionary'
import { defineComponent, inject, reactive, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  components: { vehicleDetails },
  setup(props) {
    const { t } = useI18n()
    const $q = useQuasar()
    const $router = useRouter()
    const data = reactive({
      showdetails: false,
      cancelshow: false,
      CancelRemark: '',
      Id: 0,
      loading: false,
      loading: false,
      pages: {
        pageIndex: 1,
        pageSize: 12,
        pageCount: 0,
      },
      orders: [] as any[],
      ProductId: {} as any,
      showDetails: false,
      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,
    })

    // if ($q.platform.is.desktop) {
    //   if ($q.screen.gt.md) {
    //     data.pages.PageSize = 12
    //   } else {
    //     data.pages.PageSize = 9
    //   }
    // } else {
    //   data.pages.PageSize = 10
    // }

    const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any
    watch(search, (n, o) => {
      if (data.loading) return
      data.pages.pageIndex = 1
      methods.getList()
    })

    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.getList()
                  } 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.getList()
              } 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.getList()
                  } else {
                      message.errorMsg(r.data.message)
                  }
              })
              .catch(e => {
                  message.errorMsg(e.message)
              })
      },
      mask(val: any) {
          data.Id = val
          $router.push({ path: `/vehicle/addEditVehicle${data.Id ? '/' + data.Id : ''}` })
      },   
      getList() {
        let param = Object.assign(data.pages, search.msg)
        HotelService.vehicleList(param)
          .then(r => {
            if (r.data.resultCode == ApiResult.SUCCESS) {
              data.orders = r.data.data.pageData
              data.pages.pageCount = r.data.data.pageCount
            } 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')
      },
      changePageHandler(n: number) {
        data.pages.pageIndex = n
        methods.getList()
      },
    }
    methods.getList()
    return {
      ...toRefs(data),
      ...methods,
      search
    }
  }
})
</script>

<style></style>
