<template>

    <view class="wrap">
      <view></view>
      <view
        class="addAddress"
        @tap="toaddAddress"
        v-if="this.showAddress"
      >
        <view class="addIcon">
          <image
            src="../../static/add.png"
            mode="aspectFill"
          ></image>
        </view>
        <view class="addressText">{{addAddress}}</view>
        <image
          src="../../static/right.png"
          mode="aspectFill"
        ></image>
      </view>
      <view
        v-else
        @tap="toaddAddress"

        :class="addressInfo !== false ? 'list order-user' : 'list order-user user_address'"

      >

        <view
          class="order-user-head"
          v-if="addressInfo != false"
        >

          <view class="name">
            <view
              v-if="addressInfo.default === '1'"
              class="default"

            >
              <text>默认</text>
            </view>
            {{addressInfo.name}}

          </view>
          <text class="mobile">{{addressInfo.mobile}}</text>
        </view>

        <view
          class="order-user-body"

          v-if="addressInfo !== false"

        >

          <image src="../../static/myorder-paying-location.png"></image>

          <text class="address">{{addressInfo.address}}
  {{addressInfo.add_detail}}</text>

        </view>
        <view

          class="order_user_body_add"

          v-if="addressInfo == false"
        >

          <image
            src="../../static/add_address.png"
            mode="aspectFill"
          ></image>
          <text class="address_add">点击添加地址</text>

        </view>

        <image
          class="arrow"
          src="../../static/right.png"

          mode="aspectFill"

        ></image>
      </view>
      <view class="content">
        <view class="orderInfo">
          <view class="title">
            <image
              src="../../static/store.png"
              mode="aspectFill"
              style="width: 40rpx;height: 40rpx;"
            ></image>
            <text>非常戴镜</text>
          </view>

          <template v-if="isCart === 'true'">
            <view
              class="infoBox"
              v-for="(item, index) in checkedCartLst"
              :key="index"
            >
              <view class="infoTop">
                <image
                  :src="item.img_index_url"
                  mode="aspectFill"
                ></image>
                <view class="infoRight">
                  <text class="goodName">{{item.p_name}}</text>
                  <text class="remarks">支持7天无理由退货 顺丰发货</text>
                  <view class="priceBox">
                    <view class="price">¥{{Number(item.nowPrice) }}<text class="originCost">
                        ¥{{item.oldPrice}}
                      </text></view>
                    <view class="counter">
                      <view
                        class="btn"
                        disabled="this.disabled"
                        type="default"
                        @click="counter(false,index)"
                      >-</view>
                      <text>{{checkedCartLst[index].num}}</text>
                      <view
                        class="btn"
                        type="default"
                        @click="counter(true,index)"
                      >+</view>
                    </view>

                  </view>
                </view>
              </view>

              <view class="infoBottom">
                <view class="norm">规格 <text>
                    <!-- 长度超出变省略号未做 -->
                    <block>{{item.sku_name}}<block v-if="index !== current.length -1">/</block>
                    </block>
                  </text></view>
                <view class="shippingMethod">使用人 <text>
                    {{item.peopleName}}
                  </text></view>
                <view class="shippingMethod">配送方式 <text>快递</text></view>
                <view class="message">买家留言
                  <input
                    type="text"
                    :value="note"
                    placeholder="建议提前协商(50字以内)"
                  />
                </view>

              </view>
            </view>

          </template>
          <template v-else>
            <view class="infoBox">
              <view class="infoTop">
                <image
                  :src="buyItem.pic"
                  mode="aspectFill"
                ></image>
                <view class="infoRight">
                  <text class="goodName">{{goodInfo.p_name}}</text>
                  <text class="remarks">支持7天无理由退货 顺丰发货</text>
                  <view class="priceBox">
                    <view class="price">¥{{buyItem.real_price}}<text class="originCost">
                        ¥{{buyItem.out_price}}
                      </text></view>
                    <view class="counter">
                      <view
                        class="btn"
                        disabled="this.disabled"
                        type="default"
                        @click="counter(false)"
                      >-</view>
                      <text>{{count}}</text>
                      <view
                        class="btn"
                        type="default"
                        @click="counter(true)"
                      >+</view>
                    </view>

                  </view>
                </view>
              </view>

              <view class="infoBottom">
                <view class="norm">规格 <text>
                    <!-- 长度超出变省略号未做 -->
                    <block
                      v-for="(item, index) in current"
                      :key="index"
                    >{{attrList[index].attr[item].name}}<block v-if="index !== current.length -1">/</block>
                    </block>
                  </text></view>
                <view class="shippingMethod">使用人 <text>
                    {{name}}
                  </text></view>
                <view class="shippingMethod">配送方式 <text>快递</text></view>
                <view class="message">买家留言
                  <input
                    type="text"
                    :value="note"
                    placeholder="建议提前协商(50字以内)"
                  />
                </view>

              </view>
            </view>

          </template>
  

        </view>
        <view class="payWay">
          <view class="item">
            <text>支付方式</text>
            <view class="itemRight">
              <view class="rightText">
                <view class="choosePayWay">
                  <image

                    src="../../static/chat_logo.png"

                    mode="aspectFill"
                  ></image>
                  <text>微信支付</text>
                </view>

                <!-- <view class="randomSubstraction">最高随机立减￥99</view> -->

              </view>

              <!-- <image

                src="../../static/right.png"
                mode="aspectFill"

              ></image> -->

            </view>
          </view>

          <!-- <view class="item">

            <text>优惠券</text>
            <view class="itemRight">
              <view class="rightText">
                <view class="chooseOffers">
                  <text>-￥70.00</text>
                </view>
                <view class="preferentialWay">最大优惠</view>
              </view>
              <image
                src="../../static/right.png"
                mode="aspectFill"
              ></image>
            </view>

          </view> -->

          <view class="item">
            <text>运费</text>
            <view class="itemRight">

              <view class="freight">免运费</view>

            </view>
          </view>
          <view class="item">
            <text>合计</text>
            <view class="itemRight">

              <view class="total">¥{{totalPrice}}</view>
              <!-- <view class="total" v-else>¥{{Number(skuInfo.real_price) * count}}</view> -->

            </view>
          </view>
        </view>
        <!--
        <view class="checkBox">
          <checkbox-group>
            <label>
              <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
            </label>
          </checkbox-group>
        </view> -->
      </view>

      <view class="last_zhanwei"></view>

      <view class="footer">

        <view class="footerLeft">实付金额:

          <text>¥{{totalPrice}}</text>
          <!-- <text v-else>¥{{Number(skuInfo.real_price) * count}}</text> -->
        </view>

        <view class="footerRight">
          <view
            class="paybtn"
            @tap="orderBuild"
          >立即支付</view>
        </view>
      </view>
    </view>

  </template>
  
  <script>

  import store from '@/store'

  import MD5Util from '../../utils/md5'

  
  export default {
    data() {
      return {

        name: String,

        addAddress: '添加收货地址',
        count: 1,
        pid: 0,
        disabled: false,

        freight: 0.0,

        showAddress: false,
        note: '',
        addressInfo: {

          address: '',
        },

        isCart: Boolean,

        // isAnonymous:

        checkedCartLst: [],

      }
    },

    onShow(addressId) {

      // console.log('+-+-*-*-+-+',addressId)

      if (addressId) {

        store
          .dispatch('address/details', {
            add_id: addressId,
          })
          .then(({ code, data }) => {
            if (code === 1) {
            // console.log('code', code, data)
              this.showAddress = true
              this.addressInfo = data
            }
          })

      }

    },

    onLoad({ pid, addressId, isCart, count, name }) {

      if (isCart === 'false') {

        this.pid = pid

      //   store.dispatch('read/fetch', {

        // pid,

      //   })

      }

      this.count = count
      this.name = name
      this.isCart = isCart
  
      console.log('++++++++++++' + pid, addressId, isCart)
      this.checkedCartLst = this.$store.state.cart.checkedCartLst
      // console.log('++++++++++6666666666++',this.$store.state.cart.checkedCartLst)

      // 若已经选择地址
      if (addressId) {

        store

          .dispatch('address/details', {
            add_id: addressId,

          })
          .then(({ code, data }) => {
            if (code === 1) {

              // console.log('code', code, data)

              this.showAddress = true

              this.addressInfo = data

            }

          })

      } else {
        store.dispatch('address/default').then(({ code, data }) => {

          this.showAddress = true
          this.addressInfo = data
          console.log('this.addressInfo', this.addressInfo)

        })
      }

    },
    computed: {

      totalPrice() {
        if (this.isCart == 'true') {
          let total = 0
          this.$store.state.cart.checkedCartLst.map(item => {
            total += item.nowPrice * item.num
          })
          return total
        } else {
          return this.buyItem.real_price * this.count
        }
      },
      buyItem() {
        return this.$store.state.cart.buyItem
      },
      // checkedCartLst(){
      //  console.log('checkedCartLst',this.$store.state.cart.checkedCartLst)
      //  return this.$store.state.cart.checkedCartLst
      // },

      goodInfo() {

        // console.log('state', this.$store.state.read.goodInfo)

        return this.$store.state.read.goodInfo

      },

      skuInfo() {

        return this.$store.state.order.param.sk_id_arr
      },

      attrList() {

        return this.$store.state.order.param.attrList
      },

      current() {

        return this.$store.state.order.param.current
      },

    },
    methods: {

      counter(isadd, index) {

        if (isadd) {

          if (this.isCart == 'true') {
            this.checkedCartLst[index].num++
          } else {

            this.count++

          }

        } else {

          if (this.isCart == 'true') {
            this.checkedCartLst[index].num <= 1 ? (this.disabled = true) : this.checkedCartLst[index].num--
          } else {
            this.count <= 1 ? (this.disabled = true) : this.count--
          }

        }
      },

      // 跳转添加地址页面

      toaddAddress() {
        uni.navigateTo({
          url: `../address/addressList?edit=${1}`,
          success: res => {},

          fail: error => {

            console.log('跳转到地址列表页面失败====>', error)

          },

          complete: () => {},

        })
      },

      // 下单

      orderBuild() {
        if (!this.addressInfo) {

          uni.showToast({

            title: '请先添加地址',

            icon: 'none',

          })
          return
        }

        uni.showLoading({
          title: '支付中',

        })
        if (this.isCart === 'true') {
          const checkedGoods = []
          const sk_id_arr = []
          this.checkedCartLst.map(item => {
            checkedGoods.push(item.cart_id)
            sk_id_arr.push(item.sk_id)
          })
          store.dispatch('order/build', {

            uid: this.$store.state.user.userInfo.uid,

            address: JSON.stringify(this.addressInfo),

            checkedGoods: checkedGoods,

            sk_id_arr: sk_id_arr,
            totalPrice: this.totalPrice * 100,
          }).then((res) => {
            this.pay(res)
          })
        }
        if (this.isCart === 'false') {
          const { sk_id_arr: skId, mp_id: mpId } = this.$store.state.order.param
          store.dispatch('order/buyNow', {
            pid: skId.pid,
            sk_id: skId.sk_id,
            number: this.count,
            mp_id: mpId,
            address: JSON.stringify(this.addressInfo),
            totalPrice: this.totalPrice * 100,
            liuyan: this.note,
            dir: 1,
          }).then((res) => {
            this.pay(res)
          })
        }

      },

      // 支付

      pay(res) {
        console.log('pay', res)

        const { data, exKeyName: keyName } = res

        const uid = uni.getStorageSync('uid')

        const timeStamp = new Date().getTime().toString()

        const nonceStr = 'asfafasfasfasfasf'

        // 支付参数

        const fieldSet = {
          openid: this.$store.state.user.userInfo.openid,
          uid: this.$store.state.user.userInfo.uid,
          shopid: 0,
          payCate: 2020,

          payMoney: this.totalPrice * 100,

          payWoodId: `fcdj-${uid}-${keyName}`,

          payWoodDesc: '在【非常戴镜】的微信付款凭证',
          nonceStr,

          signType: 'MD5',
          app_uid: 2020,

          timeStamp,

          keyname: keyName,

          billInfo: JSON.stringify({
            address: this.addressInfo,
            list: data,
            keyname: keyName,
          }),
        }
        console.log('fieldSet', fieldSet)

        // 请求后台支付接口

        store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => {
          if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') {
            const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}`
            const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789'

  
            // 微信支付接口

            uni.requestPayment({
              appId: data.appid,
              timeStamp,
              nonceStr,

              total_fee: this.totalPrice,

              package: `prepay_id=${data.prepay_id}`,
              signType: 'MD5',
              paySign: MD5Util.MD5(stringSignTemp).toUpperCase(),
              success: (res) => {

                // 支付成功

                uni.showModal({
                  content: '支付成功',
                  showCancel: false,
                })

                // 跳转订单详情页->状态 待收货

                uni.reLaunch({

                  url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`,

                })
              },
              fail: (res) => {

                // 支付失败

                uni.showModal({
                  content: '支付失败',
                  showCancel: false,
                })

                // 跳转订单详情页->状态 待付款

                uni.reLaunch({

                  url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`,

                })
              },
              complete: () => {
                uni.hideLoading()
              },
            })
          } else {

            uni.showModal({
              content: '支付失败',
              showCancel: false,
            })

            console.log('支付失败')
            uni.hideLoading()
          }

        })
      },
    },

  }

  </script>
  

  <style lang="scss">

  .wrap {
    height: 100vh;
    background-color: #f2f2f2;
    font-family: PingFangSC-Regular;
    letter-spacing: -0.23px;
    position: absolute;
  }
  .addAddress {
    background-color: #ffffff;
    box-sizing: border-box;
    height: 124rpx;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 40rpx;
    .addIcon {
      background-color: #f2f2f2;
      height: 56rpx;
      width: 60rpx;
      border-radius: 4rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 40rpx;
    }
    image {
      height: 28rpx;

      width: 30rpx;

    }
    .addressText {
      font-size: 28rpx;
      color: #333333;
      margin-right: 364rpx;
    }
  }
  .content {
    background-color: #f2f2f2;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40rpx;
    box-sizing: border-box;
    .orderInfo {
      width: 670rpx;

      min-height: 488rpx;

      background-color: #ffffff;
      border-radius: 20rpx;
      box-sizing: border-box;
      padding: 0 40rpx 40rpx 40rpx;
      .title {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #333333;
        height: 60rpx;
        line-height: 40rpx;
        padding: 10rpx 10rpx 10rpx 0rpx;
        image {
          margin-right: 20rpx;
        }
      }
      .infoBox {
        margin-top: 42rpx;
        .infoTop {
          display: flex;
          flex-direction: row;
          image {
            height: 188rpx;
            width: 188rpx;
            margin-right: 24rpx;
          }
          .infoRight {
            width: 374rpx;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            .goodName {
              font-size: 28rpx;
              color: #333333;
            }
            .remarks {
              font-size: 20rpx;
              color: #999999;
            }
            .priceBox {
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 100%;
              .price {
                color: #ff6b4a;
                font-size: 28rpx;

                text {
                  margin-left: 10rpx;
                }

              }

              .originCost {
                text-decoration: line-through;
                color: #999999;
                font-size: 20rpx;
              }

              .counter {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                font-size: 28rpx;
                color: #333333;
                width: 122rpx;
                .btn {
                  display: flex;
                  justify-content: center;
                  line-height: 32rpx;
                  height: 32rpx;
                  width: 32rpx;
                  background-color: #f2f2f2;
                  color: #cfcfcf;
                }
              }
            }
          }
        }
        .infoBottom {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          font-size: 24rpx;
          color: #333333;
          text {
            color: #999999;
            margin-left: 20rpx;
          }
  
          .norm {
            margin-top: 28rpx;
          }
          .shippingMethod {
            margin-top: 12rpx;
          }
          .message {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 18rpx;
            input {
              margin-left: 20rpx;
              width: 75%;
            }
          }
        }
      }
    }
    .payWay {
      height: 464rpx;
      width: 670rpx;
      background-color: #ffffff;
      color: #333333;
      font-size: 24rpx;
      border-radius: 20rpx;
      box-sizing: border-box;
      padding: 0 52rpx 0rpx 40rpx;
      margin-top: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      .item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 115rpx;
        .itemRight {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          image {
            height: 24rpx;
            width: 12rpx;
          }
          .rightText {
            margin-right: 20rpx;
            text-align: right;
            .choosePayWay {

              display: flex;
              align-items: center;

              text {
                color: #333333;
              }
              image {

                height: 36rpx;
                width: 40rpx;
                margin-right: 8px;

              }
            }
            .randomSubstraction {
              color: #ff6b4a;
            }
            .preferentialWay {
              color: #999999;
            }
          }
          .freight,
          .total {
            margin-right: 32rpx;
          }
          text {
            color: #ff6b4a;
          }
        }
      }
    }
    // .checkBox {
    //   height: 58rpx;
    //   line-height: 58rpx;
    //   width: 100%;
    //   margin-top: 36rpx;
    //   margin-left: 40rpx;
    //   font-size: 12px;
    //   color: #999999;
    // }
  }
  .footer {
    height: 112rpx;
    width: 100%;
    background-color: #fff;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;

    z-index: 9999;

    /* iphonex 等安全区设置，底部安全区适配 */
    /* #ifndef APP-NVUE */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    /* #endif */

    .footerLeft {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      color: #333333;
      text {
        color: #ff6b4a;
      }
    }
    .footerRight {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 50%;
      margin-right: 26rpx;
      .paybtn {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ff6b4a;
        border-radius: 20px;
        border-radius: 20px;
        color: #ffffff;
        width: 204rpx;
        height: 80rpx;
      }
    }
  }
  // 地址信息样式
  .order-user {
    width: 670rpx;
    height: 228rpx;
    background: #ffffff;
    border-radius: 14rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    position: relative;
    .order-user-head {
      display: flex;
      height: 108rpx;
      width: 100%;
      align-items: center;

      padding-left: 126rpx;

      box-sizing: border-box;

      .name {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #333333;
        letter-spacing: -0.26px;
        margin-right: 20rpx;
        .default {
          height: 40rpx;
          width: 80rpx;
          background-color: #4a90e2;
          border-radius: 13px;
          border-radius: 13px;
          text-align: center;
          margin-right: 20rpx;
          text {

            display: flex;
            justify-content: center;
            align-items: center;

            font-size: 12px;
            color: #ffffff;
            letter-spacing: -0.23px;
          }
        }
      }
      .mobile {
        font-size: 14px;
        color: #999999;
        letter-spacing: -0.26px;
      }
    }
    .order-user-body {
      display: flex;
      width: 100%;
      image {
        width: 24px;

        height: 28px;

        margin: 12rpx 32rpx 0 40rpx;
      }
      .address {
        font-weight: bold;
        font-size: 14px;
        color: #333333;
        letter-spacing: -0.26px;
      }
    }

    .arrow {

      width: 12px;

      height: 12px;
      position: absolute;
      right: 40rpx;
      bottom: 104rpx;
    }
  }

  
  .user_address {
    height: 62px;
    .order_user_body_add {
      display: flex;
      align-items: center;
      image {
        background: #f2f2f2;
        border-radius: 2px;
        border-radius: 2px;
        width: 30px;
        height: 28px;
        margin: 0 20px;
      }
      .address_add {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333333;
        letter-spacing: -0.26px;
        line-height: 62px;
      }
    }
    .arrow {
      bottom: 46rpx;
    }
  }

  .last_zhanwei {

    background: #f2f2f2;
    height: 60px;
  }

  </style>