<template>
  <div>
    <div class="top-title">
      <span>购物车</span>
      <span style="position:absolute;right:20rpx;font-size:24rpx;padding:0 10rpx;line-height:36rpx;" @click="deleteAllChoese">删除</span>
    </div>
    <div class="shop-cart">
        <view
        v-for="item in cateList"
        class="food-grouping"
        :key="item.USERDEFINEDTYPE_ID"
        :id="'catGood_'+item.USERDEFINEDTYPE_ID"
      >
        <view class="goodlist-title">{{item.USERDEFINEDTYPE_NAME}}</view>
        <van-checkbox-group :value="checkGoodIds" @change="choeseGoods">
          <div class="foods-item" v-for="(good,s) in cateGoods[item.USERDEFINEDTYPE_NAME]" :key="s">
            
            <van-swipe-cell :right-width="65">
            <van-cell-group>
              <view class="content">
                  <van-checkbox :name="good.COMMODITY_ID" checked-color="#c78249"></van-checkbox>
                  <image class="good-img" mode="aspectFit" lazy-load="true" :src="good.DEFAULT_IMG || 'https://eshangtech.com/ShopICO/no-picture.png'"></image>
                  <view class="detail-price">
                    <text class="title">{{good.COMMODITY_NAME}}</text>
                    <view class="cartcontrol-wrap">

                      <view>
                        <view class="price">
                          <span class="unit">¥</span>
                          {{(user.ISPLUS === 1 || user.MEMBERSHIP_TYPE === 3000)  ? good.COMMODITY_MEMBERPRICE :good.COMMODITY_RETAILPRICE}}
                        </view>
                        <span style="font-size:24rpx;" v-if="good.COMMODITY_UNIT">/ {{good.COMMODITY_UNIT}}</span>
                      </view>
                      <!--加减器-->
                      
                      <view class="cartcontrol">
                        <span
                          v-if="good.count>1"
                          @click="reducCount(good)"
                          class="cart-decrease"
                          :id="'decrease_'+good.COMMODITY_ID+'_'+good.USERDEFINEDTYPE_ID"
                        ></span>
                        <span
                          v-else
                          @click="del(good)"
                          class="cart-decrease"
                          :id="'decrease_'+good.COMMODITY_ID+'_'+good.USERDEFINEDTYPE_ID"
                        ></span>
                        <input class="cart-count" type="digit" maxlength="6" v-model="good.count" @blur="chang($event,good)">

                        <span
                          @click="addCount(good,item)"
                          :id="'add_'+good.COMMODITY_ID+'_'+good.USERDEFINEDTYPE_ID"
                          class="cart-add icon-add_circle"
                        ></span>
                      
                      </view>
                    </view>
                  </view>
                </view>
            </van-cell-group>
            <view class="right-delt" slot="right" @click="del(good)">删除</view>
          </van-swipe-cell>
          </div>
        </van-checkbox-group>
       </view>
      <van-dialog id="van-dialog" />
      
      <van-submit-bar :price="getTotal*100" button-text="去结算" @submit="onSubmit" :disabled='checkGoodIds.length===0' button-class="sub-btn">
        <div style="padding-left:30rpx;">

          <van-checkbox :value="isAllChoese" @change="choeseAll" checked-color="#c78249" > 全选</van-checkbox>
        </div>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from 'vuex'
// import Dialog from '/static/vant/dialog/dialog'
export default {
  data () {
    return {
      isAllChoese: true,
      isChangeChecked: 0,
      checkGoodIds: []
    }
  },
  components:[Dialog],
  computed: {
    ...mapGetters(['user']),
    ...mapGetters('shoppingCart', {
      goodsList: 'goodList',
      orderTotal: 'totalPrice',
      plusPrice: 'plusPrice',
      totalNum: 'goodNum',
      cateGoods: 'cateGoods',
      cateList: 'cateList'
    }),
    allGoodIds () {
      let s = []
      this.goodsList.map(el => { s.push(el.COMMODITY_ID + '') })
      return s
    },
    getTotal () {
      let total = 0
      if (this.totalNum > 0) {
        let _pName = (this.user.ISPLUS === 1 || this.user.MEMBERSHIP_TYPE === 3000) ? 'COMMODITY_MEMBERPRICE' : 'COMMODITY_RETAILPRICE'
        this.goodsList.map(n => {
          if (n.isCheck && n.count) {
            total += Number(n.count * n[_pName])
          }
        })

        // return Math.round(total * 100) / 100 || 0
        if (this.isChangeChecked) {
          return Math.round(total * 100) / 100 || 0
        // return this.user.ISPLUS === 1 ? this.plusPrice : this.orderTotal
        }
      } else {
        return 0.00
      }
    }
  },
  methods: {
    ...mapMutations('shoppingCart', {
      // setNum: 'GOODNUM',
      changeCount: 'CHANGSHOPCART',
      delProduct: 'DELSHOPCART',
      setOrder: 'ORDERGOOD'
      // setBadge: 'SETBADGE'
    }),
    ...mapActions('shoppingCart', {
      add: 'ADDGOOD',
      addCate: 'ADDCATE',
      reduce: 'REDGOOD',
      remove: 'REMOVEGOOD',
      change: 'CHANGCOUNT',
      deleteChoese: 'DELTCHOESE'

    }),
    chang (e, good) {
      if (e.mp.detail.value > 999) {
        mpvue.showToast({
          title: '采购数量为 0.1 ~ 999。小数不可超过两位。',
          icon: 'none',
          success: () => {
            good.count = 999
            this.change(good)
            this.$forceUpdate()
          }
        })

        return false
      }
      if (e.mp.detail.value > 0) {
        // console.log(e.mp.detail.value)
        good.count = Number(e.mp.detail.value)
        this.change(good)
        this.$forceUpdate()
      } else {
        good.count = 1
        this.change(good)
        this.$forceUpdate()
      }

      // mpvue.setTabBarBadge({
      //   index: 1,
      //   text: this.totalNum + ''
      // })
    },

    reducCount (good) {
      this.reduce(good)
      this.$forceUpdate()
      // mpvue.setTabBarBadge({
      //   index: 1,
      //   text: this.totalNum + ''
      // })
    },
    addCount (good, item) {
      this.add(good)
      this.addCate(item)
      this.$forceUpdate()
      // mpvue.setTabBarBadge({
      //   index: 1,
      //   text: this.totalNum + ''
      // })
    },
    choeseGoods (e) {
      if (e) {
        this.checkGoodIds = e.mp.detail
      }

      // let s = []
      // let priceName = this.user.ISPLUS === 1 ? 'COMMODITY_MEMBERPRICE' : 'COMMODITY_RETAILPRICE'
      this.goodsList.map(n => {
        if (this.checkGoodIds.indexOf(n.COMMODITY_ID + '') > -1) {
          // n.AVERAGE_PRICE = Number(n.count * n[priceName]).toFixed(2)
          n.isCheck = true
          // s.push(n)
        } else {
          n.isCheck = false
        }
      })
      // this.setOrder(s)
      if (this.checkGoodIds.length === this.allGoodIds.length) {
        this.isAllChoese = true
      } else {
        this.isAllChoese = false
      }
      this.isChangeChecked += 1
    },
    choeseAll (e) {
      this.isAllChoese = e.mp.detail
      if (e.mp.detail) {
        this.checkGoodIds = this.allGoodIds
        this.goodsList.map(n => {
          n.isCheck = true
        })
      } else {
        this.checkGoodIds = []
        this.goodsList.map(n => {
          n.isCheck = false
        })
      }
      this.isChangeChecked += 1
    },
    del (item) {
      Dialog.confirm({
        title: '温馨提示',
        message: '您确定移除该商品吗？'
      }).then(() => {
        this.remove(item)
      }).catch(() => {
        // on cancel
      })
    },
    deleteAllChoese () {
      let _this = this
      Dialog.confirm({
        title: '温馨提示',
        message: '您确定移除选中的商品吗？'
      }).then(() => {
        if (_this.checkGoodIds.length > 0) {
          _this.deleteChoese(_this.checkGoodIds)
          _this.checkGoodIds = []
        } else {
          mpvue.showToast({
            title: '请选择需要删除的商品',
            icon: 'none'
          })
        }
      }).catch(() => {
        // on cancel
      })
    },

    onSubmit () {
      let _this = this
      if (_this.checkGoodIds.length === 0) {
        return false
      }
      let s = []

      // _this.goodsList.map(n => {
      //   if (_this.checkGoodIds.indexOf(n.COMMODITY_ID + '') > -1) {
      //     n.AVERAGE_PRICE = Number(n.count * n.COMMODITY_RETAILPRICE).toFixed(2)
      //     s.push(n)
      //   }
      // })
      let priceName = (this.user.ISPLUS === 1 || this.user.MEMBERSHIP_TYPE === 3000) ? 'COMMODITY_MEMBERPRICE' : 'COMMODITY_RETAILPRICE'
      this.goodsList.map(el => {
        if (_this.checkGoodIds.indexOf(el.COMMODITY_ID + '') > -1) {
          s.push({
            COMMODITY_ID: el.COMMODITY_ID,
            COMMODITY_CODE: el.COMMODITY_CODE,
            COMMODITY_NAME: el.COMMODITY_NAME,
            COMMODITY_BARCODE: el.COMMODITY_BARCODE,
            COMMODITY_UNIT: el.COMMODITY_UNIT,
            COMMODITY_RULE: el.COMMODITY_RULE,
            ORDER_COUNT: el.count,
            AVERAGE_PRICE: el[priceName],
            ORDER_AMOUNT: el[priceName] * el.count,
            DISCOUNT_AMOUNT: 0,
            SUPPLIER_ID: el.SUPPLIER_ID,
            SUPPLIER_NAME: el.SUPPLIER_NAME,
            DEFAULT_IMG: el.DEFAULT_IMG
          })
        }
      })
      _this.setOrder(s)
      mpvue.navigateTo({url: '/pages/product/confirmOrder/main'})
    }
  },
  onShow () {
    this.checkGoodIds = this.allGoodIds
    this.choeseGoods()
    // this.setBadge(this.totalNum)
    // mpvue.setTabBarBadge({
    //   index: 1,
    //   text: this.totalNum + ''
    // })
  }
}
</script>

<style lang="stylus" scoped>
.top-title 
  background-color #ffffff
  display flex 
  justify-content center
  padding 16rpx 0
  font-size 28rpx
  position fixed
  width 100%
  z-index 1
.shop-cart 
  background #f8f8f8
  padding 94rpx 24rpx 120rpx 24rpx
  height 100%

.food-grouping +.food-grouping 
  margin-top 24rpx


.food-grouping 
  background-color #ffffff
  border-radius 12rpx
  padding 16rpx

  .goodlist-title 
    font-size: 28rpx;
    border-bottom: 1rpx solid #f7f7f7;
    line-height: 56rpx;
    height: 56rpx;
  

.foods-item 
  margin 24rpx 0
  padding-left 16rpx
  background #fff
  border-radius 12rpx
  overflow hidden

.foods-item + .foods-item 
  border-top: 1rpx solid #f7f7f7;



.good-img 
  margin-left 12rpx
  width 180rpx
  height 180rpx


.foods-item .icon 
  display inline-block
  width 100%
  height 180rpx
  margin-right 16rpx
  border-radius 4rpx

.detail-price 
  flex 1
  display flex
  flex-direction column
  justify-content space-between
  padding 32rpx 32rpx 32rpx 8rpx

.foods-item .title {
  display: block;
  color: #464245;
  font-size: 28rpx;
}

.foods-item .content 
  display flex
  justify-content space-between
  // margin-top: 16rpx;
  align-items center


.foods-item .price 
  font-size 32rpx
  color #e75534
  font-weight bolder
  display inline

.foods-item .price .unit 
  font-size 24rpx

.cartcontrol-wrap 
  margin-top 16rpx
  display flex
  justify-content space-between

.cartcontrol 
  display flex
  align-items center
  justify-content flex-end


.cart-decrease {
  width: 48rpx;
  height: 48rpx;
  border: 2rpx solid #eee;
  position: relative;
  border-radius: 50%;
  box-sizing: border-box;
}

.cart-decrease:before {
  content: '';
  height: 4rpx;
  width: 25rpx;
  background: #4d4d4d;
  display: block;
  position: absolute;
  left: 11rpx;
  top: 21rpx;
  border-radius: 4rpx;
}

.cart-count {
  width: 80rpx;
  min-height: 48rpx;
  height: 48rpx;
  border: 1rpx solid #e6e6e6;
  border-radius: 8rpx;
  margin: 0 16rpx;
  padding-left: 4rpx;
  font-size: 24rpx;
  text-align: center;
}

.cart-add 
  width 48rpx
  height 48rpx
  border 2rpx solid #e6e6e6
  position relative
  border-radius 50%
  box-sizing border-box

.right-delt 
  font-size 28rpx
  background-color #f44
  color #fff
  width 110rpx
  height 100%
  line-height 178rpx
  margin-left 16rpx
  text-align center
  border-radius 0 12rpx 12rpx 0

.cart-add-hover {
  background: #f8f8f8;
}

.cart-add:before {
  content: '';
  height: 4rpx;
  width: 25rpx;
  background: #4d4d4d;
  display: block;
  position: absolute;
  left: 11rpx;
  top: 21rpx;
  border-radius: 4rpx;
}

.cart-add:after 
  content: '';
  height: 25rpx;
  width: 4rpx;
  background: #4d4d4d;
  display: block;
  position: absolute;
  top: 11rpx;
  left: 21rpx;
  border-radius: 4rpx;

.sub-btn
  background #4d4d4d
</style>
