<template>
  <view>
    <zj-page-layout
      :isScroll="true"
      :refresherTriggered="refresherTriggered"
      @refresherrefresh="refresherrefresh"
      @scrolltolower="scrolltolower"
    >
      <template slot="header">
        <view class="date-container" @tap="isShowDatePicker = true">
          <view class="box">
            <u-icon name="calendar" size="22"></u-icon>
            <view class="value" v-if="startDate">{{ startDate }}</view>
            <view class="placeholder" v-else>开始时间</view>
            <view class="text">至</view>
            <view class="value" v-if="endDate">{{ endDate }}</view>
            <view class="placeholder" v-else>结束时间</view>
          </view>
        </view>
        <view class="tab-container" v-if="tabCurrent > -1">
          <u-tabs
            :scrollable="false"
            :list="tabList"
            :current="tabCurrent"
            @click="changeTab"
            lineColor="#3D8FFD"
            :activeStyle="{
              color: '#3D8FFD'
            }"
            :inactiveStyle="{
              color: '#666666'
            }"
            itemStyle="padding-left: 0; padding-right: 0; height: 88rpx;"
          >
          </u-tabs>
        </view>
      </template>

      <view class="list-container">
        <view class="item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item)">
          <view class="row">
            <view class="label">订单单号</view>
            <view class="value">{{ item.orderId }}</view>
            <view class="status blue">{{ item.status | statusFilter }}</view>
          </view>
          <view class="row">
            <view class="label">客户电话</view>
            <view class="value">{{ item.userMobile }}</view>
          </view>
          <view class="row">
            <view class="label">订单金额</view>
            <view class="value">¥{{ item.totalAmount | priceFilter }}</view>
          </view>
          <view class="row">
            <view class="label">分账金额</view>
            <view class="value blue">¥{{ item.workerAmount | priceFilter }}</view>
            <view class="status blue">{{ { M: '辅材', P: '配件' }[item.goodsTyp] }}</view>
          </view>
        </view>
      </view>
      <Loading :loadStatus="loadStatus" :dataList="dataList" />
    </zj-page-layout>

    <zj-dialog-dateRangePicker v-model="isShowDatePicker" @confirm="confirmDate"></zj-dialog-dateRangePicker>
  </view>
</template>

<script>
import zjDialogDateRangePicker from '@/components/zj-dialog/zj-dialog-dateRangePicker.vue'

export default {
  components: {
    zjDialogDateRangePicker
  },

  filters: {
    statusFilter(val) {
      const MAP = {
        WAIT: '待结算',
        //  WAIT_ING: '可提现',
        //  ING: '提现中',
        OVER: '已结算',
        YC: '异常结算',
        OK: '已结算',
        LINE: '线下结算'
      }
      return MAP[val]
    }
  },

  data() {
    return {
      dataList: [],
      pageNum: 1,
      loadStatus: 0,
      refresherTriggered: false,
      tabList: [
        { name: '待结算', value: 'WAIT' },
        //  {name: '可提现', value: 'WAIT_ING'},
        //  {name: '提现中', value: 'ING'},
        { name: '已结算', value: 'OVER' }
      ],
      status: '',
      isShowDatePicker: false,
      startDate: '',
      endDate: ''
    }
  },

  computed: {
    tabCurrent() {
      return this.tabList.map(item => item.value).indexOf(this.status)
    }
  },

  onLoad({ tab }) {
    this.status = tab
    this.getList()
  },

  methods: {
    getList() {
      this.loadStatus = 1
      this.$api
        .post('/settlementOrder/list/pageV2', {
          pageNum: this.pageNum,
          pageSize: 10,
          startTime: this.startDate ? this.startDate + ' 00:00:00' : '',
          endTime: this.endDate ? this.endDate + ' 23:59:59' : '',
          status:
            {
              WAIT: 'WAIT, YC',
              OVER: 'OK, LINE'
            }[this.status] || ''
        })
        .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 => {
          this.refresherTriggered = false
        })
    },

    changeTab(e) {
      // this.tabCurrent = e.index;
      this.status = e.value
      this.refreshList()
    },

    // 选择日期
    confirmDate(item) {
      let [start, end] = item
      if (start == '' || end == '') {
        this.startDate = ''
        this.endDate = ''
        return
      }
      this.startDate = start
      this.endDate = end

      this.refreshList()
    },

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

    // 滚动到底部
    scrolltolower(e) {
      if (this.loadStatus === 0) {
        this.pageNum++
        this.getList()
      }
    },

    // 触发下拉刷新
    refresherrefresh(e) {
      this.refresherTriggered = true
      this.refreshList()
    },

    toDetail(item) {
      if (item.goodsTyp == 'M') {
        this.$navToPage({
          url: `/packageMaterial/pages/sale/orderDetail?id=${item.orderId}`
        })
      } else if (item.goodsTyp == 'P') {
        this.$navToPage({
          url: `/packageMaterial/pages/newSale/orderDetail?id=${item.orderId}`
        })
      }
    }
  }
}
</script>

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

.date-container {
  background: #ffffff;
  padding: 0 20rpx;
  .box {
    padding-left: 20rpx;
    border: 1px solid #eaeaea;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    height: 60rpx;
    .placeholder {
      flex: 1;
      text-align: center;
      font-size: 28rpx;
      color: $sec-font;
    }
    .value {
      flex: 1;
      text-align: center;
      font-size: 28rpx;
    }
    .text {
      font-size: 28rpx;
    }
  }
}

.list-container {
  padding: 0 20rpx;
  .item {
    @include zj-card;
    margin-top: 20rpx;
    padding: 30rpx;
    .row {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      &:first-child {
        margin-top: 0;
      }
      .label {
        font-size: 28rpx;
        color: $sec-font;
        margin-right: 20rpx;
      }
      .value {
        flex: 1;
        font-size: 28rpx;
        text {
          color: $minor-color;
        }
      }
      .status {
        margin-left: 30rpx;
        font-size: 28rpx;
      }
      .blue {
        color: $theme-color;
      }
      .green {
        color: $success-color;
      }
      .orange {
        color: $assist-color;
      }
    }
  }
}
</style>
