<style>
  .demandlist {
    padding: 30px 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }

  .order-header {
    display: flex;
    align-items: flex-start;
    margin: 20px 0;
  }

  .order-header .order_title {
    margin-right: 20px;
    font-size: 25px;
    color: #666;
    font-weight: 400;
  }

  .order-header .type-item {
    margin: 0 15px;
    cursor: pointer;
  }

  .order-header .type-item a {
    font-size: 16px;
    padding: 0 2px 12px;
    text-decoration: none;
  }

  .type-item .is-acted {
    color: #00afff;
    border-bottom: 2px solid #00afff;
  }

  .type-bar {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  .type-bar li {
    list-style-type: none;
  }

  .order_link {
    display: block;
    padding: 20px 25px;
  }

  .order-list {
    padding: 0;
  }

  .order-list li {
    margin-bottom: 15px;
    font-size: 0;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(10, 8, 8, .5);
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
  }

  .order_link .order_tour {
    font-size: 16px;
    padding-right: 10px;
    width: calc(100% - 90px);
    display: inline-block;
    vertical-align: middle;
  }

  .tour-name {
    margin-bottom: 5px;
    color: #333;
  }

  .order_link .order-status {
    font-size: 15px;
    display: inline-block;
    vertical-align: middle;
    color: #999;
  }

  .order-list li .order-status:not(:last-child) {
    margin-right: 20px;
  }

  .order-status-ch {
    width: 90px;
    color: #333;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
  }

  .order-status-tag {
    padding: 2px 12px;
    background-color: #e2f0fb;
    color: #00afff;
    border-radius: 50px;
    background-clip: padding-box;
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
  }

  @media only screen and (min-width: 768px) {
    .order-list li:hover {
      -webkit-transform: translate(0, -4px);
      -moz-transform: translate(0, -4px);
      -ms-transform: translate(0, -4px);
      -o-transform: translate(0, -4px);
      transform: translate(0, -4px);
      -webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .1);
      -moz-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .1);
      box-shadow: 0 4px 25px 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .1);
    }
  }

  .text-my {
    color: #00afff;
  }

  .order_titleMobile {
    margin: 20px 0 10px 0;
    font-size: 25px;
    color: #666;
  }

  @media only screen and (max-width: 1200px) {
    .order_tour {
      width: 100% !important;
      padding-right: 0 !important;
    }
  }

</style>
<template>
  <q-page>
    <div class="demandlist">
      <template v-if="!$q.screen.xs">
        <div class="order-header">
          <div class="order_title">我的訂單</div>
          <q-tabs v-model="tab" inline-label class="text-my">
            <q-tab :name="item.Type" :label="item.Type" v-for="(item,index) in TitList" @click="handleClick(item)"
              :key="index" />
          </q-tabs>
        </div>
      </template>
      <template v-if="$q.screen.xs">
        <div>
          <div class="order_titleMobile">我的訂單</div>
          <q-tabs v-model="tab" inline-label class="text-my">
            <q-tab :name="item.Type" :label="item.Type" v-for="(item,index) in TitList" @click="handleClick(item)"
              :key="index" />
          </q-tabs>
        </div>
      </template>
      <ul class="order-list">
        <li v-for="(item,index) in DataList" :key="index" @click="CommonJump('/orderinfo/'+item.orderId,{})">
          <a class="order_link">
            <div class="order_tour">
              <div class="tour-name">
                {{item.title}}
              </div>
              <div class="order-status">
                訂購日期：{{item.createDate}}
              </div>
              <div class="order-status">
                出發日期：{{item.startDate}}
              </div>
              <div class="order-status">
                訂單編號：{{item.orderId}}
              </div>
              <div class="order-status">
                旅客：{{item.guestNum}}
              </div>
              <div class="order-status">
                總額：{{item.preferPrice}}
              </div>
              <div class="order-status" style="display:block;" v-if="$q.screen.xs">
                <div class="order-status-tag" style="margin-top:10px;">
                  <span v-if="item.orderState === 1">待付定金</span>
                  <span v-else-if="item.orderState === 2">待付尾款</span>
                  <span v-else-if="item.orderState === 3">待发团</span>
                  <span v-else-if="item.orderState === 4">交易完成</span>
                  <span v-else-if="item.orderState === 5">取消</span>
                </div>
              </div>
            </div>
            <div class="order-status-ch" v-if="!$q.screen.xs">
              <div class="order-status-tag">
                <span v-if="item.orderState === 1">待付定金</span>
                <span v-else-if="item.orderState === 2">待付尾款</span>
                <span v-else-if="item.orderState === 3">待发团</span>
                <span v-else-if="item.orderState === 4">交易完成</span>
                <span v-else-if="item.orderState === 5">取消</span>
              </div>
            </div>
          </a>
        </li>
        <q-pagination v-if="pageCount>1" v-model="getOrderMsg.pageIndex" :max="pageCount" @input="gerOrderList()"
          :direction-links="true">
        </q-pagination>
      </ul>
    </div>
  </q-page>
</template>
<script>
  export default {
    props: [],
    data() {
      return {
        tab: '全部',
        qMsg: {
          PageIndex: 1,
          PageSize: 10,
          CreateBy: 0,
        },
        DataList: [],
        pageCount: 0,
        checked: -1,
        getOrderMsg: {
          pageIndex: 1,
          pageSize: 5,
          orderType: 1,
          queryDays: 0,
          orderState: -1,
          CustomerId: ""
        },
        TitList: [{
            Type: "全部",
            ID: -1
          },
          {
            Type: "待付定金",
            ID: 1
          },
          {
            Type: "待付尾款",
            ID: 2
          },
          {
            Type: "待发团",
            ID: 3
          },
          {
            Type: "交易完成",
            ID: 4
          },
          {
            Type: "取消",
            ID: 5
          }
        ],

      };
    },
    created() {

    },
    mounted() {
      if (localStorage.b2bUser) {
        var b2bUser = JSON.parse(window.localStorage.getItem('b2bUser'))
        if (b2bUser) {
          this.qMsg.CreateBy = b2bUser.accountId;
          this.getOrderMsg.CustomerId = b2bUser.customerId;
          this.gerOrderList();
        }
      }
    },
    methods: {
      gerOrderList: function () {
        this.$q.loading.show()
        this.apiJavaPost(
          "/api/b2b/user/getrecentorder",
          this.getOrderMsg,
          res => {
            this.$q.loading.hide();
            if (res.data.resultCode == 1) {
              this.DataList = res.data.data.pageData;
              this.pageCount = res.data.data.pageCount;
            } else if (res.data.resultCode == 10000 || res.data.resultCode == 10001) {
              localStorage.removeItem("b2bUser");
              this.CommonJump('/login', {})
            }
          },
          null
        );
      },
      handleClick(item) {
        this.checked = item.ID;
        this.getOrderMsg.orderState = item.ID;
        this.gerOrderList();
      }
    },
  };

</script>
