<template>
  <div class="q-mt-lg q-mb-lg">
    <div class="section-block download1">
      <!-- <div class="group-title">{{plugData.Title}}</div> -->
      <q-table v-if="plugData&&plugData.length>0 && !$q.screen.xs" :pagination.sync="paginationDesktop" :data="plugData"
        :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: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="title" :props="props">
              <div style="max-width:435px;white-space: pre-wrap;">
                <a>{{ props.row.title }}</a>
              </div>
            </q-td>
            <q-td key="dayNum" :props="props">{{ props.row.dayNum }}</q-td>
            <q-td key="FlightStatus" :props="props">
              <q-icon color="grey" name="iconfont iconhangbanxinxicopy" class="cursor-pointer" size="14">
                <q-popup-proxy :offset="[260, 3]">
                  <q-banner class="bg-black text-white">
                    <table class="tripDetails_table">
                      <tr>
                        <th>出發時間</th>
                        <th>抵達時間</th>
                        <th>出發地點</th>
                        <th>抵達地點</th>
                        <th>航空公司</th>
                      </tr>
                      <tr v-for="(item,index) in props.row.priceFlight" :key="index">
                        <td>{{item.startDate.substring(5).replace('-','/')}} {{item.departureTime}}</td>
                        <td>{{item.arriveDate.substring(5).replace('-','/')}} {{item.arrivalTime}}</td>
                        <td>{{item.departureAirPortName}}</td>
                        <td>{{item.arrivalAirPortName}}</td>
                        <td>{{item.alName}}</td>
                      </tr>
                    </table>
                  </q-banner>
                </q-popup-proxy>
              </q-icon>
            </q-td>
            <q-td key="b2BPrice" :props="props">
              <span caption>$</span>
              <span class="text-subtitle2 text-weight-medium">{{ props.row.b2BPrice }}</span>
            </q-td>
            <q-td key="totalSeat" :props="props">
              <span>{{ props.row.totalSeat }}</span>
            </q-td>
            <q-td key="seat" :props="props">
              <span>{{ props.row.seat }}</span>
            </q-td>
            <q-td key="isSubstitution" :props="props">
              <span
                :class="{'text-orange':props.row.seat>0,'text-pink':(props.row.seat==0 && props.row.isSubstitution),'text-red':(props.row.seat==0 && !props.row.isSubstitution)}">{{ props.row.seat>0?'有名額':(props.row.seat==0 && props.row.isSubstitution?'可候補':'名額已滿') }}</span>
            </q-td>
            <q-td key="tcid" :props="props">
              <q-btn type="a" :label="props.row.seat>0||props.row.isSubstitution?'報名GO!':'無法預訂'"
                :color="props.row.seat>0||props.row.isSubstitution?'indigo':'grey'" rounded unelevated
                :disable="props.row.seat==0&&props.row.isSubstitution" @click="goSignUp(props.row.seat)" />
            </q-td>
          </q-tr>
        </template>
      </q-table>
      <q-table :pagination.sync="pagination" v-if="plugData&&plugData.length>0 && $q.screen.xs" grid :data="plugData"
        :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.title}}</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.b2BPrice }}</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.isSubstitution),'text-red':(props.row.seat==0 && !props.row.isSubstitution)}">{{ props.row.seat>0?'有名額':(props.row.seat==0 && props.row.isSubstitution?'可候補':'名額已滿') }}</span>
                    </q-item-label>
                  </q-item-section>
                </q-item>
                <q-item>
                  <q-item-section>
                    <q-btn type="a" :label="props.row.seat>0||props.row.isSubstitution?'報名GO!':'無法預訂'"
                      :color="props.row.seat>0||props.row.isSubstitution?'indigo':'grey'" rounded unelevated
                      :disable="props.row.seat==0&&props.row.isSubstitution" @click="goSignUp(props.row.seat)" />
                  </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: "title",
            label: "團體名稱",
            align: "left",
            field: "title"
          },
          {
            name: "dayNum",
            label: "天數",
            align: "left",
            field: "dayNum"
          },
          {
            name: "FlightStatus",
            label: "交通",
            align: "left",
            field: "FlightStatus"
          },
          {
            name: "b2BPrice",
            label: "售價",
            align: "left",
            field: "b2BPrice"
          },
          {
            name: "totalSeat",
            label: "位數",
            align: "left",
            field: "totalSeat"
          },

          {
            name: "seat",
            label: "可報名",
            align: "left",
            field: "seat"
          },
          {
            name: "isSubstitution",
            label: "狀態",
            align: "left",
            field: "isSubstitution"
          },
          {
            name: "tcid",
            label: "報名",
            align: "left",
            field: "tcid"
          }
        ],

      };
    },
    methods: {
      formatLabel(firstRowIndex, endRowIndex, totalRowsNumber) {
        return "";
      },
      //报名
      goSignUp(seat){
        if(seat>0){
          this.$emit('showDialog');
        }
      }
    },
    mounted() {
 
    }
  };

</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;
  }
  .tripDetails_table td{
    text-align:center;
    padding:6px;
  }
  .tripDetails_table th{
    width:100px;
  }
</style>
