<template>
  <div class="orders-wrap">
    <nav-bar title="订单列表"/>
    <div class="wrap">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-if="data.length">
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check='false'
          :offset="200"
          @load="onLoad"
        >
          <template>
            <div class="box" v-for="(item, index) in data" :key="index" @click="detail(item)">
              <div class="title flex_sb align-c">
                <p>订单编号：{{item.orderCode}}</p>
                <span>{{item.showTagText}}</span>
              </div>
              <div class="content">
                <div class="room flex" v-if="item.houseInfo">
                  <img :src="item.houseInfo.imgUrl || '//static.hoolihome.com/m/assets/img/buildings-img@2x.png'" alt="">
                  <div class="info">
                    <h5 class="lineTwoHidden">{{item.houseInfo.houseName}}</h5>
                    <p class="lineHidden" v-if="item.roomPriceText">租金：{{item.roomPriceText}}</p>
                    <p class="lineHidden" v-if="item.rentTimeText">租期：{{item.rentTimeText}}</p>
                    <p class="lineHidden" v-if="item.liveTimeText">入住日期：{{item.liveTimeText}}</p>
                  </div>
                </div>
                <div class="room flex align-c none" v-else>
                  <img src="//static.hoolihome.com/m/assets/img/buildings-img@2x.png" alt="">
                  <p>房源匹配中…</p>
                </div>
                <div class="message" v-if="item.payInfo">
                  <div class="flex_sb align-c">
                    <p>应付金额：</p>
                    <span>{{item.payInfo.orderAmount}}</span>
                  </div>
                  <div class="flex_sb align-c" v-if="item.payInfo && item.payInfo.couponDiscounted">
                    <p>优惠券抵扣：</p>
                    <span>-{{item.payInfo.couponDiscounted}}</span>
                  </div>
                  <div class="flex_sb align-c pay">
                    <p>已付金额</p>
                    <span>{{item.payInfo.paidAmount}}</span>
                  </div>
                </div>
              </div>
              <div class="footer flex_sb align-c">
                <p>查看订单</p>
                <i class="icon icon-jiantou-you"></i>
              </div>
            </div>
          </template>
        </van-list>
        <is-empty v-if="isEmpty"></is-empty>
      </van-pull-refresh>
      <div class="room-detail-none" v-if="!data.length">暂无数据</div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";
import IsEmpty from "@/components/common/IsEmpty";

export default {
  name: "Orders",
  components: {
    NavBar,
    IsEmpty
  },
  data() {
    return {
      data: [],
      pages: {},
      page: 0,
      isEmpty: false,
      loading: false,
      finished: false,
      isLoading: false,
      itemsChecked: false,
      isEdit: false
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 上拉加载
    onLoad() {
      setTimeout(() => {
        this.getData("onLoad");
      }, 500);
    },
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.page = 0;
        this.getData("onRefresh");
      }, 500);
    },
    // 获取数据
    getData(val) {
      let params = {};
      params.url = this.$apis.api_user_order_list;
      this.page = this.page + 1;
      params.data = {
        page: this.page,
        limit: 10
      };
      this.$net.req(params, this).then(
        res => {
          if (Number(res.code) === 0) {
            let data = res.data.list;
            this.pages = res.data.pages;
            if (this.page * params.data.limit >= this.pages.totalCount) {
              this.finished = true;
              this.isEmpty = true;
            }
            if (val === "onLoad") {
              this.loading = false;
              this.data = this.data.concat(data);
            } else {
              this.data = data;
            }
            if (val === "onRefresh") {
              this.finished = false;
              this.isEmpty = false;
              this.$toast("刷新成功");
              this.isLoading = false;
            }
          } else {
            this.$Toast(res.msg);
          }
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 查看详情
    detail(item) {
      let lang = this.$store.state.langStr;
      this.$router.push({
        path: `/${lang}/user/orderDetail/${item.id}`
      });
    }
  }
};
</script>

<style scoped lang='less'>
.orders-wrap {
  background: #f9f9f9;
  min-height: 100vh;
  .wrap {
    .van-pull-refresh {
      height: 100vh;
      overflow: auto;
    }
    .box {
      padding: 0 15px;
      border-radius: 8px;
      background: #fff;
      margin: 0 20px 15px;
      &:first-child {
        margin-top: 15px;
      }
      .title {
        height: 40px;
        p {
          color: #333;
          font-size: 14px;
        }
        span {
          color: #ff523d;
          font-size: 14px;
        }
      }
      .content {
        .room {
          padding: 10px 0;
          border-bottom: 1px solid #ddd;
          border-top: 1px solid #ddd;
          img {
            width: 133px;
            height: 100px;
            border-radius: 4px;
            margin-right: 15px;
            flex-shrink: 0;
          }
          .info {
            h5 {
              color: #222;
              font-size: 13px;
              max-height: 30px;
              line-height: 15px;
              overflow: hidden;
              margin: 5px 0;
            }
            p {
              color: #999;
              font-size: 14px;
              line-height: 20px;
            }
          }
        }
        .room.none {
          background: #f9f9f9;
          flex-direction: column;
          border-radius: 4px;
          margin-bottom: 20px;
          justify-content: center;
          margin: 0;
          border: 0;
          height: 100px;
          img {
            max-width: 100%;
            width: 50px;
            height: auto;
            margin: 0 0 8px;
          }
          p {
            color: #bbb;
            font-size: 11px;
          }
        }
        .message {
          color: #999;
          font-size: 14px;
          > div {
            margin: 10px 0;
          }
          .pay {
            color: #444;
          }
        }
      }
      .footer {
        height: 40px;
        border-top: 1px solid #ddd;
        p {
          color: #222;
          font-size: 14px;
        }
        i {
          color: #bbb;
          font-size: 14px;
          // transform: rotate(180deg);
        }
      }
    }
  }
}
</style>
