<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="negative" unelevated disable size="sm">
            {{$t('v102.vehicle.travelvehicle')}}
          </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.Id" @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.UseCompName }}/{{
            x.UseName
          }}</span>
        </div>
        <div class="f12 text-grey-6">{{ $t('hotelorder.createTime') }}：{{ x.CreateDate }}</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="negative" unelevated disable size="sm" :label="$t('v102.vehicle.travelvehicle')"></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.Id" @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 ></span>
          </div>
          <div class="f12 text-grey-6">{{ $t('hotelorder.createTime') }}：{{ x.CreateTime }}</div>
        </div>
      </div>

      <div class="q-mt-md row">
        <!-- sticky-rightrowspan-column-table -->
        <q-table separator="cell" :hide-bottom="!x.CreateRemark" :pagination="{ rowsPerPage: 100 }" :rows="[x]" bordered :columns="cols" class="sticky-rightrowspan-column-table light-border col no-shadow">
          <template v-slot:body-cell-UseCompName="props">
            <q-th :props="props">
              <div>
                <div class="ellipsis fz13">{{ props.row.UseCompName }}</div>
                <div class="fz12 text-grey-6">{{ props.row.UseName }}</div>
                <q-tooltip>{{ props.row.UseCompName + props.row.UseName }}</q-tooltip>
              </div>
            </q-th>
          </template>
          <template v-slot:body-cell-PickUpInfo="props">
            <q-th :props="props">
              <div class="fz13 text-grey-6">
                <div>{{$t('v102.vehicle.title4')}}: <span class="text-dark q-pl-sm">{{ props.row.GoFlightInfo }}</span> </div>
                <div class="q-py-xs">{{$t('v102.vehicle.title5')}}: <span class="text-dark q-pl-sm">{{ props.row.BackFlightInfo }}</span> </div>
                <div>{{$t('v102.vehicle.title3')}}: <span class="text-dark q-pl-sm">{{ props.row.PickUpInfo }}</span></div>
              </div>
            </q-th>
          </template>
          <template v-slot:body-cell-UseDayNum="props">
            <q-td :props="props">
              <div class="room-item f12 text-grey-6" v-for="x in props.row.DetailList">
                <span class="q-mr-md">
                  <!-- {{ $t('v102.vehicle.tatle.th1') }}： -->
                  {{ x.UseDate }}</span>
                <span class="q-mr-md"> {{ $t('v102.vehicle.di') }}{{x.DayNum}}{{ $t('v102.vehicle.tian') }} </span>
                <span class="q-mr-md"> 
                  <!-- {{ $t('v102.vehicle.tatle.th3') }}: -->
                   {{ x.UseTypeName }} </span>
                <span class="q-mr-md">{{ $t('v102.vehicle.tatle.th4') }}: {{x.TripInfo}}</span>
                <span class="q-mr-md" v-if="x.UnitPrice>0">{{ $t('v102.vehicle.list2.s21') }}: {{x.UnitPrice}}</span>
                <span class="q-mr-md" v-if="x.StopBusPrice>0">{{ $t('v102.vehicle.list2.s22') }}: {{x.StopBusPrice}}</span>
                <span class="q-mr-md" v-if="x.RoomPrice>0">{{ $t('v102.vehicle.list2.s23') }}: {{x.RoomPrice}}</span>
                <span class="q-mr-md"> {{ $t('hotelorder.xj') }}: {{ x.Money ?? 1 }} </span>
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-BusTypeName="props">
            <q-td :props="props">
              <div class="f12">
                <div><span class="q-mr-xs text-grey-6">{{ $t('v102.vehicle.title9') }}：</span>{{ x.BusTypeName }}</div>
                <template v-if="x.DriverInfo ">
                  <div><span class="q-mr-xs text-grey-6">{{ $t('v102.vehicle.list2.s30') }}</span>{{ x.DriverInfo }}</div>
                  <div><span class="q-mr-xs text-grey-6">{{ $t('v102.vehicle.list2.s31') }}</span>{{ x.BusNo }}</div>
                </template>
              </div>
              </q-td>
          </template>
          <template v-slot:body-cell-HandFittingFee="props">
            <q-td :props="props" :colspan="x.DetailList.length" v-if="props.rowIndex == 0" >
              {{ moneyFormat(x.ShouPeiFee) }}
              <div class="q-mt-sm" v-if="x.ShouPeiFee<0">
                <q-btn size="sm" dense outline color="primary" v-if="x.ContractUrl">
                  <a class="text-primary" style="text-decoration:none"
                    :href="x.ContractUrl">{{ $t('v101.downloadHands') }}</a>
                </q-btn>
                <span class="text-grey-500 f12">{{ $t('v101.noneHands') }}</span>
              </div>
            </q-td>
          </template>
          
          <template v-slot:bottom>
            <div class="msl text-negative">{{ $t('v101.hotelRemark') }}：{{ x.CreateRemark }}</div>
          </template>
        </q-table>
      </div>

      <div class="q-mt-md" v-if="x.OfferState != 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.totalMoney) }} -->
                {{ x.totalMoney.toFixed(2) }}
              </span>
              <span class="f12">
                <!-- {{ $t('unit.jp') }} -->
                {{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.OfferState != 1, 'bg-grey-2': x.OfferState == 1 }">
          <q-list dense v-if="x.OfferState != 3" :class="{ 'row items-center justify-between full-width': $q.platform.is.mobile }">
            <q-item v-if="x.OfferState == 1" class="text-negative" clickable v-close-popup @click="cancel(x.Id)">
              <q-item-section>
                <q-item-label>{{ $t('hotelorder.opera.cancel') }}</q-item-label>
              </q-item-section>
            </q-item>
            <q-item v-if="x.OfferState == 1" class="text-primary" clickable v-close-popup @click="mask(x.Id)">
              <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 @click="details(x.Id)">
              <q-item-section>
                <q-item-label>{{$t('v102.vehicle.list.s9')}}</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.totalMoney.toFixed(2) }}
              <span class="text-green-4 f12">
                <!-- {{ $t('unit.jp') }} -->
                {{x.CurrencyCode}}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="x.OfferState == 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.CancelRemark }} 
            <!-- {{ 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="showBankAccount">
    <BankAccount @change="showBankAccount=false"></BankAccount>
  </q-dialog>
</template>

<script lang="ts">
  import vehiclePopover from '..//vehiclePopover.vue'
import vehicleDetails from '../vehicleDetails.vue'//详情
import { copyToClipboard,useQuasar,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'
import { getStrokeStatus,getSendType,moneyFormat } from '../../../utils/tools'
import BankAccount from '../../BankAccount.vue'

export default defineComponent({
  components: { vehicleDetails,BankAccount },
  setup(props) {
    const { t } = useI18n()
    const $q = useQuasar()
    const $router = useRouter()
    const data = reactive({
      showBankAccount: false,
      copyId: 0,
      showdetails: false,
      CancelRemark: '',
      Id: 0,
      loading: false,
      loading: false,
      pages: {
        pageIndex: 1,
        pageSize: 5,
        pageCount: 0,
      },
      orders: [] as any[],
      status: [] as Array<StandardStatus>,
      sends: [] as Array<SendType>,
      ProductId: {} as any,
      showDetails: false,
      cols: [
        { name: 'StartDate', label: t('v102.vehicle.title7'), field: (row: any) => row.StartDate, align: 'left' },
        // { name: 'UseCompName', label: t('v102.vehicle.title1'), field: (row: any) => row, align: 'left' },
        { name: 'PickUpInfo', label: t('v102.vehicle.title3'), field: (row: any) => row, align: 'left' },
        { name: 'PeopleNum', label: t('v102.vehicle.title6'), field: (row: any) => row.PeopleNum, align: 'left' },
        
        { name: 'UseDayNum', label: t('v102.vehicle.tatle.th4'), field: (row: any) => row.UseDayNum, align: 'left' },
        { name: 'BusTypeName', label: t('v102.vehicle.title91'), field: (row: any) => row, 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: 'Money', label: t('hotelorder.col.m'), field: (row: any) => row.Money.toFixed(2), align: 'left' },
        { name: 'HandFittingFee', label: t('hotelorder.hands'), align: 'left' }
    ] as any,
    })

    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 = {
      ViewPayment() {
        data.showBankAccount = true
      },
      init() {
        data.status = getStrokeStatus()
        data.sends = getSendType()
        methods.getList()
      },
      // 详情
      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.Id = item
        $q.dialog({
          title: t('dialog.titles.horder'),
          message: t('dialog.contents.horder'),
          cancel: true,
          persistent: true
        }).onOk(() => {
          methods.cancellations()
        })
      },
      // 取消用车
      cancellations() {
          HotelService.cancellation(data.Id, data.CancelRemark)
              .then(r => {
                  if (r.data.resultCode == ApiResult.SUCCESS) {
                      methods.getList()
                      message.successMsg(`${t('success')}`)
                  } 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) {
              r.data.data.pageData.forEach((x: any) => {
              x.typeInfo = data.status.find(y => y.StatusId == x.OfferState) ?? data.status[1]
              x.Money = 0
              x.totalMoney = 0
              x.DetailList.forEach((y:any)=>{
                y.Money = y.UnitPrice+y.StopBusPrice+y.RoomPrice
                x.Money +=y.Money
              })
              x.totalMoney += x.Money
            })
              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()
      },
      setCopyHandler(order: any, ctx?: string) {
        if (ctx) {
          data.copyId = -1
          copyToClipboard(ctx)
        } else {
          data.copyId = order.Id
          copyToClipboard(order.OrderNo)
        }

        setTimeout(() => {
          data.copyId = 0
        }, 2000)
      }
    }
    methods.init()
    return {
      ...toRefs(data),
      ...methods,
      moneyFormat,
      search
    }
  }
})
</script>

<style scoped>
   .room-item {
      height: 28px;
      line-height: 28px;
      border-bottom: 1px solid #eee;
    }
  .room-item:last-child{
    border-bottom: 0;
  }
</style>
