<template>
  <div class="settlement" :style="{ overflow: isShow ? 'hidden' : 'auto' }">
    <div class="settlement-title">
      <div class="settlement-yy" @click="getYy" :class="{ 'settlement-color': active === 0 }">
        <i class="yy-img" :class="{ 'yy-img-active': active === 0 }"></i>
        预约
      </div>
      <div class="settlement-ts" @click="getTs" :class="{ 'settlement-color': active === 1 }">
        <i class="ts-img" :class="{ 'ts-img-active': active === 1 }"></i>
        堂食
      </div>
    </div>
    <div class="sellement-apponit-box">
      <div class="sellement-apponit-unit">
        <!-- class="link-type"  -->
        <div class="time-title">联系方式</div>
        <view class="radio-box bb1">
          <input style="font-size: 28rpx" type="number" placeholder="请输入联系号码" @input="bindKeyInput"
            :value="phoneNumber" />
        </view>
      </div>
      <div class="sellement-apponit-unit" v-if="active === 1 && tableNum != ''">
        <!-- class="link-type"  -->
        <div class="time-title">就餐桌号</div>
        <view class="radio-box" style="font-size: 28rpx">
          {{ tableNum }}号
        </view>
      </div>
      <div class="sellement-apponit-unit">
        <div class="time-title">就餐时间</div>
        <radio-group :value="radio" @change="onChangeRadio" class="radio-box bb1">
          <radio style="width: 60%" class="radio-list" color="#CAA97F" :name="beExpectedTo" checked-color="#CAA97F"
            @click="getRadio({ value: beExpectedTo })">
            <view class="section">
              <view class="picker">
                预计(
                <span style="color: red; font-size: 28rpx">{{
                  beExpectedTo ? ` ${beExpectedTo}` : "-"
                  }}</span>
                )到达

                <div style="padding-top: 10rpx">
                  <van-icon name="arrow" size="28rpx" color="#333" />
                </div>
              </view>
            </view>
          </radio>

          <radio style="width: 40%" class="radio-list" color="#CAA97F" :name="showTime" checked-color="#CAA97F"
            @click="getRadio({ value: showTime })">

            <picker mode="selector" :range="timeRange" :value="time" @change="bindTimeChange">
              <view class="section">
                <view class="picker">
                  {{ showTime }}
                  <div style="padding-top: 10rpx">
                    <van-icon name="arrow" size="28rpx" color="#333" />
                  </div>
                </view>
              </view>
            </picker>
          </radio>

        </radio-group>
      </div>
      <div class="sellement-apponit-unit" style="position: relative">
        <div class="time-title">行驶方向</div>
        <radio-group :value="storeId" class="radio-box bb1">
          <!-- @change="onChangeStore" -->
          <label class="radio-list" v-for="(item, index) in nowStore.ShopList" :key="index">
            <radio color="#CAA97F" :value="item.SERVERPARTSHOP_ID" :checked="storeId === item.SERVERPARTSHOP_ID"
              @click="getFx(item)" />
            <!-- <span class="radio-unit">{{ item.SHOPNAME }}</span> -->
            <span class="radio-unit">{{ item.SHOPDIRECTION }}</span>
          </label>
        </radio-group>

        <view class="repositioning" @click="handleAgainPosition" v-if="hideAgainIcon && false">
          <image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/repositioning.svg" />
        </view>
      </div>

      <div class="sellement-apponit-unit" v-if="active === 1">
        <div class="time-title">预约餐桌</div>
        <radio-group :value="board" @change="onChangeIsPackage" class="radio-box bb1">
          <view class="radio-list" v-for="(item, index) in boardList" :key="index">
            <radio :value="item.value" color="#CAA97F" @click="getBoard(item)" />
            <text class="radio-unit">{{ item.label }}</text>
          </view>
        </radio-group>
      </div>

      <div class="sellement-apponit-unit" v-if="board === 1">
        <div class="time-title">就餐人数</div>
        <radio-group class="radio-box bb1">
          <picker mode="selector" :value="people" :range="peopleList" range-key="label" @change="handleChangePeople">
            <view class="section">
              <view class="picker">
                {{ peopleList[people].label }}
              </view>
            </view>
          </picker>
        </radio-group>
      </div>

      <div class="sellement-apponit-unit" v-if="active === 0">
        <div class="time-title">是否打包</div>
        <radio-group :value="isPackage" @change="onChangeIsPackage" class="radio-box bb1">
          <view class="radio-list" v-for="(item, index) in packageList" :key="index">
            <radio :value="item.value" color="#CAA97F" @click="getPackge(item)" />
            <text class="radio-unit">{{ item.name }}</text>
          </view>
        </radio-group>
      </div>
      <div class="sellement-apponit-unit">
        <span class="time-title">订单备注</span>
        <view class="radio-box coupon-right" @click="goRemark">
          <div class="coupon-remark">{{ remark || "口味、偏好" }}</div>
          <van-icon name="arrow" size="28rpx" custom-style="margin-left:12rpx;" color="#999" />
        </view>
      </div>
    </div>

    <div class="sellement-apponit-box">
      <div class="time-title bb1">订单信息</div>
      <!-- <div class="order-title">订单信息</div> -->
      <div class="order-list" v-for="(item, i) in shopOrder" :key="i">
        <div class="order-name">
          {{
            item.COMMODITY_RULE
              ? item.COMMODITY_NAME + "(" + item.COMMODITY_RULE + ")"
              : item.COMMODITY_NAME
          }}
        </div>
        <div class="order-num">x{{ item.ORDER_COUNT }}</div>
        <div class="order-price">￥{{ item.AVERAGE_PRICE }}</div>
      </div>
      <div style="width: 100%; height: 1px; background: #ededed"></div>
      <!-- <hr /> -->
      <div class="price-sum">
        <div class="coupon" @click="goCoupon" v-if="couponCout > 0">
          <span class="coupon-title">优惠券</span>
          <div class="coupon-right">
            <div :class="{
              priceColor: couponAmount,
              'icon-coupon': couponAmount === 0,
            }">
              {{ couponAmount > 0 ? "-￥" + couponAmount : "" }}
            </div>
            <van-icon name="arrow" size="28rpx" custom-style="margin-left:12rpx;" color="#999" />
          </div>
        </div>
        <div class="coupon" v-if="packageAmount > 0">
          <span class="coupon-title">打包费</span>
          <span class="pay-price">￥{{ packageAmount }}</span>
        </div>
        <div class="coupon">
          <span class="coupon-title">合计</span>
          <span class="pay-price">￥{{ orderAmount }}</span>
        </div>
      </div>
    </div>
    <!-- <div class="coupon sellement-apponit-box" @click="goRemark" >
      <span class="coupon-title">备注</span>
      <div class="coupon-right">
        <div class="coupon-remark">{{remark||'口味、偏好'}}</div>
        <van-icon name="arrow" size="28rpx" custom-style="padding-top:16rpx;margin-left:12rpx;" color="#999"/>
      </div>
    </div> -->

    <div class="go-pay">
      <div class="pay-left">
        还需支付<span class="pay-price">￥{{ orderAmount }}</span>
      </div>
      <div class="pay-right" @click="goPayMent">去支付</div>
    </div>
    <UniPopup :show="isShow" position="bottom" overlay="false" @close="onClose">
      <div class="bottom-box">
        <div class="bottom-pop-title">确认支付方式</div>
        <div class="bottom-content">
          <van-radio-group :value="cardPay.payType" @change="changePayType">
            <van-radio name="余额支付" checked-color="#CAA97F" class="bottom-radio" :disabled="!cardPay.canCardPay">
              <span :class="{ disable: !cardPay.canCardPay }">余额支付<span style="font-size: 24rpx">{{
                " (剩余:￥" +
                cardPay.amount +
                ") " +
                (!cardPay.canCardPay ? cardPay.reason : "")
                  }}</span></span>
            </van-radio>
            <van-radio name="微信支付" checked-color="#CAA97F" class="bottom-radio">
              <span class="">微信支付</span>
            </van-radio>
          </van-radio-group>
        </div>

        <div class="bottom-btn" @click="createOrder">立即付款</div>
      </div>
    </UniPopup>

    <UniPopup :show="payShow" position="bottom" overlay="false" ref="payPopup" @close="handlePayClose"
      :safe-area="false">
      <div class="payShowBox">
        <div class="payBoxTitle">支付方式</div>

        <div class="payList">
          <radio-group :value="payType" class="radio-group">
            <div class="bottom-radio" color="#CAA97F" @click="handleChangePayType(1)">
              <div class="radioLeft">
                <div class="logoBox">
                  <image class="logoIcon" src="/static/images/home/alipayIcon.png" />
                </div>
                <text>支付宝支付</text>
              </div>
              <radio value="支付宝支付" color="#CAA97F" :checked="payType === 1" />
            </div>
            <div class="bottom-radio" color="#CAA97F" @click="handleChangePayType(2)">
              <div class="radioLeft">
                <div class="logoBox">
                  <image class="logoIcon" src="/static/images/home/wxPay.png" />
                </div>
                <text>微信支付</text>
              </div>
              <radio value="微信支付" color="#CAA97F" :checked="payType === 2" />
            </div>
          </radio-group>
        </div>

        <div class="goPayBox" @click="handleRealGoPay">
          <div class="goPay">确认支付</div>
        </div>
      </div>
    </UniPopup>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import timeList from './timeRangeList'
export default {
  data() {
    let newM = new Date().getTime();
    let startT = newM + 1000 * 60 * 15;
    return {
      start: this.$utils.getLocalTime(startT, "hh:mm"),
      end: "23:59",
      // time: this.$utils.getLocalTime(startT, "hh:mm"),
      time: 0,
      startT: this.$utils.getLocalTime(new Date(), "hh:mm"),
      timeRange: timeList,
      remark: "", // 备注
      doorId: "",
      storeId: "", // 门店id
      active: 0,
      radio: 0,
      radio2: "",
      radioType: 10,
      type: 2000, // 判断预约还是堂食
      showTime: "自定义",
      beExpectedTo: "-", // 预计时间
      phoneNumber: "",
      // tableNum: "",
      deteTime: [
        // {
        //   name: '10分钟后到店',
        //   value: 10
        // },
        // {
        //   name: '20分钟后到店',
        //   value: 20
        // },
        {
          name: "30分钟后到店",
          value: 30,
        },
      ],
      packageList: [
        {
          name: "是",
          value: 2000,
        },
        {
          name: "否",
          value: 1000,
        },
      ],
      isShow: false,
      isPackage: 1000,
      cardPay: {
        payType: "余额支付", // 用户支付方式
        reason: "",
        canCardPay: true, // 是否可以余额支付
        amount: "", // 实业饭卡余额
      },
      shopOrder: [],
      shopList: [], // 方向列表
      yyTime: "",
      provinceCode: "",
      couponCout: 0, // 可用优惠券数量
      orderNumber: "", // 订单号
      orderInternal: "", // 订单内码
      payShow: false, // 支付方式的悬浮框
      payType: 1, // 1 支付宝  2 微信
      loginType: "", //
      isMakeOrdering: false,
      currentOrderDetail: {}, // 当前订单的数据
      SERVERPART_ID: "", // 当前的服务区id
      seat: {}, // 当前经纬度数据
      board: "", // 是否预约餐桌
      boardList: [
        { label: "是", value: 1 },
        { label: "否", value: 2 },
      ],
      peopleList: [
        { label: "1人", value: "1人" },
        { label: "2人", value: "2人" },
        { label: "3人", value: "3人" },
        { label: "4人", value: "4人" },
        { label: "5人及以上", value: "5人及以上" },
      ],
      people: 0,
      peopleStr: "", // 人数的具体
      hideAgainIcon: true, // 是否显示重新定位
      isLoading: false,
      arriveTime: ""
    };
  },
  components: {
    UniPopup,
  },
  computed: {
    ...mapGetters({
      user: "user",
      tableNum: "orderTable",
      orderRemark: "orderRemark",
      //   provinceCode: 'provinceCode',
      couponPrice: "couponPrice",
      nowStore: "nowStore",
    }),
    packageAmount() {
      // 打包费
      let amount = 0;
      if (this.isPackage === 2000) {
        this.shopOrder.map((n) => {
          amount += n.ORDER_COUNT;
        });
        return amount;
      } else {
        return 0;
      }
    },
    couponAmount() {
      // 优惠金额
      if (this.couponPrice) {
        if (this.couponPrice.CouponType === 2000) {
          // 折扣券
          return (1 - this.couponPrice.UseAmount) * this.couponOrder;
        } else {
          // 满减券
          return this.couponPrice.UseAmount;
        }
      } else {
        return 0;
      }
    },
    couponOrder() {
      // 商品金额
      let amount = 0;
      this.shopOrder.map((v) => {
        amount += v.ORDER_AMOUNT;
      });
      return amount;
    },
    orderAmount() {
      // 支付金额
      let _this = this;
      this.remark = this.orderRemark;
      let coast =
        _this.couponOrder - Number(this.couponAmount) + this.packageAmount;
      return coast > 0 ? Math.round(coast * 100) / 100 : 0;
    },
  },
  methods: {
    // 确认支付
    handleRealGoPay() {
      if (this.loginType === "android") {
        if (this.payType === 1) {
          uni.showModal({
            title: "确认跳转支付宝？",
            content: "点击确认将自动跳转到支付宝付款码页面",
            confirmText: "确认",
            cancelText: "取消",
            success: function (res) {
              plus.runtime.openURL(
                `alipayqr://platformapi/startapp?saId=20000056`
              );
            },
          });
        } else if (this.payType === 2) {
          uni.showModal({
            title: "确认跳转微信？",
            content: "跳转后点击首页右上角-->首付款",
            confirmText: "确认",
            cancelText: "取消",
            success: function (res) {
              plus.runtime.openURL(`weixin://`);
            },
          });
        }
      } else if (this.loginType === "min") {
      }
    },
    // 改变支付方式
    handleChangePayType(value) {
      this.payType = value;
    },
    // 就餐方向
    onChangeStore(event) {
      this.storeId = event.detail.value; // 更新 storeId 的值
    },
    // 是否打包
    onChangeIsPackage(event) {
      this.isPackage = event.detail.value; // 更新 storeId 的值
    },
    // 就餐时间
    onChangeRadio(event) {
      this.radio = event.detail.value; // 更新 storeId 的值
    },
    // 去预约
    changePayType(data) {
      this.cardPay.payType = data.mp.detail;
    },
    onClose() {
      this.isShow = false;
    },
    getYy() {
      // eslint-disable-next-line eqeqeq
      if (this.tableNum == 0) {
        this.active = 0;
        this.type = 2000;
      }
    },
    getCardAmount() {
      let _this = this;
      _this.$api
        .getCoop({
          action_type: "GetIndustryMemberInfo",
          serverpartShopId: _this.radio2,
        })
        .then((rs) => {
          if (rs.ResultCode === "100") {
            _this.cardPay.amount = rs.Data.INDUSTRY_ACCOUNT_BALANCE;

            if (_this.cardPay.amount < _this.orderAmount) {
              _this.cardPay.payType = "微信支付";
              _this.cardPay.canCardPay = false;
              _this.cardPay.reason = "余额不足";
            } else {
              _this.cardPay.payType = "余额支付";
              _this.cardPay.canCardPay = true;
              _this.cardPay.reason = "";
            }
          } else {
            _this.cardPay.amount = rs.Data.INDUSTRY_ACCOUNT_BALANCE;
            _this.cardPay.payType = "微信支付";
            _this.cardPay.canCardPay = false;
            _this.cardPay.reason = rs.ResultDesc;
          }
          _this.isShow = true;
          _this.$forceUpdate();
        });
    },
    getcoup() {
      // 获取可使用的优惠券
      let _this = this;

      let arr = {
        CouponStatus: 0,
        provinceCode: this.provinceCode,
        orderAmount: this.couponOrder,
        serverpartShopId: this.storeId,
      };
      console.log("arr", arr);

      _this.$api.$get("/WeChat/GetMemberCouponList", arr).then(function (data) {
        console.log("datadatadatadatadata231231", data);
        if (data.Result_Code === 100) {
          _this.couponCout = data.Result_Data.List.length;
        }
      });
    },
    getTs() {
      this.active = 1;
      this.type = 1000;
      this.isPackage = 1000
    },
    getRadio(item) {
      console.log('itemitemitem', item);

      // 就餐时间
      // if (this.radio === item.value) {
      //   this.radio = ''
      // } else {
      this.radio = item.value;
      this.radioType = this.radio;
      // console.log(this.radioType)
      // }
    },
    getFx(item) {
      console.log("方向", item);
      // 方向
      this.storeId = item.SERVERPARTSHOP_ID;
      this.getcoup();
    },
    getPackge(item) {
      // 是否打包
      this.isPackage = item.value;
    },
    bindKeyInput(event) {
      this.phoneNumber = event.mp.detail.value;
    },
    bindTimeChange(event) {
      let index = Number(event.detail.value)
      let time = timeList[index]

      if (time.indexOf('次日') === -1) {
        this.radio = time
        this.showTime = time
      } else {
        let day = this.$moment.now().format("YYYY-MM-DD")
        this.radio = `${day} ${time.split('次日')[1]}`
        this.showTime = time
      }


      // console.log('eventeventevent', event);

      // this.showTime = event.mp.detail.value;
      // let stime1 = this.showTime.split(":");
      // let stime2 = this.startT.split(":");
      // let st1 =
      //   60 * Number(stime1[1]) +
      //   Number(stime1[0]) * 3600 -
      //   (60 * Number(stime2[1]) + Number(stime2[0]) * 3600);
      // this.radio = this.showTime;
      // this.radioType = st1 / 60;
    },
    goCoupon() {
      uni.navigateTo({
        url:
          "/pages/shopPages/coupon/index?storeId=" +
          this.storeId +
          "&couponOrder=" +
          this.couponOrder,
      });
    },
    goRemark() {
      uni.navigateTo({ url: "/pages/shopPages/orderRemark/index" });
    },

    createOrder() {
      // 生成订单
      let _this = this;
      //  _this.orderInternal
      // eslint-disable-next-line no-constant-condition
      if (0 === 1) {
        if (
          this.user.MEMBERSHIP_TYPE === 3000 &&
          this.cardPay.payType === "余额支付"
        ) {
          _this.payByCard();
        } else {
          _this.getOrderInfo(); // 微信支付
        }
      } else {
        if (this.isMakeOrdering) {
          uni.showToast({
            title: "请勿连续点击！",
            icon: "none",
          });
          return;
        }
        this.isMakeOrdering = true;

        _this.$api
          .postCoop({
            action_type: "ScanOrder",
            salebillType: 6000,
            provinceCode: _this.provinceCode || "530000",
            serverpartShopId: _this.storeId, // 门店内码
            salebillDesc: _this.remark || "",
            wechatOpenId: _this.user.WECHATAPP_OPENID || "",
            wechatUnionId: _this.user.USER_UNIONID || "",
            tableNumber: _this.tableNum || "",
            takeType: _this.type,
            packType: _this.isPackage,
            // reservationDate: _this.type === 2000 ? _this.radio : "",
            reservationDate: _this.type === 2000 ? _this.arriveTime : "",
            orderPersonTel: _this.phoneNumber ? _this.phoneNumber : "",
            couponCode: _this.couponAmount ? _this.couponPrice.CouponCode : "",
            t_saleorderdetail: JSON.stringify(_this.shopOrder),
            requestType: "application/x-www-form-urlencoded",
          })
          .then((res) => {
            if (res.ResultCode === "100") {

              _this.$utils.addUserBehaviorNew({
                behaviorRecordDesc: `创建了点餐订单${JSON.stringify(_this.shopOrder)}`
              });

              console.log("res", res);
              _this.currentOrderDetail = res.Data;
              _this.handleWxPay(res.Data);
              // 调起支付方式的悬浮框
              // _this.$refs.payPopup.open("bottom");
              // _this.payShow = true;
              return;
              // let _data = res.Data;
              // _this.orderInternal = _data.SALEBILL_ID;
              // _this.orderNumber = _data.SALEBILL_CODE;

              // if (
              //   this.user.MEMBERSHIP_TYPE === 3000 &&
              //   this.cardPay.payType === "余额支付"
              // ) {
              //   _this.payByCard();
              // } else {
              //   _this.getOrderInfo(); // 微信支付
              // }
            } else {
              // uni.showModal({
              //   title: "温馨提示",
              //   content: res.ResultDesc,
              //   showCancel: false,
              // });
            }
          });
      }
      this.onClose();
    },
    // 微信支付的实际方法
    async handleWxPay(obj) {
      let _this = this;
      // 拿到签名
      let mchid = "1672298991";
      let timeStamp = Math.ceil(new Date().getTime() / 1000);
      let nonceStr = Math.random().toString(36).substring(2, 8);
      let serial_no = "5BA7C0F427FC042DB5BF299E35B373D5EFCECD35";
      // let out_trade_no = this.generateOutTradeNo(32)
      let out_trade_no = obj.SALEBILL_CODE;

      let req = {
        appid: "wxee018fb96955552a", // 公众账号ID
        mchid: "1672298991", // 商户号
        description: "彩云驿出行", //商品描述
        out_trade_no: out_trade_no, // 商户订单号
        notify_url:
          "https://mp.eshangtech.com/Coop.Merchant/Handler/Handler_Trade.ashx", // 商户回调地址
        amount: {
          total: Number(_this.orderAmount) * 100 || 1,
          currency: "CNY",
        }, // 订单金额
        payer: {
          openid: _this.user.WECHATAPP_OPENID,
        }, // 支付者信息
      };
      console.log("req", req);

      let reqSign = {
        parameters:
          "POST\n/v3/pay/transactions/jsapi\n" +
          timeStamp +
          "\n" +
          nonceStr +
          "\n" +
          JSON.stringify(req) +
          "\n",
        provinceCode: _this.provinceCode || "530000",
      };

      const data = await this.$api.$get("/WeChat/GenerateSign", reqSign);
      console.log("data3213123", data.Result_Data);
      let Authorization = `mchid="${mchid}",nonce_str="${nonceStr}",signature="${data.Result_Data}",timestamp="${timeStamp}",serial_no="${serial_no}"`;
      let AuthorizationStr = `WECHATPAY2-SHA256-RSA2048 ${Authorization}`;
      console.log("AuthorizationStr", AuthorizationStr);

      uni.request({
        url: "https://api.mch.weixin.qq.com/v3/pay/transactions/jsapi",
        method: "POST",
        data: req,
        header: {
          Authorization: AuthorizationStr,
          Accept: "application/json", //自定义请求头信息
          "Content-Type": "application/json",
        },
        success: async (res) => {
          console.log(res.data.prepay_id);
          _this.text = "request success";
          let paySign = "";
          let reqSign = {
            parameters:
              "wxee018fb96955552a\n" +
              timeStamp +
              "\n" +
              nonceStr +
              "\nprepay_id=" +
              res.data.prepay_id +
              "\n",
          };
          const data = await _this.$api.$get("/WeChat/GenerateSign", reqSign);
          paySign = data.Result_Data;

          wx.requestPayment({
            timeStamp: timeStamp.toString(),
            nonceStr: nonceStr,
            package: `prepay_id=${res.data.prepay_id}`,
            signType: "RSA",
            paySign: paySign,
            total_fee: Number(_this.orderAmount) * 100 || 1,
            success(res) {
              console.log("res", res);
            },
            fail(res) {
              console.log("fail", res);
            },
            complete(res) {
              _this.isMakeOrdering = true;
              uni.redirectTo({
                url: `/pages/order/orderFoodDetail/index?orderInternal=${obj.SALEBILL_ID}`,
              });
            },
          });
        },
      });
    },
    // 去支付
    goPayMent() {
      let _this = this;

      if (!this.radio) {
        uni.showToast({
          title: "请选择就餐时间",
          icon: "none",
        });
        return;
      }

      // if (this.type === 2000) {
      //   if (this.radio === "自定义") {
      //     uni.showToast({
      //       title: "请选择预约时间",
      //       icon: "none",
      //     });
      //     return false;
      //   }
      //   if (
      //     !/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phoneNumber) &&
      //     !this.user.MEMBERSHIP_MOBILEPHONE
      //   ) {
      //     uni.showToast({
      //       title: "请输入联系号码，确保你的订单预约成功",
      //       icon: "none",
      //     });
      //     return false;
      //   }
      //   this.phoneNumber = this.phoneNumber
      //     ? this.phoneNumber
      //     : this.user.MEMBERSHIP_MOBILEPHONE;
      // }

      // if (!this.storeId) {
      //   uni.showToast({
      //     title: "请选择就餐方向",
      //     icon: "none",
      //   });
      //   return false;
      // }

      _this.createOrder();

      // // 调起支付方式的悬浮框
      // this.$refs.payPopup.open("bottom");
      // this.payShow = true;

      // if (this.user.MEMBERSHIP_TYPE === 3000) { // 判断是否是内部会员
      //   _this.getCardAmount()
      //   _this.isShow = true
      // } else {
      //   _this.createOrder()
      // }
    },
    // 关闭支付方式悬浮框
    handlePayClose() {
      this.$refs.payPopup.close();
      this.payShow = false;
    },
    payByCard() {
      // 实业饭卡支付
      let _this = this;
      _this.$api
        .postCoop({
          action_type: "ECodeConsume",
          industryMembershipId: _this.user.INDUSTRY_MEMBERSHIP_ID,
          saleBill: _this.orderInternal,
        })
        .then((rs) => {
          if (rs.ResultCode === "100") {
            // uni.showToast({
            //   title: '支付成功',
            //   icon: 'success',
            //   duration: 1000
            // })
            // _this.isShow = false
            // setTimeout(() => {
            _this.$store.commit("orderRemark", "");
            _this.$store.commit("couponPrice", "");
            _this.$store.commit("shopcartOrder", "");
            _this.$store.commit("orderTable", "");
            uni.redirectTo({
              url:
                "/pages/orders/orderdetail/index?type=1&orderNumber=" +
                _this.orderNumber +
                "&orderInternal=" +
                _this.orderInternal,
            });
            // }, 1000)
          } else {
            uni.showToast({
              title: rs.ResultDesc,
              icon: "none",
              duration: 2000,
            });
          }
        });
    },
    // 获取后台信息调取微信支付
    getOrderInfo() {
      let _this = this;
      _this.$api
        .postCoop({
          action_type: "JsApiPay",
          action_data: 1,
          action_record: _this.user.WECHATAPP_OPENID,
          // action_record: 'ortWV5OP2g9P81cxxJYIIhrAezS4',
          TOTAL_FEE: _this.orderAmount,
          // TOTAL_FEE: 0.01,
          OFFPRICE: 0,
          payType: 2,
          SALEBILL_ID: _this.orderInternal,
          SALEBILL_CODE: _this.orderNumber,
        })
        .then((res) => {
          _this.$api
            .postCoop({
              action_type: "EndPay",
              action_data: _this.orderNumber,
              action_record: 1,
            })
            .then((res) => {
              uni.hideLoading();
              if (res === 1) {
                _this.$store.commit("orderRemark", "");
                _this.$store.commit("couponPrice", "");
                _this.$store.commit("shopcartOrder", "");
                _this.$store.commit("orderTable", "");
                uni.redirectTo({
                  url:
                    "/pages/orders/orderdetail/index?type=1&orderNumber=" +
                    _this.orderNumber +
                    "&orderInternal=" +
                    _this.orderInternal,
                });
              } else {
                uni.showModal({
                  content: "请确认是否支付成功",
                  cancelText: "未支付",
                  confirmText: "我已支付",
                  success: function (back) {
                    if (back.confirm) {
                      _this.$api
                        .postCoop({
                          action_type: "EndPay",
                          action_data: _this.orderNumber,
                          action_record: 1,
                        })
                        .then((_data) => {
                          _this.$store.commit("orderRemark", "");
                          _this.$store.commit("couponPrice", "");
                          _this.$store.commit("shopcartOrder", "");
                          _this.$store.commit("orderTable", "");
                          console.log("_data", _data);
                          uni.redirectTo({
                            url:
                              "/pages/orders/orderdetail/index?type=1&orderNumber=" +
                              _this.orderNumber +
                              "&orderInternal=" +
                              _this.orderInternal,
                          });
                        });
                    } else {
                      uni.redirectTo({
                        url:
                          "/pages/orders/orderdetail/index?type=1&orderNumber=" +
                          _this.orderNumber +
                          "&orderInternal=" +
                          _this.orderInternal,
                      });
                    }
                  },
                });
              }
            });
        });
    },
    getDicretion(op) {
      let _this = this;

      let arr = {
        action_type: "GetSacnShopDetail",
        provinceCode: op.province,
        serverpartShopId: op.sid,
        showCoupon: 1,
      };

      this.$api.getCoop(arr).then(function (res) {
        if (res.ResultCode === "100") {
          let _data = res.Data;

          _this.shopList = _data.ShopList;
          _this.radio2 = _data.ShopList[0].SERVERPARTSHOP_ID;
          console.log("_this.shopList", _this.shopList);
          _this.getcoup();
          _this.$forceUpdate();
        }
      });
    },
    getDefaultTime() {
      let nowTime = new Date().getTime()
      let date = new Date()
      let y = new Date().getFullYear()
      let m = new Date().getMonth() + 1
      if (m < 10) {
        m = '0' + m
      }
      let d = new Date().getDate()
      if (d < 10) {
        d = '0' + d
      }

      let now = 0
      timeList.forEach((item, index) => {
        let thisTime = new Date(`${y}-${m}-${d} ${item}`).getTime()
        if (nowTime > thisTime) {
          now = index + 1
        }
      })
      this.time = now
    },
    async handleGetServerPart() {
      this.isLoading = true;
      const req = {
        ServerpartId: this.SERVERPART_ID,
      };

      const detail = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerpartInfo",
        req
      );
      let detailObj = detail.Result_Data;
      this.handleGetDistance(detailObj);
      this.isLoading = false;
    },
    async handleGetDistance(obj) {
      // uni.showLoading({
      //   title: "计算预计时间...",
      // });
      this.isLoading = true;
      let _this = this;
      const key = "6e96a801bcea5290d3dcbf100358a6b3"; // 在高德开发者平台申请
      // 出发点
      let origin = `${this.seat.longitude},${this.seat.latitude}`;
      // 目的地
      let destination = `${obj.SERVERPART_X},${obj.SERVERPART_Y}`;

      const url = `https://restapi.amap.com/v3/direction/driving?key=${key}&origin=${origin}&destination=${destination}&strategy=20&extensions=all`;
      await uni.request({
        url,
        success: (res) => {
          console.log("handleGetDistance", res);
          let obj = res.data;
          // 秒为结果
          let arriveTime =
            obj.route.paths && obj.route.paths.length > 0
              ? obj.route.paths[0].duration
              : "";
          console.log("arriveTime", arriveTime);
          if (arriveTime) {
            let nowTime = Date.now();
            let nowDay = new Date().getDate();
            console.log("nowDay", nowDay);

            let arriveDate = new Date(nowTime + arriveTime * 1000);
            let y = arriveDate.getFullYear()
            let m = arriveDate.getMonth() + 1
            if (m < 10) {
              m = '0' + m
            }


            let day = arriveDate.getDate();
            let hour = arriveDate.getHours();
            let min = arriveDate.getMinutes();
            console.log("day", day);
            console.log("hour", hour);
            console.log("min", min);

            this.arriveTime = `${y}-${m}-${day} ${hour}:${min}`
            console.log('this.arriveTime', this.arriveTime);


            _this.beExpectedTo = `${nowDay < day ? day - nowDay === 1 ? '次日' : `${day - nowDay}天后` : ''}${hour < 10 ? "0" + hour : hour}:${min < 10 ? "0" + min : min
              }`;
          }
        },
        fail: (error) => { },
      });
      // uni.hideLoading();
      this.isLoading = false;
    },
    // 获取用户当前位置
    handleGetRealPosition() {
      let _this = this;
      this.isLoading = true;
      uni.getLocation({
        type: "gcj02",
        altitude: true,
        isHighAccuracy: true,
        success: async (res) => {
          let seatInfo = {
            latitude: res.latitude,
            longitude: res.longitude,
          };
          uni.setStorageSync("seatInfo", JSON.stringify(seatInfo));
          uni.setStorageSync("actualLocation", JSON.stringify(seatInfo));
          _this.seat = seatInfo;

          _this.handleGetServerPart();
          _this.isLoading = false;
        },
        fail: async (err) => {
          console.log("err", err);
          _this.isLoading = false;
        },
      });
    },
  },
  onShow() {
    // this.getOrderAmount()
    let id = this.doorId;
    let yuyue = this.$store.getters.appointmentOrder[id];
    this.yyTime = yuyue ? yuyue.showTime : "";
    this.handleGetRealPosition();
  },
  onUnload() {
    this.$store.commit("orderRemark", "");
    this.$store.commit("couponPrice", "");
    this.orderInternal = "";
    this.orderNumber = "";
    this.phoneNumber = "";
    this.isPackage = 1000;
    this.isShow = false;
  },
  onLoad(option) {
    this.SERVERPART_ID = option.SERVERPART_ID;

    let type = uni.getStorageSync("loginType");
    this.loginType = type;

    this.doorId = option.id;
    this.storeId = Number(option.sid); // 门店id
    // this.tableNum = option.tableNum || 0;
    this.provinceCode = option.province;
    // eslint-disable-next-line eqeqeq
    if (this.tableNum != 0) {
      this.active = 1;
      this.type = 1000;
    } else {
      // 预约
      this.active = 0;
      this.type = 2000;
    }
    this.phoneNumber = this.user.MEMBERSHIP_MOBILEPHONE || "";
    this.shopOrder = this.$store.getters.shopcartOrder[option.id];
    this.getcoup();

    console.log("this.shopOrder", this.shopOrder);
    // this.handleGetGyroscope();
    // this.getDicretion(option)
    this.getDefaultTime()
    this.$utils.addUserBehaviorNew();
  },
};
</script>
<style lang="stylus" scoped>
bodyColor = #CAA97F;

.disable {
  color: #999;
}

.bb1 {
  border-bottom: 1rpx solid #EDEDED;
}

.mt24 {
  margin-top: 24rpx;
}

.sellement-apponit-box {
  margin: 24rpx 24rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 0 24rpx;
}

.sellement-apponit-unit {
  display: flex;
  align-items: center;
}

.settlement {
  padding-bottom: 180rpx;
  box-sizing: border-box;
  background-color: #f5f5f5;

  .settlement-title {
    background: #ffffff;
    display: flex;
    justify-content: space-around;
    padding: 48rpx 30rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    margin: 24rpx;
    border-radius: 16rpx;

    .settlement-yy, .settlement-ts {
      flex: 0.4;
      border: 6rpx solid #dddddd;
      border-radius: 16rpx;
      padding: 24rpx 30rpx;
      color: #999;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .yy-img, .ts-img {
        display: inline-block;
        width: 61rpx;
        height: 53rpx;
        margin-right: 20rpx;
        vertical-align: bottom;
      }

      .yy-img {
        background: url('https://eshangtech.com/wanmeiyizhanImg/yy.png') no-repeat;
        background-size: contain;
      }

      .yy-img-active {
        background: url('https://eshangtech.com/wanmeiyizhanImg/yy-a.png') no-repeat;
        background-size: contain;
      }

      .ts-img {
        background: url('https://eshangtech.com/wanmeiyizhanImg/md.png') no-repeat;
        background-size: contain;
      }

      .ts-img-active {
        background: url('https://eshangtech.com/wanmeiyizhanImg/md-a.png') no-repeat;
        background-size: contain;
      }
    }

    .settlement-color {
      color: bodyColor;
      border: 6rpx solid bodyColor;
    }
  }

  .link-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #ddd;
  }

  input {
    font-size: 32rpx;
    height: 96rpx;
    line-height: 96rpx;
    width: 98%;
  }

  .time-title {
    font-family: 'PingFangSC';
    // padding 0 24rpx
    height: 80rpx;
    line-height: 80rpx;
    font-size: 24rpx;
    color: #333;
    font-weight: bolder;
    flex: 2;
  }

  .radio-box {
    padding: 0rpx 10rpx;
    background: #fff;
    font-size: 26rpx;
    flex: 8;
    height: 96rpx;
    line-height: 96rpx;


    .radio-list {
      width: 50%;
      display: inline-block;

      .radio-unit {
        font-size: 24rpx;
        line-height: 96rpx;
      }

      .picker {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24rpx;
        padding-right: 16rpx;
        height: 96rpx;
        line-height: 96rpx;
        white-space: nowrap;
      }

      .custom-radio:checked::before {
        background-color: #caa97f; /* 金黄色背景 */
      }
    }
  }

  .repositioning {
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    right: 0rpx;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;

    .icon {
      width: 60rpx;
      height: 60rpx;
    }
  }

  .order-fx {
    margin-top: 20rpx;
    border-bottom: 2rpx dashed #dddddd;
  }

  .order-yy, .order-fx {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 30rpx;
    background: #ffffff;
    padding: 0 30rpx;

    .order-yy-time {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .span-time {
        color: bodyColor;
      }
    }
  }

  .door-box {
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .settlement-door {
      font-size: 30rpx;
      color: #333;
      font-weight: 900;
      margin-right: 10rpx;
    }

    .door-addr {
      font-size: 24rpx;
      color: #666;
    }
  }

  .order-title {
    background: #ffffff;
    width: 100%;
    font-size: 24rpx;
    color: #666;
    padding: 20rpx 30rpx;
    border-top: 1rpx solid #eee;
  }

  hr {
    background-color: #ededed;
    height: 2rpx;
  }

  .order-list {
    padding: 24rpx 12rpx 24rpx 12rpx;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    align-items: center;
    color: #333;

    .order-name {
      font-size: 24rpx;
      // font-weight bolder
      flex: 0.7;
    }

    .order-num {
      font-size: 24rpx;
      flex: 0.1;
    }

    .order-price {
      font-size: 24rpx;
      flex: 0.2;
      color: #333;
      text-align: right;
      font-weight: bolder;
    }
  }

  .coupon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    box-sizing: border-box;
    line-height: 60rpx;
    color: bodyColor;

    .coupon-title {
      color: #333;
      font-size: 24rpx;
    }

    .coupon-right {
      display: flex;
      justify-content: space-between;
      color: #666;

      .coupon-remark {
        width: 364rpx;
        text-align: right;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 42rpx;
        font-size: 24rpx;
      }

      .priceColor {
        color: bodyColor;
        font-size: 26rpx;
      }
    }
  }

  .price-sum {
    box-sizing: border-box;
    background-color: #fff;
    text-align: right;
    font-size: 24rpx;
    padding: 22rpx 16rpx;

    .pay-price {
      color: #333;
      font-size: 28rpx;
      margin-left: 10rpx;
      font-weight: bold;
    }
  }

  .go-pay {
    border-top: 1rpx solid #eee;
    line-height: 100rpx;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    // z-index 2
    overflow: hidden;
    box-sizing: border-box;
    padding: 16rpx 20rpx 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #fff;

    .pay-left {
      font-size: 26rpx;
      background-color: #fff;
      padding-left: 20rpx;

      .pay-price {
        color: #333;
        margin-left: 10rpx;
        font-size: 36rpx;
        font-weight: bolder;
      }
    }

    .pay-right {
      width: 210rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 700;
      color: #ffffff;
      background: #ba922f;
      border-radius: 48rpx;
    }
  }
}

.coupon.sellement-apponit-box {
  padding: 12rpx 24rpx;
}

.bottom-box {
  height: 450rpx;
  width: 100%;
  box-sizing: content-box;

  .bottom-pop-title {
    text-align: center;
    font-size: 32rpx;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f9f9f9;
  }

  .bottom-content {
    box-sizing: content-box;
    padding: 0 0 0 80rpx;
  }

  .bottom-btn {
    width: 600rpx;
    margin: 20rpx auto;
    border-radius: 8rpx;
    background: #444;
    color: #caa97f;
    font-size: 32rpx;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
  }
}

.payShowBox {
  width: 100%;
  height: 380px;
  background: #fff;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 12px;

  .payBoxTitle {
    width: 100%;
    font-Weight: bold;
    font-size: 16px;
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
  }

  .payList {
    width: 100%;
    height: 250px;
    overflow-y: auto;

    .radio-group {
      .bottom-radio {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24rpx;
        border-bottom: 1px solid #ededed;
        padding: 12px 0;

        .radioLeft {
          display: flex;
          align-items: center;

          .logoBox {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 8px;

            .logoIcon {
              width: 30px;
              height: 30px;
            }
          }
        }
      }
    }
  }

  .goPayBox {
    width: 100%;
    box-sizing: border-box;
    padding: 0 24px;

    .goPay {
      width: 100%;
      padding: 8px;
      box-sizing: border-box;
      border-radius: 20px;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #CAA97F;
    }
  }
}

.icon-coupon {
  background: url('https://eshangtech.com/wanmeiyizhanImg/settlement-coupon.png') no-repeat center;
  background-size: contain;
  width: 33rpx;
  height: 55rpx;
}

.radio-box.coupon-right {
  display: flex;
  justify-content: flex-end;
  color: #666;
  align-items: center;

  .coupon-remark {
    width: 444rpx;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 68rpx;
    line-height: 68rpx;
  }
}
</style>
