<template>
  <view class="select_warehouse">
    <view class="wrapper flex_a_c_j_sb">
      <block v-for="item in goodsData" :key="item.name">
        <view class="select_item" @click="navigato(item.type)" :style="{'background-image': `url(${item.src})`}">
          <view class="title">{{ item.name }}</view>
          <view class="iconfont icon-jiantou"></view>
        </view>
      </block>
    </view>

			<view class="list-box animated listA" :class="goods.length > 0 ? 'fadeIn on' : ''">
				<view class="item" v-for="(item, index) in goods" :key="index" @click="addGoods(item)">
					<view class="pictrue" :class="'cont'+conStyle">	
						<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
					</view>
					<view class="text-info" style="display: flex; flex-direction: column; justify-content: space-between;">
						<view>
							<view  class="title">{{ item.store_name }}</view>
							<view class="merchant_info">
								<view v-if="item.merchant && item.merchant.type_name" :style="'background:'+labelColor" class="font-bg-red">{{item.merchant.type_name}}</view>
							</view>
						</view>
						<view class="price acea-row" :style="'color:'+priceColor">
							<view>
								¥
								<text>{{ item.price }}</text>
							</view>
							<view style="padding-left: 180rpx;font-size: 34rpx;font-weight: 550" >加入仓库</view>
						</view>			
					</view>
				</view>
			</view>
    <u-popup :show="editGoodsShow" @close="editGoodsClose" :round="18" mode="center">
      <view class="edit_goods_box">
        <view class="edit_name flex_a_c edit_name_no">
          <text>商品编号：</text><input type="text" disabled placeholder="请输入商品名称" v-model="editGoodsCode">
        </view>
        <view class="edit_name flex_a_c edit_name_no">
          <text>商品名称：</text> <input type="text" disabled placeholder="请输入商品名称" v-model="editGoodsName">
        </view>
        <view class="edit_name flex_a_c">
          编辑商品价格：<input type="text" placeholder="请输入商品名称" v-model="editGoodsPrice">
        </view>
        <view class="edit_store flex_a_c">
          编辑商品库存：<input type="text" placeholder="请输入库存" v-model="editGoodsStore">
        </view>
        <view class="edit_goods_btn">
          <u-button type="error" text="取消" class="edit_btn" @click="editGoodsShow=false">
          </u-button>
          <u-button type="primary" text="保存" class="edit_btn" @click="editGoodsClose">
          </u-button>
        </view>
      </view>
    </u-popup>
	<u-modal :show="addGoodsShow"  content='是否添加到你的仓库中?' @cancel="addGoodsclose()" @close="addGoodsclose()" @confirm="addGoodsopen()" :closeOnClickOverlay="true" :showCancelButton="true"></u-modal>
    <u-popup :show="searchGoodsShow" @close="searchGoodsClose" :round="18" mode="center">
      <view class="search_goods_box">
        <input type="text" v-model="searchGoodsName" class="searchGoods" placeholder="请输入商品名称">
        <view class="edit_goods_btn">
          <u-button type="error" text="取消" class="edit_btn" @click="searchGoodsShow=false">
          </u-button>
          <u-button type="primary" text="搜索" class="edit_btn" @click="searchGoodsClose">
          </u-button>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
  import { productCreate } from '@/api/product.js'
  import { microSeachBarCode, microEadtProduct } from '@/api/store.js'
  import { seachBarCodeAPI,post_product_import } from '@/api/api.js'
  import { Toast } from '@/libs/uniApi'
  export default {
    data() {
      return {
        goodsData: [{
            name: '商品名称入库',
            type: 1,
            src: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/mingcheng.png'
          },
          {
            name: '扫码入库',
            type: 2,
            src: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/saoma.png'
          }
        ],
        product_id: '',
        editGoodsCode: '',
        editGoodsName: '',
        editGoodsPrice: '',
        editGoodsStore: '',
        editGoodsShow: false, // 扫码修改商品信息
        mer_id: 0,
        searchGoodsShow: false,
        searchGoodsName: '',
        goods: [],
		item:[],
		addGoodsShow:false
      }
    },
    onLoad(e) {
      this.mer_id = e.mer_id
    },
    onShow() {},
    methods: {
      addGoods(item) {
		  this.addGoodsShow=true
		  this.item=item
      },
	  addGoodsopen(){
		  if(this.item){
			  post_product_import(this.item.product_id).then(e=>{
			  			if(e.status==200){
							Toast(e.data.msg)
							this.addGoodsShow=false
						}
			  })
		  }
		  this.item=[]
	  },
	  addGoodsclose(){
		  this.addGoodsShow=false
	  },
      openSearch() {},
      async searchGoodsClose() {
        const rq = {
          mer_id: this.mer_id,
          name: this.searchGoodsName
        }
        const { data } = await seachBarCodeAPI(rq).catch(err => Toast(err))
		if(data.list.length ==0){
			Toast("暂无搜索商品")
		}
        this.goods = data.list
        this.searchGoodsShow = false
      },
      async editGoodsClose() {
        const data = {
          price: this.editGoodsPrice,
          stock: this.editGoodsStore,
          id: this.product_id
        }
        try {
          const res = await microEadtProduct(data)
          Toast("更新成功")
          this.editGoodsShow = false
        } catch (e) {
          Toast("更新失败")
          this.editGoodsShow = false
        }
      },
      navigato(type) {
        type === 1 ? this.searchGoodsShow = true : this.scanCode();
      },
      scanCode() {
        const self = this
        uni.scanCode({
          scanType: ["qrCode", "barCode", "datamatrix", "pdf417"],
          success(res) {
            self.seachBarCode(res.result)
          },
          fail(res) {
            console.log(res);
          },
        })
      },
      async seachBarCode(code) {
        try {
          const { data } = await microSeachBarCode({
            code: code
          })
          console.log('data', data.data);
          this.product_id = data.data.product_id
          this.editGoodsStore = data.data.stock
          this.editGoodsPrice = data.data.price
          this.editGoodsCode = data.data.attr_value.bar_code
          this.editGoodsName = data.data.store_name
          this.editGoodsShow = true
        } catch (err) {
          uni.navigateTo({
            url: `/pages/product/addGoods/index?mer_id=${this.mer_id}&code=${code}`
          })
        }
      },
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .select_warehouse {
    padding-top: 20px;
  }

  .wrapper {
    width: 694.74rpx;
    margin: 0 auto;
  }

  .goods-wrapper {
    .item {
      display: flex;
      height: 175.44rpx;
      width: 100%;
      background-color: #fff;
      margin-top: 21.05rpx;
      border-radius: 8px;
      padding: 12px;

      .l_cont {
        image {
          width: 133.33rpx;
          height: 133.33rpx;
          border-radius: 8px;
        }
      }

      .r_cont {
        margin-left: 17.54rpx;
      }
    }
  }

  .select_item {
    width: 336.84rpx;
    height: 189.47rpx;
    border-radius: 8px;
    background-color: #eee;
    padding: 35.09rpx 28.07rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background-size: cover;
    background-repeat: no-repeat;

    .title {
      font-size: 35.09rpx;
    }
  }

  .search_goods_box {
    width: 694.74rpx;
    padding: 28.07rpx;
    font-size: 31.58rpx;

    .searchGoods {
      height: 87.72rpx;
      border: 1px solid #f5f5f5;
      border-radius: 8px;
      padding: 12px;
      margin: 21.05rpx 0;
    }

    .edit_goods_btn {
      margin-top: 28.07rpx;
      display: flex;
      justify-content: space-between;

      .edit_btn {
        width: 210.53rpx;
      }
    }
  }

  // 扫码编辑商品
  .edit_goods_box {
    width: 694.74rpx;
    padding: 28.07rpx;
    font-size: 31.58rpx;

    text {
      color: '#f8f9f9';
    }

    .edit_name,
    .edit_store {
      height: 105.26rpx;
    }

    .edit_name_no {
      color: #a4a4a4;
    }

    .edit_store {
      // border-top: 1px solid #a4a4a4;
      margin-top: 21.05rpx;
    }

    /deep/.u-button {
      width: 300rpx;
    }

    .edit_goods_btn {
      margin-top: 28.07rpx;
      display: flex;
      justify-content: space-between;

      .edit_btn {
        width: 210.53rpx;
      }
    }
  }
  .list-box {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: space-between;
  	padding: 20rpx 28rpx 0;
  	.item {
  		width: 328rpx;
  		margin-bottom: 20rpx;
  		overflow: hidden;
  		position: relative;
  		&.on {
  			border-radius: 0;
  		}
  		.pictrue_log {
  			width: 92rpx;
  			height: 44rpx;
  			font-size: 26rpx;
  			line-height: 44rpx;
  		}
  		.pictrue,/deep/image,/deep/.easy-loadimage,/deep/uni-image {
  			width: 100%;
  			display: block;
  			position: relative;
  			.border-picture {
  				position: absolute;
  				top: 0;
  				left: 0;
  				width: 100%;
  				height: 100%;
  				background: center/cover no-repeat;
  			}
  		}
  		.picture1,/deep/.picture1 image,/deep/.picture1 .easy-loadimage,/deep/.picture1 uni-image {			
  			height: 346rpx;
  			position: relative;
  			.border-picture {
  				position: absolute;
  				top: 0;
  				left: 0;
  				width: 100%;
  				height: 100%;
  				background: center/cover no-repeat;
  			}
  			.sell_out {
  				display: flex;
  				width: 150rpx;
  				height: 150rpx;
  				align-items: center;
  				justify-content: center;
  				border-radius: 100%;
  				background: rgba(0,0,0,.6);
  				color: #fff;
  				font-size: 30rpx;
  				position: absolute;
  				top: 50%;
  				left: 50%;
  				margin: -75rpx 0 0 -75rpx;
  				&::before{
  					content: "";
  					display: block;
  					width: 140rpx;
  					height: 140rpx;
  					border-radius: 100%;
  					border: 1px dashed #fff;
  					position: absolute;
  					top: 5rpx;
  					left: 5rpx;
  				}
  			}
  		}
  		.cont1,/deep/.cont1 image,/deep/.cont1 .easy-loadimage,/deep/.cont1 uni-image,.cont1 .border-picture{
  			border-radius: 16rpx;
  		}
  		.text-info {
  			padding: 10rpx 20rpx 15rpx;
  			.title {
  				color: #222222;
  				overflow:hidden; 
  				text-overflow: ellipsis; 
  				display: -webkit-box; 
  				-webkit-line-clamp: 2; 
  				-webkit-box-orient: vertical;
  			}
  			.old-price {
  				margin-top: 4rpx;
  				font-size: 26rpx;
  				color: #999;
  				text-decoration: line-through;
  				text {
  					margin-right: 2px;
  					font-size: 20rpx;
  				}
  			}
  			.price {
  				display: flex;
  				margin-top: 20rpx;
  				font-size: 26rpx;
  				align-items: center;
  				text {
  					font-size: 36rpx;
  					font-weight: 550;
  				}
  				.ot-price{
  					color: #aaa;
  					font-size: 26rpx;
  					text-decoration: line-through;
  					margin-left: 6rpx;
  					font-weight: normal;
  					margin-top: 10rpx;
  				}	
  			}
  		}
  		.pictrue {
  			position: relative;
  		}		
  		.border-picture {
  			position: absolute;
  			top: 0;
  			left: 0;
  			width: 100%;
  			height: 100%;
  			border-radius: 8rpx;
  			background: center/cover no-repeat;
  		}
  	}
  	.merchant_info{
  		display: flex;
  		align-items: center;
  		margin-top: 20rpx;
  		.merchant_type{
  			color: #fff;
  			line-height: 30rpx;
  			padding: 0 10rpx;
  			border-radius: 2rpx;
  			font-size: 22rpx;
  		}
  		.txt {
  			display: flex;
  			align-items: center;
  			justify-content: center;
  			width: 56rpx;
  			height: 28rpx;
  			margin-left: 15rpx;
  			border: 1px solid $theme-color;
  			border-radius: 4rpx;
  			font-size: 20rpx;
  			font-weight: normal;
  			&.delivery{
  				margin-left: 0;
  				color: #FF9000;
  				border-color: #FF9000;
  			}
  		}
  	}
  	&.on {
  		display: flex;
  	}
  	&.listA {
  		.item {
  			display: flex;
  			width: 100%;
  			.pictrue,/deep/image,/deep/.easy-loadimage,/deep/uni-image {
  				width: 220rpx;
  				height: 220rpx;		
  			}
  			.sell_out {
  				display: flex;
  				width: 110rpx;
  				height: 110rpx;
  				align-items: center;
  				justify-content: center;
  				border-radius: 100%;
  				background: rgba(0,0,0,.6);
  				color: #fff;
  				font-size: 24rpx;
  				position: absolute;
  				top: 50%;
  				left: 50%;
  				margin: -55rpx 0 0 -55rpx;
  				&::before{
  					content: "";
  					display: block;
  					width: 100rpx;
  					height: 100rpx;
  					border-radius: 100%;
  					border: 1px dashed #fff;
  					position: absolute;
  					top: 5rpx;
  					left: 5rpx;
  				}
  			}
  			.text-info {
  				width: 490rpx;
  			}
  		}
  	}
  	&.listB {
  		justify-content: inherit;
  		.item {
  			width: 31.3%;
  			margin-right: 3.05%;
  			.pictrue,/deep/image,/deep/.easy-loadimage,/deep/uni-image {
  				height: 220rpx;	
  			}
  			.sell_out {
  				display: flex;
  				width: 110rpx;
  				height: 110rpx;
  				align-items: center;
  				justify-content: center;
  				border-radius: 100%;
  				background: rgba(0,0,0,.6);
  				color: #fff;
  				font-size: 24rpx;
  				position: absolute;
  				top: 50%;
  				left: 50%;
  				margin: -55rpx 0 0 -55rpx;
  				&::before{
  					content: "";
  					display: block;
  					width: 100rpx;
  					height: 100rpx;
  					border-radius: 100%;
  					border: 1px dashed #fff;
  					position: absolute;
  					top: 5rpx;
  					left: 5rpx;
  				}
  			}
  			&:nth-child(3n) {
  				margin-right: 0;
  			}
  			.price{
  				display: flex;	
  				align-items: center;
  				justify-content: center;
  				font-size: 20rpx;
  				text{
  					font-size: 28rpx;
  				}
  			}
  			.text-info{
  				padding: 10rpx 4rpx;
  			}
  		}
  	}
  	&.listC{
  		.item{
  			width: 100%;
  			.pictrue,/deep/image,/deep/.easy-loadimage,/deep/uni-image{
  				height: 320rpx;			
  			}
  			.price{
  				margin-top: 20rpx;
  				font-size: 40rpx;
  				display: flex;
  				align-items: center;
  				.old-price{
  					font-weight: normal;
  					font-size: 22rpx;
  					margin-left: 10rpx;
  				}
  			}
  		}
  	}
  	&.listS{
  		.price{
  			font-size: 40rpx;
  			display: flex;
  			align-items: baseline;
  			.old-price{
  				font-weight: normal;
  				font-size: 22rpx;
  				margin-left: 10rpx;
  			}
  		}
  	}
  }
</style>