<template>
  <div class="order" v-if="isorder">
   
    <div class="order-status">
      <div class="order-success">
        {{orderInfo.SALEBILL_STATE_TEXT}}
      </div>
      <div class="status-btn-box">
        <block v-if="orderInfo.SALEBILL_STATE === 1005">
          <div class="back-btn" @click="orderCancle">取消订单</div>
          <div class="continu-btn" @click="goPayment">去付款 <span>{{minutes}}</span></div>
        </block>
        <!-- <block v-if="orderInfo.SALEBILL_STATE !== 1005 && orderInfo.SALEBILL_STATE!==1010 && orderInfo.COMMENT_STATE===0">
          
          <div class="continu-btn" @click="goEvaluate">评价得积分</div>
        </block> -->
      </div>
    </div>
    <div class="hx-block"></div>
    <div class="order-box">
      
      <p class="order-info-h" >
        {{orderInfo.SUPPLIER_NAME}}
      </p>
      <div class="order-list border-bottom" v-for="(item,i) in orderInfo.List" :key=i>
        <div  class="order-img">
          <image mode="aspectFill" lazy-load="true" :src="item.IMAGE_PATH || 'https://eshangtech.com/ShopICO/no-picture.png'"></image>
        </div> 
        <div>
          <div class="order-name">{{item.COMMODITY_NAME}}</div>
          <div class="order-num">数量：{{item.ORDER_COUNT}}</div>
          <div class="order-price">{{item.AVERAGE_PRICE+ (orderInfo.SALEBILL_TYPE==3010 ? '积分' :'元')}}</div>
          <div class="product-btn-box" v-if="orderInfo.SALEBILL_STATE > 1005 && item.COMMENT_STATE==0 && orderInfo.SALEBILL_CHILD_ID!=''">
            <span class="advice-btn" @click="goEvaluate(item)">立即评价</span>
          </div>
        </div>
        
        <p class="order-info-type" v-if="item.VIDEOCARD_CDK"><span class="order-info-t">券码：</span><span>{{item.VIDEOCARD_CDK}}</span></p>
      </div>
    </div>

    <div class="order-info">
      <p class="order-info-type"><span class="order-info-t">订单编号：</span><span>{{orderInfo.SALEBILL_CODE}}</span></p>

      <p class="order-info-type"><span class="order-info-t">下单时间：</span><span>{{orderInfo.ORDER_DATE}}</span></p>
      <p class="order-info-type"  v-if="orderInfo.SALEBILL_STATE !== 1005"><span class="order-info-t">支付方式：</span><span>{{orderInfo.CHANNEL_TYPE}}</span></p>
			<block v-if="orderInfo.ADDRESS">
        <hr class="order-detail-hr" />

        <div class="address-info">
          <span class="order-info-t">收货地址：</span>
          <div class="">
            <p>{{orderInfo.ADDRESS + orderInfo.DOORPLATE}}</p>
            
          </div>
        </div>
        <div class="address-info">
          <span class="order-info-t">收货信息：</span>
          <div class="">
            <p>{{orderInfo.USER_NAME+' '+orderInfo.MOBILEPHONE}}</p>
          </div>
        </div>
      </block>
    </div>
    
		<div class="order-info">
			<!-- <p class="coupon"><span class="order-info-t">商品总额</span><span style="font-size:28rpx;color:#000000;">{{ orderInfo.SALEBILL_TYPE==3010 ? orderInfo.CONSUME_POINT+'积分' :orderInfo.ORDER_AMOUNT+'元'}}</span></p> -->
			<!-- <div class="coupon" v-if="orderInfo.COUPON_AMOUNT">
			
				<div>
					
					<span>优惠</span>
				</div>
				<div style="font-size:28rpx;color:#000000;">
					-￥{{orderInfo.COUPON_AMOUNT}}
				</div>
			</div> -->
			<!-- <hr class="order-price-hr"> -->
			<div class="price-sum">
				<div class="link-store" @click="callPhone">
					<van-icon name="phone-circle-o" size="40rpx" color="#CAA97F" custom-style="margin-right:16rpx;vertical-align:middle;"></van-icon>
					联系商家
				</div>
				<div class="">

					<span>合计：</span>
					<span class="pay-price">{{ orderInfo.SALEBILL_TYPE==3010 ? orderInfo.CONSUME_POINT+'积分' : tatalMoney+ '元'}}</span>
				</div>
        
			</div>
		</div>

    <van-popup :show="isShow"
      position="bottom"
      overlay="false"
      @close="onClose">
      <div class="bottom-box">
        <div class="bottom-pop-title">确认支付方式</div>
        <div class="bottom-content">
          <van-radio-group :value="cardPay.payType" @change="changePayType">
        
            <van-radio name="余额支付" checked-color="#CAA97F" class="bottom-radio" :disabled="!cardPay.canCardPay">
              <span :class="{'disable': !cardPay.canCardPay}">余额支付<span style="font-size:24rpx;">{{' (剩余:￥'+cardPay.amount+') '+ (!cardPay.canCardPay ? cardPay.reason : '') }}</span></span>
            </van-radio>
            <van-radio name="微信支付" checked-color="#CAA97F" class="bottom-radio">
              <span class="">微信支付</span>
            </van-radio>
          </van-radio-group>
        </div>
        
        <div class="bottom-btn" @click="isGoPay">立即付款</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      orderInfo: {},
      isorder: false,
      shopOrder: [],
      payType: '余额支付',
      buyerAddress: {},
      minutes: '',
      isMinute: false,
      timer: '',
      isShow: false,
      cardPay: {
        payType: '余额支付', // 用户支付方式
        reason: '',
        canCardPay: true, // 是否可以余额支付
        amount: ''// 实业饭卡余额
      }
    }
  },
  computed: {
    ...mapGetters(['user']),
    tatalMoney () {
      return Math.round(this.orderInfo.PAY_AMOUNT * 100) / 100
    },
    orderAmount () {
      return Math.round(this.orderInfo.ORDER_AMOUNT * 100) / 100
    }
  },
  methods: {
    // 倒计时
    num (n) {
      return n < 10 ? '0' + n : '' + n
    },
    showTime () {
      let _this = this
      _this.timer = setInterval(function () {
        // debugger
        let oldTime = (new Date(_this.orderInfo.ORDER_DATE).getTime()) / 1000 + 15 * 60
        let nowTime = new Date().getTime() / 1000
        let timediff = parseInt(oldTime - nowTime)
        if (timediff > 0) {
          _this.minutes = '(' + parseInt(timediff / 60) + '分' + timediff % 60 + '秒)'
          _this.isMinute = true
        } else if (timediff <= 0) {
          _this.minutes = ''
          _this.isMinute = false
          clearInterval(_this.timer)
          _this.getMallOrderDetail({orderInternal: _this.orderInfo.SALEBILL_ID, sellchildid: _this.orderInfo.SALEBILL_CHILD_ID})
          // console.log(1)
        }
      }, 1000)
    },
    changePayType (data) {
      this.cardPay.payType = data.mp.detail
    },
    onClose () {
      this.isShow = false
    },
    isGoPay () {
      if (this.cardPay.payType === '余额支付') { // 如果该用户进行余额支付
        this.payByCard()
      } else {
        this.isShow = false
        this.getOrderInfo()
      }
    },
    goPayment () { // 判断用户是否可余额支付
      if (this.cardPay.payType === '余额支付') {
        this.getCardAmount()
        this.isShow = true
      } else {
        this.getOrderInfo()
      }
    },
    // 获取订单状态
    getMallOrderDetail (obj) {
      let _this = this
      _this.$api.getCoop({
        action_type: 'GetMallOrderDetail',
        salebillId: obj.orderInternal,
        salebillChildId: obj.sellchildid || 0,
        showAddress: 1
      }).then(res => {
        if (res.ResultCode === '100') {
          let _data = res.Data
          _this.orderInfo = _data
          _this.buyerAddress = _data.AddressInfo || ''

          _this.isorder = true
          if (_data.SALEBILL_STATE === 1005 && _data.ORDER_DATE) {
            _this.showTime()
          }
        }
      })
    },
    getCardAmount () {
      let _this = this
      _this.$api.getCoop({
        action_type: 'GetIndustryMemberInfo'

        // serverpartShopId: _this.orderInfo.SERVERPARTSHOP_ID

      }).then(rs => {
        if (rs.ResultCode === '100') {
          _this.cardPay.amount = rs.Data.INDUSTRY_ACCOUNT_BALANCE

          if (_this.cardPay.amount < _this.orderAmount) {
            _this.cardPay.payType = '微信支付'
            _this.cardPay.canCardPay = false
            _this.cardPay.reason = '余额不足'
          } else {
            _this.cardPay.payType = '余额支付'
            _this.cardPay.canCardPay = true
            _this.cardPay.reason = ''
          }
        } else {
          _this.cardPay.amount = rs.Data.INDUSTRY_ACCOUNT_BALANCE
          _this.cardPay.payType = '微信支付'
          _this.cardPay.canCardPay = false
          _this.cardPay.reason = rs.ResultDesc
        }
        _this.isShow = true
        _this.$forceUpdate()
      })
    },
    payByCard () { // 实业饭卡支付
      let _this = this
      _this.$api.postCoop({
        action_type: 'ECodeConsume',

        industryMembershipId: _this.user.INDUSTRY_MEMBERSHIP_ID,
        saleBill: _this.orderInfo.SALEBILL_ID
      }).then(rs => {
        if (rs.ResultCode === '100') {
          mpvue.showToast({
            title: '支付成功',
            icon: 'success',
            duration: 2000
          })
          _this.isShow = false
          setTimeout(() => {
            // _this.$store.commit('couponPrice', '')
            mpvue.redirectTo({url: '/pages/orders/buyOrder/main'})
          }, 1000)
        } else {
          mpvue.showToast({
            title: rs.ResultDesc,
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
    // 取消订单
    orderCancle () {
      let _this = this
      mpvue.showModal({
        title: '温馨提示',
        content: '您是否确认取消订单。',
        success (res) {
          if (res.confirm) {
            _this.$api.postCoop({
              action_type: 'UpdateOrderState',
              action_data: _this.orderInfo.SALEBILL_ID,
              SALEBILL_STATE: 9000
            }).then(res => {
              if (res.error === 1) {
                mpvue.showToast({
                  title: '取消订单成功',
                  icon: 'none',
                  duration: 2000,
                  success: function () {
                  }
                })
                mpvue.navigateBack({delta: 1})
                // mpvue.redirectTo({url: '/pages/orders/buyOrder/main'})
              } else {
                mpvue.showToast({
                  title: res.msg,
                  icon: 'none',
                  duration: 2000
                })
              }
            })
          } else if (res.cancel) {

          }
        }
      })
    },
    // 获取后台信息调取微信支付
    getOrderInfo () {
      let _this = this
      _this.$api.postCoop({
        action_type: 'JsApiPay',
        action_data: 1,
        action_record: _this.user.WECHATAPP_OPENID,
        // action_record: 'ortWV5OP2g9P81cxxJYIIhrAezS4',
        TOTAL_FEE: _this.tatalMoney,
        OFFPRICE: 0,
        payType: 2,
        SALEBILL_ID: _this.orderInfo.SALEBILL_ID,
        SALEBILL_CODE: _this.orderInfo.SALEBILL_CODE
      }).then(res => {
        // console.log(res)
        if (res) {
          mpvue.requestPayment({
            appId: res.appId, // 公众号名称，由商户传入
            timeStamp: res.timeStamp + '', // 时间戳，自1970年以来的秒数
            nonceStr: res.nonceStr, // 随机串
            package: res.package,
            signType: res.signType, // 微信签名方式
            paySign: res.paySign, // 微信签名
            success (res) {
              if (res.errMsg === 'requestPayment:ok') {
                mpvue.showToast({
                  title: '支付成功',
                  icon: 'success',
                  duration: 1000
                })
                _this.$api.postCoop({
                  action_type: 'EndPay',
                  action_data: _this.orderInfo.SALEBILL_CODE,
                  action_record: 1
                }).then(res => {
                  // _this.$store.commit('couponPrice', '')
                  mpvue.redirectTo({url: '/pages/orders/buyOrder/main'})
                  // mpvue.redirectTo({url: '/pages/orders/buydetail/main?orderNumber=' + _this.orderInfo.SALEBILL_CODE + '&orderInternal=' + _this.orderInfo.SALEBILL_ID})
                })
              }
            },
            fail (res) {
              if (res.errMsg === 'requestPayment:fail cancel') {
                mpvue.showToast({
                  title: '支付取消',
                  icon: 'none',
                  duration: 2000
                })
              }
            },
            complete (res) {}
          })
        } else {
          mpvue.showToast({
            title: '网络异常，请稍后再试',
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
    goEvaluate (item) {
      mpvue.navigateTo({ url: '/pages/newEvaluate/main?sellchildid=' + this.orderInfo.SALEBILL_CHILD_ID + '&orderInternal=' + item.SALEBILL_ID + '&proid=' + item.COMMODITY_ID })
    },
    callPhone () {
      let _this = this
      mpvue.makePhoneCall({
        phoneNumber: _this.orderInfo.SELLER_TELEPHONE
      })
      // mpvue.showModal({
      //   title: '温馨提醒',
      //   content: '是否拨打电话，联系商家',
      //   success (res) {
      //     if (res.confirm) {
      //     }
      //   }
      // })
    }
  },
  onUnload () {
    this.orderInfo = {}
    this.minutes = ''
    this.isorder = false
    clearInterval(this.timer)
  },
  onShow () {
    // this.getMallOrderDetail()
  },
  onLoad (option) {
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#C8B190',
      animation: {
        duration: 30,
        timingFunc: 'linear'
      }
    })
    // this.orderNumber = option.orderNumber
    // this.orderInternal = option.orderInternal
    this.getMallOrderDetail(option)
    this.$utils.addUserBehaviorNew();
  }
}
</script>
<style lang="stylus" scoped>
page
  background-color #F3F2F7
bodyColor = #f5ba56
.disable  
  color #999
.order
  background #F3F2F7
  padding-bottom 30rpx
  box-sizing border-box
  height 100%
.order-status
  padding 32rpx 32rpx 56rpx 32rpx
  background linear-gradient(#C8B190,#A18153)
  display flex 
  align-items center
  justify-content space-between
.order-s-ico
  width 89rpx
  height 89rpx

.order-success
  color #fff
  font-size 36rpx
  // margin-bottom 32rpx
.status-btn-box 
  justify-content flex-end
  font-size 24rpx
  display flex
  align-items center
  margin-top 12rpx
.back-btn
  color #7E5314
  border 1rpx solid #7E5314
  width 120rpx
  height 48rpx
  text-align center
  line-height 48rpx
  border-radius 6rpx
.continu-btn
  color #fff
  border 1rpx solid #fff
  min-width 160rpx
  height 48rpx
  text-align center
  line-height 48rpx
  border-radius 6rpx
  margin-left 36rpx
  padding 0 12rpx
.hx-block
  top -26rpx
  position relative
  width 100%
  height 30rpx
  border-radius 30rpx 30rpx 0 0
  background #F3F2F7

.order-box
  background-color #fff
  padding 0 24rpx
  margin 0 24rpx
  border-radius 12rpx
  box-sizing border-box
  // box-shadow 0 2rpx 16rpx 0.4rpx #e2e2e2
.order-top
  display flex
  justify-content space-between
  align-items center
  font-size 30rpx
  border-bottom 1rpx solid #F5F5F5
  height 100rpx
  box-sizing border-box
  margin-bottom 24rpx

.order-list,.coupon
  padding 20rpx 0
  box-sizing border-box
  background-color #fff
  display flex
  color #000000
.border-bottom
	border-bottom 1rpx solid #F5F5F5
.order-img
	width 160rpx
	height 158rpx
	margin-right 16rpx
	background #f8f8f8
	border-radius 8rpx
	image
		width 160rpx
		height 158rpx
		border-radius 8rpx
.order-name
	font-size 26rpx
	text-overflow ellipsis
	overflow hidden
	white-space nowrap
	width 500rpx
.order-num
  font-size 22rpx
  color #9A9A9A
  line-height 2
.order-price
  font-size 30rpx

  color #333

  font-weight bolder
    
.coupon
  justify-content space-between
  font-size 26rpx
  // border-top 1rpx solid #F5F5F5
  // margin-top 24rpx
  // padding-top 36rpx
.coupon-h
  display inline-block
  background #ed4d3e
  color #ffffff
  padding 4rpx 6rpx
  border-radius 6rpx
  margin-right 10rpx
.price-sum
  // border-top 2rpx sold #f5f5f5
  padding 16rpx 0
  box-sizing border-box
  background-color #fff
  text-align right 
  font-size 24rpx
  display flex
  justify-content space-between
.pay-price
  color #CB5050
  font-size 30rpx
  margin-left 10rpx
.link-store
  color #C6A376
  display flex
  align-items center
hr.order-detail-hr
	background-color #f5f5f5
	height 2rpx
	margin-top 36rpx
	width 500rpx
	margin-left 148rpx
	margin-bottom 24rpx
hr.order-price-hr
  background-color #f5f5f5
  height 2rpx
  margin-top 16rpx
  margin-bottom 16rpx
//订单信息
.order-info
  background-color #fff
  padding 16rpx 20rpx
  border-radius 12rpx
  margin 24rpx 24rpx
.order-info-type
  height 64rpx
  line-height 64rpx
  font-size 26rpx
  display flex
  align-items center

.address-info

  padding 20rpx 0
  font-size 26rpx
  display flex
  align-items flex-start

.order-info-t
  color #666
  min-width 150rpx
.appoint
  display flex
  align-items center
.appoint:after
  content '预'
  padding 0 4rpx
  font-size 20rpx
  height 24rpx
  line-height 24rpx
  margin-left 16rpx
  font-weight normal
  color #fff
  border-radius 4rpx
  background #F5BA4F
.order-info-h
	font-size 28rpx
	font-weight bold
	color #000
	display flex 
	justify-content space-between
	height 96rpx
	line-height 96rpx
.order-info-status
  font-weight normal
  font-size 24rpx

.product-btn-box
  display flex
  align-items center
  justify-content flex-end
  padding-right 56rpx
.advice-btn
  color #dc615a
  border 2rpx solid #dc615a
  text-align center
  border-radius 40rpx
  font-size 22rpx
  width 120rpx
  height 42rpx
  line-height 40rpx
/* 支付方式选择*/ 
.bottom-box
  height 450rpx
  width 100%
  box-sizing content-box
.bottom-pop-title
  text-align center
  font-size 32rpx
  padding 20rpx 0
  border-bottom 1rpx solid #f9f9f9
.bottom-content
  box-sizing content-box
  padding 0 80rpx
.bottom-radio
  padding 0 24rpx
.bottom-btn
  width 600rpx
  margin 20rpx auto
  border-radius 8rpx
  background #444
  color #caa97f
  font-size 32rpx
  text-align center
  height 80rpx
  line-height 80rpx
</style>

