<template>
  <view class="s_page">
    <custom :isBack="false">
      <template v-slot:right>
        <view class="custom_icon right" @tap="toFunctionList">
          <image src="/static/img/icon_01.png" mode=""></image>
        </view>
      </template>
    </custom>
    <view
      class="view_content"
      :style="{ marginTop: StatusBar !== 0 ? '88rpx' : '' }"
    >
      <view class="txt_box">
        <view v-if="store_obj.isUsePoint == 1" class="txt"
          >ポイント利用上限（1会計）:{{ store_obj.usePointRate }}%({{
            store_obj.maxUsePoint
          }})</view
        >
        <view v-else-if="store_obj.isUsePoint == 2" class="txt"
          >ポイント利用不可</view
        >
        <view v-if="store_obj.isReturnPoint == 1" class="txt"
          >ポイント還元上限（1会計）:{{ store_obj.pointRate }}%({{
            store_obj.maxPoint
          }})</view
        >
        <view v-else-if="store_obj.isReturnPoint == 2" class="txt"
          >ポイント還元なし</view
        >
      </view>
      <view class="step_two public_box">
        <view class="item_box">
          <view class="box_title">店舗ID</view>
          <view class="box_fun flex">
            <view class="txt ts">
              <view>No.{{ store_obj.id }}</view>
              <view>{{ store_obj.shop_name }}</view>
            </view>
          </view>
        </view>
        <view class="item_box">
          <view class="box_title">割引前金額</view>
          <view class="box_fun flex">
            <view class="txt flex"
              ><input v-model="form_data.money.value" type="number"
            /></view>
          </view>
        </view>
        <!-- 人数 -->
        <view class="item_box">
          <view class="box_title">お客様人数</view>
          <view
            class="box_fun flex box_fun_num_dine"
            style="border-bottom: 1px solid #e1e0e8"
          >
            <view class="txt flex" style="border-bottom: 0">
              <input v-model.number="form_data.num_dine" type="number" />
            </view>
            <view class="num_dine">
              <view @tap="numDineFn(-1)" class="jiajian">-</view>
              <view
                @tap="numDineFn(1)"
                :class="[
                  'jiajian',
                  'jiajia_1',
                  { active: form_data.money.value },
                ]"
                >+</view
              >
            </view>
          </view>
        </view>
      </view>
      <view class="next_btn_box">
        <view class="next_btn flex_abc" v-if="form_data.money.value === ''"
          >スキャン</view
        >
        <view class="next_btn flex_abc" v-else-if="form_data.num_dine === ''"
          >スキャン</view
        >
        <view
          class="next_btn flex_abc"
          :class="{ active: form_data.money.value }"
          v-else
          @tap="scanCodeHandle()"
          >スキャン</view
        >
      </view>
    </view>
    <view class="window_box" v-show="window_flag">
      <view class="window_bgc" @tap="windowHandler"></view>
      <view
        class="window_content"
        :class="{ active: animation_flag, close: !animation_flag }"
      ></view>
    </view>
    <view class="version_box">
      <view> V1.2.0</view>
    </view>
  </view>
</template>

<script>
import custom from "@/components/custom/custom";
import { getShopInfo } from "@/request/public";
export default {
  components: {
    custom,
  },
  data() {
    return {
      window_flag: false,
      animation_flag: false,
      form_data: {
        money: {
          value: "",
          tips_key: "",
          process_type: 2,
        },
        num_dine: 1,
      },
      machineId: "",
      store_obj: {},
    };
  },
  onShow() {
    this.form_data.money.value = "";
  },
  onLoad() {
    uni.showLoading();

    // #ifdef APP-PLUS
    let imelSet = []
    var Build = plus.android.importClass("android.os.Build");
    var SystemProperties = plus.android.importClass("android.os.SystemProperties");  
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {  
        imelSet.push(SystemProperties.get('ro.sunmi.serial'))  
    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {  
        imelSet.push(Build.getSerial())
    } else{  
        imelSet.push(Build.SERIAL)
    }

    plus.device.getInfo({
      success: (e) => {
        const imei = e.imei.split(",");
        imelSet.push(imei[0])
        this.machineId = imelSet.join(',');

        this.getShopInfoApi();
      },
      fail: function (e) {
        console.log("getDeviceInfo failed: " + JSON.stringify(e));
      },
    });
    // #endif
  },
  methods: {
    // 人数
    numDineFn(val) {
      // console.log(this.form_data.num_dine);
      if (this.form_data.num_dine <= 1 && val == -1) {
        return;
      } else {
        this.form_data.num_dine += val;
      }
    },
    toFunctionList() {
      uni.navigateTo({
        url: "../functionList/index",
      });
    },
    async getShopInfoApi() {
      let params = {
        machineId: this.machineId,
        // machineId: '861741044137450'
      };
      await getShopInfo(params).then((res) => {
        let { data } = res.data;
        data.imei = this.machineId;
        this.store_obj = data;
        console.log(this.store_obj);

        uni.setStorageSync("store_obj", data);
      });
      uni.hideLoading();
    },
    windowHandler() {
      let flag = !this.window_flag;
      if (flag) {
        this.window_flag = flag;
        this.animation_flag = flag;
      } else {
        this.animation_flag = flag;
        setTimeout(() => {
          this.window_flag = flag;
        }, 1000);
      }
    },
    gotoWhere(url) {
      uni.navigateTo({
        url,
      });
    },
    scanCodeHandle() {
      // 写死
      // uni.setStorageSync("customer_info", ["39207", "zh-CN"]);
      // this.$i18n.locale = "en";
      // uni.setStorageSync("heXiaoData", {
      //   totalMoney: Math.round(+this.form_data.money.value),
      //   userNum: this.form_data.num_dine,
      //   dTicket: 0, // 优惠券抵扣
      //   dIntegral: 0, // 积分抵扣
      //   dMoney: 0, // 抵扣后金额
      //   coupon: [], // 选中的优惠券
      // });
      // this.gotoWhere(`/pages/verification/stepOne`);
      // return;
      // 允许从相机和相册扫码
      if (parseInt(this.form_data.money.value) < 0) return;
      if (parseInt(this.form_data.num_dine) < 0) return;
      uni.scanCode({
        success: (res) => {
          let customer_info = res.result.split("-");
          console.log(customer_info);
          uni.setStorageSync("customer_info", customer_info);
          uni.setStorageSync("heXiaoData", {
            totalMoney: Math.round(+this.form_data.money.value),
            userNum: this.form_data.num_dine,
            dTicket: 0, // 优惠券抵扣
            dIntegral: 0, // 积分抵扣
            dMoney: 0, // 抵扣后金额
            coupon: [], // 选中的优惠券
          });
          // 修改默认语言
          this.$i18n.locale = customer_info[1];
          this.gotoWhere(`/pages/verification/stepOne`);
        },
      });
    },
  },
};
</script>
<style>
page {
  background: linear-gradient(
    rgba(160, 204, 87, 0.2) 0%,
    rgba(223, 226, 0, 0.2) 100%
  );
}
</style>
<style scoped lang="scss">
.s_page {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  height: auto;
}
.custom_icon {
  width: 48rpx;
  height: 48rpx;
  image {
    width: 100%;
    height: 100%;
  }
  &.left {
    margin-left: 16rpx;
  }
  &.right {
    margin-right: 32rpx;
  }
}
.txt_box {
  .txt {
    font-size: 28rpx;
    margin-bottom: 16rpx;
  }
}
.window_box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  .window_bgc {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
  }
  .window_content {
    width: 320rpx;
    height: 100%;
    position: absolute;
    top: 0;
    left: -320rpx;
    background-color: #ffffff;
    transition: left 1s;
    &.active {
      animation: oneframe 1s forwards;
    }
    &.close {
      animation: twoeframe 1s forwards;
    }
  }
}
@keyframes oneframe {
  0% {
  }
  100% {
    left: 0;
  }
}
@keyframes twoeframe {
  0% {
    left: 0;
  }
  100% {
    left: -320rpx;
  }
}
.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: 40rpx;
  padding-bottom: 150rpx;
}
.step_two {
  .item_box {
    width: 100%;
    margin-bottom: 40rpx;
    // position: relative;
    &: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;
          }
        }
      }
    }
    .num_dine {
      display: flex;
      // position: absolute;
      // right: 0;
      // bottom: 50%;
      .jiajian {
        font-size: 40px;
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        filter: drop-shadow(0 0 5px #87b821);
        text-align: center;
        line-height: 50rpx;
        background: #fff;
        &:last-child {
          margin-left: 46rpx;
          line-height: 60rpx;
          // background: linear-gradient(144.01deg, #82c26d 0%, #a0cb57 61.07%, #e0e200 100%);
          // filter: drop-shadow(0 0 5px #87b821);
        }
      }

      .jiajia_1 {
        &.active {
          background: linear-gradient(90deg, #7eb96a 0%, #d3d722 100%);
        }
      }
    }

    .box_fun_num_dine {
      align-items: center;
    }
  }
}
.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;
  }
}
.version_box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
}
</style>
