<template>
  <div class="order" v-if="isorder">
   
    <div class="order-status">
      <div class="order-success">
        {{orderInfo.SALEBILL_STATE==1010 ? '待商家接单': 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.SALEBILL_STATE!==9000 && orderInfo.COMMENT_STATE===0">
          <!-- <div class="back-btn" @click="goShop" v-if="orderInfo.SALEBILL_STATE!=1010">再来一单</div> -->
          <div class="continu-btn" @click="goEvaluate">评价得积分</div>
        </block>
      </div>
    </div>
    <div class="hx-block"></div>
    <div class="order-info">
      <p class="order-info-type order-info-h" >
        <span :class="{'appoint':orderInfo.TAKE_TYPE===2000}">订单信息</span>
        <span class="order-info-status">{{orderInfo.SALEBILL_STATE_TEXT}}</span>
      </p>
      <p class="order-info-type"><span class="order-info-t">订单编号</span><span>{{orderNumber}}</span></p>

      <p class="order-info-type"><span class="order-info-t">下单时间</span><span>{{orderInfo.ORDER_DATE}}</span></p>
      <block v-if="orderInfo.TAKE_TYPE === 2000">

        <p class="order-info-type"><span class="order-info-t">下单人员</span><span>{{orderInfo.ORDER_PERSON}}</span></p>
        <p class="order-info-type"><span class="order-info-t">预约时间</span><span>{{orderInfo.RESERVATION_DATE}}</span></p>
        <p class="order-info-type"><span class="order-info-t">预约电话</span><span>{{orderInfo.ORDER_PERSONTEL}}</span></p>
      </block>
    </div>

    <div class="order-box">
      <div class="order-top" @click="goShop">
        <div style="display:flex;align-items:center;">
          <img src="https://eshangtech.com/ShopICO/shop_ico.png" style="width: 56rpx;height:36rpx;vertical-align:middle;margin-right: 10rpx;">
          <span class="order-addr">{{ShopAddress}}</span>
        </div>
        <van-icon name="arrow" size="30rpx" v-if="pageMsg.type === 0"/>
      </div>

      <div class="order-list" v-for="(item,i) in shopOrder" :key=i>
        <div class="order-name">{{item.COMMODITY_RULE ? item.COMMODITY_NAME+'('+item.COMMODITY_RULE+')' : item.COMMODITY_NAME}}</div>
        <div class="order-num">x{{item.ORDER_COUNT}}</div>
        <div class="order-price">￥{{item.AVERAGE_PRICE}}</div>
      </div>

      <hr>

      <div class="coupon" v-if="orderInfo.COUPON_AMOUNT">
     
        <div>
          
          <span>优惠券</span>
        </div>
        <div style="font-size:28rpx;color:#000000;font-weight:bolder;">
          -￥{{orderInfo.COUPON_AMOUNT}}
        </div>
      </div>
      <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;"></van-icon>
          联系商家
          </div>
        <div class="">

          <span>合计</span>
          <span class="pay-price">￥{{tatalMoney}}</span>
        </div>
      </div>
    </div>
    
    <!-- <div class="order-info">
      <p class="order-info-type order-info-h" >
        <span :class="{'appoint':orderInfo.SALEBILL_TYPE===6000}">订单信息</span>
        <span class="order-info-status">{{orderInfo.SALEBILL_STATE_TEXT}}</span>
      </p>
      <p class="order-info-type"><span>订单编号：</span><span>{{orderNumber}}</span></p>

      <p class="order-info-type"><span>下单时间：</span><span>{{orderInfo.ORDER_DATE}}</span></p>
      <p class="order-info-type" v-if="orderInfo.TAKE_TYPE === 2000"><span>下 单 人 ：</span><span>{{orderInfo.ORDER_PERSON}}</span></p>
      <p class="order-info-type" v-if="orderInfo.TAKE_TYPE === 2000"><span>预约时间：</span><span>{{orderInfo.RESERVATION_DATE}}</span></p>
      <p class="order-info-type" v-if="orderInfo.TAKE_TYPE === 2000"><span>预约电话：</span><span>{{orderInfo.ORDER_PERSONTEL}}</span></p>
    </div> -->

    <van-popup :show="isShow"
      position="bottom"
      overlay="false"
      @close="isShow = false">
      <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: [],

      orderAmount: 0,
      orderNumber: '',
      status: '',
      statusName: '',
      orderInternal: '',
      payType: '余额支付',
      orderTime: '',
      RESERVATION_DATE: '',
      ORDER_PERSONTEL: '',
      TAKE_TYPE: 0,
      SERVERPARTSHOP_ID: '',
      couponAmount: '',
      ShopAddress: '',
      minutes: '',
      isMinute: false,
      timer: '',
      isShow: false,
      cardPay: {
        payType: '余额支付', // 用户支付方式
        reason: '',
        canCardPay: true, // 是否可以余额支付
        amount: ''// 实业饭卡余额
      },
      pageMsg: {
        type: 0
      }
    }
  },
  computed: {
    ...mapGetters(['user']),
    tatalMoney () {
      let total = this.orderAmount
      total = Math.round((total - this.orderInfo.COUPON_AMOUNT || 0) * 100) / 100

      return total
    }
  },
  methods: {
    // 倒计时
    num (n) {
      return n < 10 ? '0' + n : '' + n
    },
    showTime () {
      let _this = this
      _this.timer = setInterval(function () {
        // debugger
        let oldTime = (new Date(_this.orderTime).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.getOrderType()
          // console.log(1)
        }
      }, 1000)
    },
    changePayType (data) {
      this.cardPay.payType = data.mp.detail
    },

    isGoPay () {
      if (this.cardPay.payType === '余额支付') { // 如果该用户进行余额支付
        this.payByCard()
      } else {
        this.isShow = false
        this.getOrderInfo()
      }
    },
    goPayment () { // 判断用户是否可余额支付
      if (this.user.MEMBERSHIP_TYPE === 3000 && this.cardPay.payType === '余额支付') {
        this.getCardAmount()
        this.isShow = true
      } else {
        this.getOrderInfo()
      }
    },
    // 获取订单状态
    getOrderType () {
      let _this = this
      _this.$api.getCoop({
        action_type: 'GetOrderDetail',
        salebillId: _this.orderInternal
      }).then(res => {
        // console.log(res)
        if (res.ResultCode === '100') {
          let _data = res.Data
          _this.orderInfo = _data
          _this.getOrderAmount(_data.List)
          _this.status = _data.SALEBILL_STATE // 订单状态
          _this.statusName = _data.SALEBILL_STATENAME // 订单状态
          _this.SERVERPARTSHOP_ID = _data.SERVERPARTSHOP_ID
          _this.ShopAddress = _data.SERVERPART_NAME + _data.SHOPNAME
          _this.orderTime = _data.ORDER_DATE
          _this.RESERVATION_DATE = _data.RESERVATION_DATE
          _this.ORDER_PERSONTEL = _data.ORDER_PERSONTEL
          _this.TAKE_TYPE = _data.TAKE_TYPE
          _this.isorder = true
          if (_this.status === 1005) { // 待付款时添加倒计时
            _this.showTime()
          }
        }
      })
    },
    getCardAmount () { // 获取用户余额
      let _this = this
      _this.$api.getCoop({
        action_type: 'GetIndustryMemberInfo',
        serverpartShopId: _this.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',
        saleBill: _this.orderInternal
      }).then(rs => {
        if (rs.ResultCode === '100') {
          // uni.showToast({
          //   title: '支付成功',
          //   icon: 'success',
          //   duration: 2000
          // })
          _this.isShow = false
          // setTimeout(() => {
          _this.$store.commit('couponPrice', '')
          uni.redirectTo({url: '/pages/orders/orderdetail/index?orderNumber=' + _this.orderNumber + '&orderInternal=' + _this.orderInternal})
          // }, 1000)
        } else {
          uni.showToast({
            title: rs.ResultDesc,
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
    // 取消订单
    orderCancle () {
      let _this = this
      // console.log(_this.orderInfo.SALEBILL_ID)
      uni.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) {
                uni.showToast({
                  title: '取消订单成功',
                  icon: 'none',
                  duration: 2000,
                  success: function () {
                  }
                })
                uni.navigateBack({delta: 1})
                // uni.redirectTo({url: '/pages/orders/order/index'})
              } else {
                uni.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.orderAmount,
        OFFPRICE: 0,
        payType: 2,
        SALEBILL_ID: _this.orderInternal,
        SALEBILL_CODE: _this.orderNumber
      }).then(res => {
        // console.log(res)
        if (res) {
          uni.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') {
                _this.$api.postCoop({
                  action_type: 'EndPay',
                  action_data: _this.orderNumber,
                  action_record: 1
                }).then(res => {
                  _this.$store.commit('couponPrice', '')

                  uni.redirectTo({url: '/pages/orders/orderdetail/index?orderNumber=' + _this.orderNumber + '&orderInternal=' + _this.orderInternal})
                })
              }
            },
            fail (res) {
              if (res.errMsg === 'requestPayment:fail cancel') {
                // uni.showToast({
                //   title: '支付取消',
                //   icon: 'none',
                //   duration: 2000
                // })
              }
            },
            complete (res) {}
          })
        } else {
          uni.showToast({
            title: '网络异常，请稍后再试',
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
    // 获取订单列表
    getOrderAmount (data) {
      let _this = this
      let total = 0
      _this.shopOrder = data
      data.map(v => {
        total += v.ORDER_AMOUNT
      })

      _this.orderAmount = total
    },
    goEvaluate () {
      uni.navigateTo({ url: '/pages/newEvaluate/index?merchantsId=' + this.orderInfo.MERCHANTS_ID + '&saleBillId=' + this.orderInfo.SALEBILL_ID })
    },
    goShop () {
      if (this.pageMsg.type === 0) {
        // let arr = {
        // id: this.orderInfo.SERVERPARTSHOP_ID
        // shopName: this.orderInfo.SHOPNAME,
        // serverpartId: this.orderInfo.SERVERPART_ID

        // }
        // this.$store.commit('nowStore', arr)
        this.$store.commit('setprovinceCode', this.orderInfo.PROVINCE_CODE)
        uni.navigateTo({url: '/pages/shopPages/shop/index?id=' + this.orderInfo.SERVERPARTSHOP_ID + '&mid=' + this.orderInfo.MERCHANTS_ID})
      }
    },
    callPhone () {
      let _this = this
      if (_this.orderInfo.SELLER_TELEPHONE) {
        uni.makePhoneCall({
          phoneNumber: _this.orderInfo.SELLER_TELEPHONE
        })
      }
    }
  },
  onUnload () {
    this.orderInfo = {}
    this.minutes = ''
    this.isMinute = false
    clearInterval(this.timer)
    this.pageMsg.type = 0
  },
  // onShow () {
  //   this.getOrderType()
  // },
  onLoad (option) {
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#C8B190',
      animation: {
        duration: 30,
        timingFunc: 'linear'
      }
    })
    if (option.type) {
      this.pageMsg.type = 1
    }
    this.couponAmount = this.$store.getters.couponPrice ? '-￥' + this.$store.getters.couponPrice : ''

    this.orderNumber = option.orderNumber
    this.orderInternal = option.orderInternal
    this.getOrderType()
  }
}
</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 20rpx 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
.order-name
  font-size 26rpx
  flex 0.7
.order-num
  font-size 26rpx
  color #9A9A9A
  flex 0.1
.order-price
  font-size 26rpx
  flex 0.2
  color #333
  text-align right
  font-weight bolder
    
.coupon
  justify-content space-between
  font-size 26rpx
  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 20rpx 0
  box-sizing border-box
  background-color #fff
  text-align right 
  font-size 24rpx
  display flex
  justify-content space-between
.pay-price
  color #000
  font-size 30rpx
  margin-left 10rpx
.link-store
  color #C6A376
  display flex
  align-items center
hr
  background-color #f5f5f5
  height 2rpx
  margin-top 24rpx
//订单信息
.order-info
  background-color #fff
  padding 0 20rpx
  border-radius 12rpx
  margin 0 24rpx
.order-info-type
  height 96rpx
  line-height 96rpx
  font-size 26rpx
  
  display flex
  align-items center
  justify-content space-between
.order-info-type+.order-info-type
  border-top 1px solid #F5F5F5
.order-info-t
  color #a7a7a7
.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
.order-info-status
  font-weight normal
  font-size 24rpx

/* 支付方式选择*/ 
.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>

