<template>
  <!-- 列表 -->
    <div class="group-result-list">
      <div class="group-statis-block">
        <div class="group-share" style="display:none;"></div>
        <div class="group-statis-detail">
          <span class="title" v-if="qMsg.searchKey">{{qMsg.searchKey}} :</span>
          找到
          <span class="num"> {{qMsg.TotalCount}} </span>個行程
          <span class="pc">，目前在第<span style="color: #7f7f7f;"> {{qMsg.pageIndex}} </span>頁</span>
        </div>
      </div>
      <div>
        <div class="group-box" v-for="(itemf,indexf) in DataList" :key="indexf">
                <a class="group-cover" >
                  <template v-if="itemf.imgCover&&itemf.imgCover.length>0">
                     <img :src="itemf.imgCover[0].url" />
                  </template>
                </a>
                <div class="group-main">
                  <div class="group-info">
                    <div class="group-name" style="margin-bottom:5px;cursor:pointer" @click="GotoDetails(itemf)">
                      {{itemf.title}}
                    </div>
                    <div class="group-detail" @click="GotoDetails(itemf)">
                      <i class="iconfont iconaddress"></i>
                      <span>{{itemf.countryName}}</span>
                    </div>
                    <div class="group-detail" @click="GotoDetails(itemf)">
                      <i class="iconfont icontime"></i>
                      <span>{{itemf.dayNum}} 天</span>
                    </div>
                    <ul class="group-list">
                      <li>
                        <template v-if="itemf.PriceList&&itemf.PriceList.length>0">
                          <div v-for="(item,index) in itemf.priceList" :key="index" style="margin-right:5px;margin-bottom:7px;"  @click="SwitchTCID(itemf,indexf,index)">
                            <a>{{item.StartDate}}</a>
                          </div>
                       </template>
                      </li>
                    </ul>
                  </div>
                  <div class="price-info" @click="GotoDetails(itemf)">
                    <div class="price-wrap">
                      <div class="price_Search">
                        <small class="price_unit">TWD$</small> {{itemf.b2BPrice}}
                      </div>
                      <a class="btn_warning" @click="GotoDetails(itemf)" style="cursor:pointer">更多出發日</a>
                    </div>
                  </div>
                </div>
        </div>
        <div style="display:flex;justify-content: center;">
          <q-pagination v-if="qMsg.PageCount>1" v-model="qMsg.pageIndex" :max="qMsg.PageCount" @input="gerOrderList()"
            :direction-links="true">
          </q-pagination>
        </div>
      </div>
    </div>

</template>
<script>
  export default {
    props: ["DataList", "qMsg"],
    data() {
      return {

      };
    },
    methods: {
      GotoDetails(item) {
        this.CommonJump('/details/' + encodeURIComponent(item.id) + "/" + item.configId, {}, "blank");
      },
      //调用
      gerOrderList(){
        this.$emit('getPage')
      },
      SwitchTCID(obj,i,index) {
      if(this.DataList&&this.DataList.length>0){
        let nowobj=  JSON.parse(JSON.stringify(obj));
        this.DataList[i] = {
          ...nowobj.priceList[index]
        }
        this.DataList[i].index=index;
        this.DataList[i].startDateList=nowobj.startDateList;
        this.DataList[i].priceList=nowobj.priceList;
        this.$forceUpdate();
      }
    },
    }
  }

</script>
