<template>
  <zj-page-layout
    :isScroll="true"
    :refresherTriggered="refresherTriggered"
    @refresherrefresh="refresherrefresh"
    @scrolltolower="scrolltolower"
  >
    <template slot="header">
      <view class="tab-container">
        <u-tabs
          :scrollable="false"
          :list="tabList"
          :current="curTab"
          @click="changeTab"
          lineColor="#3D8FFD"
          :activeStyle="{
            color: '#3D8FFD'
          }"
          :inactiveStyle="{
            color: '#666666'
          }"
          itemStyle="height: 88rpx;"
        >
        </u-tabs>
      </view>
    </template>

    <view class="list-container">
      <view class="item" v-for="(item, index) in dataList" :key="index" @tap="toDetail(item)">
        <view class="top">
          <view class="orderid">
            <view class="row" v-if="item.saleOrderId">
              <view class="ellipsis"
                >订单号<text>{{ item.saleOrderId }}</text></view
              >
              <view class="copy" @tap.stop="$copy(item.saleOrderId)">复制</view>
            </view>
            <view class="row">
              <view class="ellipsis"
                >工单号<text>{{ item.id }}</text></view
              >
              <view class="copy" @tap.stop="$copy(item.id)">复制</view>
            </view>
          </view>
          <view class="right">{{ getStatus(item) }}</view>
        </view>

        <view class="goods" :class="'goods' + idx" v-for="(it, idx) in item.pgOrderProducts" :key="idx">
          <image :src="it.imgUrl" mode="aspectFill"></image>
          <view class="main">
            <view class="name ellipsis-2">{{ it.smallName }}</view>
            <!-- <view class="des">{{it.small_name}}</view> -->
            <view class="tags">
              <view class="tag1" v-if="it.brandName">{{ it.brandName }}</view>
              <view class="tag2">{{ it.mainName }}</view>
            </view>
          </view>
        </view>
        <view class="info" v-if="item.appointmentTime">
          <view class="label">预约时间</view>
          <view class="value">{{ item.appointmentTime.slice(0, 10) }}</view>
        </view>

        <!-- 按钮：待预约 -->
        <view class="btn-group" v-if="orderStatus_v(item.orderStatus, item) === 'DYY'">
          <div class="button red" @tap.stop="toBook(item.id, 1)">立即预约</div>
        </view>
        <!-- 按钮：服务中 -->
        <view class="btn-group" v-else-if="orderStatus_v(item.orderStatus, item) === 'FWZ'">
          <div class="button red" @tap.stop="toBook(item.id, 2)">改约</div>
        </view>
        <!-- 按钮：待评价 -->
        <view
          class="btn-group"
          v-else-if="orderStatus_v(item.orderStatus, item) === 'YWG' || orderStatus_v(item.orderStatus, item) === 'YJS'"
        >
          <!-- <div class="button gray" v-if="item.pay_confirm_path" @tap.stop="$navPage(`/pages/mine/workOrder/receipt?imgurl=${item.pay_confirm_path}`)">查看收据</div> -->
          <div class="button white" @tap.stop="toAppraise(item.id)" v-if="item.appraiseStatus == 'N'">评价</div>
          <div class="button gray">查看详情</div>
        </view>
        <!-- 按钮：已完成 -->
        <view
          class="btn-group"
          v-else-if="orderStatus_v(item.orderStatus, item) === 'YWG' || orderStatus_v(item.orderStatus, item) === 'YJS'"
        >
          <!-- <div class="button gray" v-if="item.pay_confirm_path" @tap.stop="$navPage(`/pages/mine/workOrder/receipt?imgurl=${item.pay_confirm_path}`)">查看收据</div> -->
          <div class="button white" @tap.stop="toAppraise(item.id)" v-if="item.appraiseStatus == 'N'">评价</div>
          <div class="button gray">查看详情</div>
        </view>
        <u-gap height="20" v-else></u-gap>
      </view>
    </view>

    <Loading :type="2" :loadStatus="loadStatus" :dataList="dataList" />
  </zj-page-layout>
</template>

<script>
import orderStatus_v from './mixins/orderStatus_fh.js'
export default {
  data() {
    return {
      refresherTriggered: false,
      dataList: [], // 订单列表
      pageNum: 1,
      loadStatus: 0,
      tabList: [
        { key: '', name: '全部' },
        { key: 1, name: '待预约' },
        { key: 2, name: '服务中' },
        { key: 3, name: '待评价' },
        { key: 4, name: '已完成' }
      ],
      tabCurrent: '',

      pgIncreOrderId: '', //延保订单id
      isWb: false
    }
  },

  computed: {
    curTab() {
      return this.tabList.map(item => item.key).indexOf(this.tabCurrent) || 0
    }
  },

  onLoad({ tab, pgIncreOrderId, isWb }) {
    this.tabCurrent = tab ? Number(tab) : ''
    this.isWb = isWb == 1 ? true : false
    if (pgIncreOrderId) {
      this.pgIncreOrderId = pgIncreOrderId
    }
    this.refreshList()

    this.crossPage.$on('refreshUserWorkorderList', data => {
      this.refreshList()
    })
  },

  onUnload() {
    this.crossPage.$off('refreshUserWorkorderList')
  },

  methods: {
    orderStatus_v,

    async getList() {
      return new Promise((resolve, reject) => {
        this.$api
          .post('/pg/order/base/list2', {
            pageNum: this.pageNum,
            pageSize: 10,
            flag: this.tabCurrent,
            pgIncreOrderId: this.pgIncreOrderId || '',
            isWb: this.isWb
          })
          .then(res => {
            this.loadStatus = 0
            let list = res.data.records
            if (list.length < 10) {
              this.loadStatus = 2
            }
            this.dataList = this.dataList.concat(list)
          })
          .catch(() => {
            this.loadStatus = 2
          })
          .finally(res => {
            resolve(1)
          })
      })
    },

    async refreshList() {
      this.dataList = []
      this.pageNum = 1
      await this.getList()
    },

    // 下拉刷新
    async refresherrefresh() {
      this.refresherTriggered = true
      await this.refreshList()
      this.refresherTriggered = false
    },

    // 触底加载
    scrolltolower() {
      if (this.loadStatus === 0) {
        this.pageNum++
        this.getList()
      }
    },

    getStatus(item) {
      if (this.orderStatus_v(item.orderStatus, item) == 'DYY') {
        return '待预约'
      } else if (this.orderStatus_v(item.orderStatus, item) == 'FWZ') {
        return '服务中'
      } else if (
        (this.orderStatus_v(item.orderStatus, item) == 'YWG' || this.orderStatus_v(item.orderStatus, item) == 'YJS') &&
        item.appraiseStatus == 'N'
      ) {
        return '待评价'
      } else if (
        (this.orderStatus_v(item.orderStatus, item) == 'YWG' || this.orderStatus_v(item.orderStatus, item) == 'YJS') &&
        item.appraiseStatus != 'N'
      ) {
        return '已完成'
      }
    },

    // 去评价
    toAppraise(id) {
      this.navToPage(`/packageWorkorder/pages/appraise?id=${id}`)
    },

    // 去预约改约
    toBook(id, type) {
      this.navToPage(`/packageWorkorder/pages/bookTime?id=${id}&type=${type}`)
    },

    // 切换类型
    changeTab(item) {
      this.tabCurrent = item.key
      this.refreshList()
    },

    toDetail(item) {
      this.navToPage(`/packageWorkorder/pages/userWorkorderDetail?id=${item.id}`)
    },

    searchData() {
      this.navToPage(`/packageWorkorder/pages/search?keyword=${this.keyword}`)
    },

    navToPage(url) {
      this.$navToPage({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-container {
  background: #ffffff;
}

.list-container {
  padding: 1rpx 20rpx 40rpx;
  .item {
    margin-top: 20rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 0 20rpx;
    .top {
      padding-top: 30rpx;
      display: flex;
      justify-content: space-between;
      .orderid {
        .row {
          margin-bottom: 20rpx;
          display: flex;
          align-items: center;
          view {
            font-size: 28rpx;
            color: $sec-font;
            text {
              margin-left: 20rpx;
              color: $main-font;
            }
          }
          .copy {
            flex-shrink: 0;
            margin-left: 16rpx;
            font-size: 28rpx;
            color: $theme-color;
          }
        }
      }
      .right {
        font-size: 28rpx;
        color: $assist-color;
      }
    }
    .goods {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
      image {
        width: 140rpx;
        height: 140rpx;
        display: block;
        flex-shrink: 0;
        margin-right: 20rpx;
      }
      .main {
        flex: 1;
        display: flex;
        flex-direction: column;
        .name {
          font-size: 28rpx;
          color: #333333;
          line-height: 36rpx;
          font-weight: 500;
        }
        .des {
          font-size: 28rpx;
          color: #999999;
          margin-top: 16rpx;
        }
        .tags {
          margin-top: 16rpx;
          display: flex;
          .tag1 {
            font-size: 24rpx;
            height: 42rpx;
            line-height: 42rpx;
            padding: 0 16rpx;
            margin-right: 10rpx;
            border: 1px solid $theme-color;
            color: $theme-color;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            flex-direction: row;
            border-radius: 10rpx;
          }
          .tag2 {
            height: 42rpx;
            padding: 0 16rpx;
            line-height: 42rpx;
            border-radius: 10rpx;
            background: #e8e8e8;
            font-size: 24rpx;
            color: #666666;
          }
        }
      }
    }
    .info {
      font-size: 28rpx;
      color: #666666;
      margin-bottom: 20rpx;
      display: flex;
      .label {
        color: $sec-font;
        flex-shrink: 0;
        width: 128rpx;
      }
      .value {
      }
      .iconfont {
        margin-left: 16rpx;
      }
      text {
        color: $theme-color;
      }
    }
    .btn-group {
      height: 100rpx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      border-top: 1px solid #eaeaea;
      &.btn-group2 {
        justify-content: space-between;
        .tips {
          font-size: 28rpx;
          color: $theme-color;
        }
        .btns {
          display: flex;
        }
      }
      .button {
        width: 140rpx;
        height: 48rpx;
        border-radius: 48rpx;
        text-align: center;
        line-height: 48rpx;
        font-size: 24rpx;
        margin-left: 20rpx;
        flex-shrink: 0;
        &:first-child {
          margin-left: 0;
        }
        &.gray {
          color: #999999;
          border: 1px solid #999999;
        }
        &.white {
          color: $theme-color;
          border: 1px solid $theme-color;
        }
        &.red {
          color: #ffffff;
          border: 1px solid $theme-color;
          background: $theme-color;
        }
      }
    }
  }
}
</style>
