<style lang="scss" scoped>
.form-item {
  max-width: 320px;
  height: 40px;
  margin: 10px;
}
.content {
  width: 900px;
}
.title {
  margin-top: 20px;
  margin-bottom: 10px;
}
.card {
  margin: 10px;
background: #FFFFFF;
border: 1px solid #EEEEEE;
border-radius: 8px;
}
.card-title {
  height: 37px;
  height: 37px;
  padding: 0 20px;
  line-height: 37px;
  background: #f5f5f5;
  border-radius: 8px 8px 0px 0px;
}
.tips {
  height: 42px;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0 35px;
  line-height: 42px;
}
::v-deep .q-field__control {
  height: 40px;
}
::v-deep .q-field--auto-height .q-field__control {
  min-height: 40px;
}
::v-deep .q-field__marginal {
  height: 40px;
}
.title {
  margin-top: 20px;
  margin-bottom: 10px;
}
.phone {
  margin-left: 100px;
}
.name {
  width: 300px;
  padding: 10px;
}
.user-name {
  width: 120px;
}
.pay-info {
  width: 120px;
}
.order-info {
  width: 120px;
}
.order-action {
  width: 120px;
}
.nav-item {
  width: 100px;
  margin: 0 10px;
  text-align: center;
}
.border-bottom {
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background-color: $primary;
  margin: -8px auto 0 auto;
}
</style>
<template>
  <div class="content q-ma-lg bg-white">
    <div class="flex justify-between">
      <div>
        <q-input
          ref="lastName"
          class="form-item"
          placeholder="名字（需與旅遊證件一致）"
          v-model="form.lastName"
          outlined
          :rules="[(val) => val !== '' || '请输入名字']"
        ></q-input>
      </div>
    </div>
      <div class="tips flex">
        <div
          @click="changeCouponType(item)"
          class="nav-item cursor-pointer"
          v-for="item in ['全部', '待付款', '待出行', '已完成', '已取消']"
          :key="item"
        >
          {{ item }}
          <div :class="orderStatus === item ? 'border-bottom' : ''"></div>
        </div>
      </div>
    <div>
      <div class="card" v-for="item in orderList" :key="item.id">
        <div class="flex card-title justify-between">
          <div class="flex">
            <span>订单号:{{item.orderNo}}</span>
            <span class="phone">联系客服</span>
          </div>
          <span>{{item.createTimeStr}}</span>
        </div>
        <div class="flex q-py-sm">
          <img :src="item.goodsPic" />
          <div class="name">
            <div>{{item.goodsName}}</div>
            <div>xl</div>
          </div>
          <div class="user-name">{{item.surName}}{{item.name}}</div>
          <div class="pay-info">
            <div>CNY{{item.totalPrice}}</div>
            <div>{{item.payType}}</div>
          </div>
          <div class="order-info">
            <div>等待收貨</div>
            <div>订单详情</div>
          </div>
          <div class="order-action">
            <div>确认收货</div>
            <div>取消订单</div>
            <div>查看發票</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import noneData from '../../components/noneData.vue'
export default {
  components: {
    noneData
  },
  data() {
    return {
      form: {},
      orderList: [],
      current: 1,
      pageCount: 0,
      couponsType: 1, // 优惠券类型 1：抵用券，2：折扣卷
      orderStatus: 1, // 优惠券状态（b2b）1-可使用，2-已使用，3-已过期
      CouponsUseScope: 1, // 平台1:全场通用,2:团队,3:签证,4:机票,5:门票,6:车辆,7:自由行,8:当地游
      useScopeMap: {
        1: "全场通用",
        2: "团队",
        3: "签证",
        4: "机票",
        5: "门票",
        6: "车辆",
        7: "自由行",
        8: "当地游",
      },
      statusMap: [{key: 1, label: "可使用", },{key: 2, label: "已使用",},{key: 3, label: "已过期"}],
      colorMap: {
        1: "bg-blue",
        2: "bg-blue",
        3: "bg-red",
        4: "bg-yellow",
        5: "bg-green",
        6: "bg-green",
        7: "bg-red",
        8: "bg-yellow",
      }
    };
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    pageChange(value) {
      this.current = value;
      this.getOrderList();
    },
    changeCouponType(item) {
      this.orderStatus = item.key;
      this.current = 1
      this.pageCount = 0
      this.orderList = []
      this.getOrderList()
    },
    getOrderList() {
      this.apipost(
        "GetMyDirectOrderPageList_post",
        { pageIndex: this.current, pageSize: 10, orderStatus: this.orderStatus },
        (res) => {
          if (res.data.resultCode == 1) {
            const { count, pageData, pageCount } = res.data.data;
            this.count = count;
            this.pageCount = pageCount;
            this.orderList = pageData;
          } else {
            // this.$notify(res.data.message);
            this.$q.notify({
              type: "negative",
              message: res.data.message,
              position: "top",
              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            });
          }
        },
        null
      );
    },
  },
};
</script>