<template>
  <view class="s_page">
    <custom :isBack="true">
      <template v-slot:content>
        <view style="font-size: 38rpx; font-weight: bold"> 認証明細 </view>
      </template>
    </custom>
    <view class="main">
      <view v-if="dataList.length !== 0">
        <view
          class="recode_box"
          v-for="item in dataList"
          :key="item.id"
          :style="{ marginTop: StatusBar !== 0 ? '88rpx' : '' }"
        >
          <view class="title_box">
            NO.{{ item.ticket_number }}
            <button
              v-if="item.status == 1"
              class="btn"
              @click="openDelRecode(item)"
            >
              削除
            </button>
            <span style="background: #eeeeee; color: #8a8a8a" class="btn" v-else
              >削除済み</span
            >
          </view>
          <view class="item_box">
            <view class="sub_title"> 実際支払い金額 </view>
            <view class="shijizhifu"> ¥{{ item.paid_in_amount }} </view>
            <hr class="hr_style" />
          </view>
          <view class="item_box">
            <view class="sub_title"> 店铺ID </view>
            <view class="id"> ID.{{ item.shop_id }} </view>
            <view class="content">
              {{ item.shop_name }}
            </view>
            <hr class="hr_style" />
          </view>
          <view class="item_box">
            <view class="sub_title"> 割引前金額 </view>
            <view class="num">
              ￥{{ item.amount_receivable | formatMoney }}
            </view>
            <hr class="hr_style" />
          </view>
          <view class="item_box">
            <view class="sub_title"> 割引 </view>
            <view class="num">
              <!-- 10% off -->
              <view style="font-size: 34rpx" v-if="item.coupon === 0"
                >SPECIAL OFFER</view
              >
              <view style="font-size: 34rpx" v-else>
                <!-- <span v-if="item.ticketDiscountType === 2"
                  >{{ item.coupon }}% off</span
                > -->
                <!-- v-else -->
                <span>{{ item.coupon }} 円</span>
              </view>
            </view>
            <hr class="hr_style" />
          </view>
          <view class="item_box">
            <view class="sub_title"> ポイント利用 </view>
            <view class="num">
              {{ item.points }}
            </view>
            <hr class="hr_style" />
          </view>
          <view class="item_box">
            <view class="sub_title"> お客様人数 </view>
            <view class="num">
              {{ item.number_of_people }}
            </view>
            <hr class="hr_style" />
          </view>
          <view class="item_box">
            <view class="sub_title"> ポイント還元 </view>
            <view class="num">
              {{ item.merchants_reward_points }}
            </view>
            <hr class="hr_style" />
          </view>
          <!-- <view class="item_box" v-if="item.cardBackPoint !== 0">
            <view class="sub_title"> JCBポイント還元 </view>
            <view class="num">
              {{ item.cardBackPoint }}
            </view>
            <hr class="hr_style" />
          </view> -->
          <view class="item_box">
            <view class="sub_title"> 時間 </view>
            <view class="num">
              {{ item.created_at }}
            </view>
            <hr class="hr_style" />
          </view>
        </view>
      </view>
      <view
        style="
          text-align: center;
          font-size: 36rpx;
          font-weight: bold;
          margin-top: 50%;
          color: #808080;
        "
        v-else
      >
        {{ noData }}
      </view>
    </view>
    <uni-popup ref="popup">
      <view class="dialog">
        <view class="dialog_text">
          ID {{ delObj.ticket_number }}<br />
          削除しますか？
        </view>
        <!-- <br> -->
        <view class="dialogBtnBox">
          <span class="dialog_btn" @click="delRecode">削除</span>
          <span
            class="dialog_btn"
            style="background: #eee; color: #8a8a8a"
            @click="close"
            >取消</span
          >
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import custom from "@/components/custom/custom";
import { dateTransitionJo, formatMoney } from "@/util/util.js";
import {
  getVerificationList,
  deleteVerificationRecord,
} from "@/request/ticketReq";
export default {
  components: {
    custom,
  },
  filters: {
    formatMoney(val) {
      return formatMoney(val);
    },
    formatTime(val) {
      return dateTransitionJo(val);
    },
  },
  data() {
    return {
      noData: "読み込み中",
      dataList: [],
      delObj: {},
      machineId: null,
    };
  },
  onLoad: function () {
    this.machineId = "861741042996303";
    this.getDataList();
    return;

    plus.device.getInfo({
      success: (e) => {
        const imei = e.imei.split(",");
        this.machineId = imei[0];
        this.getDataList();
      },
      fail: function (e) {
        console.log("getDeviceInfo failed: " + JSON.stringify(e));
      },
    });
    // this.getDataList()
  },
  methods: {
    all_price(spendAmount, couponAmount, pointAmount) {
      if (spendAmount / 100 - couponAmount / 100 - pointAmount < 0) {
        return 0;
      }
      return spendAmount / 100 - couponAmount / 100 - pointAmount;
    },
    getDataList() {
      const storeId = uni.getStorageSync("store_obj").id;
      // const storeId =767
      getVerificationList({
        imei: this.machineId,
      })
        .then((res) => {
          console.log(res);
          this.dataList = res.data.data.list;
        })
        .catch((error) => {
          // console.log('报错了',error);
          this.noData = "データなし";
        });
    },
    openDelRecode(row) {
      this.$refs.popup.open("center");
      this.delObj = row;
    },
    delRecode(row) {
      deleteVerificationRecord({
        imei: this.machineId,
        id: this.delObj.id,
      }).then((res) => {
        if (res.data.status === 1) {
          uni.showToast({
            title: "操作成功",
            duration: 1500,
          });
          this.getDataList();
          this.$refs.popup.close();
        }
      });
    },
    close() {
      this.$refs.popup.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.s_page {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  height: auto;
  background: linear-gradient(
    rgba(160, 204, 87, 0.2) 0%,
    rgba(223, 226, 0, 0.2) 100%
  );

  .main {
    position: relative;
    width: 100%;
    height: 100%;

    .recode_box {
      overflow: hidden;
      position: relative;
      width: 626rpx;
      height: auto;
      border-radius: 16rpx;
      margin: 0 auto;
      margin-top: 44rpx;
      padding: 0 30rpx;
      background-color: #fff;
      box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);

      .title_box {
        position: relative;
        width: 100%;
        margin: 0 auto;
        margin-top: 16rpx;
        margin-bottom: 26rpx;
        text-align: center;
        font-size: 36rpx;
        font-weight: bold;
        color: #0071bc;

        .btn {
          position: absolute;
          top: 7rpx;
          right: 0rpx;
          width: 116rpx;
          height: 44rpx;
          line-height: 44rpx;
          font-size: 24rpx;
          border-radius: 22rpx;
          background: linear-gradient(90deg, #7eb96a 0%, #d3d722 100%);
          color: #fff;
        }
      }

      .item_box {
        position: relative;
        width: 100%;
        height: auto;

        .sub_title {
          font-weight: bold;
          font-size: 30rpx;
          line-height: 32rpx;
          color: #85bc6b;
        }

        .id {
          font-weight: bold;
          font-size: 34rpx;
          line-height: 38rpx;
          margin-top: 8rpx;
        }
        .shijizhifu {
          text-align: center;
          font-weight: bold;
          font-size: 68rpx;
        }

        .content {
          font-weight: bold;
          font-size: 34rpx;
          line-height: 38rpx;
          margin-top: 6rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          /* 限制在一个块元素显示的文本的行数 */
          -webkit-box-orient: vertical;
          /* 垂直排列 */
          word-break: break-all;
          /* 内容自动换行 */
        }

        .num {
          text-align: right;
          font-weight: bold;
          font-size: 34rpx;
          line-height: 38rpx;
          margin-top: 16rpx;
          margin-right: 18rpx;
        }

        .hr_style {
          height: 1px;
          margin: 16rpx 0;
          border: none;
          background-color: #dbdbdb;
        }
      }
    }
  }

  .dialog {
    position: relative;
    background-color: #fff;
    // height: 180rpx;
    line-height: 160rpx;
    // padding: 20rpx;
    border-radius: 16rpx;
    width: 650rpx;
    height: 348rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    .dialog_text {
      text-align: center;
      font-weight: 600;
      font-size: 32rpx;
      line-height: 40rpx;
      color: #000;
    }
    .dialogBtnBox {
      display: flex;
      justify-content: space-evenly;
      margin-bottom: 36rpx;
      margin-top: 56rpx;
    }

    .dialog_btn {
      // width: 100%;
      width: 280rpx;
      height: 82rpx;
      border-radius: 41rpx;
      background: linear-gradient(90deg, #81ba6e 0%, #d3d830 100%);
      line-height: 82rpx;
      text-align: center;
      color: #ffffff;
      font-size: 32rpx;
      font-weight: 600;
    }
  }
}
</style>
