<template>
  <page-meta :page-style="themeColor"></page-meta>
  <view class="order-details">
    <!--商品信息-->
    <view class="top">
      <view class="left">
        <image class="top-image" :src="$util.img(info.goods_image)" mode="widthFix"></image>
      </view>
      <view class="right">
        <view class="goods-name">{{ info.goods_name }}</view>
        <view class="goods-status">订单状态：{{ status_text[info.status] }}</view>
        <view class="goods-type">
          订单类型：<text class="goods-type-text">采购订单</text>
        </view>
      </view>
    </view>
    <!--信息列表-->
    <view class="info-list">
      <view class="info-list-block">
        <view class="left">卖家昵称</view>
        <view class="right">{{ info.seller_nickname ||'' }}</view>
      </view>
      <view class="info-list-block" >
        <view class="left">买家昵称</view>
        <view class="right ">{{ info.buyer_name ||'' }}</view>
      </view>
      <view class="info-list-block">
        <view class="left">订单金额</view>
        <view class="right right-price">￥{{ info.unit_price }}元</view>
      </view>
<!--      <view class="info-list-block">
        <view class="left">服务费</view>
        <view class="right right-price">{{ info.service_price }}</view>
      </view>
      <view class="info-list-block">
        <view class="left">实际收入</view>
        <view class="right right-price">{{ info.real_income }}</view>
      </view> -->
      <view class="info-list-block">
        <view class="left">订单编号<text class="copy-buttons" @click="$util.copy(info.order_no)">复制</text></view>
        <view class="right">{{ info.order_no ||'NO000000'}}</view>
      </view>
      <view class="info-list-block">
        <view class="left">采购数量</view>
        <view class="right">{{info.total}}</view>
      </view>
      <view class="info-list-block">
        <view class="left">购买时间</view>
        <view class="right">{{ $util.timeStampTurnTime(info.created_time) }}</view>
      </view>
      <view class="info-list-block" v-if="info.release_time > 0">
        <view class="left">上架时间</view>
        <view class="right">{{ $util.timeStampTurnTime(info.release_time) }}</view>
      </view>
      <view class="info-list-block">
        <view class="left">订单状态</view>
        <view class="right">{{ status_text[info.status] }}</view>
      </view>
      <view class="info-list-block" v-if="info.buyer_message">
        <view class="left">备注</view>
        <view class="right">{{ info.buyer_message }}</view>
      </view>
    </view>
    <!--操作按钮-->
    <view class="buttons" v-if="pageType=='stock'" >
      <view class="buttons-item buttons-item-pickup" @click="openWarehouseShopConfirm" v-if="parseInt(info.status) === 1 && info.order_id !== 0">自提产品</view>
      <view class="buttons-item buttons-item-sale" @click="$refs.saleGoods.open()" v-if="parseInt(info.status) === 1">出售商品</view>
      <view class="buttons-item buttons-item-undercarriage" @click="$refs.undercarriageConfirm.open()" v-if="parseInt(info.status) === 2">下架商品</view>
    </view>
    <!-- 提货确认弹框 -->
    <uni-popup ref="pickupConfirm" type="dialog" class="order-remarks-content">
      <uni-popup-dialog mode="base" content="确认提货当前订单中的所有商品吗！" @close="$refs.pickupConfirm.close()" @confirm="pickup"></uni-popup-dialog>
    </uni-popup>
    <!-- 发布弹框 -->
    <uni-popup ref="saleGoods" type="center">
      <view class="transfer-price-content">
        <view class="transfer-price-top">
          <view class="top-left">详情</view>
          <view class="top-right">
            <i class="icondiy icon-system-guanbi" @click="$refs.saleGoods.close()"></i>
          </view>
        </view>
        <view class="transfer-info">
          <view class="transfer-info-block">
            <view class="info-title">服务费</view>
            <view class="info-content">{{ service_charge }}</view>
          </view>
          <view class="transfer-info-block">
            <view class="info-title">商家应收</view>
            <view class="info-content">{{ real_income }}</view>
          </view>
          <view class="transfer-info-block">
            <view class="info-title">建议售价</view>
            <view class="info-content">{{proposedPrice}}</view>
          </view>
        </view>
        <view class="transfer-price">
          <view>请输入转售价格：</view>
          <view>
            <input type="digit" class="input" v-model="transfer_price"  :placeholder="'最高出售价:'+ price_range.max_price" />
          </view>
        </view>
        <view class="transfer-price-tips">最高出售价:{{price_range.max_price}}</view>
		<view class="rinfo" @click="$util.redirectTo('/pages_tool/recharge/list')">去充值</view>
        <view class="transfer-price-button">
          <view class="transfer-buttons" @click="sale">确定出售</view>
        </view>
      </view>
    </uni-popup>
    <!-- 拆单确认弹框 -->
    <uni-popup ref="splitConfirm" type="dialog" class="order-remarks-content">
      <uni-popup-dialog mode="base" :content="split_message" @close="$refs.splitConfirm.close()" @confirm="splitConfirm()"></uni-popup-dialog>
    </uni-popup>
    <!-- 下架确认弹框 -->
    <uni-popup ref="undercarriageConfirm" type="dialog" class="order-remarks-content">
      <uni-popup-dialog mode="base" content="确认下架售卖中的商品吗" 
	   @close="$refs.undercarriageConfirm.close()" 
	   @confirm="undercarriage">
	  </uni-popup-dialog>
    </uni-popup>
    <!--登录弹框-->
    <ns-login ref="login"></ns-login>
    <!--加载动画-->
    <loading-cover ref="loadingCover"></loading-cover>
  </view>
  <!-- 仓库卖出确认  增加数量选择 -->
  <uni-popup ref="warehouseConfirm" type="bottom">
    <view class="sku-info" style="height: 33vh;background: white">
      <view class="header" style="height: 3vh;">
        <view class="sku-close iconfont iconclose" @click="closeWarehouseShopConfirm()"></view>
      </view>
      <view class="address-box" :class="{ 'not-delivery-type': true }" >
        <view class="info-wrap" v-if="memberAddress" @click="selectAddress">
          <view class="content">
            <text class="name">{{ memberAddress.name ? memberAddress.name : '' }}</text>
            <text class="mobile">{{ memberAddress.mobile ? memberAddress.mobile : '' }}</text>
            <view class="desc-wrap">
              {{ memberAddress.full_address ? memberAddress.full_address : '' }} {{ memberAddress.address ? memberAddress.address : '' }}
            </view>
          </view>
          <text class="cell-more iconfont icon-right"></text>
        </view>
        <view class="empty-wrap" v-else @click="selectAddress">
          <view class="info">请设置收货地址</view>
          <view class="cell-more"><view class="iconfont icon-right"></view></view>
        </view>
        <image class="address-line" :src="$util.img('public/uniapp/order/address-line.png')"></image>
      </view>
      <view class="footer" @click="pickup()" style="margin-top: 70rpx;">
        <template >
          <template >
            <button type="primary">确认提货</button>
          </template>
        </template>
      </view>
    </view>
  </uni-popup>
</template>
<script>
import uniPopup from '@/pages_rush/components/uni-popup-new/uni-popup.vue';
import uniPopupDialog from '@/pages_rush/components/uni-popup-dialog/uni-popup-dialog.vue';
export default {
  components: {
    uniPopup,
    uniPopupDialog
  },
  data() {
    return {
      futures_id: 0,
      info: {},
      status_text: {
        1 : '库存',
        2 : '正在销售',
        3 : '已售出',
        4 : '提货中',
        5 : '提货完成',
        6 : '待支付',
        7 : '捡漏',
      },
      confing: {},
      price_range: {},
      proposedPrice: '',// 建议转售价格
      transfer_price: '',// 转售价格
      split_message: '',// 拆单确认信息
      service_charge: 0.00, // 手续费
      real_income: 0.00,// 实际收入
      memberAddress: null, // 会员收货地址
      is_pickup: false,
      pageType: '',
    };
  },
  mixins: [],
  onLoad(option) {
    this.getMemberAddress()
    this.futures_id = option.futures_id || 0;
    this.pageType = option.pagetype;
    this.getDetail();
  },
  onShow() {},
  onReady(){
    // 判断是否登录
    if (!uni.getStorageSync('token')) this.$refs.login.open('/pages_rush/futures/list');
  },
  methods: {
    openWarehouseShopConfirm(GoodsId,count) {
      this.$refs.warehouseConfirm.open()
    },
    closeWarehouseShopConfirm() {
      this.$refs.warehouseConfirm.close()
    },
    // 获取订单详情
    getDetail() {
      this.$api.sendRequest({
        url: '/futures/api/futures/myDetail',
        data: {
          id: this.futures_id
        },
        success: res => {
          if (parseInt(res.code) === 0) {
            this.info = res.data;
            this.getSet();
          }
          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        },
        fail: res => {
          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        }
      });
    },
    // 获取基本设置
    getSet(){
      this.$api.sendRequest({
        url: '/futures/api/futures/getBasicsConfig',
        success: res => {
          if (parseInt(res.code) === 0) {
			this.config=res.data;  
            this.price_range = res.data.price_range;
            //获取最小值 和 最大值
            const unitPrice = this.info.unit_price;
            let minPrice = unitPrice * (parseFloat(this.price_range.min) / 100);
            let maxPrice = unitPrice * (parseFloat(this.price_range.max) / 100);
            let proposedPrice = unitPrice * (parseFloat(res.data.proposed_range) / 100); //建议出售价格
			
			 this.proposedPrice =(parseFloat(unitPrice) + parseFloat(proposedPrice)).toFixed(2);
             this.price_range.min_price = (parseFloat(unitPrice) + parseFloat(minPrice)).toFixed(2);
             this.price_range.max_price = (parseFloat(unitPrice) + parseFloat(maxPrice)).toFixed(2);
			let service = (this.info.unit_price * (parseFloat(res.data.service_price) / 100)).toFixed(2); //总计服务费
            // 计算技术手续费
            this.service_charge = (service * (parseFloat(res.data.technical_range) / 100)).toFixed(2);
            // 计算商家佣金
            this.real_income = (parseFloat(service) - parseFloat(this.service_charge)).toFixed(2);
          }
        }
      });
    },
    // 提货
    pickup(){
      if(this.is_pickup){
        return 1
      }
      this.is_pickup = true
      this.closeWarehouseShopConfirm()
      if (!this.memberAddress) {
        this.$util.showToast({ title: '请先选择您的收货地址' });
        return false;
      }
      this.$refs.pickupConfirm.close();
      let _this = this;
      _this.$api.sendRequest({
        url: '/futures/api/futures/pickUp',
        data: {
          id: _this.futures_id,
          member_address: JSON.stringify(this.memberAddress)
        },
        success: res => {
          this.is_pickup = false
          _this.$util.showToast({
            title: res.message,
            mask: true,
            duration: 2000,
            success: function(){
              _this.getDetail();
              // setTimeout(() => {
              //   this.$util.redirectTo('/pages/index/index');
              // }, 1500);
            }
          });
        }
      });
    },
    /**
     * 选择收货地址
     */
    selectAddress() {
      var params = {
        back: this.$util.getCurrentRoute().path,
        local: 0,
        type: 1
      }
      this.$util.redirectTo('/pages_tool/member/address', params);
    },
    /**
     * 用户地址
     */
    getMemberAddress(){
      this.$api.sendRequest({
        url: '/futures/api/ordercreate/memberAddress',
        success: res => {
          console.log()
          this.memberAddress = res.member_address;
          this.$forceUpdate();
        }
      })
    },
    // 发布出售
    sale(agree_split_order = 0){
      let _this = this;
      // 判断价格
      if(_this.transfer_price === ''){
        _this.$util.showToast({
          title: '请输入售价',
          mask: true,
          duration: 1500,
        });
        return false;
      }
      if(parseFloat(_this.transfer_price) <= 0 || _this.transfer_price=='.'){
        _this.$util.showToast({
          title: '转售价格必须大于0',
          mask: true,
          duration: 1500,
        });
        return false;
      }
	  
      if(parseFloat(_this.transfer_price) > parseFloat(_this.price_range.max_price)){
        _this.$util.showToast({
          title: '转售价格必须小于等于'+ _this.price_range.max_price,
          mask: true,
          duration: 1500,
        });
        return false;
      }
      // 请求发布
      _this.$api.sendRequest({
        url: '/futures/api/futures/release',
        data: {
          id: _this.futures_id,
          price: _this.transfer_price,
          agree_split_order: agree_split_order,
        },
        success: res => {
          // 关闭弹框
          if(_this.$refs.saleGoods) _this.$refs.saleGoods.close();
          // 返回结果处理
          if(parseInt(res.code) === -800){
            // 需要拆单  确认后再次请求发布
            this.split_message = res.message;
            _this.$refs.splitConfirm.open();
          }
          else if(parseInt(res.code) === 0){
            // 发布成功  跳转到已售出列表
            _this.$util.showToast({
              title: res.message,
              mask: true,
              duration: 2000,
              success: function () {
                setTimeout(() => {
                  _this.$util.redirectTo('/pages_rush/futures/order', {status: 'stock'});
                }, 1000);
              }
            });
          }
          else{
            // 失败
            _this.$util.showToast({
              title: res.message,
              mask: true,
              duration: 2000,
              success: function () {
                _this.getDetail();
              }
            });
          }
        }
      });
    },
    // 发布 - 确认拆单
    splitConfirm(){
      this.$refs.splitConfirm.close();
      this.sale(1);
    },
    // 下架
    undercarriage(){
      this.$refs.undercarriageConfirm.close();
      let _this = this;
      _this.$api.sendRequest({
        url: '/futures/api/futures/stock',
        data: {
          id: _this.futures_id
        },
        success: res => {
          _this.$util.showToast({
            title: res.message,
            mask: true,
            duration: 2000,
            success: function(){
              _this.getDetail();
              // setTimeout(() => {
              //   this.$util.redirectTo('/pages/index/index');
              // }, 1500);
            }
          });
        }
      });
    }
  },
  onBackPress(options) {
    if (options.from === 'navigateBack') return false;
    this.$util.redirectTo('/pages/member/index');
    return true;
  }
};
</script>
<style lang="scss" scoped>
.order-details{
  background: #fafcff;//fafcff
  min-height: calc(100vh - (30rpx * 2));
  padding: 30rpx;
  .top{
    --top-height--: 150rpx;
    width: calc(100% - (20rpx * 2));
    height: var(--top-height--);
    padding: 20rpx;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    background-color: #FFFFFF;
    .left{
      width: var(--top-height--);
      height: var(--top-height--);
      border-radius: 20rpx;
      .top-image{
        width: 100% !important;
        height: 100% !important;
      }
    }
    .right{
      padding-left: 20rpx;
      width: calc(100% - var(--top-height--) - 20rpx);
      .goods-name{
        height: calc(var(--top-height--) / 2);
        line-height:  calc(var(--top-height--) / 4);
        font-size: 30rpx;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical; /*设置对齐模式*/
        -webkit-line-clamp: 2; /*设置多行的行数*/
        color: #404040;
      }
      .goods-status{
        height: calc(var(--top-height--) / 4);
        line-height:  calc(var(--top-height--) / 4);
        font-size: 26rpx;
        color: #7e7e7e;
      }
      .goods-type{
        height: calc(var(--top-height--) / 4);
        line-height:  calc(var(--top-height--) / 4);
        font-size: 26rpx;
        color: #7e7e7e;
        .goods-type-text{
          color: #fc6b64;
        }
      }
    }
  }
  .info-list{
    .info-list-block{
      background: #ffffff;
      margin-top: 20rpx;
      border-radius: 10rpx;
      padding: 20rpx;
      width: calc(100% - (20rpx * 2));
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      align-content: center;
      .left{
        font-size: 26rpx;
        font-weight: bold;
        color: #2d2d2d;
        .copy-buttons{
          font-size: 22rpx;
          text-decoration: underline;
          margin-left: 5px;
          color: #868686;
        }
      }
      .right{
        font-size: 26rpx;
        color: #898989;
        max-width: calc(100% - 160rpx);
      }
      .right-price{
        color: #fb5e56;
      }
    }
  }
  .buttons{
    position: absolute;
    bottom: 70rpx;
    left: 0;
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    .buttons-item{
      background: red;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 30rpx;
      padding: 0 50rpx;
      border-radius: 100rpx;
    }
    .buttons-item-pickup{
      color: #fef9eb;
      background: #f8ce2e;
    }
    .buttons-item-sale{
      color: #fee6e6;
      background: #ff4445;
    }
    .buttons-item-undercarriage{
      color: #fee6e6;
      background: #ff4445;
    }
  }
  .transfer-price-content{
    width: calc(90vw - (30rpx * 2));
    padding: 30rpx;
    background-color: #FFFFFF;
    border-radius: 30rpx;

    .transfer-price-top{
      display: inline-flex;
      width: 100%;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      align-content: center;
      height: 50rpx;
      .top-right{
        i{
          font-size: 40rpx!important;
        }
      }
    }
	.rinfo{
		display: flex;
		justify-content: flex-end;
		margin-top: 22px;
		color: royalblue;
	}
    .transfer-info{
      width: 100%;
      padding: 10px 0;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: space-around;
      align-items: center;
      .transfer-info-block{
        width: calc(100% / 3);
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        align-content: center;
        .info-title{
          font-size: 30rpx;
          color: #9f9d9e;
        }
        .info-content{
          font-size: 30rpx;
          font-weight: bold;
        }
      }
      .transfer-info-block:nth-of-type(1){
        .info-content{
          color: #ac736e;
        }
      }
      .transfer-info-block:nth-of-type(2){
        .info-content{
          color: #ac736e;
        }
      }
      .transfer-info-block:nth-of-type(3){
        .info-content{
          color: #d39a63;
        }
      }
    }
    .transfer-price-tips{
      font-size: 24rpx;
      height: 40rpx;
      line-height: 30rpx;
      color: #b5b2b3;
	  text-align: center;
    }
    .transfer-price{
      display: inline-flex;
      width: 100%;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;
      margin-top: 20rpx;
      font-size: 30rpx;
      .input{
        font-size: 30rpx;
        border-bottom: 2rpx solid #e1dfe0;
        height: 60rpx;
      }
    }
    .transfer-price-button{
      width: 100%;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      margin: 60rpx 0 20rpx 0;
      .transfer-buttons{
        width: 60%;
        text-align: center;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 30rpx;
        background: #0282ff;
        color: #99d9e9;
        border-radius: 100rpx;
      }
    }
  }
}
// 收货地址
.address-box {
  margin: 0 24rpx 0;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  border-bottom-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
  padding: 30rpx 24rpx;

  &.not-delivery-type {
    border-radius: 16rpx;
  }

  .address-line{
    position: absolute;
    bottom: 0rpx;
    left: 0;
    width: 100%;
    height: 6rpx;
  }
  .info-wrap {
    display: flex;
    align-items: center;

    &.local {
      padding-bottom: 20rpx;
    }
    .content {
      flex: 1;
      .name {
        margin-right: 10rpx;
        font-weight: bold;
        font-size: 28rpx;
      }
      .mobile {
        font-weight: bold;
        font-size: 28rpx;
      }
    }
    .desc-wrap {
      word-break: break-word;
      font-size: 26rpx;
      color: #666;
    }
  }
  .icon-wrap {
    width: 24rpx;
    height: 42rpx;
    position: relative;
    margin-right: 26rpx;
    align-self: flex-start;
    padding-top: 6rpx;
    &.empty{
      padding-top: 0;
    }
    .iconfont {
      font-size: $font-size-toolbar;
      display: inline-block;
      vertical-align: middle;
    }
  }
  .empty-wrap {
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
    align-items: center;

    .info {
      flex: 1;
      font-size: $font-size-base;
    }
  }
  .cell-more {
    margin-left: 50rpx;
    float: right;
    color: $color-tip;
    font-size: $font-size-tag;
    .iconfont{
      color: $color-tip;
    }
  }
  .local-delivery-store {
    display: flex;
    align-items: center;
    padding-bottom: 20rpx;
    margin-bottom: 20rpx;
    border-bottom: 2rpx solid #eeeeee;

    .info {
      flex: 1;
      width: 0;
      font-size: 28rpx;
    }
    .store-name {
      color: $base-color;
      margin: 0 10rpx;
    }
    .cell-more {
      font-size: 28rpx;
      display: flex;
      align-items: center;
    }
    .icon-right {
      float: right;
      color: #909399;
      font-size: 24rpx
    }
  }
}
.sku-close {
  position: absolute;
  top: 20rpx;
  right: 40rpx;
  width: 40rpx;
  height: 80rpx;
  font-size: 40rpx;
}
.sku-close {
  color: #fff;
  width: 50rpx;
  text-align: center;
  font-size: 76rpx;
  border-radius: 50%;
  margin: 40rpx auto 0;
}
.number-wrap .number-line {
  padding: 20rpx 0;
  line-height: 72rpx;
}

.number-wrap .title {
  font-weight: 400;
}

.number-wrap .limit-txt {
}

.number-wrap .number {
  display: flex;
  height: 72rpx;
  border-radius: 6rpx;
  float: right;
}

.number-wrap .number button {
  display: inline-block;
  line-height: 64rpx;
  height: 68rpx;
  width: 60rpx;
  font-size: 48rpx;
  box-sizing: content-box;
  border: 2rpx solid $color-line;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background-color: #fff !important;

  &.disabled {
    background: #f7f7f7 !important;
  }
}

.number-wrap .number button.decrease {
  border-right-width: 0 !important;
}

.number-wrap .number button.increase {
  border-left: 0 !important;
}

.number-wrap .number button:after {
  border-radius: 0;
  border: none;
}

.number-wrap .number input {
  display: inline-block;
  line-height: 64rpx;
  height: 68rpx;
  width: 72rpx;
  text-align: center;
  font-weight: 700;
  border: 2rpx solid;
  margin: 0;
  padding: 0;
  vertical-align: top;
  background-color: $color-bg !important;
}
.number-wrap .number .show {
  vertical-align: top;
  display: inline-block;
  line-height: 64rpx;
  height: 68rpx;
  width: 72rpx;
  text-align: center;
  font-weight: 700;
  box-sizing: content-box;
  border: 1px solid #eeeeee;
  padding: 0;
  margin: 0;
  border-radius: 0;
  //background-color: #fff !important;
  background-color: $color-bg !important;
}
</style>
