<view class="container" style="background:#f0f0f2">
 
 
   <view class="classname">
        <view class="jj">
            上传产品
        </view>
        <view class="addbrand" bindtap="addbrand">
            添加品牌
        </view>
  <form bindsubmit="addpro">
         <view class="xing">我的店铺：{{shopname}}
         </view>        
        <view class="xing">产品名称：  
         <input type="text" class="in" name="name"  />
         </view>   

         <view class="xing">广告语 :
             <input  type="text" class="in" name='intro' />
         </view>
          <picker bindchange="bindcat"   range="{{catlist}}">
              <view class="picker xing">
                 选择分类>> <text class="xuan" >{{catlist[catindex]}}</text> 
              </view>
          </picker>
             
          <picker bindchange="bindbrand"   range="{{brandlist}}">
              <view class="picker xing">
                 选择品牌>> <text>{{brandlist[brandindex]}}</text> 
              </view>
          </picker>
             
          <view class="xing">单  位：
               <input  type="text" class="in" name='company' />
          </view>
          <view class="xing">原  价：
               <input  type='number' class="in" name='price' />
           </view>
           <view class="xing">优惠价 ：
               <input type='number' class="in" name='price_yh'/>
           </view>
           <view class="xing">赠送积分：
               <input type='number' class="in" name='price_jf' />
           </view>
           <view class="xing">产品编号：
               <input type='number' class="in" name='pro_number'/>
           </view>
           <view class="xing">库  存：
               <input  type='number' class="in" name='num'/>
           </view>
           <view class="xi">产品介绍：
               <textarea class="i" name='content'/>
           </view>
<!--缩略图-->
<view class="t">缩略图↓</view>
<view class="ii">(限制jpg、png、jpeg，像素：230*230）</view>
<view class="page-body-info">
    <view class="kk">
      <block wx:if="{{imagemin}}">
          <image src="{{imagemin}}" class="image" mode="aspectFit" bindtap="del" data-type="min"></image>
      </block>
      <block wx:else>
        <view class="image-plus image-plus-nb" bindtap="choosemin">
          <image src="../../images/s.png" style="width:100%;height:100%"></image>
        </view>
      </block>
    </view>
</view>
<!--end-->

<!--大图-->
<view class="t">产品大图↓</view>
<view class="ii">(限制jpg、png、jpeg，像素：600*600）</view>
<view class="page-body-info">
    <view class="kk">
      <block wx:if="{{imagebig}}">
          <image src="{{imagebig}}" class="image" mode="aspectFit" bindtap="del" data-type="max"></image>
      </block>
      <block wx:else>
        <view class="image-plus image-plus-nb" bindtap="choosebig">
          <image src="../../images/s.png" style="width:100%;height:100%"></image>
        </view>
      </block>
    </view>
</view>
<!--end-->

<!--轮播-->
<view class="t">轮播图↓</view>
<view class="ii">(限制jpg、png、jpeg，手机端最多上传9张，像素:600*600）</view>
<view class="page-body-info">
<!--one-->
  <view class="kk">
      <block wx:if="{{image1}}">
              <image src="{{image1}}" class="image" mode="aspectFit"></image>
      </block>
      <block wx:else>
        <view class="image-plus image-plus-nb" bindtap="uploadImage">
            <image src="../../images/s.png" style="width:100%;height:100%"></image>
        </view>
      </block>
  </view>
</view>
<!--预览区-->
<view wx:for="{{imgarr}}">
  <image  src="{{item}}" class="imgarr"></image>
</view>
<view class="submit">
  <button type="primary" form-type="submit" class='su'>提交</button>
  </view>
</form>   
</view>

</view> 

html{
  background: #f4f4f4
}
radio-group {
  display:inline-block;
}

.classname {
  width: 100%;
  text-align: center;
  padding-bottom: 100rpx;

}
.jj{
  font-size: 30rpx;
  padding-top: 20rpx;
  font-family: "微软雅黑", "黑体";
  margin:0 auto;
  width: 232rpx;
  border-bottom: 1px #d9002f solid;
}
.xing {
font-family:"微软雅黑", "黑体";
height:54rpx;
width:579rpx;
border-radius:10rpx;
background:#fff;
margin:0 auto;
text-align:left;
line-height:54rpx;
font-size:28rpx;
padding:10rpx;
margin-top:38rpx;
padding-left:30rpx;

}

.xi {
font-family:"微软雅黑", "黑体";
height:500rpx;
width:579rpx;
border-radius:10rpx;
background:#fff;
margin:0 auto;
text-align:left;
line-height:54rpx;
font-size:28rpx;
padding:10rpx;
margin-top:38rpx;
padding-left:30rpx;

}
.placeholder {
    color:#ccc;
font-size: 26rpx;
}


.in {
  float: right;
  width: 75%;
  padding-top: 0rpx;
  font-size: 28rpx;
  color: #000;
}
.i{
  float: right;
  width:72%;
  height: 100%;
  padding-top: 12rpx;
  font-size: 28rpx;
  color: #000;
}
textarea{
  height: 100px;
}
.addbrand{
   font-family:"微软雅黑", "黑体";
width:64rpx;
height:81rpx;

  line-height:40rpx;
  background:#d9002f;
  border-radius:11rpx;
  color:white;
  font-size:26rpx;
  float:right;
  position: fixed;
  top:50%;
  right: 0;
}
.t{
  font-family: "微软雅黑", "黑体";
  width: 20%;
  height: 60rpx;
  margin-left: 57rpx;
  padding: 5rpx;
  line-height: 60rpx;
  margin-top: 40rpx;
  font-size: 28rpx;
  display: inline-block;
  border: 1px solid #ccc;
  float: left;
}
.ii{
margin-top:40rpx;
font-size:28rpx;
line-height:44rpx;
width:57%;
display:inline-block;
}
.png{
  width: 100%;
  height: 200rpx;
}
.png image{
  width: 200rpx;
  height: 200rpx;
  margin: 20rpx 10rpx;
}
.ti {
  font-family: "微软雅黑", "黑体";
  width: 30%;
  height: 60rpx;
  background: #fff;
  border: 1px solid #f4f4f4;
  border-radius: 10rpx;
  margin: 0 auto;
  padding: 5rpx;
  line-height: 60rpx;
  margin-top: 60rpx;
  font-size: 28rpx;
}
.image {
width:200rpx;
height:200rpx;
margin:10rpx 10rpx;

}
.page-body-info { 
  width: 100%;
  height: 200rpx;
}
.image-plus {
  width: 100%;
  height: 100%;
  /*border: 2rpx solid #D9D9D9;*/
  position: relative;
}
.kk{
width:200rpx;
height:200rpx;
margin:20rpx 10rpx;
}
.su{
width:53%;
color:#000;
height:69rpx;
line-height:69rpx;
margin-top:108rpx;
font-size:30rpx;
font-family: "微软雅黑", "黑体";
clear: fix;
}
.submit{
  width: 100%;
  overflow: hidden;
}
button[type="primary"] {
color:#000;
background-color:#fff;


}
.app{
  width: 202px;
  height:45px;
  margin: 0 auto;
  display: block;
}
.container{
  background: #f0f0f2;
  padding: 0 0;
}
/*图片预览区*/
.imgarr{
  width:250rpx;
  height: 250rpx;
  float:left;
}

var app=getApp();
const uploadFileUrl = require('../../config').uploadFileUrl;
var owerId;
var albumId;
var filePaths;
var filePath;
var imgarr;
Page({
  /**
   * 页面的初始数据
   */
  data: {
    photomin:[],
    photobig:[],
    imgarr:[],
    uploadarr:[]
  },
  bindcat: function (e) {
    console.log('picker发送选择改变，携带值为', e.currentTarget.dataset.id)

    if (e.detail.value == 0) {

    }
    this.setData({
      catindex: e.detail.value
    })
  },
  bindbrand: function (e) {
    console.log('picker发送选择改变，携带值为', e.currentTarget.dataset.id)


    if (e.detail.value == 0) {

    }
    this.setData({
      brandindex: e.detail.value
    })
  },
  addbrand: function (e){
    wx.navigateTo({
      url: '../addbrand/addbrand',
    })
  },
  addpro: function (e) {
    console.log(e.detail.value);
    var fdata = e.detail.value;
    var that = this;
    if (!fdata.name || !fdata.intro || !fdata.content || !fdata.company || !fdata.price || !fdata.price_yh || !fdata.price_jf || !fdata.pro_number || !fdata.num){
        wx.showToast({
          title: '请将信息填完整再进行提交，谢谢！',
        });
        return false;
    }
    if(!that.data.catindex || !that.data.brandindex){
      wx.showToast({
        title: '请选择分类/品牌，谢谢！',
      });
      return false;
    }
    if (!that.data.photomin && !that.data.photobig) {
      wx.showToast({
        title: '请上传产品缩略图/大图！',
      });
      return false;
    }
    if (!that.data.uploadarr){
      wx.showToast({
        title: '至少上传一张产品轮播图！',
      });
      return false;
    }
    var brand=that.data.brandlist;
    var cat=that.data.catlist;
    var brandindex=that.data.brandindex;
    var catindex=that.data.catindex;

    wx.request({
      url: app.d.ceshiUrl + '/Api/Shangchang/addpro',
      method: 'post',
      data: {
        uid: app.globalData.userInfo.id,
        name: fdata.name,
        intro: fdata.intro,
        content: fdata.content,
        company: fdata.company,
        price: fdata.price,
        price_yh: fdata.price_yh,
        price_jf: fdata.price_jf,
        pro_number: fdata.pro_number,
        num: fdata.num,
        brand: brand[brandindex],
        category:cat[catindex],
        uploadarr:that.data.uploadarr,
        photomin: that.data.photomin,
        photobig: that.data.photobig
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
      success: function (res) {
        var status=res.data.status;
        if(status=="1"){
          wx.showToast({
            title: res.data.err,
            duration: 2000
          })
          setTimeout(function () {
            wx.navigateBack();
          }, 2000)
        }else{
          wx.showToast({
            title: res.data.err,
          })
        }
      },
      fail: function (e) {
        wx.showToast({
          title: '网络异常！',
          duration: 30000
        });
      },
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Shangchang/get_addpro_info',
      method: 'post',
      data: {
        uid: app.globalData.userInfo.id,
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
      success: function (res) {
        if(res.data.status==1){
          that.setData({
            shopname: res.data.err.shopname,
            catlist: res.data.err.category,
            brandlist: res.data.err.brand
          })
        }else{
          wx.showToast({
            title: res.data.err,
          })
        } 
      },
      fail: function (e) {
        wx.showToast({
          title: '网络异常！',
          duration: 30000
        });
      },
    })
  },
  // 上传图片
  choosemin: function () {
    var self = this;
    // var uploadFileUrl=app.d.myUrl+'/Api/Submit/upload';
    wx.chooseImage({
      count: 1,
      sizeType: ['original'],
      sourceType: ['album'],
      success: function (res) {
        console.log('chooseImage success, temp path is', res.tempFilePaths[0])
        var imageSrc = res.tempFilePaths[0]
        wx.showLoading({
          title: '上传中!',
        })
        wx.uploadFile({
          url: app.d.ceshiUrl + '/Api/Shangchang/uploadpro',
          filePath: imageSrc,
          name: 'data',
          header: {
            'content-type': 'multipart/form-data',
          },
          success: function (res) {
            console.log(res);
            self.setData({
              photomin: res.data,
            })
            wx.hideLoading()
            wx.showToast({
              title: '上传成功',
              icon: 'success',
              duration: 1000
            })
            self.setData({
              imagemin: imageSrc,
            })
          },
          fail: function ({errMsg}) {
            console.log('uploadImage fail, errMsg is', errMsg)
          }
        })

      },
      fail: function ({errMsg}) {
        console.log('chooseImage fail, err is', errMsg)
      }
    })
  },
  // 上传图片
  choosebig: function () {
    var self = this;
    // var uploadFileUrl=app.d.myUrl+'/Api/Submit/upload';
    wx.chooseImage({
      count: 1,
      sizeType: ['original'],
      sourceType: ['album'],
      success: function (res) {
        console.log('chooseImage success, temp path is', res.tempFilePaths[0])
        var imageSrc = res.tempFilePaths[0]
        wx.showLoading({
          title: '上传中!',
        })
        wx.uploadFile({
          url: app.d.ceshiUrl + '/Api/Shangchang/uploadpro',
          filePath: imageSrc,
          name: 'data',
          header: {
            'content-type': 'multipart/form-data',
          },
          success: function (res) {
            console.log(res);
            self.setData({
              photobig: res.data,
            })
            wx.hideLoading()
            wx.showToast({
              title: '上传成功',
              icon: 'success',
              duration: 1000
            })
            self.setData({
              imagebig: imageSrc,
            })
          },
          fail: function ({errMsg}) {
            console.log('uploadImage fail, errMsg is', errMsg)
          }
        })

      },
      fail: function ({errMsg}) {
        console.log('chooseImage fail, err is', errMsg)
      }
    })
  },
  del:function(e){
    var dtype=e.currentTarget.dataset.type;
    var that=this;
    if(dtype=="min"){
      that.setData({
        imagemin:""
      })
    }else if(dtype=="max"){
      that.setData({
        imagemax:""
      })
    }
  },
  reloadbrand:function (e){
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Shangchang/get_brand',
      method: 'post',
      data: {
        uid: app.globalData.userInfo.id,
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
      success: function (res) {
        if (res.data.status == 1) {
          that.setData({
            brandlist: res.data.err.brand
          })
        } else {
          wx.showToast({
            title: res.data.err,
          })
        }
      },
      fail: function (e) {
        wx.showToast({
          title: '网络异常！',
          duration: 30000
        });
      },
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },


  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /* 函数描述：作为上传文件时递归上传的函数体体；
   * 参数描述： 
   * filePaths是文件路径数组
   * successUp是成功上传的个数
   * failUp是上传失败的个数
   * i是文件路径数组的指标
   * length是文件路径数组的长度
   */
  uploadDIY(filePaths, successUp, failUp, i, length) {
    console.log(filePaths)
    var that=this;
    wx.uploadFile({
      url: app.d.ceshiUrl + '/Api/Shangchang/uploadpro',
      filePath: filePaths[i],

      name: 'fileData',
      formData: {
        'pictureUid': owerId,
        'pictureAid': albumId
      },

      success: function (res) {
        console.log(filePaths[i]);
        console.log(res.data);
        var url=","+res.data;       
        that.setData({
          imgarr: filePaths,
          uploadarr: that.data.uploadarr.concat(url)
        })
        successUp++;
      },

      // success: (resp) => {

      // },
      fail: (res) => {
        console.log(res)
        failUp++;
      },
      complete: () => {
        i++;
        if (i == length) {

          console.log(length);
          // wx.showToast({
          //   title: 'successUp',

          // })
          console.log('总共' + successUp + '张上传成功,' + failUp + '张上传失败！');
        }
        else {
          //递归调用uploadDIY函数
          this.uploadDIY(filePaths, successUp, failUp, i, length);
        }
      },
    });
  },
  uploadImage: function (e) {
    var that=this;
    that.setData({
      imgarr:"",
      uploadarr:""
    })
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        console.log(res.tempFilePaths)
        var successUp = 0; //成功个数
        var failUp = 0; //失败个数
        var length = res.tempFilePaths.length; //总共个数
        var i = 0; //第几个
        this.uploadDIY(res.tempFilePaths, successUp, failUp, i, length);
      },
    });
  }
})