<template>
  <u-popup
    v-model="visible"
    mode="center"
    safe-area-inset-bottom
    width="690rpx"
    border-radius="12"
    close-icon-color="#333333"
  >
    <view class="pop-view">
      <image :src="chakanjiluImage" class="back-image" mode="widthFix"></image>
      <view class="head-view">
        <view class="left-view">
          <view>最近查看记录</view>
          <view class="head-message">最近查看或操作过的5条订单</view>
        </view>
        <view class="close-button" @click="$u.throttle(handleClose, 500)">
          <u-icon name="close"></u-icon>
        </view>
      </view>
      <view class="none-view" v-if="orderList.length <= 0">
        <NoOrder text="当前暂无查看记录" />
      </view>
      <view class="content-view" v-else>
        <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>
    </view>
  </u-popup>
</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 {
      // orderList: [],
      loaded: false,
    }
  },
  computed: {
    orderList() {
      return this.vuex_last_five_orders.filter((item) => item) || []
    },
    chakanjiluImage() {
      return process.uniEnv.qn_base_url + 'chakanjilu.png'
    },
  },
  methods: {
    // getOrderList() {
    //   this.loaded = false
    //   var param = {
    //     pageNumber: 1,
    //     pageSize: 5,
    //     keyword: '',
    //     type: 'zuijinlianxi',
    //   }
    //   this.$u.api.listOrder(param).then((res) => {
    //     if (res.code == 200) {
    //       this.orderList = res.data.list || []
    //     } else {
    //       console.log(res.message, '获取订单数量失败！')
    //     }
    //     this.loaded = true
    //   })
    // },
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },

    handleClickCell(item, type, showCountTime) {
      this.$emit('update:visible', false)
      this.$emit('click', 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, type, showCountTime) {
      this.$emit('update:visible', false)
      this.$emit('click', item, type, showCountTime)
      // 去完工
      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>
.pop-view {
  // padding: 30rpx;
  max-height: 900rpx;
  display: flex;
  flex-direction: column;
  display: relative;
  .back-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
  }
  .head-view {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .left-view {
      padding: 30rpx 30rpx 20rpx 30rpx;
      font-size: 48rpx;
      font-weight: bold;
      color: #333333;
      .head-message {
        font-size: 32rpx;
        color: #2272ff;
        font-weight: 400;
        margin-top: 14rpx;
      }
    }
    .close-button {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 14rpx;
    }
  }
  .none-view {
    margin-top: 30rpx;
    margin-bottom: 50rpx;
  }
  .content-view {
    height: 100%;
    overflow: auto;
    .bottom-tip {
      margin-bottom: 44rpx;
      margin-top: 30rpx;
    }
  }
}
</style>
