<template>
	<view class="edit_goods">
		<!-- 商品展示 -->
		<MallSelect :showTitle="false" :scrollHeight="scrollHeight" />
		<!-- 底部模块 -->
		<view class="footer">
			<view v-for="(item, index) in footerList" :key="index" class="btn" :class="{active: current === index}" @click="changeBtn(index)">
				<image style="width: 28rpx;" :src="current === index ? item.iconActive : item.icon" mode="widthFix"></image>
				<text class="f-w-500 f-28 l-h-38 m-l-10">{{ item.title }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import addShop from '../static/addShop.png'
	import sortShop from '../static/sortShop.png'
	import sortShopActive from '../static/sortShop_active.png'
	import MallSelect from '../components/MySelect.vue'
	import { rpx2px } from '@/utils/util.js'
	export default {
		components: { MallSelect },
		data() {
			return {
				footerList: [
					{ title: '新建商品', icon: addShop, iconActive: addShop },
					{ title: '商品排序', icon: sortShop, iconActive: sortShopActive }
				],
				current: 9
			};
		},
		computed:{
			// 计算可使用高度
			scrollHeight() {
				const { windowHeight } = uni.getSystemInfoSync()
				return windowHeight - rpx2px(100)
			}
		},
		methods: {
			// 切换按钮
			changeBtn(index){
				this.current = index
			}
		}
	}
</script>

<style lang="scss" scoped>
.footer{
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	height: 100rpx;
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 100%;
		color: #3d3d3d;
		&.active{
			background-color: #FFB336;
			color: #fff;
		}
	}
}
</style>