<template>
    <div class="rounded-borders bg-white" :class="{'q-col-gutter-sm':$q.platform.is.desktop}">
        <div class="row items-center no-wrap justify-between q-pa-md" :class="{'q-col-gutter-sm':$q.platform.is.desktop}">
            <div class="col row items-center no-wrap">
              <div class="q-mr-md" style="flex-shrink: 0;">
                <div class="text-subtitle2">
                  <span class="text-weight-bold text-primary q-mr-sm">{{
                    TotalCount
                  }}</span>
                  <span>{{$t('v103.scheduledTrip.experiencetrip')}}</span>
                </div>
                
              </div>
              <div class="col row wrap" v-if="$q.platform.is.desktop">
                <template v-for="(x, i) in chosenAddress">
                  <!-- <q-chip
                  v-if="i==0"
                  size="13px"
                  :key="i"
                  outline
                  color="grey"
                  :label="x.Name"
                /> -->
                  <q-chip
                  v-if="i!=0"
                  size="13px"
                  :key="i"
                  removable
                  outline
                  color="grey"
                  :label="x.Name"
                  @remove="removeChosen(x,i)"
                />
                </template>
              </div>
            </div>
            <div class="q-ml-md" v-if="$q.platform.is.desktop">
              <q-btn style="width: 60px;" color="primary" unelevated size="sm" :label="$t('query')" @click="setSearchHandler"/>
            </div>
        </div>
        <div
          class="row items-center"
          :class="{'q-pa-md':$q.platform.is.desktop,'q-py-sm q-px-xs justify-between':$q.platform.is.mobile}"
          style="border-top: 1px solid #eee"
        >
          <span class="f12" v-if="$q.platform.is.desktop">{{$t('v103.scheduledTrip.sort')}}：</span>
          <span class="row items-center cursor-pointer rounded-borders q-px-sm q-py-xs q-mr-sm"
            :class="{
              'bg-grey-3': orderindex != x.value,
              'bg-primary': orderindex == x.value,
              'text-dark':orderindex != x.value,'text-white':orderindex == x.value
            }"
            v-for="(x, i) in sortArray"
            :key="i"
            @click="chosenSortHandler(x.value)">
            <q-icon class="q-mr-sm" v-if="i==0" :class="x.icon" size="xs" v-close-popup/>
            <span>{{x.label}}</span>
            <q-icon v-if="i!=0"
                :name="ordertype && orderindex == x.value ? 'keyboard_arrow_up' : 'keyboard_arrow_down'" class="q-ml-sm"
                size="20px"
              />
          </span>
          <!-- <q-chip
            square
            
            class="cursor-pointer"
            clickable
            :text-color="sortNum != x.value ? 'dark' : 'white'"
            :class="{
              'bg-grey-3': sortNum != x.value,
              'bg-primary': sortNum == x.value,
            }"
            v-for="(x, i) in sortArray"
            :key="i"
            @click="chosenSortHandler(x)"
            >
            {{ x.label }}
            </q-chip> -->
        </div>
      </div>
      <div class="q-mt-lg">
        <div
          class="rounded-borders cursor-pointer overflow-hidden q-mb-md bg-white"
          :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}"
          @click="GotoDetails(x)"
          v-for="(x, i) in DataList"
          :key="i"
        >
          <q-img
            :src="x.newCoverImg?x.newCoverImg:'http://imgfile.oytour.com/Upload/DMC/yEiRE8pRWE5ZF8cPNRnAiQST8WbyaGQc.jpg'"
            :ratio="16/9"
            spinner-color="grey"
            spinner-size="20px"
            :width="$q.platform.is.desktop?'272px':'100%'"
            class="bg-grey-3"
          />
          <div class="q-pa-md col column">
            <div class="text-subtitle1 text-weight-bold text-grey-9">
              {{ x.title }}
            </div>
            <div class="col">
              <div class="row items-center q-my-sm">
                <q-chip
                  style="background: #E9F6F5;"
                  size="sm"
                  class="f12 rounded-borders text-secondary text-teal-7"
                  :label="$t('v103.scheduledTrip.quickconfirmation')"
                />
                <q-chip
                  style="background: #E9F6F5;"
                  size="sm"
                  class="f12 rounded-borders text-secondary text-teal-7"
                  :label="x.ltName"
                />
              </div>
              <div
                class="text-subtitle2 text-grey-6 text-weight-regular ellipsis-2-lines"
                style="line-height: 1.6"
              >
                {{ x.productRecommend }}
              </div>
              <div class="row items-center f12 text-grey-6 q-mt-md">
                <q-icon
                  size="12px"
                  name="place"
                  class="q-mr-sm"
                />
                <span class="q-mr-lg">{{ x.countryName }}</span>
                <q-icon
                  size="12px"
                  name="event"
                  class="q-mr-sm"
                ></q-icon>
                <span>{{ x.startDate }}</span>
              </div>
            </div>
            <div class="row items-end">
              <div class="col f12">
                <span>{{$t('v103.scheduledTrip.residualvacancy')}}：</span>
                <span
                  class="text-primary text-weight-bold q-pr-sm q-mr-sm"
                  style="border-right: 1px solid #efefef"
                  >{{ x.surplus }}</span
                >
                <span>{{$t('v103.scheduledTrip.daysoftravel')}}：</span>
                <span class="text-secondary text-weight-bold text-teal-7"
                  >{{ x.dayNum }} {{$t('v103.scheduledTrip.day')}}</span
                >
              </div>
              <div class="text-h6 product-price">{{domain==`id.oytour`?'IDR':'CNY'}}：{{ x.b2BPrice }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <div v-if="$q.platform.is.mobile&&PageCount > 1" class="bg-white q-my-md q-pa-sm rounded-borders">
        <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="PageCount" :input="true" @update:model-value="goSearchHandler" />
      </div>
      <div v-else class="q-mb-md row justify-center">
        <q-pagination
          v-if="PageCount > 1"
          v-model="msg.pageIndex"
          :max="PageCount"
          @update:model-value="goSearchHandler"
          :direction-links="true"
          color="white"
          text-color="dark"
          active-color="primary"
          active-text-color="white"
          active-design="unelevated"
          unelevated
          glossy
          size="13px"
          padding="xs xs"
        >
        </q-pagination>
    </div>
</template>
  
  <script lang="ts">
  import { useI18n } from 'vue-i18n'
  import svgIcon from '../global/svg-icon.vue'
  import { computed, inject, provide, reactive, ref, toRefs, defineComponent, onMounted, watch } from 'vue'
  import { useRouter } from 'vue-router'
  import HotelService from '../../api/hotel'
  import message from '../../utils/message'
  import { ApiResult } from '../../@types/enumHelper'
  import { CascaderOption,NCascader,NSelect } from 'naive-ui'
  import { date } from 'quasar'
  import { useQuasar } from 'quasar'
  import { DirtionmaryHelper } from '../../config/dictionary'
  import scheduledTripService from 'src/api/scheduledTrip'
  export default defineComponent({
    components: { svgIcon, NCascader, NSelect },
    setup() {
        const $router = useRouter()
      const $q = useQuasar()
      const qDateProxy = ref(null) as any
      const qNameProxy = ref(null) as any
      const domain =inject(DirtionmaryHelper.DOMAIN_NAME)
      const { locale, t } = useI18n()
      const data = reactive({
        ordertype: 0,
        orderindex:0,
        areaList: [],
        chosenAddress: [],
        goodsType: [],
        dateRange: null,
        msg: {
            pageIndex:1,
            pageSize:10,
        },
        qMsg: null,
        dataList: [],
        sortNum: 1,
        sortArray: [
          {
            label: t('v103.scheduledTrip.recommend'),
            value: 0,
            icon: "iconfont icongood",
          },
          {
            label: t('v103.scheduledTrip.ascendingorder'),
            value: 1,
            icon: "iconfont iconon",
          },
          {
            label: t('v103.scheduledTrip.descendingorder'),
            value: 2,
            icon: "iconfont iconmeiyuan",
          },
          {
            label: t('v103.scheduledTrip.salesvolume'),
            value: 3,
            icon: "iconfont icongood",
          },
          // {
          //   label: t('v103.scheduledTrip.commentcount'),
          //   value: 4,
          //   icon: "iconfont icongood",
          // },
        ],
        TotalCount: 0,
        PageCount: 0,
      })
      const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any
      data.chosenAddress = JSON.parse(JSON.stringify(search.chosenAddress))
      data.qMsg = JSON.parse(JSON.stringify(search.msg))
      data.dateRange = { from: data.msg.startDate, to: data.msg.endDate };
      
      watch(data.msg, (n, o) => {
        methods.setSearchHandler()
      },{deep: true})
      watch(search, (n, o) => {
        data.chosenAddress = JSON.parse(JSON.stringify(n.chosenAddress))
        data.qMsg = JSON.parse(JSON.stringify(n.msg))
        data.msg = JSON.parse(JSON.stringify(n.msg))
        if(n.RetrievalState) methods.setSearchHandler()
      },{deep:true,immediate:true})
      const methods = {
        changeOrderType(i){
            if(data.orderindex==i){
              data.ordertype=this.ordertype==0?1:0
            }else{
              data.orderindex=i
              data.ordertype=0
            }
            search.msg.orderByDate = data.orderindex==1?(data.ordertype==0?2:1):0
            search.msg.orderByPrice = data.orderindex==2?(data.ordertype==0?2:1):0
            search.msg.orderBySales = data.orderindex==3?(data.ordertype==0?2:1):0
            // this.loadTeamDataInit()
        },
        // 删除目的地
        removeChosen(x,i) {
            search.deleteChosen = JSON.parse(JSON.stringify(x))
            data.chosenAddress.splice(i,1)
            search.chosenAddress = JSON.parse(JSON.stringify(data.chosenAddress))
            if(x.type==1){
              search.msg.lineId=0
              search.msg.lineTeamId=0
            }else if(x.type==2){
              search.msg.lineTeamId=0
            }else if(x.type==3){
              search.msg.startCityId=0
            }else if(x.type==4){
              search.DayId = 0
              search.msg.minTripDay = ""
              search.msg.maxTripDay = ""
            }else if(x.type==5){
              search.datesId = 0
              search.msg.startDate = ""
              search.msg.endDate = ""
            }else if(x.type==6){
              search.msg.startDate = ""
              search.msg.endDate = ""
            }
            search.RetrievalState = true
        },
        // 排序方式
        chosenSortHandler(i) {
          if(data.orderindex==i){
            data.ordertype=data.ordertype==0?1:0
          }else{
            data.orderindex=i
            data.ordertype=0
          }
          search.msg.orderByDate = data.orderindex==1?(data.ordertype==0?2:1):0
          search.msg.orderByPrice = data.orderindex==2?(data.ordertype==0?2:1):0
          search.msg.orderBySales = data.orderindex==3?(data.ordertype==0?2:1):0
          methods.setSearchHandler()
          // data.sortNum = x.value;
          // data.msg.orderByDate = data.sortNum == 4 ? 1 : data.sortNum == 5 ? 2 : 0;
          // data.msg.orderByPrice = data.sortNum == 2 ? 1 : data.sortNum == 3 ? 2 : 0;
          // data.msg.orderByDay = data.sortNum == 6 ? 1 : data.sortNum == 7 ? 2 : 0;
        },
        goSearchHandler() {
          $q.loading.show();
          data.DataList = [];
          let minTripDay = -1
          let maxTripDay = -1
          let minPrice = -1
          let maxPrice = -1
          if (data.qMsg.minPrice != "") {
            minPrice = parseFloat(data.qMsg.minPrice);
          }
          if (data.qMsg.maxPrice != "") {
            maxPrice = parseFloat(data.qMsg.maxPrice);
            if (minPrice > maxPrice) {
              message.errorMsg(t('v103.scheduledTrip.interval'));
              return false;
            }
          }
          
          if (localStorage.b2bUser) {
            var b2bUser = JSON.parse(window.localStorage.getItem("b2bUser"));
            if (b2bUser) {
              data.msg.priceOrderByField = 2;
            }
          }
          
          let param = Object.assign(search.msg,data.msg)
          if(domain == 'id.oytour') {
            param.companyId =  1252
          }
          scheduledTripService.GetB2BTravelPageList(param).then(r => {
            $q.loading.hide();
            if (r.data.resultCode == ApiResult.SUCCESS) {
              if (r.data.data) {
                // data.msg.pageIndex = 1
                data.PageCount = r.data.data.pageCount;
                data.TotalCount = r.data.data.count;
                var tempArray = r.data.data.pageData;
                if (tempArray && tempArray.length > 0) {
                  tempArray.forEach((item) => {
                    if (item.imgCover && item.imgCover != "") {
                      try {
                        var imgArray = JSON.parse(item.imgCover);
                        if (imgArray && imgArray.length > 0) {
                          item.newCoverImg = imgArray[0].Url;
                        } else {
                          item.newCoverImg = "";
                        }
                      } catch (e) {}
                    }
                  });
                  data.DataList = tempArray;
                }
              }
            } else {
              message.errorMsg(r.data.message)
            }
          }).catch(e => {
            $q.loading.hide();
            message.errorMsg(e.message)
          })
        },
        setSearchHandler(){
          data.msg.pageIndex = 1
          methods.goSearchHandler()
          search.RetrievalState=false
        },
        GotoDetails(item) {
          $router.push({ 
            path:`/scheduledTrip/details/${encodeURIComponent(item.id)}/${item.tcid}`
          })
        },
      }
      
      methods.goSearchHandler();
      return {
        ...toRefs(data),
        domain,
        search,
        ...methods,
      }
    }
  })
  </script>
  
  <style>
  
  </style>
  