<template>
  <view class="content">
    <view class="container">
      <view class="haers">
        <view style="width: 30%; text-align: left;" @click="goback()">
          <u-icon name="arrow-left" color="#fff" size="18"></u-icon>
        </view>
        <view style="width: 30%; text-align: center; font-size: 18px;  ">
          收款记录
        </view>
        <view style="width: 30%;text-align: right;" @click="goCust()">
          自定义查询
        </view>
      </view>
      <view class="box_" v-for="(item,index) in dataList" :key="index">
        <view class="box-top">
          <view class="" style="font-size: 35rpx">{{ item.tradeList[0].createDate.substring(0, 11) }}</view>
          <view class="box-bs">
            <view class="h_size">收款总笔数:&nbsp;&nbsp;{{ item.totalCount }}</view>
            <view class="h_size">收款总金额:&nbsp;&nbsp;{{ item.tradeAmt }}</view>
          </view>
          <view class="box-bs">
            <view class="h_size">退款总笔数:&nbsp;&nbsp;{{ item.totalCountRefund }}</view>
            <view class="h_size">退款总金额:&nbsp;&nbsp;{{ item.tradeAmtRefund }}</view>
          </view>
        </view>
        <view class="box-bottom" v-for="it in item.tradeList">
          <view class="bottom-bs" @click="goDetails(it.orderNo)">
            <view class="">订单号</view>
            <view class="">{{ it.orderNo }}</view>
          </view>
          <view class="bottom-bs" @click="goDetails(it.orderNo)">
            <view class="">交易类型:{{ tradeTypeName(it.tradeType) }}</view>
            <view style="font-size: 20px;color: #E4612E; ">+{{ it.trxAmt }}</view>
          </view>
          <view class="bottom-bs" @click="goDetails(it.orderNo)">
            <view class="">设备SN:{{ it.tradeInfo }}</view>

          </view>
          <view class="bottom-bs" @click="goDetails(it.orderNo)">
            <view class="">{{ it.createDate }}</view>

          </view>
          <view class="box-end" @click="refund(it.orderNo)">
            <view class="aaniu">退款</view>
          </view>
        </view>
      </view>
      <u-loadmore :status="status" v-if="show == true"/>
    </view>

  </view>
</template>

<script>
import headers from '../../components/header/headers.vue'
import request from '../../utils/request.js'

export default {
  data() {
    return {
      refundFlag: false,
      titles: "收款记录",
      text: '请输入商户名称或SN查询',
      msg: "1",
      dataList: [],
      show: false,
      status: 'loading',
      page: 1,
      totalPage: 0,
      limit: 10,
      sn: null,
      tradeTypeList: []
    }
  },

  onLoad(option) {
    this.getDictList()
    if (option.sn) {
      this.sn = option.sn
    }
  },
  onShow() {
    this.dataList = []
    this.page = 1
    this.getTradeList()
  },

  onPullDownRefresh() {
    this.page = 1,
        this.limit = 10,
        this.totalPage = 0,
        this.dataList = [],
        this.getTradeList();

    uni.stopPullDownRefresh()
  },
  onReachBottom() {
    // 触底加载
    if (this.page < this.totalPage) {
      this.page++
      this.getTradeList()

    } else {
      uni.showToast({
        title: '没有下一页数据',
        icon: 'none'
      })
    }
  },
  components: {
    headers

  },
  methods: {
    refundSure(orderNo) {
      request({
        url: 'app/refund/byOrderNo',
        method: 'post',
        data: {
          orderNo: orderNo,

        },
      }).then(res => {
        uni.showToast({
          title: res.msg
        })

      })
    },
    refund(orderNo) {
      let that = this
      uni.showModal({
        title: '提示',
        content: '是否确定退款',
        success: function (res) {
          if (res.confirm) {
            that.refundSure(orderNo)
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });

    },
    tradeTypeName(type) {
      if (this.tradeTypeList && this.tradeTypeList.length > 0) {
        let tempData = this.tradeTypeList.find(item => item.value == type)
        return tempData.label
      } else {
        return '微信扫码'
      }
    },
    async getDictList() {
      this.tradeTypeList = await this.$getDictList('pos_order_online_trade_type')

    },
    getTradeList() {
      uni.showLoading({
        title: '加载中'
      });
      request({
        url: 'app/uaBase/tradeList',
        method: 'post',
        data: {
          limit: this.limit,
          page: this.page,
          sn: this.sn
        },
      }).then(res => {
        if (res.data) {
          if (this.page != 1) {
            this.dataList = this.dataList.concat(res.data)
          } else {
            this.dataList = res.data
          }
          this.totalPage = res.pages

        }

      }).finally(rrr => {
        uni.hideLoading()
      })
    },
    goDetails(orderNo) {
      uni.navigateTo({
        url: '/homePages/Manage/CollectionDetails?orderNo=' + orderNo
      })
    },
    goCust() {
      uni.navigateTo({
        url: '/homePages/EquipmentManagement/CustomQuery?sn=' + this.sn
      })
    },
    goback() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
input {
  &::-webkit-input-placeholder,
    /* WebKit browsers*/
  &:-moz-input-placeholder,
    /* Mozilla Firefox 4 to 18*/
  &::-moz-input-placeholder,
    /* Mozilla Firefox 19+*/
  &:-ms-input-placeholder

    /* Internet Explorer 10+*/
  {
    color: #fff !important;
  }
}

.content {
  background: #f4f4f4;
  height: 100vh;
}

.container {
  width: 100%;
  background: #f4f4f4;
  box-sizing: border-box;
  padding-top: 98px;
}

.haers {
  width: 100%;
  background: #E4612E;
  height: 88px;
  box-sizing: border-box;
  padding: 0px 15px;
  padding-top: 40px;
  color: white;
  z-index: 99999;
  background: #E4612E;
  position: fixed;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.input-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65%;
  height: 25px;
  border-radius: 50px;
  border: 1px solid #fff;
  color: white;

  input {
    width: 80%;
  }


}

.box_ {
  width: 95%;
  margin: 0 auto;
  margin-bottom: 15px;
  background: #fff;
  border-radius: 20rpx;
  // border-bottom: 1px solid #efefef;

}

.title_ {
  font-size: 18px;
  margin: 10px 0px;
}

.box-top {
  width: 100%;
  border-bottom: 1px solid #efefef;
  box-sizing: border-box;
  padding: 10px;
}

.box-bottom {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border-bottom: 1px solid #efefef;
}

.box-bs {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #979797;
  margin: 2px 0px;
  padding: 15rpx 0;
}

.bottom-bs {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #000000;
  //margin-bottom: 5px;
  padding: 15rpx 0;
}

.box-end {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.aaniu {
  width: 120px;
  height: 35px;
  border-radius: 50px;
  background: #E4612E;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
