<template>
  <div class="app-container">
    <div style="display: flex; justify-content: space-between">
      <div class="zd-card" style="width: 49.5%">
        <h4>基本信息</h4>
        <el-descriptions :column="1">
          <el-descriptions-item label="条码ID：">{{
            info.skuSn
          }}</el-descriptions-item>
          <el-descriptions-item label="酒款ID：">{{
            info.beerId
          }}</el-descriptions-item>
          <el-descriptions-item label="酒款名称：">{{
            info.beerName
          }}</el-descriptions-item>
          <el-descriptions-item label="批次号：">{{
            info.batchSn
          }}</el-descriptions-item>
          <el-descriptions-item label="编码生成日期：">{{
            info.createTime || info.updateTime
          }}</el-descriptions-item>

          <el-descriptions-item label="生产日期："
            >{{ info.productionDate }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="zd-card" style="width: 49.5%">
        <h4>核销门店信息</h4>
        <el-descriptions :column="1">
          <el-descriptions-item label="门店ID："
            >{{ info.barCode }}
          </el-descriptions-item>
          <el-descriptions-item label="所在城市："
            >{{ info.verifyCity }}
          </el-descriptions-item>
          <el-descriptions-item label="核销时间："
            >{{ info.verifyTime }}
          </el-descriptions-item>
          <el-descriptions-item label="核销活动信息："
            >{{ info.activity && info.activity.activityName }}
          </el-descriptions-item>
          <el-descriptions-item label="核销啤酒币数量："
            >{{ info.verifyIconAmount }}
          </el-descriptions-item>
          <el-descriptions-item label="参与活动ID："
            >{{ info.activityId }}
          </el-descriptions-item>
          <el-descriptions-item label="活动目标："
            >{{ info.activity && info.activity.activityTarget }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="zd-card">
      <h4>扫码记录</h4>
      <el-table v-loading="loading" :data="scanLog" class="zd-table">
        <el-table-column prop="scanTime" label="扫码时间"></el-table-column>
        <el-table-column prop="userId" label="用户ID"></el-table-column>
        <el-table-column prop="scanCity" label="城市"></el-table-column>
        <el-table-column prop="remark" label="用户操作"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import {
  getQrcode,
  qrcodeScanLogList,
  cancelConsume,
} from "@/api/brewery/qrcode";
import { onMounted } from "vue";
const route = useRoute();
const qrcodeId = ref(null);
const loading = ref(false);
const scanLog = ref([]);
const info = ref({});
onMounted(() => {
  qrcodeId.value = route.query.id;
  getQrcodeInfo();
  qrcodeScanLog();
});
function getQrcodeInfo() {
  getQrcode(qrcodeId.value).then((res) => {
    console.log(res);
    info.value = res.data;
  });
}
function qrcodeScanLog() {
  qrcodeScanLogList(qrcodeId.value).then((res) => {
    console.log(res);
    scanLog.value = res.data;
  });
}
function handleCancelConsume(id) {
  cancelConsume({ logId: id }).then((res) => {
    console.log(res);
    qrcodeScanLog();
  });
}
</script>

<style scoped lang="scss"></style>
