<template>
	<view class="goods-detail">
		
        <view class="m-t-20">
            <goods-card :data="goodsInfo">
            </goods-card>
        </view>

        <view class="muted xs p-l-20 p-b-20 p-t-20 flex row-between">
            {{goodsInfo.spec_type==1?'规格型号（统一规格）':'规格型号（多规格）'}}
            <view v-if="goodsInfo.spec_type==2" class="p-r-20" @click="spec_type=!spec_type">{{spec_type?'取消批量':'批量设置'}}</view>
        </view>
        
        <view class="primary flex p-b-20" v-show="spec_type">
            <view class="m-l-20" @click="openSpecEditFunc('price')">价格</view>
            <view class="m-l-20" @click="openSpecEditFunc('market_price')">市场价</view>
            <view class="m-l-20" @click="openSpecEditFunc('chengben_price')">成本价</view>
            <view class="m-l-20" @click="openSpecEditFunc('stock')">库存</view>
        </view>
        
        <block v-for="(item, index) in goodsInfo.goods_item" :key="index">
            <view class="m-b-20 p-t-20 bg-white">
                <view class="m-b-10 primary nr title">{{item.spec_value_str}}</view>
                <view class="item bb">
                    <view>价格: </view>
                    <view class="flex row-between">
                        <input type="text" placeholder="请输入价格" v-model="item.price" />
                        元
                    </view>
                </view>
                <view class="item bb">
                    <view>市场价:</view>
                    <view class="flex row-between">
                        <input type="text" placeholder="请输入市场价" v-model="item.market_price" />
                        元
                    </view>
                </view>
                <view class="item bb">
                    <view>成本价:</view>
                    <view class="flex row-between">
                        <input type="text" placeholder="请输入成本价" v-model="item.chengben_price" />
                        元
                    </view>
                </view>
                <view class="item bb">
                    <view>库存:</view>
                    <view class="flex row-between">
                        <input type="text" placeholder="请输入库存" v-model="item.stock" />
                    </view>
                </view>
            </view>
        </block>
        
        <view class="footer bg-white flex row-between fixed">
        	<button class="btn br60 md white" size="md" hover-class="none" @click="onSubmit">
        		确认
        	</button>
        </view>
        
        <modal title="批量设置" height="200rpx" v-model="flag" @confirm="specEditFunc(action)">
            <template v-if="action == 'price'">
                <view class="black nr flex" style="height: 200rpx;">
                    价格： <input type="text" class="input" v-model="price" />元
                </view>
            </template>
            <template v-if="action == 'market_price'">
                <view class="black nr flex" style="height: 200rpx;">
                    市场价： <input type="text" class="input" v-model="market_price" />元
                </view>
            </template>
            <template v-if="action == 'chengben_price'">
                <view class="black nr flex" style="height: 200rpx;">
                    成本价： <input type="text" class="input" v-model="chengben_price" />元
                </view>
            </template>
            <template v-if="action == 'stock'">
                <view class="black nr flex" style="height: 200rpx;">
                    库存： <input type="text" class="input" v-model="stock" />
                </view>
            </template>
        </modal>
        
        <u-toast ref="uToast" />
	</view>
</template>

<script>
	import { apiGoodsDetail,apiGoodsEdit } from '@/api/goods'
	import { strToParams } from '@/utils/tools'
	
	export default {
		name: 'GoodsDetail',

		data() {
			return {
				goodsInfo: {}, 			// 商品信息
                
                action: '',
                spec_type: false,   //多规格设置 设置或取消批量多规格
                flag: false,     //多规格设置 设置弹窗
                price: '',//多规格设置  价格
                market_price: '',   //多规格设置 市场价
                chengben_price: '',//多规格设置 成本价
                stock: '' ,//多规格设置  库存
			}
		},

		methods: {
			// 初始化商品详情数据
			initGoodsDetail() {
				return new Promise((resolve, reject) => {
					apiGoodsDetail({
						id: this.goods_id,
						visit: 1,
					}).then(data => {
						this.goodsInfo = data
					}).catch(err => {
						reject(err)
					})
				})
			},
            
            openSpecEditFunc(action) {
                this.action = action;
                this.flag = true
            },
            
            specEditFunc(action) {
                this.goodsInfo.goods_item.forEach(item => {
                    item[action] = this[action] 
                })
                this.goodsInfo.goods_item = [...this.goodsInfo.goods_item]
            },
            
            async onSubmit() {
                let items = [];
                items = this.goodsInfo.goods_item.map(({id,market_price,price,stock,chengben_price}) => ({id,market_price,price,stock,chengben_price}))
                await apiGoodsEdit({items})
                this.$refs.uToast.show({
                    title: '设置成功',
                    type: 'success'
                })
                
                setTimeout(() => {
                    this.$Router.back()
                }, 1000)
            }
		},

		async onLoad() {
			const options = this.$Route.query

			this.goods_id = options.id
		
			try {
				if (!this.goods_id) throw new Error('该商品不存在')
				// 商品详情数据
				await this.initGoodsDetail()
			} catch (err) {
				console.log(err)
			}
		}
	}
</script>

<style lang="scss" scoped>
    .goods-detail {
        padding-bottom: 200rpx;
        
        .primary {
            color: $-color-primary;
        }
        
        .input {
            width: 300rpx;
            padding: 10rpx;
            margin: 0 20rpx;
            border-radius: 4rpx;
            border: 1px solid rgba(219, 219, 219, 100);
        }
        
        .item {
            padding: 30rpx;
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: row;
            align-items: center;
            background-color: $-color-white;
            justify-content: flex-start;
        
            >view:first-child {
                width: 180rpx;
                color: $-color-black;
                font-size: $-font-size-nr;
                font-weight: 500;
            }
        
            >view:last-child {
                width: 400rpx;
                text-align: left;
                height: 76rpx;
                padding: 0 12rpx;
                border-radius: 6rpx;
                border: 1px solid rgba(219, 219, 219, 100);
            }
        }
        
        .title {
            color: $-color-white;
            display: inline-block;
            margin: 0 20rpx;
            padding: 6rpx 16rpx;
            border-radius: 8rpx;
            background-color: $-color-primary;
        }
        
        .footer {
        	position: fixed;
        	bottom: 0;
        	left: 0;
        	right: 0;
            z-index: 100;
        	height: 110rpx;
        	padding: 0 30rpx;
        	box-sizing: content-box;
        	padding-bottom: env(safe-area-inset-bottom);
            
            .btn {
                width: 100%;
                height: 88rpx;
                line-height: 88rpx;
                background-color: $-color-primary;
            }
        }
    }
	
</style>