<template>
<view class="brand">
<view v-for="(item,index) in subList" :key="index" class="brand_item">
<view class="brandList_left">
<u-form labelPosition="top" :model="item" >
<u-form-item label="*品牌" prop="brand" :borderBottom="false">
<u-input v-model="item.brand" disabledColor="#ffffff" placeholder="请选择" disabled
@click="showBrandList(index)"></u-input>
<u-icon slot="right" name="arrow-down"></u-icon>
</u-form-item>
<view class="num">
组件可用库存(块):{{item.usableStocks}}
</view>
<u-form-item label="*数量(块)" prop="brandNum" :borderBottom="false">
<u-input v-model="item.useCount" :border="false" placeholder="请输入" @input='change' @blur='blur' type="number"></u-input>
</u-form-item>
</u-form>
</view>
<view class="brand_icon">
<u-icon v-if="index>=1" name="minus-circle-fill" color="red" size="48" @click="handleMinus(index,'minus')"></u-icon>
<u-icon v-else name="plus-circle-fill" color="#2979ff" size="48" @click="handlePlus(index,'plus')"></u-icon>
</view>
</view>
<u-action-sheet :list="curBrandList" v-model="showBrand" @close="showBrand = false"
@click="brandSelect($event)">
</u-action-sheet>
</view>
</template>
<script>
export default {
props: {
brand: {
type: Array,
default:()=>{
return []
},
},
subList: {
type: Array,
default:()=>{
return []
},
}
},
data() {
return {
brandModel: {
brand: '',
brandNum: ''
},
showBrand: false,
brandIndex:-1,
brandList:[],
brandListOld:[],
type:'',
rules: {
brand: [{
required: true,
message: '请选择职业',
trigger: ['change', 'blur']
}],
brandNum: [{
required: true,
message: '请输入',
trigger: ['change', 'blur']
}]
}
}
},
computed: {
//把每一项点击过的筛选出去
curBrandList() {
return this.brand.filter(item=>{
return this.subList.map((v,i)=>{
if (i == this.brandIndex){
return ''
}else{
return v.brand
}
}).indexOf(item.text) == -1
})
}
},
methods: {
brandSelect(index) {
let list = this.curBrandList
this.subList[this.brandIndex].brand = list[index].text
this.subList[this.brandIndex].usableStocks = list[index].usableStocks
},
handlePlus(index,type){
console.log(index,type)
this.type=type
// console.log(this.brand)
this.subList.push({
brand: '',
useCount: ''
})
},
handleMinus(index,type){
console.log(index,type)
this.type=type
this.subList.splice(index,1)
},
showBrandList(index){
this.brandIndex = index
this.showBrand = true
},
change(e){
console.log(e)
},
blur(e){
this.$emit('handleInput',e)
}
},
mounted() {
}
}
</script>
<style scoped lang="scss">
.brand {
box-sizing: border-box;
width: 100%;
// display: flex;
// align-items: center;
.brand_item {
margin-bottom: 32rpx;
position: relative;
}
.brandList_left {
width: 90%;
border: 2rpx solid #EDEDF2;
padding: 0 32rpx;
border-radius: 16rpx;
}
/deep/ .u-form-item--right__content {
border: 2rpx solid rgba(0, 0, 0, 0.15);
border-radius: 32rpx;
padding: 0 24rpx;
}
.num {
color: #1993D0;
font-size: 24rpx;
}
.brand_icon {
position: absolute;
right: 0;
top: 50%;
}
}
</style>