<template>
    <div class="rounded-borders bg-white" :class="{'q-col-gutter-sm':$q.platform.is.desktop}">
        <div class="row items-center q-pa-md" :class="{'q-col-gutter-sm':$q.platform.is.desktop}">
          <div class="text-subtitle2 q-mr-md">
            <span class="text-weight-bold text-primary q-mr-sm">{{
              TotalCount
            }}</span>
            <span>{{$t('v103.scheduledTrip.experiencetrip')}}</span>
          </div>
          <q-chip
            v-for="(x, i) in chosenAddress"
            size="13px"
            :key="i"
            removable
            outline
            color="grey"
            :label="x.Name"
            @remove="removeChosen(x,i)"
          />
        </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>
          <q-chip
            square
            :icon="x.icon"
            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"
            :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">CNY：{{ x.b2CPrice }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <div v-if="$q.platform.is.mobile" 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 { locale, t } = useI18n()
      const data = reactive({
        searchAdd: {
          name: "",
          value: 0,
        },
        areaList: [],
        chosenAddress: [],
        goodsType: [],
        dateRange: null,
        msg: {
            pageIndex:1,
            pageSize:10,
        },
        qMsg: null,
        dataList: [],
        sortNum: 1,
        sortArray: [
          {
            label: t('v103.scheduledTrip.recommend'),
            value: 1,
            icon: "iconfont icongood",
          },
          {
            label: t('v103.scheduledTrip.ascendingorder'),
            value: 2,
            icon: "iconfont iconmeiyuan",
          },
          {
            label: t('v103.scheduledTrip.descendingorder'),
            value: 3,
            icon: "iconfont iconmeiyuan",
          },
        ],
        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) => {
        data.msg.pageIndex = 1
        methods.goSearchHandler()
      },{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))
        // methods.goSearchHandler();
      },{deep:true})
      const methods = {
        // 删除目的地
        removeChosen(x,i) {
            search.deleteChosen = JSON.parse(JSON.stringify(x))
            data.chosenAddress.splice(i,1)
            search.chosenAddress = JSON.parse(JSON.stringify(data.chosenAddress))
        },
        // 排序方式
        chosenSortHandler(x) {
          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,
            maxTripDay = -1,
            minPrice = -1,
            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;
            }
          }
          var companyId = -1;
          if (localStorage.groupinfo) {
            var groupinfo = JSON.parse(localStorage.groupinfo);
            companyId = groupinfo.siteList[0].companyId;
          }
          if (localStorage.b2bUser) {
            var b2bUser = JSON.parse(window.localStorage.getItem("b2bUser"));
            if (b2bUser) {
              data.msg.priceOrderByField = 2;
            }
          }
          let param = Object.assign(data.msg,search.msg)
          scheduledTripService.GetB2BTravelPageList(param).then(r => {
            $q.loading.hide();
            if (r.data.resultCode == ApiResult.SUCCESS) {
              if (r.data.data) {
                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)
          })
        },
        GotoDetails(item) {
          $router.push({ 
            path:`/scheduledTrip/details/${encodeURIComponent(item.id)}/${item.tcid}`
          })
        },
      }
      
      methods.goSearchHandler();
      return {
        ...toRefs(data),
        search,
        ...methods,
      }
    }
  })
  </script>
  
  <style>
  
  </style>
  