<!--姜枫 2021.04.11-->
<template>
	<view class="billing_box_bg">
<!--		<app-tabs :tabs="tabs" :currentTab="tabIndex" @change="change" itemWidth="33.3%" />-->
    <view class="c_header" :class="myClass">
      <view class="header_inside">
        <image :src="pageInfo.avatar"></image>
        <view class="shop_info">
          <view class="shop_title">{{pageInfo.name}}</view>
          <view class="shop_intro"><text style="margin-right: 20upx;">已采购：{{pageInfo.expendAmount}}</text> <text>欠款：{{pageInfo.debtAmount}}</text></view>
        </view>
        <i class="iconfont icondianhua1" v-if="pageInfo.mobile !=''" @tap="toPhone(pageInfo.mobile)"></i>
      </view>
    </view>
		<view class="input-wrap" >
			<app-search-module v-model="py" placeholder="请输入关键词，支持拼音首字母搜索" @input="searchFn" />
		</view>
		<view class="scroll-middle_bx">
			<scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop" >
				<div v-for="(item, index) in filterProductInfo" :key="index" class="tab-bar-item" :class="[classIndex == index ? 'active' : '']" :data-current="index" @tap.stop="swichClass(index)">
					<text>{{ item.className || "" }}</text>
					<text class="tag" v-if=" getSelectClassById(item.classId).bigCount > 0 || getSelectClassById(item.classId).smallCount > 0">
						<text v-if=" getSelectClassById(item.classId).bigCount > 0 || getSelectClassById(item.classId).smallCount > 0 ">
							{{ `${getSelectClassById(item.classId).bigCount}` }}
						</text>
						<text v-if="getSelectClassById(item.classId).smallCount > 0"> / </text>
						<text v-if="getSelectClassById(item.classId).smallCount > 0">{{ getSelectClassById(item.classId).smallCount }}</text>
					</text>
				</div>
				<view style="height: 240rpx"></view>
				<view class="switchover-unit" @tap="isSmallCount = !isSmallCount">{{isSmallCount?'支':'扎'}}</view>
			</scroll-view>
<!--			<scroll-view scroll-y class="right-box" :scroll-into-view="scrollClassId" @scroll="rightScroll">-->
			<scroll-view scroll-y class="right-box" :scroll-into-view="scroll_into_view" scroll-with-animation="true"
																@scroll="scroll_detail"
																lower-threshold="100"
																@scrolltolower="scroll_bottom">
				<!--内容部分 start -->
				<block v-if="!$util.isEmpty(filterProductInfo)">
					<view class="item_list_bx selectAll" v-for="(classItem, classIndex) in filterProductInfo" :key="classIndex" :id="`class_${classIndex}`">
						<view class="item_list_title">
							{{ classItem.className }}
						</view>
						<template v-for="(productItem, productIndex) in classItem.child">
							<view
								:id="`class_${classItem.classId}_${productItem.id}`"
								:key="productIndex"
							>
								<Commondity
									:info="productItem"
									:offVerifyRepertory="true"
									:bigCount="
										getSelectItemById(productItem.id, classItem.classId).bigCount
									"
									:smallCount="
										getSelectItemById(productItem.id, classItem.classId).smallCount
									"
									@customNum="customNum"
									@add="addEvent"
									@addOneEvent="addCustomNumEvent"
									@del="delEvent"
								></Commondity>
							</view>
							<!-- <Commondity
							:type="COMMODITY_TYPE.CHANGE"
							@customNum="customNum"
						></Commondity> -->
						</template>
					</view>
				</block>
				<block v-else>
					<app-wrapper-empty
						title="暂无数据"
						:is-empty="$util.isEmpty(filterProductInfo)"
					/>
				</block>
				<!--内容部分 end -->
			</scroll-view>

		</view>
		<!-- :maskClosable="false" -->
		<modal-module :show="isModel" @cancel="modalCancel" @click="affirm" :title="customData.itemName" color="#333" :size="32" padding="30rpx 30rpx" >
			<template slot="customContent">
				<view class="select-cmd_bx" v-if="customData">
					<view class="kc"> 库存 {{ customData.stock }} </view>
					<view class="num_bx">
						<allMoreSelectInput
							:isActive="isActive" :isFocus="isFocus" :value="customData.bigCount"
							:isActiveOne="isActiveOne" :isFocusOne="isFocusOne" :valueOne="customData.smallCount"
							@deleteInputVal="deleteInputVal" @initAllInput="initAllInput" @moveAllInput="moveAllInput"
							@deleteInputValOne="deleteInputValOne" @initAllInputOne="initAllInputOne" @moveAllInputOne="moveAllInputOne">
						</allMoreSelectInput>
					</view>
				</view>
			</template>
		</modal-module>
		<modal-module
			:show="showSubmitModel"
			@cancel="cancelEvent"
			@click="submitEvent"
			:title="confirmContent"
			color="#333"
			:size="32"
			padding="30rpx 30rpx"
		>
		</modal-module>
		<FooterCart :price="allPrice" :count="allCount" @confirm="confirmSelectEvent" ></FooterCart>
		<noneHd :show.sync="notOpenShop" title="您还没有开店，无法采购哦~" btnText="免费开店" @bthClick="toPage"></noneHd>
	</view>
</template>

<script>
import AppSearchModule from "@/components/module/app-search";
import AppTabs from "@/components/plugin/tabs";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import Commondity from "@/components/module/app-commodity";
import GoodsCommondity from "@/components/module/app-goods-commodity";
import PxClassCommondity from "@/components/module/app-pxClass-commodity";
import FooterCart from "@/components/module/app-footer-cart";
import ModalModule from "@/components/plugin/modal";
import noneHd from "@/components/none-hd";
import allMoreSelectInput from "@/components/module/allMoreSelectInput";
import allMoreSelectInputMins from "@/mixins/allMoreSelectInput";
import {mapActions, mapGetters} from "vuex";
import { COMMODITY_TYPE } from "@/utils/declare";
import productMins from "@/mixins/product";
import { getGhsDataApi, ghsInfo } from "@/api/ghs/index";
import { getShop } from '@/api/common/index'
// import suitProductMins from "@/mixins/ghsProduct";
export default {
	name: "Billing", // 开单
	components: {
		AppTabs,
		AppSearchModule,
		AppWrapperEmpty,
		Commondity,
		ModalModule,
		FooterCart,allMoreSelectInput,PxClassCommondity,GoodsCommondity,noneHd
	},
	props: {
		ghsShopAdminId:{
			type:Number,
			default: 0
		},
	},
	mixins: [productMins,allMoreSelectInputMins],
	data() {
		return {
			COMMODITY_TYPE,
			isGhsProduct:true,//采购进店开单
			isModel: false,
			isSmallCount: false,
			customData: {
				bigCount: 0,
				smallCount: 0
			},
			showSubmitModel: false,
			notOpenShop:false,
			hdShopAdminId:0,
			pageInfo: {
				avatar:'',
				name:' ',
				mobile:'',
				expendAmount:'0.00',
				debtAmount:'0.00'
			},
			myClass: 'fadeIn',
			shopId:0
		};
	},
	computed: {
		confirmContent() {
			let content = "确认下一步？";
			if (this.hasNoStock) {
				content = "有花材库存不足，确认下一步？";
			}
			return content;
		},
		//判断是否已经开店 shish 2021.4.22
		ifOpenShop(){
			if(this.loginInfo.shopAdminId == 0){
				this.notOpenShop = true
			}else{
				this.hdShopAdminId = this.loginInfo.shopAdminId
			}
		}
	},
	onUnload() {
		this.resetSelectInfoByType(this.pageType)
	},
	onShareAppMessage(res) {

		let ghsShopAdminId = this.option.ghsShopAdminId ? this.option.ghsShopAdminId : 0

		if(this.option.shopId){
			this.shopId = this.option.shopId
		}

		//查看分享的路径，不要删除 shish 20210517
		console.log('share',`pagesPurchase/ghsProduct?hdShopAdminId=${this.loginInfo.shopAdminId}&ghsShopAdminId=${ghsShopAdminId}&shopId=${this.shopId}&id=0`)

		return {
			title: this.pageInfo.shopName,
			desc: "",
			path: `pagesPurchase/ghsProduct?hdShopAdminId=${this.loginInfo.shopAdminId}&ghsShopAdminId=${ghsShopAdminId}&shopId=${this.shopId}&id=0`
		}

	},
	methods: {
		init(){
			const { shopId,id} = this.options;
			//花材列表
			this.initGhsData(id,shopId);
			if(this.option.id == 0) {
				ghsInfo({shopId: this.option.shopId}).then(res => {
					this.pageInfo = res.data
					uni.setNavigationBarTitle({title: this.pageInfo.name})
					this.option.id = res.data.id;
				}).catch(err => {})
			} else {
				getGhsDataApi({id: this.option.id}).then(res => {
					this.pageInfo = res.data
					this.shopId = res.data.shopId
					uni.setNavigationBarTitle({
						title: this.pageInfo.name
					})
				}).catch(err => {})
			}
		},
		scroll_detail(options){
			if(options.detail.scrollTop > 20) {
				this.myClass = 'fadeOut'
			} else {
				this.myClass = 'fadeIn'
			}
			//options  为滚动信息。  options.detail.scrollTop  值为相对于scroll-view。
			if(!uni.getStorageSync("resolve")){
				this.get_node_details(options);
			};
		},
		rightScroll(e) {
			if(e.detail.scrollTop > 20) {
				this.myClass = 'fadeOut'
			} else {
				this.myClass = 'fadeIn'
			}
		},
		//自定义数量
		customNum(info) {
			this.isModel = true;
			this.customData = info;
			this.$nextTick(()=>{
				this.initAllInput();
			})
		},
    toPage() {
      this.$util.pageTo({
        url: "/pagesClient/official/index",
        type: 2,
        query: {
          ghsShopAdminId: this.ghsShopAdminId,
          hdShopAdminId: this.hdShopAdminId
        },
      });
    },
    // 拨打电话  wangn  2021-5-6
    toPhone(phone){
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		modalCancel() {
			this.isModel = false;
			this.customData = {};
		}, // 取消 确认
		affirm(val) {
			this.isFocus = false;
			this.isFocusOne = false;
			this.$nextTick(()=>{
				if(this.customData.bigCount==0 && this.customData.smallCount==0){
					this.delAllEvent(this.customData)}
				if (val.index === 0) {
					this.modalCancel();
				} else {
					const {
						bigCount,
						smallCount,
						bigNum,
						bigUnit,
						smallNum,
						smallUnit,
						ratio
					} = this.customData;
					const ratioNum = Number(ratio);
					//超过库存时 设置为库存最大值 1
					if (Number(bigCount) * ratioNum + Number(smallCount) > Number(bigNum) * ratioNum + Number(smallNum)) {
						uni.showToast({
							title: `库存只有${bigNum}${bigUnit}${smallNum}${smallUnit}`,
							icon: "none"
						});
						this.customData.bigCount = 0;
						this.customData.smallCount = 0;
						this.delAllEvent(this.customData)
					} else {
						this.updateItemEvent(this.customData);
						this.modalCancel();
					}
				}
			})

		},
		cancelEvent() {
			this.showSubmitModel = false;
		},
		submitEvent(val) {
			if (val.index === 0) {
				this.cancelEvent();
			} else {
				console.log(444, this.selectList);
				uni.navigateTo({
					url: "/admin/billing/affirm"
				});
				this.cancelEvent();
			}
		},
		confirmSelectGoodsEvent() {
			if (this.selectList.length > 0) {
				uni.navigateTo({
					url: "/admin/billing/affirmGoods"
				});
			} else {
				this.$msg("请选择花材");
			}
		},
		confirmSelectEvent() {
			if (this.selectList.length > 0) {
        uni.removeStorageSync('selectCouponInfo')
				uni.navigateTo({
					url: `/admin/billing/affirmGhs?id=${this.options.id}`
				});
			} else {
				this.$msg("请选择花材");
			}
		},
		change(e) {
			this.resetSelectInfoByType(this.pageType);
			if (this.tabIndex == e.index) {
				return false;
			} else {
				this.tabIndex = e.index;
			}
		},
		scrollTop() {}
	}
};
</script>

<style lang="scss" scoped>
.billing_box_bg {
	height: 100%;
	display: flex;
	flex-direction: column;
  .c_header{
    // height: 240upx;
    width: 100vw;
    padding: 0 15upx;
    box-sizing: border-box;
    background: linear-gradient(to bottom,#3385FF, #fff);
    &>.header_inside{
      position: relative;
      height: 190upx;
      margin-top: 30upx;
      background: #fff;
      box-shadow: 0px 1px 21px 0px rgba(161, 166, 173, 0.4);
      border-radius: 20px;
      padding: 30upx;
      box-sizing: border-box;
      &>image{
        height: 130upx;
        width: 130upx;
        display: inline-block;
        border-radius: 10px;
        background-color: #eee;
        vertical-align: top;
      }
      &>.shop_info{
        vertical-align: top;
        display: inline-block;
        height: 100%;
        margin-left: 30upx;
        &>.shop_title{
          margin-top: 14upx;
          font-size: 40px;
          font-weight: 600;
          color: #060606;
        }
        &>.shop_intro{
          margin-top: 15upx;
          font-size: 26px;
          font-weight: 400;
          color: #666666;
        }
      }
      &>.iconfont{
        font-size: 60upx;
        position: absolute;
        right: 30upx;
        top: 50%;
        transform: translateY(-50%);
        color: #3385FF;
      }
    }
  }
	.input-wrap {
		padding: 22px 20px 22px 30px;
	}
	.scroll-middle_bx {
		flex: 1;
		display: flex;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.tab-view {
		height: 100%;
		width: 170upx;
		flex-shrink: 0;
		background-color: #f0f2f6;
		.tab-bar-item {
			position: relative;
			width: 170upx;
			height: 90upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26upx;
			color: #444;
			font-weight: 400;
			.tag {
				display: flex;
				padding: 0 20px;
				align-items: center;
				position: absolute;
				right: 0;
				top: 0;
				height: 32px;
				background: #ff2842;
				border-radius: 16px;
				color: #fff;
				font-size: 20px;
			}
      &:last-child{
        margin-bottom: 110upx;
      }
		}

		.active {
			position: relative;
			color: $mainColor;
			font-size: 26px;
			background: #fff;
		}

		.active::before {
			content: "";
			position: absolute;
			border-left: 8upx solid $mainColor;
			height: 100%;
			left: 0;
		}
	}
	.right-box {
		height: 100%;
		flex: 1;
		box-sizing: border-box;
	}
	.item_list_bx {
		padding: 40px 16px;
    &:last-child{
      margin-bottom: 70upx;
    }
	}
	.item_list_title {
		margin-bottom: 20px;
		font-size: 24px;
		font-weight: 600;
		color: #666666;
	}
	.select-cmd_bx {
		& .kc {
			color: #999999;
			font-size: 28px;
			font-weight: 400;
			margin-bottom: 60px;
			text-align: center;
			margin-top: 10px;
		}
		& .num_bx {
			display: flex;
			align-items: center;
			margin-bottom: 80px;
			& > input {
				width: 212px;
				height: 80px;
				border: 1px solid #dddddd;
				border-radius: 4px;
				text-align: center;
				margin-right: 24px;
				font-size: 40rpx;
			}
		}
	}
	.PxClass-box{
		width: 100%;
	}
  .fadeOut{
    height: 0;
    overflow: hidden;
    animation-name: fadeOutFrames;
    animation-duration:.3s;
  }
  .fadeIn{
    height: 240upx;
    overflow: hidden;
    animation-name: fadeInFrames;
    animation-duration:.3s;
  }
  /*关键帧*/
  @keyframes fadeOutFrames {
    0%{
        opacity: 1;
        transform:translateY(0);
        height: 240rpx;
    }
    100% {
        opacity: 0;
        transform:translateY(-240upx);
        height: 0rpx;
        overflow: hidden;
    }
  }
  /*关键帧*/
@keyframes fadeInFrames {
    0%{
        opacity: 0;
        transform:translateY(0);
        height: 0;
    }
    100% {
        opacity: 1;
        // transform:translateY(240upx);
        height: 240rpx;
    }
  }
}


</style>
