<style lang="scss" scoped>
.admin-button-com {
	margin-bottom: 20px;
	width: 100%;
}
.zuhe-box{
	width: 100%;
  padding:  0 20upx;
	margin-bottom: 20px;
  background-color: #fff;
	.zuhe-remark{
		color: #333;
		font-size: 32rpx;
    font-weight: 700;
    line-height: 88upx;
    // padding-left: 30upx;
    // border-bottom: 1px solid #eee;
	}
	.zuhe-center{
		// margin-top: 20rpx;
		font-size: 28rpx;
    // margin: 0 30upx;
    height: 90upx;
    box-sizing: border-box;
    .zuhe-title{
      color: #666;
    }
    &>input{
      border: 1px solid #eee!important;
      border-radius: 5px!important;
    }
		.zuhe-val{
			position: relative;
			width: 70%;
			height: 60rpx;
			padding: 10rpx;
      color: #333;
			border: 1px solid #868686;
      border: none;
			&.active:before {
				content: ' ';
				height: 22px;
				width: 22px;
				border-width: 2px 2px 0 0;
				border-color: #868686;
				border-style: solid;
				-webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
				transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
				position: absolute;
				top: 50%;
				margin-top: -12px;
				right: 30rpx;
			}
		}
	}
  .border{
    // border-bottom: 1px solid #eee;
  }
}
</style>
<template>
  <view class="app-content">
    <appResult>
  <!--		<button class="admin-button-com blue big" @click="gotoOrderDetails">发货详情</button>-->
      <button class="admin-button-com blue big" @click="gotoOrderSend">发货</button>
  <!--		<button class="admin-button-com big" @click="gotoOrderPrint">打印单据</button>-->
  <!--		<button class="admin-button-com big" @click="gotoOrderDetails">订单详情</button>-->
  <!--		<button class="admin-button-com big" @click="gotoOrderList">订单列表</button>-->
      <button class="admin-button-com big" @click="gotoPlace">继续开单</button>
      <button class="admin-button-com big" @click="gotoDetail">订单详情</button>
      <view style="text-align: center;color: #868686;margin-top: 30upx;" v-if="option.type === 'zuhe' && isGroup">
        <view class="iconfont iconchenggong" style="color:#049E2C;margin-bottom:15rpx;font-size:80rpx;" ></view>
        <view>保存成功，请在【开单 - 成品】查看</view>
      </view>
      <view class="zuhe-box" v-if="option.type === 'zuhe' && !isGroup">
        <view class="">
          <view class="zuhe-remark">保存此商品组合，以便下次取用：</view>
          <view class="flex-space zuhe-center border">
            <view class="zuhe-title">名称</view>
            <input class="zuhe-val" type="text" placeholder="如：开业花篮 200元" v-model="name" placeholder-class="tui-placeholder">
          </view>
          <view class="flex-space zuhe-center">
            <view class="zuhe-title">所属分类</view>
            <picker class="zuhe-val active" @change="selectType" :value="index" :range="type" range-key="categoryName">
              <view class="uni-input">{{type[index].categoryName}}</view>
            </picker>
          </view>
        </view>
      </view>
      <button class="admin-button-com blue big" @click="SubSaveItemGroup" v-if="option.type === 'zuhe' && !isGroup">保存</button>
    </appResult>
    
  </view>
</template>

<script>
import appResult from "@/components/app-result";
import { categoryListB,saveItemGroup } from "@/api/goods/index";
export default {
	name: "BillingResult", // 开单结果
	components: {
		appResult
	},
	data(){
		return {
			name:'',
			index:0,
			type:[],
			isGroup:false,
		}
	},
	onShow(){
		this.getCategoryList()
	},
	methods: {
		SubSaveItemGroup(){
			let parameter = {
				orderSn:this.option.orderSn,
				name:this.name,
				categoryId:this.type[this.index].id,
			}
			saveItemGroup(parameter).then(res=>{
					this.isGroup = true;
			})
		},
    gotoDetail() {
      this.pageTo({url:`/admin/order/detail?id=${this.option.orderId}`, type: 2})
    },
		getCategoryList(){
			categoryListB().then(res => {
				this.type = res.data;
			})
		},
		selectType(e){
			this.index = e.target.value
		},
		gotoOrderSend(){
			uni.navigateTo({url: `/admin/order/ship?id=${this.option.orderId}&pageStatus=0`});
		},
		gotoOrderDetails() {
			uni.navigateTo({url: `/pagesOrder/detail?id=${this.option.orderId}`});
			// uni.navigateTo({
			// 	url: `/admin/order/detail?id=${this.option.orderId}`,
			// 	success: result => {},
			// 	fail: () => {},
			// 	complete: () => {}
			// });
		},
		gotoPlace() {
			uni.navigateBack({
				delta: 1
			});
		},
		gotoOrderPrint() {
			uni.navigateTo({
				url: `/admin/order/print?id=${this.option.orderId}`,
				success: result => {},
				fail: () => {},
				complete: () => {}
			});
		},
		gotoOrderList() {
			this.$util.pageTo({
					url: "/admin/home/order",
					type: 4,
					query: {
						tabIndex: 0
					},
				});
		}
	}
};
</script>
