<template>
	<!-- 各个tab -->
	<view class="tools-box">
		<view class="tools-box-left">
			<view class="tools-box-left-title">选择品牌</view>

			<view class="tools-box-left-select">
				<xh-picker-select background="#f4f5f7" placeholder="全部" :rangeKey="rangeKey" :value="value" :list="brandList" @change="pickerchange"></xh-picker-select>
			</view>
		</view>
		<view class="tools-box-navi"><xh-button :disabled="buttonShow" @handleClick="naviTo" text="去盘点"></xh-button></view>
	</view>
</template>

<script>
import XhPickerSelect from '../XhPickerSelect.vue';
import XhButton from '@/components/mine/xh-button.vue';
import { showToast } from '@/common/common.js';
export default {
	props: {
		current: {
			type: Number | null
		},
		value: {
			type: Number | null
		},
		takeStatus: {
			type: Number | null,
			default: 9
		}
	},
	components: {
		XhPickerSelect,
		XhButton
	},
	data() {
		return {
			rangeKey: 'name',
			brandList: []
		};
	},
	computed: {
		buttonShow() {
			return this.takeStatus !== 0 && this.takeStatus !== 1;
		}
	},
	methods: {
		// 获取品牌列表
		async getBrandList() {
			let res = await this.$u.api.brandListByReceivedModules();
			let { code, data, message } = res;
			if (code === 200) {
				this.brandList = data || [];
			} else {
				showToast(message);
			}
		},
		pickerchange(data) {
			this.$emit('pickerchange', data);
		},
		naviTo() {
			this.$emit('toAdd');
		}
	}
};
</script>

<style lang="scss" scoped>
.tools-box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	height: 100rpx;
	background-color: #ffffff;
	padding: 0 30rpx;
	border-radius: 12rpx;
	&-left {
		display: flex;
		align-items: center;
		&-title {
			width: 120rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-right: 20rpx;
		}
		&-select {
			width: 240rpx;
			background-color: #ffffff;
			border-radius: 8rpx;
		}
	}

	&-navi {
		width: 180rpx;
	}
}
</style>
