<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>

    <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>

  </view>
</template>

<script>
  import { microSeachBarCode, microEadtProduct } from '@/api/store.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: ''
      }
    },
    onLoad(e) {
      this.mer_id = e.mer_id
    },
    onShow() {},
    methods: {
      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) {
        if (type === 1) {
          uni.navigateTo({
            url: `/pages/product/addGoods/index?mer_id=${this.mer_id}`
          })
        } else {
          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;
  }

  .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;
    }
  }


  // 扫码编辑商品
  .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;
      }
    }
  }
</style>