<template>
  <div class="placeOrder warp">
    <div class="poAddressList">
      <div class="poAddListTit">
        <span>请选择收货地址</span>
        <span @click="newAddressFn">新增地址</span>
      </div>
      <div v-if="addressData.length === 0" class="poAddListBox">
        <span>暂无收货信息</span>
      </div>
      <div v-if="addressData.length !== 0" class="poAddListBox">
        <div class="title">收货人信息：</div>
        <div class="addressItem">
          <div class="addressInfo">
            <span class="userName">{{ addressObj.receiveName }}</span>
            <span class="userAddress">{{ addressObj.receiveAdress }} {{ addressObj.address }}</span>
            <span class="userPhone">{{ addressObj.receivePhone }}</span>
          </div>
          <span class="changeAddress" @click="showChangeAddress">
            <icon-svg style="font-size: 16px;" icon-class="exchange" />
            切换
          </span>
        </div>
      </div>
    </div>
    <!-- 订单商品信息 -->
    <div class="shoplist">
      <div class="shopTitle">请确认订单信息</div>
      <ShopOrder v-for="item in settlement.shops" :key="item.shopId" :type="state" :shops-data="item">
        <template #coupon>
          <div class="couponContainer">
            <div v-for="(coupon, index) in item.shopCoupons" :key="index" class="couponItem">
              <CouponBox type="商家券" :coupon-item="coupon" :is-select="coupon.checked" @couponSelect="couponSelect" />
            </div>
          </div>
        </template>
      </ShopOrder>
    </div>
    <!-- 优惠券信息 -->
    <!-- 平台券 -->
    <div v-if="settlement.coupons.length" class="couponContainer">
      <p>平台券</p>
      <div v-for="(item, index) in settlement.coupons" :key="index" class="couponItem">
        <CouponBox type="平台券" :coupon-item="item" :is-select="item.checked" @couponSelect="couponSelect" />
      </div>
    </div>
    <div class="payBox">
      <div class="payTit">选择支付方式</div>
      <div class="payList">
        <!--            <span :class="{payActive: payType === 'alipay'}" @click="selectPay(type = 'alipay')"> -->
        <!--              <i class="iconfont">&#xe627;</i> -->
        <!--              <b class="iconfont">&#xe612;</b> -->
        <!--              支付宝支付 -->
        <!--            </span> -->
        <span class="typeBox" :class="{ payActive: payType === 'weChat' }" @click="selectPay(payType = 'weChat')">
          <i class="iconfont">&#xe686;</i>
          <b class="iconfont">&#xe612;</b>
          微信支付
        </span>
      </div>
    </div>
    <div class="placeOrderBtn">
      <div class="payInfo">
        <span>运费：+¥{{ (distributionPrice || 0).toFixed(2) }}</span>
        <span>平台优惠：-￥{{ couponAmount.toFixed(2) }}</span>
        <span>商家优惠：-￥{{ couponShopAmount.toFixed(2) }}</span>
        <span>需付款：<b>￥{{ totalPrice.toFixed(2) }}</b></span>
      </div>
      <el-button v-if="disabledButton" class="submitOrder unDisButton" @click="clickTips">提交订单</el-button>
      <el-button v-else class="submitOrder" :loading="btnLoading" @click="clickPayOrder">提交订单</el-button>
    </div>
    <!-- 付款提示 -->
    <el-dialog title="请在1小时内完成付款，否则订单会被系统取消" :visible.sync="paymentDialog" width="30%">
      <div class="payment">
        <div class="paymentBox">
          <div class="successBox">
            <span>支付成功请点击</span>
            <el-button type="primary" plain>已完成付款</el-button>
          </div>
          <div class="errorBox">
            <span>遇到问题请点击</span>
            <el-button v-throttle type="primary">重新付款</el-button>
          </div>
        </div>
        <div class="paymentInfo">
          <p>注：重新付款前，请关闭之前的付款页面</p>
          <p>如有疑问或需要帮助，请进入<b>帮助中心</b>或联系<b>在线客服</b></p>
        </div>
      </div>
    </el-dialog>
    <!-- 微信支付 -->
    <el-dialog class="weChat" title="微信支付" :visible.sync="weChatDialog" :before-close="handleClose" width="500px">
      <div class="qCode">
        <div class="wechatTitle">
          <div class="tips">
            <p>请使用微信扫一扫</p>
            <p>扫描二维码支付</p>
          </div>
          <div>￥{{ payInfo.money }}</div>
        </div>
        <img class="code" :src="payInfo.url" alt="">
      </div>
    </el-dialog>
    <!-- 新建收货地址 -->
    <el-dialog :title="addressDialogTitle" :visible.sync="newAddressDialog" width="630px">
      <AddAddress @hideAddDialog="hideAddDialog" @cancelAdd="closeAdd" />
    </el-dialog>
    <!-- 切换地址 -->
    <el-dialog title="选择收货地址" :visible.sync="changeAddressDialog" :close-on-click-modal="false" :destroy-on-close="false">
      <ul class="addressTable">
        <li
          v-for="(item, index) in addressData" :key="index" class="addressListItem"
          :class="{ addressActive: curAdd === index }" @click="curAdd = index"
        >
          <div class="top com">
            <div class="left">
              姓名：
              <span>{{ item.receiveName }}</span> <span>{{ item.receivePhone }}</span>
            </div>
            <div class="setDef" :class="{ colorActive: item.ifDefault }" @click="changeAddress(item)">
              编辑
            </div>
          </div>
          <div class="bottom com">
            <div class="left">
              地址：<span>{{ item.receiveAdress }} {{ item.address }}</span>
              <span v-if="item.ifDefault" class="defTip">默认地址</span>
            </div>
            <div v-if="!item.ifDefault" class="setDef" @click="setDefAddress(item)">
              设为默认地址
            </div>
          </div>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button v-throttle class="combtns" @click="changeAddressDialog = false">取消</el-button>
        <el-button v-throttle class="combtns btnBlack" @click="setChangeAddress">确认</el-button>
      </span>
    </el-dialog>
    <!-- 支付失败 -->
    <el-dialog title="温馨提示" :visible.sync="errorDialog" width="300px">
      <div class="errorDialog">
        <div class="errorTit">
          <span class="iconfont">&#xe620;</span>
          <p>您的订单支付失败</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button v-throttle class="btns" @click="toOrder">查看订单</el-button>
          <el-button v-throttle class="btns pay" type="primary" @click="clickPayOrder">重新支付</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { TextToCode } from 'element-china-area-data'
import { mapGetters, mapMutations } from 'vuex'

import AddAddress from '@/components/orderInfo/addAddress'
import ShopOrder from '@/views/placeOrder/components/shopOrder.vue'
import CouponBox from '@/views/placeOrder/components/couponBox.vue'
import {
  getAllAddressList,
  addAddress,
  updateAddress
} from '@/api/user/address.js'
import {
  orderSubmit,
  getSettlement,
  getGroupSettle,
  checkOrderResult
} from '@/api/user/order.js'
import {
  getCartList,
  deleteCartItem
} from '@/api/user/cart.js'
export default {
  name: 'PlaceOrder',
  components: {
    AddAddress,
    ShopOrder,
    CouponBox
  },
  data() {
    return {
      addressData: [],
      addressDialogTitle: '新建收货地址',
      newAddressDialog: false,
      paymentDialog: false,
      weChatDialog: false,
      payType: '',
      errorDialog: false,
      promotionInfoDTO: {
        couponId: 0,
        ifAdd: 1,
        reduceMoney: 0
      },
      settlement: {
        coupons: [],
        shops: []
      },
      totalPrice: 0,
      shopIndex: 0, // 当前操作的优惠券所在店铺的索引
      showDiscount: false,
      currentCoupon: null,
      currentShopCoupon: null,
      currentDiscount: 0,
      discountTotal: 0, // 优惠总额
      couponCurrent: {},
      shopCouponCurrent: {},
      submitData: {
        receiveId: '',
        couponId: '',
        price: '',
        remark: '',
        shops: []
      },
      curAdd: 0,
      currentAddressId: '',
      addressObj: {
        receiveName: '',
        receivePhone: '',
        receiveAdress: '',
        address: ''
      }, // 地址展示信息
      remarksInfo: '',
      payInfo: {},
      chatTimer: '',
      activityType: 0,
      workData: {},
      paramShops: [],
      type: null,
      ifWork: 0,
      state: 0,
      distributionPrice: 0, // 总运费
      changeAddressDialog: false,
      btnLoading: false,
      checkedPlatformCoupon: undefined, // 选中的平台券
      selectShopCoupon: [], // 商家券
      couponAmount: 0, // 平台券总折扣
      couponShopAmount: 0, // 商家券总折扣
      hasCheck: 0, // 含有不可叠加券： 1.平台券  2.商家券
      disabledButton: false // 获地址是否符合商家配送范围内
    }
  },
  created() {
    if (this.$route.query.works) {
      this.workData = JSON.parse(this.$route.query.works)
    }
    if (this.$route.query.type) {
      this.type = this.$route.query.type
    }
    if (this.$route.query.ifWork !== undefined) {
      this.ifWork = parseInt(this.$route.query.ifWork)
    }
    if (this.$route.query.activityType !== undefined) {
      this.activityType = parseInt(this.$route.query.activityType)
    }
    if (this.$route.query.shops) {
      this.paramShops = JSON.parse(this.$route.query.shops)
    }
    if (this.paramShops.shopDiscountId) {
      this.state = 3
    }
    if (this.paramShops.shopSeckillId) {
      this.state = 2
    }
    if (this.workData.shopGroupWorkId) {
      this.state = 1
    }
  },
  mounted() {
    // 获取地址列表
    this.getAddressList()
    if (this.$route.query.type) {
      this.getSetProList()
    } else {
      this.getWorkSettlement()
    }
  },
  computed: {
    ...mapGetters([
      'newAddress' // 新增修改收货地址
    ]),
    shopIds() {
      return this.settlement.shops.map((item) => item.shopId)
    }
  },
  methods: {
    ...mapMutations({
      seNewAddress: 'SET_NEWADDRESS', // 新增修改收货地址
      setAreacode: 'SET_AREACODE', // 新增修改收货地址
      setCartNumber: 'SET_CARTNUMBER', // 购物车数量
      setShoppingCart: 'SET_SHOPPINGCART' // 购物车
    }),
    // 获取地址列表
    async getAddressList() {
      const response = await getAllAddressList({
        page: 1,
        pageSize: 100
      })
      const res = response.data
      if (res.code === '200') {
        this.addressData = res.data.list
        if (this.addressData.length === 1) { // 只有1条，默认为收货地址
          this.currentAddressId = this.addressData[0].receiveId
          this.setPageAddressObj(this.addressData[0])
          return
        }
        this.addressData.forEach((item, index) => {
          if (item.ifDefault) { // 如果有默认地址时
            this.currentAddressId = item.receiveId
            this.setPageAddressObj(item)
          } else if (index === 0) { // 没有则优先选择第一个地址
            this.currentAddressId = item.receiveId
            this.setPageAddressObj(item)
          }
        })
      } else {
        this.$message.warning(res.message)
      }
    },
    // 设置收货渲染数据
    setPageAddressObj(item) {
      this.addressObj = {
        receiveName: item.receiveName,
        receivePhone: item.receivePhone,
        receiveAdress: item.receiveAdress,
        address: item.address
      }
    },
    // 新增地址
    async hideAddDialog() {
      this.newAddressDialog = false
      const response = await addAddress({
        receiveName: this.newAddress.receiveName,
        receivePhone: this.newAddress.receivePhone,
        receiveAdress: this.newAddress.receiveAdress,
        address: this.newAddress.address,
        label: '',
        ifDefault: this.newAddress.ifDefault ? 1 : 0
      })
      const res = response.data
      if (res.code === '200') {
        this.$message({
          message: '地址添加成功',
          type: 'success'
        })
        this.page = 1
        this.addressData = []
        this.setAreacode([])
        this.getAddressList()
        if (this.newAddress.ifDefault) {
          if (this.$route.query.type) {
            this.getSetProList()
          } else {
            this.getWorkSettlement()
          }
        }
      } else {
        this.$message.error(res.message)
      }
    },
    // 取消新增地址
    closeAdd() {
      this.newAddressDialog = false
    },
    // 新增地址
    newAddressFn() {
      const obj = {
        receiveName: '',
        receivePhone: '',
        receiveAdress: '',
        address: '',
        label: '',
        ifDefault: false
      }
      this.setAreacode([])
      this.seNewAddress(obj)
      this.addressDialogTitle = '新增收货地址'
      this.newAddressDialog = true
    },
    showChangeAddress() {
      this.changeAddressDialog = true
    },
    // 修改收货地址
    setChangeAddress() {
      const item = this.addressData[this.curAdd]
      this.currentAddressId = item.receiveId
      this.addressObj = {
        receiveName: item.receiveName,
        receivePhone: item.receivePhone,
        receiveAdress: item.receiveAdress,
        address: item.address
      }
      this.changeAddressDialog = false
      if (this.$route.query.type) {
        this.getSetProList()
      } else {
        this.getWorkSettlement()
      }
    },
    // 修改地址信息
    changeAddress(item) {
      this.changeAddressDialog = false
      const addressData = item.receiveAdress.split('-')
      const areaData = []
      areaData.push(TextToCode[addressData[0]].code)
      areaData.push(TextToCode[addressData[0]][addressData[1]].code)
      areaData.push(TextToCode[addressData[0]][addressData[1]][addressData[2]].code)
      const currentItem = JSON.parse(JSON.stringify(item))
      this.seNewAddress(currentItem)
      this.setAreacode(areaData)
      this.addressDialogTitle = '修改收货地址'
      this.newAddressDialog = true
    },
    // 设置默认地址
    setDefAddress(item) {
      item.ifDefault = 1
      this.seNewAddress(item)
      this.updateAddressFun()
    },
    // 更新地址
    async updateAddressFun() {
      this.changeAddressDialog = false
      const response = await updateAddress({
        receiveId: this.newAddress.receiveId,
        receiveName: this.newAddress.receiveName,
        receivePhone: this.newAddress.receivePhone,
        receiveAdress: this.newAddress.receiveAdress,
        address: this.newAddress.address,
        label: '',
        ifDefault: this.newAddress.ifDefault
      })
      const res = response.data
      if (res.code === '200') {
        this.$message({
          message: '地址修改成功',
          type: 'success'
        })
        this.page = 1
        this.addressData = []
        this.setAreacode([])
        this.getAddressList()
      } else {
        this.$message.error(res.message)
      }
    },
    // 拼团商品结算查询
    async getWorkSettlement() {
      this.workData.receiveId = this.currentAddressId
      const rLoading = this.openLoading()
      this.distributionPrice = 0

      const response = await getGroupSettle(this.workData)
      const res = response.data
      if (res.code === '200') {
        this.successBackSettlement(res)
        rLoading.close()
      } else {
        this.$message.warning(res.message)
      }
    },
    // 查询结算产品列表
    async getSetProList() {
      const rLoading = this.openLoading()
      this.distributionPrice = 0
      const response = await getSettlement({
        type: this.type,
        shops: this.paramShops,
        ifWork: this.ifWork,
        receiveId: this.currentAddressId
      })
      const res = response.data
      if (res.code === '200') {
        this.successBackSettlement(res)
        rLoading.close()
      } else {
        this.$message.warning(res.message)
        this.$router.back()
      }
    },
    // 结算查询成功回调
    successBackSettlement(res) {
      this.disabledButton = false
      this.settlement = res.data
      this.currentAddressId = res.data.receive.receiveId || ''
      this.settlement.shops = res.data.shops || [] // 订单商家信息
      this.settlement.coupons.forEach((item, index) => {
        item.index = index
        item.type = 1
        item.discountAmount = 0
      })
      this.settlement.shops.forEach((item) => {
        // 处理收获地址是否符合商家配送范围内
        if (item.receiveNotMatch) {
          this.disabledButton = item.receiveNotMatch
        }
        if (this.disabledButton) {
          this.clickTips()
        }
        // 处理商家券
        item.shopCoupons = item.shopCoupons.map((i, index) => {
          i.index = index
          i.type = 2 // type 1平台券 2商家券
          i.uniWebId = `${item.shopId}+${index}` // 创建一个前端单方面的唯一值，处理选中状态
          i.shopId = item.shopId // 方便后续确定优惠券
          i.discountAmount = 0
          return i
        })
        item.totalAfterDiscount = item.total
        this.distributionPrice += Number(item.distribution.distributionPrice) || 0
      })
      this.getTotal()
    },
    // 选择优惠券
    couponSelect(val) {
      if (val.type === 1) {
        this.couponItemTap(val)
      } else {
        this.shopCouponItemTap(val)
      }
    },
    // 商家券 本方法参考uniapp代码的同名方法
    shopCouponItemTap(coupon) {
      const index = coupon.index
      this.shopIndex = this.shopIds.indexOf(coupon.shopId)

      // 取消选择优惠券
      if (coupon.checked) {
        coupon.checked = false
        coupon.discountAmount = 0
        this.settlement.shops[this.shopIndex].totalAfterDiscount = this.settlement.shops[this.shopIndex].total
        this.settlement.shops[this.shopIndex].currentCoupon = {}
        this.settlement.shops[this.shopIndex].skus.forEach((item) => {
          item.buyerShopCouponId = null
        })
        this.selectShopCoupon = []
        this.getTotal()
        return false
      }

      if (this.settlement.shops[this.shopIndex].total < coupon.fullMoney) {
        this.$message.warning('不满足优惠券使用条件！')
      } else if (coupon.couponType === 1 && this.settlement.shops[this.shopIndex].total < coupon.reduceMoney) {
        this.$message.warning('不可使用大于商品金额的优惠劵！')
      } else {
        // 选择优惠券
        if (this.promotionInfoDTO.couponId !== 0) {
          this.$message.warning('此券不可与平台券叠加！')
          return false
        }
        if (coupon.couponType === 1) {
          if (coupon.reduceMoney >= this.settlement.shops[this.shopIndex].total) {
            this.$message.warning('优惠券优惠金额不能大于等于合计金额！')
            return false
          }
        }

        this.isShopCoupons = false
        this.shopCouIndex = index
        const useCoupon = this.useShopCoupon(this.shopIndex, this.shopCouIndex)
        if (useCoupon) {
          // 确认使用当前点击的商家券，先将所有的商家券取消选中
          for (let i = 0; i < this.selectShopCoupon.length; i++) {
            this.selectShopCoupon[i].checked = false
          }
          this.selectShopCoupon = []

          coupon.checked = true
          this.settlement.shops[this.shopIndex].id = coupon.id
          this.settlement.shops[this.shopIndex].currentCoupon = coupon
          this.settlement.shops[this.shopIndex].skus.forEach((item) => {
            if (item.buyerShopCouponId > 0 && item.buyerShopCouponId !== coupon.shopCouponId) {
              item.buyerShopCouponId = null
            }
          })
          this.selectShopCoupon.push(coupon)
        } else {
          this.settlement.shops[this.shopIndex].totalAfterDiscount = this.settlement.shops[this.shopIndex].total
        }
        this.getTotal()
      }
    },
    // 平台券 本方法参考uniapp的同名方法
    couponItemTap(coupon) {
      if (!coupon.checked && this.selectShopCoupon.length) { // 判断商家券情况
        this.$message.warning('不可与商家券叠加使用！')
        return false
      }
      // 已选中的情况下取消选中
      if (coupon.checked) {
        const promotionInfoDTO = {}
        if (coupon.couponId) {
          promotionInfoDTO.couponId = 0
          promotionInfoDTO.ifAdd = 1
          promotionInfoDTO.reduceMoney = 0
        }
        this.promotionInfoDTO = promotionInfoDTO
        coupon.checked = false
        coupon.discountAmount = 0
        this.isShowDiscount = false
        this.checkedPlatformCoupon = undefined
        this.settlement.shops.forEach((shopItem) => {
          if (shopItem.skus) {
            shopItem.skus.forEach((skuItem) => {
              skuItem.buyerCouponId = null
            })
          }
        })
        this.getTotal()
      } else {
        // 先把所有已选中的平台优惠券改为未选中
        this.settlement.coupons.forEach((item) => {
          item.checked = false
        })
        let totalPrice = 0 // 订单总价
        const shopsLen = this.settlement.shops.length // 结算页店铺数量
        let matchCouponSkuList = []
        for (let i = 0; i < shopsLen; i++) {
          let matchCouponNormalPrice = 0
          let priceCount = 0
          const curShop = this.settlement.shops[i]
          const skuLen = curShop.skus.length
          const tmpPriceSkuList = []
          for (let j = 0; j < skuLen; j++) {
            const curSku = curShop.skus[j]
            if (curSku.priceId > 0) {
              priceCount++
            }
            const ids = coupon.ids
            if (ids.indexOf(curSku.productId) > -1) {
              if (curSku.priceId > 0) {
                tmpPriceSkuList.push(curSku)
              } else {
                matchCouponSkuList.push(curSku)
                matchCouponNormalPrice = matchCouponNormalPrice + curSku.price * curSku.number
              }
            }
          }
          if (priceCount === tmpPriceSkuList.length) {
            totalPrice += curShop.priceAfterDiscount
            matchCouponSkuList = matchCouponSkuList.concat(tmpPriceSkuList)
          }
          totalPrice += matchCouponNormalPrice
        }
        if (this.settlement.shops[this.shopIndex].total < coupon.fullMoney) {
          this.$message.warning('不满足优惠券使用条件！')
        }
        if (coupon.couponType === 1 && coupon.reduceMoney >= totalPrice) {
          this.$message.warning('不可使用大于等于合计金额的优惠劵！')
          return false
        }
        // 如果是折扣券，需要记录，在什么基数上打折
        coupon.useMoney = totalPrice
        const promotionInfoDTO = {}
        if (coupon.couponId) {
          promotionInfoDTO.couponId = coupon.couponId
          promotionInfoDTO.ifAdd = coupon.ifAdd
          promotionInfoDTO.couponType = coupon.couponType
          promotionInfoDTO.reduceMoney = coupon.reduceMoney
        }
        this.promotionInfoDTO = promotionInfoDTO
        this.isShowDiscount = false
        this.checkedPlatformCoupon = coupon
        matchCouponSkuList.forEach((item) => {
          item.buyerCouponId = coupon.couponId
        })
        this.getTotal()
        // 选中优惠券
        coupon.checked = true
      }
    },
    // 校验商家券是否满足使用条件
    // 后续该方法的维护直接从uniapp端的代码复制过来
    useShopCoupon(shopIndex, couponIndex) {
      const curShop = this.settlement.shops[shopIndex]
      curShop.totalAfterDiscount = 0
      let curCoupon
      if (curShop.shopCoupons && curShop.shopCoupons.length > 0) {
        curCoupon = curShop.shopCoupons[couponIndex]
      }
      if (!curCoupon) {
        return false
      }
      let useCoupon = false
      const matchCouponNormalSkuList = []
      const matchCouponPriceSkuList = []
      if (curCoupon.applyType !== 1) {
        const ids = curCoupon.ids
        const skuLength = curShop.skus.length
        // 符合优惠券商品列表中的普通sku价格综合
        let matchCouponNormalPrice = 0
        // 符合定价捆绑且在优惠券商品列表中的价格综合
        let matchCouponPricePrice = 0
        // 符合定价捆绑活动的sku数量
        let priceCount = 0
        for (let idx = 0; idx < skuLength; idx++) {
          const curSku = curShop.skus[idx]
          if (curSku.priceId > 0) {
            priceCount++
          }
          if (ids.indexOf(curSku.productId) > -1) {
            if (curSku.priceId > 0) {
              matchCouponPriceSkuList.push(curSku)
            } else {
              matchCouponNormalSkuList.push(curSku)
              matchCouponNormalPrice = matchCouponNormalPrice + curSku.price * curSku.number
            }
          }
        }
        // 如果定价捆绑的所有sku都符合优惠券
        if (priceCount === matchCouponPriceSkuList.length) {
          matchCouponPricePrice = curShop.priceAfterDiscount
        }
        // 符合的sku的price加起来是否满足满减的条件
        const priceFinal = matchCouponPricePrice + matchCouponNormalPrice
        if (priceFinal < curCoupon.fullMoney || (curCoupon.couponType === 1 && priceFinal <= curCoupon
          .reduceMoney)) {
          return false
        }
        // 判断是满减，还是折扣
        if (curCoupon.couponType === 1) {
          curShop.totalAfterDiscount = curShop.total - curCoupon.reduceMoney
          curCoupon.discountAmount = curCoupon.reduceMoney
          useCoupon = true
        } else {
          // 打折后优惠抵扣的金额
          const priceDiscount = (priceFinal * ((10 - curCoupon.reduceMoney) / 10)).toFixed(2)
          const tmpTotal = curShop.total - priceDiscount
          if (tmpTotal.toFixed(2) >= 0.01) {
            curShop.totalAfterDiscount = tmpTotal.toFixed(2)
            curCoupon.discountAmount = priceDiscount
            useCoupon = true
          }
        }
        if (useCoupon) {
          // 满足的sku设置buyerShopCouponId
          if (priceCount === matchCouponPriceSkuList.length) {
            const length1 = matchCouponPriceSkuList.length
            for (let idx = 0; idx < length1; idx++) {
              matchCouponPriceSkuList[idx].buyerShopCouponId = curCoupon.shopCouponId
            }
          }
          const length2 = matchCouponNormalSkuList.length
          for (let idx = 0; idx < length2; idx++) {
            matchCouponNormalSkuList[idx].buyerShopCouponId = curCoupon.shopCouponId
          }
        }
      } else {
        if (curCoupon.couponType === 1) {
          if (curShop.total > curCoupon.reduceMoney) {
            curShop.totalAfterDiscount = curShop.total - curCoupon.reduceMoney
            curCoupon.discountAmount = curCoupon.reduceMoney
            useCoupon = true
          }
        } else if (curShop.total > curCoupon.fullMoney) {
          const priceDiscount = (curShop.total * ((10 - curCoupon.reduceMoney) / 10)).toFixed(2)
          const tmpTotal = curShop.total - priceDiscount
          if (tmpTotal.toFixed(2) >= 0.01) {
            curShop.totalAfterDiscount = tmpTotal.toFixed(2)
            curCoupon.discountAmount = priceDiscount
            useCoupon = true
          }
        }
        if (useCoupon) {
          const skuLength = curShop.skus.length
          for (let idx = 0; idx < skuLength; idx++) {
            curShop.skus[idx].buyerShopCouponId = curCoupon.shopCouponId
          }
        }
      }
      return useCoupon
    },

    /**
		 * 计算总价，商家券的优惠计算，在调用本方法之前已经计算好在shops[].totalAfterDiscount
		 * 本方法参考uniapp的方法即可
		 */

    getTotal() {
      this.totalPrice = 0
      this.totalCount = 0
      let shopSumPrice = 0
      const shopsLen = this.settlement.shops.length
      this.calcCouponShopAmount()

      for (let i = 0; i < shopsLen; i++) {
        this.totalPrice += parseFloat(this.settlement.shops[i].totalAfterDiscount)
        shopSumPrice += parseFloat(this.settlement.shops[i].totalAfterDiscount)
        this.totalCount += this.settlement.shops[i].number
      }

      this.calcCouponAmount()
      if (this.checkedPlatformCoupon) {
        this.totalPrice = shopSumPrice - this.couponAmount
      }
      // 加上每个商家的运费
      this.settlement.shops.forEach((item) => {
        this.totalPrice = this.totalPrice + (item.distribution.distributionPrice || 0)
      })
    },
    getShopTotal() {
      let total = 0
      this.settlement.shops.forEach((shop) => {
        total += parseFloat(shop.total)
      })
      return total
    },
    // 计算商家券优惠金额
    calcCouponShopAmount() {
      if (!this.selectShopCoupon || this.selectShopCoupon.length === 0) {
        this.couponShopAmount = 0
      }
      let tmpAmount = 0
      this.selectShopCoupon.forEach((coupon) => {
        tmpAmount += coupon.discountAmount
      })
      this.couponShopAmount = tmpAmount
    },
    // 计算平台券优惠金额
    calcCouponAmount() {
      let tmpAmount = 0
      if (this.checkedPlatformCoupon) {
        if (this.checkedPlatformCoupon.couponType === 1) {
          tmpAmount = this.checkedPlatformCoupon.reduceMoney
        } else {
          tmpAmount = (this.checkedPlatformCoupon.useMoney * ((10 - this.checkedPlatformCoupon.reduceMoney) / 10)).toFixed(2)
        }
      }
      this.couponAmount = parseFloat(tmpAmount)
    },
    // 选择支付方式
    selectPay(payType) {
      this.payType = payType
    },
    clickTips() {
      this.$message.warning('当前地址不支持配送，请参与红色字提示！')
    },
    // 提交支付
    clickPayOrder() {
      this.errorDialog = false
      if (this.payType === '') {
        this.$message.warning('请选择支付方式')
      } else if (this.currentAddressId === '') {
        this.$message.warning('请选择您的收货地址')
      } else {
        const shops = []
        this.settlement.shops.forEach((j, i) => {
          const skus = []
          j.skus.forEach((k, n) => {
            if (k.selected) {
              skus.push({
                skuId: k.skuId,
                number: k.number,
                selected: k.selected,
                platformSeckillId: k.platformSeckillId,
                platformDiscountId: k.platformDiscountId,
                shopSeckillId: k.shopSeckillId,
                shopDiscountId: k.shopDiscountId,
                priceId: k.priceId,
                composeId: k.composeId,
                sceneId: k.sceneId,
                useMember: k.useMember,
                buyerCouponId: k.buyerCouponId,
                buyerShopCouponId: k.buyerShopCouponId
              })
            }
          })
          if (skus.length) {
            shops.push({
              id: j.id,
              shopId: j.shopId,
              remark: j.remark,
              distribution: {
                distributionPrice: j.distribution.distributionPrice,
                logisticsId: j.distribution.logisticsId,
                distributionName: j.distribution.distributionName
              },
              skus
            })
          }
        })
        this.submitData.shops = shops
        this.submitData.receiveId = this.currentAddressId
        this.submitData.price = this.totalPrice.toFixed(2)
        // 优惠总额 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
        this.submitData.discountPrice = parseFloat((this.couponAmount + this.couponShopAmount).toFixed(2) || 0)
        this.submitData.remark = this.settlement.shops[0].remark
        if (this.activityType === 1 && this.ifWork !== 1) {
          this.submitData.shopGroupWorkId = this.workData.shopGroupWorkId
          this.submitData.type = 1
          if (this.workData.collageId) {
            this.submitData.collageId = this.workData.collageId
            this.submitData.type = 2
          }
        } else if (this.activityType === 2) {
          this.submitData.shopSeckillId = this.paramShops[0].shopSeckillId
          this.submitData.type = 3
        } else if (this.activityType === 3) {
          this.submitData.shopDiscountId = this.paramShops[0].shopDiscountId
          this.submitData.type = 4
        }
        this.orderSubmit(this.submitData, 'submitData')
      }
    },
    // 提交订单
    async orderSubmit(subData) {
      subData.couponId = this.promotionInfoDTO && this.promotionInfoDTO.couponId > 0 ? this.promotionInfoDTO.couponId : 0
      this.btnLoading = true
      const response = await orderSubmit(subData)
      const res = response.data
      if (res.code === '200') {
        this.payInfo = res.data
        if (this.type === 2 || this.type === '2') {
          const ids = []
          subData.shops.forEach((i) => {
            i.skus.forEach((j) => {
              ids.push(j.skuId)
            })
          })
          deleteCartItem({ ids }).then((res) => {
            if (res.data.code === '200') {
              this.getTrolleyList()
            }
          })
        }
        this.weChatDialog = true
        this.chatTimer = setInterval(() => {
          this.checkPay(res.data)
        }, 3000)
      } else {
        this.$message({
          message: res.message,
          type: 'warning'
        })
      }
      this.btnLoading = false
    },
    // 查询订单是否支付成功
    checkPay(paramsData) {
      setTimeout(() => {
        checkOrderResult({
          collageId: paramsData.collageId,
          money: paramsData.money,
          orderId: paramsData.orderId,
          type: 1
        }).then((response) => {
          const res = response.data
          if (res.code === '200') {
            if (res.data.code === 'SUCCESS') {
              this.$message({
                message: '支付成功！',
                type: 'success'
              })
              clearInterval(this.chatTimer)
              this.getTrolleyList()
              // 支付有礼跳转
              this.$router.push({ path: '/orderResult', query: { orderId: paramsData.orderId } })
            }
          } else {
            clearInterval(this.chatTimer)
            this.$message({
              message: res.message,
              type: 'error'
            })
          }
        })
      }, 0)
    },
    // 获取购物车列表
    async getTrolleyList() {
      const response = await getCartList()
      const res = response.data
      let cartNumber = 0
      if (res.data.length) {
        res.data.forEach((j) => {
          cartNumber = cartNumber + j.skus.length
        })
      }
      this.setShoppingCart(res.data)
      this.setCartNumber(cartNumber)
    },
    // 取消支付
    handleClose() {
      this.$confirm('确认取消支付？')
        .then((_) => {
          clearInterval(this.chatTimer)
          this.weChatDialog = false
          this.errorDialog = true
        })
        .catch((_) => { })
    },
    toOrder() {
      this.$router.push({ path: '/myOrder' })
    }
  }
}
</script>

<style lang="scss" scoped>
.placeOrder {
	margin: 20px auto;

	.poAddressList {
		width: 100%;
		border: 1px solid #F5F5F5;
		// padding: 20px;
		margin-bottom: 30px;
		box-sizing: border-box;

		.poAddListTit {
			height: 80px;
			background-color: #FAFAFA;
			display: flex;
			justify-content: space-between;
			align-items: center;

			span:nth-child(1) {
				color: #333333;
				font-size: 16px;
				margin-left: 30px;
			}

			span:nth-child(2) {
				color: $mainGlod;
				font-size: 14px;
				cursor: pointer;
				margin-right: 30px;
			}
		}

		.poAddListBox {
			height: 130px;
			margin: 20px 30px 0 30px;
			font-family: Microsoft YaHei;

			.title {
				font-size: 16px;
				color: #333333;
			}

			.addressItem {
				height: 40px;
				margin: 30px auto 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.addressInfo {
					display: flex;
					align-items: center;
					cursor: default;

					.userName {
						display: block;
						width: 100px;
						height: 40px;
						line-height: 40px;
						text-align: center;
						color: #B39259;
						background-color: rgba($color: #C5AA7B, $alpha: .1);
					}

					.userAddress {
						margin: 0 30px 0 20px;
						max-width: 400px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.changeAddress {
					width: 100px;
					height: 40px;
					line-height: 40px;
					text-align: center;
					color: #FFEBC4;
					background-color: #333333;
					cursor: pointer;
				}
			}
		}
	}

	>>>.el-dialog {

		// .el-dialog__body {
		//   background: #F8F8F8;
		// }
		.el-dialog__header {
			text-align: center;
		}

		.el-dialog__footer {
			text-align: center;

			.dialog-footer {
				text-align: center;

				button {
					height: 45px;
					width: 160px;
				}

				.combtns {
					width: 200px;
					height: 50px;
					background: #F3F4F5;
					border-radius: 0px;
				}

				.btnBlack {
					color: $mainGlod;
					background: #333333;
				}
			}
		}
	}

	.addressTable {
		width: 100%;
		max-height: 415px;
		overflow-y: auto;

		.addressListItem {
			height: 80px;
			padding: 15px 20px;
			margin-bottom: 15px;
			border: 1px solid #F3F4F5;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.com {
				display: flex;
				font-size: 14px;
				font-family: Microsoft YaHei;
				color: #999999;

				.left {
					flex: 1;
				}
			}

			.left {
				span {
					color: #333333;
				}

				.defTip {
					width: 70px;
					height: 25px;
					padding: 10px;
					color: #FFF;
					background-color: $mainGlod;
					cursor: default;
				}
			}

			.setDef {
				cursor: pointer;
			}
		}

		.addressActive {
			background: rgba(197, 170, 123, 0.26);
			border: 1px solid #C5AA7B;
		}

		.colorActive {
			color: $mainGlod;
		}
	}

	.shoplist {
		.shopTitle {
			line-height: 80px;
			padding-left: 30px;
			background-color: #FAFAFA;
		}
	}

	.orderList {
		background: #FCFCFC;
		border: 1px solid #E5E5E5;
		margin-bottom: 25px;

		.orderInfoTit {
			width: 100%;
			display: flex;
			height: 44px;
			line-height: 44px;
			color: #333333;
			font-size: 14px;
			font-weight: 400;
		}

		span {
			text-align: center;
		}

		span:nth-child(1) {
			width: 40%;
			text-align: left;
			padding-left: 125px;
			box-sizing: border-box;
		}

		span:nth-child(2) {
			width: 20%;
			text-align: left;
		}

		span:nth-child(3) {
			width: 15%;
		}

		span:nth-child(4) {
			width: 15%;
		}

		span:nth-child(5) {
			width: 10%;
		}

		span:nth-child(6) {
			width: 10%;
		}
	}

	.couponContainer {
		margin-bottom: 30px;
		height: 100%;
		margin-top: 30px;
		overflow: auto;
		box-sizing: border-box;
		border: 1px solid #F3F4F5;

		p {
			padding-left: 30px;
			line-height: 80px;
			font-size: 16px;
			background-color: #FAFAFA;
		}

		.couponItem {
			width: 280px;
			height: 88px;
			margin: 15px;
			float: left;
			cursor: pointer;
			position: relative;
			box-sizing: border-box;
			display: flex;
		}

		.svg-icon {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: -1;
		}

		.des {
			flex: 8;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.nums {
				flex: 4;
				text-align: right;

				.money {
					font-size: 40px;
				}
			}

			.cloumn {
				flex: 6;
				display: flex;
				flex-direction: column;
				margin-left: 8px;
			}
		}

		.aside {
			flex: 2;
			display: flex;
			justify-content: center;
			align-items: center;

			.checkBox {
				width: 20px;
				height: 20px;
				border: 1px solid #E8E9EB;
			}
		}

		.marginR {
			margin-right: 13px;
		}
	}

	.payBox {
		.payTit {
			padding-left: 30px;
			line-height: 80px;
			font-size: 16px;
			color: #333333;
			background-color: #FAFAFA;
		}

		.payList {
			height: 120px;
			padding: 0 20px;
			border: 2px solid #F3F4F5;
			display: flex;
			align-items: center;

			.typeBox {
				display: block;
				width: 150px;
				height: 60px;
				margin: 0 20px;
				color: #666666;
				font-size: 16px;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				position: relative;

				i {
					font-size: 26px;
					margin-right: 5px;
				}

				b {
					color: $mainGlod;
					position: absolute;
					right: -1px;
					bottom: -1px;
					display: none;
				}
			}

			.payActive {
				border: 1px solid $mainGlod;

				b {
					display: block;
				}
			}

			span {
				border: 1px solid #E5E5E5;
				padding: 5px 10px;
				margin-right: 15px;
			}

			span:nth-child(1) {
				i:nth-child(1) {
					color: #40ba49;
					cursor: pointer;
				}
			}

			span:nth-child(2) {
				i {
					color: #40ba49;
				}
			}
		}
	}

	// 提交订单部分
	.placeOrderBtn {
		margin-top: 50px;
		width: 100%;
		padding: 30px 0;

		.payInfo {
			padding: 0 15px;
			line-height: 70px;
			border: 2px solid #F3F4F5;
			display: flex;

			span {
				display: block;
				font-size: 14px;
				color: #333333;
				margin-left: 100px;
			}

			span:nth-child(1) {
				margin-left: 0;
			}

			span:nth-child(4) {
				b {
					color: $mainGlod;
				}
			}
		}

		.submitOrder {
			display: block;
			width: 200px;
			height: 50px;
			margin: 40px auto 0;
			padding: 0;
			background-color: #333;
			color: #FFEBC4;
			border-radius: 0;
		}

		.unDisButton {
			opacity: 0.6;
		}
	}

	.payment {
		width: 80%;
		margin: 0 auto;

		.paymentBox {
			margin-top: 50px;
			display: flex;
			justify-content: center;

			.successBox,
			.errorBox {
				width: 240px;
				text-align: center;
			}

			.successBox {
				border-right: 1px solid #DDDDDD;

				>>>.el-button {
					border: 1px solid $mainGlod;
				}
			}

			span {
				display: block;
				margin-bottom: 20px;
			}
		}

		.paymentInfo {
			text-align: center;
			margin-top: 60px;

			p {
				font-size: 16px;
				color: #999999;
				line-height: 30px;

				b {
					color: #FF7800;
					cursor: pointer;
					font-weight: normal;
				}
			}
		}
	}

	// 微信支付弹框
	.weChat {
		>>>.el-dialog__body {
			background: #FFFFFF;

			.qCode {
				.wechatTitle {
					width: 280px;
					margin: auto;
					padding: 10px 15px;
					color: #333;
					border: 2px solid #F3F4F5;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.tips {
						flex: 1;
					}
				}

				.code {
					width: 280px;
					height: 280px;
					display: block;
					margin: 10px auto;
					border: 2px solid #F3F4F5;
				}
			}
		}
	}

	.errorDialog {
		text-align: center;

		.errorTit {
			span {
				font-size: 50px;
				color: red;
			}

			p {
				margin: 30px 0;
			}
		}

		span {
			display: block;
		}

		.btns {
			border-radius: 0;
			background-color: #F3F4F5;
		}

		.pay {
			color: #FFEBC4;
			background-color: #333;
		}
	}

	.remarksBox {
		display: flex;
		background: #F7F7F7;
		padding: 25px;
		border-radius: 8px;
		margin-bottom: 30px;

		.remarksInfo {
			width: 100%;

			>>>.el-textarea__inner {
				width: 100%;
				height: 84px;
			}
		}

		.selectBox {
			margin-left: 70px;

			label {
				color: #666666;
				font-size: 16px;
				font-weight: normal;
			}
		}

		.shopTotal {
			color: $mainGlod;
			flex: 1;
			text-align: right;
		}
	}
}
</style>
