<template>
  <view class="s_page" :class="{ mb_flag: mb_flag }">
    <view class="view_content step_three">
      <view class="public_box all_money flex">
        <view class="title">実際支払い金額</view>
        <!-- <view class="content">¥{{ all_price | changeMoney }}</view> -->
        <view class="content">¥{{ newData.dMoney || newData.totalMoney }}</view>
      </view>
      <!-- <view class="step_three_txt">認証明細/{{ $t('核销明细') }}</view> -->
      <view class="public_box fun_box">
        <view class="fun_item">
          <view class="left">店舗ID</view>
          <view class="right flex_abs">
            <view class="right_l">
              <view>NO.{{ axios_data.id }}</view>
              <view>{{ axios_data.storeName }}</view>
            </view>
            <view class="right_r flex_ac"></view>
          </view>
        </view>
        <view class="fun_item">
          <view class="left">割引前金額</view>
          <view class="right flex_abs">
            <!-- <view class="right_l">
						</view> -->
            <view class="right_r flex_ac">
              <view class="txt">¥{{ axios_data.money | changeMoney }}</view>
            </view>
          </view>
        </view>
        <view class="fun_item">
          <view class="left"> 割引 </view>
          <view class="left"> </view>
          <view
            class="right flex_abs"
            @tap="
              gotoWhere(
                `/pages/verification/selectCoupon?money=${form_data.money.value}`
              )
            "
          >
            <!-- <view class="right_l">
						</view> -->
            <view class="right_r flex_ac" v-if="newData.dTicket">
              <view class="txt">-¥{{ newData.dTicket }}</view>
              <image src="/static/img/icon_118.png" mode=""></image>
            </view>
            <view class="right_r" v-else>
              <view
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                "
                v-if="newData.dTicket == 0 && newData.dTicket != ''"
              >
                <view class="txt">SPECIAL OFFER</view>
                <image src="/static/img/icon_118.png" mode=""></image>
              </view>

              <view
                style="
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                "
                v-else
              >
                <view></view>
                <image src="/static/img/icon_118.png" mode=""></image>
              </view>
            </view>
          </view>
        </view>
        <view class="fun_item" v-if="poins_deduction.redirect">
          <view class="left">ポイント利用</view>
          <view
            class="right flex_abs"
            @tap="
              gotoWhere(
                `/pages/verification/selectIntegral?money=${use_con_price * 1}`
              )
            "
          >
            <!-- <view class="right_l">
						</view> -->
            <view class="right_r flex_ac">
              <view class="txt txt_two" v-if="newData.dIntegral"
                >-{{ newData.dIntegral }}</view
              >
              <view class="txt txt_two" v-else></view>
              <image src="/static/img/icon_118.png" mode=""></image>
            </view>
          </view>
        </view>
        <!-- 人数 -->
        <view class="fun_item">
          <view class="left">お客様人数</view>
          <view class="right flex_abs">
            <!-- <view class="right_l">
						</view> -->
            <view class="right_r flex_ac">
              <view class="txt">{{ axios_data.num_dine }}</view>
            </view>
          </view>
        </view>
      </view>
      <!-- <view class="step_three_txt" style="color:#007AD7;margin-top: 60rpx;">※{{ $t('请让商家输入验证码并提交') }}</view>
			<view class="public_box shop_code_box" :class="{ 'active': form_data.code.value }">
				<view class="content"><input v-model="form_data.code.value" :password="true" :placeholder="`店舗ID：${axios_data.id}の認証コードを入力してください。`" placeholder-style="font-weight: 600;color:#8A8A8A;" @keyboardheightchange="keyboardheightchange"  /></view>
			</view> -->
      <view class="next_btn_box">
        <view
          class="next_btn flex_abc"
          :class="{ active: last_btn_flag }"
          @tap="nextStep()"
          >提出</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import custom from "@/components/custom/custom";
import { verification, getWriteOffInfo } from "@/request/ticketReq";
export default {
  components: {
    custom,
  },
  data() {
    const moneyRule = (value, callback) => {
      if (!value || value <= 0) {
        return this.$t("请输入金额");
      }
    };
    const peopleRule = (value, callback) => {
      if (!value || value < 1) {
        return this.$t("请输入用餐人数");
      }
    };
    const codeRule = (value, callback) => {
      if (!value) {
        return this.$t("请输入店家核销码");
      }
    };
    return {
      // 表单规则
      rule: {
        money: moneyRule,
        people: peopleRule,
        code: codeRule,
      },
      ids: "",
      store_arr: [],
      plan: 3,
      axios_data: {
        id: "",
        storeName: "",
        point: 0,
        money: "",
        num_dine: "", // 人数
      },
      form_data: {
        money: {
          value: "",
          tips_key: "",
          process_type: 2,
        },
        num_dine: "", // 人数
      },
      ver_coupon: {},
      mb_flag: false,
      tenantId: "",

      poins_deduction: [],
      newData: [],
    };
  },
  onLoad(options) {
    let { money, num_dine } = options;
    this.form_data.money.value = money;
    this.form_data.num_dine = num_dine;
    this.axios_data.id = uni.getStorageSync("store_obj").id;
    this.axios_data.storeName = uni.getStorageSync("store_obj").shop_name;
    this.axios_data.money = this.form_data.money.value;
    this.axios_data.num_dine = this.form_data.num_dine;

    console.log("this.axios_data.num_dine", num_dine);

    this.tenantId = uni.getStorageSync("customer_info")[0];
    this.getListFn(this.axios_data.id, this.tenantId);

    this.newData = uni.getStorageSync("heXiaoData");
  },
  onUnload() {
    this.clearStore();
  },
  onShow() {
    this.newData = uni.getStorageSync("heXiaoData");
    this.customer_info = uni.getStorageSync("customer_info");
  },
  computed: {
    all_price() {
      let price = this.use_con_price;
      price = price - this.axios_data.point - this.ver_coupon.couponValue;
      return price > 0 ? price : 0;
    },
    use_con_price() {
      let price = this.form_data.money.value;
      if (!this.ver_coupon.couponValue) {
        return price;
      }
    },
    last_btn_flag() {
      console.log(this.form_data);
      this.formDataRuleHandler();
      let tips_key = "";
      // 获取不同步骤的错误提示信息
      for (var key in this.form_data) {
        if (
          this.form_data[key].process_type === this.plan &&
          this.form_data[key].tips_key
        ) {
          tips_key = this.form_data[key].tips_key;
          break;
        }
      }
      if (tips_key) {
        return false;
      } else {
        return true;
      }
    },
  },
  methods: {
    async getListFn(spid, userId) {
      let res = await getWriteOffInfo({ shop_id: spid, user_id: userId });
      this.poins_deduction = res.data.data.poins_deduction;

      console.log("店铺上限", this.poins_deduction);
    },
    keyboardheightchange(event) {
      let { height } = event.detail;
      if (height > 0) {
        this.mb_flag = true;
      } else {
        this.mb_flag = false;
      }
    },
    clearStore() {
      // uni.removeStorageSync("ver_coupon");
      // uni.removeStorageSync("use_point");
      uni.removeStorageSync("heXiaoData");
    },
    // input 失去焦点 检测事件
    blurChecked(key_code) {
      if (key_code == "people" && this.form_data[key_code].value < 1) {
        this.form_data[key_code].value = 1;
      }
    },
    // 表单验证
    formDataRuleHandler() {
      let flag = true;
      let str = "";
      for (let key in this.form_data) {
        if (this.form_data[key].process_type === this.plan) {
          if (this.rule[key]) {
            this.form_data[key].tips_key = this.rule[key](
              this.form_data[key].value
            );
          }
        }
      }
    },
    async verificationApi() {
      // let params = {
      //   couponId: this.ver_coupon.couponId
      //     ? this.ver_coupon.couponId
      //     : this.ver_coupon.id,
      //   customerId: uni.getStorageSync("customer_info")[0],
      //   // diningNumber: this.form_data.people.value,
      //   // discountAmount: this.ver_coupon.couponValue,
      //   discountType: 2,
      //   point: this.axios_data.point,
      //   // securityCode: this.form_data.code.value,
      //   spendAmount: this.form_data.money.value * 100,
      //   storeId: this.axios_data.id,
      //   tenantId: this.tenantId,
      //   imei: uni.getStorageSync("store_obj").imei,
      //   diningNumber: +this.form_data.num_dine,
      // };

      // 处理优惠券为JSON格式
      this.newData.coupon = JSON.stringify(this.newData.coupon);
      let params = {
        type: 2,
        shop_id: this.axios_data.id,
        user_id: this.tenantId,
        number_of_people: +this.form_data.num_dine,
        amount_receivable: this.newData.totalMoney,
        coupon: this.newData.coupon,
        points: this.newData.dIntegral,
      };
      console.log("核销参数", params);
      let res = await verification(params);
      console.log("核销结果", res);
      if (res.data.status == 1) {
        const paramsData = encodeURIComponent(JSON.stringify(res.data.data));

        this.clearStore();
        let url = `/pages/verification/stepResult?params=${paramsData}`;
        uni.redirectTo({
          url,
        });
      }
    },
    // 通用方法
    nextStep() {
      this.verificationApi();
    },
    gotoWhere(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>
<style>
page {
  /* background-color: #FFFFFF; */
  background: linear-gradient(
    rgba(160, 204, 87, 0.2) 0%,
    rgba(223, 226, 0, 0.2) 100%
  );
}
</style>
<style scoped lang="scss">
.s_page {
  min-height: 100vh;
  &.mb_flag {
    width: 100%;
    position: fixed;
    top: -60rpx;
    left: 0;
    // // min-height: calc(100vh + 120rpx);
    // padding-bottom: 500rpx;
    // box-sizing: border-box;
  }
}
.custom_c_txt {
  width: 560rpx;
  font-size: 36rpx;
  color: $step_color;
  font-weight: 600;
  text-align: center;
}
.public_box {
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
}
.view_content {
  padding-top: 20rpx;
  padding-bottom: 150rpx;
  // &.mb_flag {
  // 	padding-bottom: 500rpx;
  // 	position: absolute;
  // 	top: 60rpx;
  // 	z-index: -1;
  // }
}
.title_txt {
  text-align: center;
  font-size: 28rpx;
  line-height: 38rpx;
  font-weight: bold;
  &.one {
    color: #007ad7;
    margin: 80rpx 0 8rpx;
  }
  &.two {
    color: #4a4a4a;
    margin-bottom: 40rpx;
  }
}
.item {
  border: 3px solid #ffffff;
  .top {
    font-size: 28rpx;
    line-height: 28rpx;
    color: $them_color_two;
    font-weight: bold;
  }
  .line {
    width: 100%;
    height: 1px;
    background-color: $them_color_two;
    margin: 16rpx 0;
  }
  .txt {
    color: #000000;
    font-size: 28rpx;
    line-height: 38rpx;
    font-weight: bold;
  }
  &.active {
    border-color: $them_color_two;
    // background: linear-gradient(90deg, #7EB96A 0%, #D3D823 100%) !important;
    // .top {
    // 	color: #FFFFFF;
    // }
    // .line {
    // 	background-color: #FFFFFF;
    // }
  }
}
.step_two {
  .item_box {
    width: 100%;
    margin-bottom: 40rpx;
    &:last-child {
      margin-bottom: 0;
    }
    .box_title {
      font-size: 28rpx;
      line-height: 38rpx;
      color: $them_color_two;
      font-weight: bold;
    }
    .box_fun {
      width: 100%;
      min-height: 80rpx;

      .change_btn_box {
        flex-shrink: 0;
        margin-left: 20rpx;
        .chang_btn {
          height: 54rpx;
          width: 54rpx;
          border-radius: 50%;
          overflow: hidden;
          image {
            height: 35%;
            width: 35%;
            display: block;
          }
          &.del {
            background-color: $them_color_two;
          }
          &.add {
            background-color: $them_color_two;
          }
        }
      }
      .txt {
        flex: 1;
        height: 100%;
        padding: 16rpx 0 30rpx;
        box-sizing: border-box;
        align-items: flex-end;
        border-bottom: 1px solid #e1e0e8;
        > view,
        input {
          color: #000000;
          font-size: 48rpx;
          line-height: 48rpx;
          font-weight: bold;
        }
        &.ts {
          > view {
            font-size: 28rpx !important;
            line-height: 38rpx !important;
          }
        }
      }
    }
  }
}
.step_three {
  .step_three_txt {
    font-size: 28rpx;
    line-height: 38rpx;
    margin-bottom: 16rpx;
    color: #000000;
    font-weight: bold;
  }
  .all_money {
    flex-direction: column;
    align-items: center;
    .title {
      color: $step_color;
      font-weight: bold;
      font-size: 28rpx;
      line-height: 38rpx;
      text-align: center;
      margin-bottom: 16rpx;
    }
    .content {
      font-size: 68rpx;
      line-height: 96rpx;
      font-weight: bold;
      color: #000000;
      text-align: center;
      padding: 0 100rpx;
      border-bottom: 1px solid #dbdbdb;
    }
  }
  .fun_box {
    .fun_item {
      width: 100%;
      margin-bottom: 20rpx;
      border-bottom: 1px solid #dbdbdb;
      &:last-child {
        margin-bottom: 0;
      }
      .left {
        color: $them_color_two;
        font-weight: bold;
        font-size: 28rpx;
        line-height: 38rpx;
      }
      .right {
        padding: 20rpx 0 10rpx;
        .right_l {
          > view {
            font-size: 28rpx;
            line-height: 38rpx;
            color: #000000;
            font-weight: bold;
          }
        }
        .right_r {
          width: 100%;
          justify-content: space-between;
          .txt {
            font-size: 44rpx;
            line-height: 56rpx;
            color: #000000;
            font-weight: bold;
          }
          image {
            width: 40rpx;
            height: 40rpx;
            display: block;
            margin-left: 4rpx;
          }
        }
      }
    }
  }
  .shop_code_box {
    border: 2px solid #8a8a8a;
    &.active {
      border-color: #007ad7;
    }
    .content {
      input {
        font-size: 28rpx;
        line-height: 38rpx;
        color: #007ad7;
      }
    }
  }
}
.next_btn_box {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #ffffff;
  padding: 20rpx 0;
}
.next_btn {
  margin: 0 auto;
  width: 92%;
  height: 82rpx;
  border-radius: 41rpx;
  font-size: 32rpx;
  line-height: 32rpx;
  font-weight: bold;
  background: #f2f2f2;
  color: #acacac;
  &.active {
    background: linear-gradient(90deg, #7eb96a 0%, #d3d722 100%);
    color: #ffffff;
  }
}
</style>
