<template>
  <div class="q-mt-lg q-mb-lg">
    <div class="section-block download1">
      <div class="group-title">{{plugData.Title}}</div>
      <q-table :pagination.sync="paginationDesktop" :data="plugData.GroupSelfItems" :columns="columns" row-key="id"
        :filter="filter" table-header-class="travel-list" card-class="travel-list" :pagination-label="formatLabel"
        rows-per-page-label=" " :rows-per-page-options="[]" TCNUM-data-labe="沒有找到適合的團期" v-if="!$q.screen.xs">
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td key="StartDate" :props="props">
              <span class="text-red">{{ props.row.StartDate }}</span>
            </q-td>
            <q-td key="TCNUM" :props="props">{{ props.row.TCNUM }}</q-td>
            <q-td key="Title" :props="props">
              <div style="max-width:435px;white-space: pre-wrap;">
                <a @click="getUrl(props.row.LinkUrl)" target="_blank">{{ props.row.Title }}</a>
              </div>
            </q-td>
            <q-td key="DayNum" :props="props">{{ props.row.DayNum }}</q-td>
            <q-td key="FlightStatus" :props="props">
              <!--v-if="props.row.FlightStatus"-->
              <q-icon color="grey" name="iconfont iconhangbanxinxicopy" size="14" />
            </q-td>
            <q-td key="Price" :props="props">
              <span caption>$</span>
              <span class="text-subtitle2 text-weight-medium">{{ props.row.Price }}</span>
            </q-td>
            <q-td key="Seat" :props="props">
              <span
                :class="{'text-orange':props.row.Seat>0,'text-pink':(props.row.Seat==0 && props.row.Substitute),'text-red':(props.row.Seat==0 && !props.row.Substitute)}">{{ props.row.Seat>0?'有名額':(props.row.Seat==0 && props.row.Substitute?'可候補':'名額已滿') }}</span>
            </q-td>
            <q-td key="TCID" :props="props">

              <q-btn type="a" @click="(props.row.Seat>0||props.row.Substitute)?getUrl(props.row.LinkUrl):''"
                target="_blank" :label="props.row.Seat>0||props.row.Substitute?'我有興趣':'無法預訂'"
                :color="props.row.Seat>0||props.row.Substitute?'indigo':'grey'" rounded unelevated
                :disable="props.row.Seat==0&&props.row.Substitute" />
            </q-td>
          </q-tr>
        </template>
      </q-table>
      <q-table :pagination.sync="pagination" v-if="$q.screen.xs" grid :data="plugData.GroupSelfItems" :columns="columns"
        row-key="id" :filter="filter" table-header-class="travel-list" card-class="travel-list"
        :pagination-label="formatLabel" rows-per-page-label=" " :rows-per-page-options="[]" TCNUM-data-labe="沒有找到適合的團期">
        <template v-slot:item="props">
          <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition">
            <q-card class="q-mb-md q-pt-xs q-pb-xs" flat>
              <q-list>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey">團期</q-item-label>
                    <q-item-label class="text-red">{{props.row.StartDate}}</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey">團號</q-item-label>
                    <q-item-label>{{props.row.TCNUM}}</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey">團體名稱</q-item-label>
                    <q-item-label lines="2">
                      <a @click="getUrl(props.row.LinkUrl)" target="_blank">{{ props.row.Title }}</a>
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey">天數</q-item-label>
                    <q-item-label>{{props.row.DayNum}}</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey">航班</q-item-label>
                    <q-item-label>
                      <!--v-if="props.row.FlightStatus"-->
                      <q-icon color="grey" name="iconfont iconhangbanxinxicopy" size="14" />
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey">售價</q-item-label>
                    <q-item-label>
                      <span caption>$</span>
                      <span class="text-subtitle2 text-weight-medium">{{ props.row.Price }}</span>
                      <span>起</span>
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey">狀態</q-item-label>
                    <q-item-label>
                      <span
                        :class="{'text-orange':props.row.Seat>0,'text-pink':(props.row.Seat==0 && props.row.Substitute),'text-red':(props.row.Seat==0 && !props.row.Substitute)}">{{ props.row.Seat>0?'有名額':(props.row.Seat==0 && props.row.Substitute?'可候補':'名額已滿') }}</span>
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item>
                  <q-item-section>
                    <q-btn type="a" @click="getUrl(props.row.LinkUrl)" target="_blank"
                      :label="props.row.Seat>0||props.row.Substitute?'我有興趣':'無法預訂'"
                      :color="props.row.Seat>0||props.row.Substitute?'indigo':'grey'" rounded unelevated
                      :disable="props.row.Seat==0&&props.row.Substitute" />
                  </q-item-section>
                </q-item>
              </q-list>
            </q-card>
          </div>
        </template>
      </q-table>
    </div>
  </div>
</template>

<script>
  export default {
    props: ["plugData"],
    data() {
      return {
        pagination: {
          sortBy: "id",
          descending: false,
          page: 1,
          rowsPerPage: 1
        },
        paginationDesktop: {
          sortBy: "id",
          descending: false,
          page: 1,
          rowsPerPage: 5
        },
        filter: "",
        columns: [{
            name: "StartDate",
            required: true,
            label: "出發日期",
            align: "left",
            sortable: true
          },
          {
            name: "TCNUM",
            align: "center",
            label: "團號",
            field: "TCNUM"
          },
          {
            name: "Title",
            label: "團體名稱",
            align: "left",
            field: "Title"
          },
          {
            name: "DayNum",
            label: "天數",
            align: "left",
            field: "DayNum"
          },
          {
            name: "FlightStatus",
            label: "航班",
            align: "left",
            field: "FlightStatus"
          },
          {
            name: "Price",
            label: "售價",
            align: "left",
            field: "Price"
          },
          {
            name: "Seat",
            label: "狀態",
            align: "left",
            field: "Seat"
          },
          {
            name: "TCID",
            label: "報名",
            align: "left",
            field: "TCID"
          }
        ],

      };
    },
    methods: {
      formatLabel(firstRowIndex, endRowIndex, totalRowsNumber) {
        return "";
      },
      getUrl(url) {
        var resultUrl = "";
        var currenthref = location.href;
        var newUrl = url.substring(url.indexOf('/details'));
        if (currenthref.indexOf("#") > -1) {
          resultUrl = currenthref.substring(0, currenthref.indexOf('/#/'))+"/#" + newUrl;
        } else {
          resultUrl =this.GetDomain();
          if (location.port != 80) {
            resultUrl += ":" + location.port;
          }
          resultUrl += newUrl
        }
        this.OpenNewUrl(resultUrl);
      }
    },
  };

</script>

<style>
  .my-th-head {
    font-size: 18px !important;
    font-weight: 600 !important;
  }

  .download1 .group-title {
    margin: 0;
    padding: 0;
    line-height: unset;
    margin-bottom: 20px;
    font-size: 24px;
    text-align: center;
    font-weight: 600;
    text-align: center;
  }

  .travel-list th {
    font-size: 16px !important;
  }

  .travel-list td {
    font-size: 14px !important;
  }

</style>
