<template>
  <view class="history-view">
    <u-navbar
      back-icon-color="#333333"
      background="#FFFFFF"
      :title="title"
      titleColor="#333333"
      :border-bottom="false"
      title-bold
    ></u-navbar>
    <view class="none-view" v-if="noneHistory">
      <NoOrder
        text="当前暂无浏览记录"
        :customStyle="customStyle"
        imageName="zhangdan.png"
      />
    </view>
    <template v-else>
      <view class="loading-view" v-if="!loaded">
        <u-loading mode="flower"></u-loading>
      </view>
      <template v-else>
        <view class="head-view">
          <image
            :src="chakanjiluImage"
            class="back-image"
            mode="widthFix"
          ></image>
          <view class="head-info">
            <view>最近查看记录</view>
            <view class="head-message">最近查看或操作过的5条订单</view>
          </view>
        </view>
        <view class="content-view">
          <view v-for="item in orderList" :key="item.orderId">
            <OrderCell
              :orderData="item"
              :location="[]"
              model="simple"
              @click="handleClickCell"
              @action="handleClickButton"
            >
            </OrderCell>
          </view>
          <view class="bottom-tip">
            <u-loadmore
              :status="nomore"
              font-size="26"
              color="#999999"
            ></u-loadmore>
          </view>
        </view>
      </template>
    </template>
  </view>
</template>
<script>
import OrderCell from '@/components/order/index.vue'
import NoOrder from '@/components/order/noOrder.vue'

export default {
  components: {
    OrderCell,
    NoOrder,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loaded: false,
      orderList: [],
    }
  },
  computed: {
    title() {
      return this.noneHistory ? '浏览记录' : ' '
    },
    noneHistory() {
      return this.orderList.length <= 0 && this.loaded
    },
    idList() {
      return this.vuex_last_five_orders.filter((id) => id) || []
    },
    chakanjiluImage() {
      return process.uniEnv.qn_base_url + 'chakanjilu-y.png'
    },
    customStyle() {
      return 'background-color: #F4F5F7'
    },
  },
  onLoad() {
    getApp().trackPage('浏览记录')
    this.listOrderByIds()
  },
  methods: {
    listOrderByIds() {
      this.$u.api
        .listOrderByIds(
          this.$u.queryParams({ ids: this.idList }, true, 'repeat')
        )
        .then((res) => {
          this.loaded = true
          if (res.code == 200) {
            this.orderList = res.data
          } else {
            console.log(res.message, '获取订单详情失败！')
          }
        })
    },
    handleClickCell(item, type, showCountTime) {
      // type:类型，showCountTime：是否显示倒计时。详情页面情况太多，提前传值可以避免页面晃动
      //type类型
      // 'waitAccept': 待接单、待抢单;'waitAppointment': 待预约;'waitCheckIn': 待签到;'waitFinish': 待完工;'audit': 审核中;'exception': 异常单;'finish': 已完工;'other': 工单结算信息
      uni.navigateTo({
        url:
          'pages/order/detail?id=' +
          item.orderId +
          '&type=' +
          type +
          '&showCountTime=' +
          showCountTime,
      })
    },
    handleClickButton(item) {
      uni.navigateTo({
        url:
          'pages/order/complete?orderId=' +
          item.orderId +
          '&categoryId=' +
          item.categoryId +
          '&orderServiceType=' +
          item.orderServiceType +
          '&inGuaranteePeriod=' +
          item.inGuaranteePeriod +
          '&partnerCompanyId=' +
          item.partnerCompanyId +
          '&maintainStep=' +
          item.maintainStep +
          '&orderStatus=' +
          item.orderStatus +
          '&brandId=' +
          item.lianbaoBrandId +
          '&auditResults=' +
          (item.auditResults ? item.auditResults.join() : '') +
          '&orderNumber=' +
          item.orderNumber,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.history-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .none-view {
    margin-top: 140rpx;
  }
  .head-view {
    display: relative;
    .back-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: -1;
    }
    .head-info {
      padding: 0 30rpx 20rpx 30rpx;
      font-size: 48rpx;
      font-weight: bold;
      color: #333333;
      .head-message {
        font-size: 32rpx;
        color: #2272ff;
        font-weight: 400;
        margin-top: 14rpx;
      }
    }
  }
  .loading-view {
    width: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 0;
    position: fixed;
  }
  .content-view {
    height: 100%;
    overflow: auto;
    .bottom-tip {
      margin-bottom: 44rpx;
      margin-top: 30rpx;
    }
  }
}
</style>
