<template>
  <div class="app-container">
    <div style="display: flex; gap: 10px">
      <div class="zd-card" style="flex: 1">
        <h4>基本信息</h4>
        <el-descriptions :column="1">
          <el-descriptions-item label="招募开始时间">{{
            activityInfo.startDate
          }}</el-descriptions-item>
          <el-descriptions-item label="招募结束时间">{{
            activityInfo.endDate
          }}</el-descriptions-item>
          <el-descriptions-item label="门店累积天数">{{
            activityInfo.duration
          }}</el-descriptions-item>

          <el-descriptions-item label="累积目标数">{{
            activityInfo.activityTarget
          }}</el-descriptions-item>
          <el-descriptions-item label="发布区域">{{
            activityInfo.city
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="zd-card" style="flex: 1">
        <h4>参与酒款</h4>
        <template v-if="activityInfo.beerScope == 1">
          <el-table
            v-if="activityInfo.beers && activityInfo.beers.length > 0"
            :data="activityInfo.beers"
            style="width: 100%"
            class="zd-table"
          >
            <el-table-column
              prop="beerName"
              label="酒款名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column prop="" label="已核销数量" align="center">
              <template #default="scope">
                {{ scope.row.scanCount || 0 }}
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div
          v-else
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100px;
          "
        >
          全系酒款
        </div>
      </div>
      <div style="flex: 1">
        <div class="zd-card">
          <h4>达成奖励</h4>
          <template v-if="activityInfo.activityType === 1">
            奖励啤酒币 * {{ activityInfo.activityRewardCount }}
          </template>
          <template v-if="activityInfo.activityType === 2">
            <el-table
              v-if="activityInfo.activityRewardGoods"
              :data="[activityInfo.activityRewardGoods]"
              style="width: 100%"
              class="zd-table"
            >
              <el-table-column
                prop="goodsName"
                label="商品名称"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="specs"
                label="规格"
                align="center"
              ></el-table-column>
              <el-table-column label="数量" align="center">
                <template #default="scope">{{
                  activityInfo.activityRewardCount
                }}</template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <div class="zd-card" style="padding-top: 10px">
          <el-descriptions :column="2">
            <el-descriptions-item label="已核销数量">{{
              sInfo.consumeCount || 0
            }}</el-descriptions-item>
            <el-descriptions-item label="待兑付数">{{
              sInfo.waitRewardCount || 0
            }}</el-descriptions-item>
            <el-descriptions-item label="参加门店数">{{
              sInfo.consumeBarCount || 0
            }}</el-descriptions-item>

            <el-descriptions-item label="已完成数">{{
              sInfo.completeCount || 0
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
    <div class="zd-card">
      <h4>参与门店明细</h4>
      <el-table :data="bars" style="width: 100%" class="zd-table">
        <el-table-column prop="barNumber" label="门店ID"></el-table-column>
        <el-table-column prop="barName" label="门店名称"></el-table-column>
        <el-table-column prop="barCity" label="门店城市"></el-table-column>
        <el-table-column prop="startDate" label="开始累积时间" align="center">
          <template #default="scope">
            {{ scope.row.startDate || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="endDate" label="截止累积时间" align="center">
          <template #default="scope">
            {{ scope.row.endDate || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="joinNum" label="已累积桶数" align="center">
          <template #default="scope">
            {{ scope.row.joinNum || 0 }}
          </template>
        </el-table-column>
        <el-table-column prop="remainNum" label="剩余数量" align="center">
          <template #default="scope">
            {{ scope.row.remainNum || 0 }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="150"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button
              v-if="scope.row.rewardType === 2 && scope.row.rewardStatus === 0"
              link
              type="primary"
              @click="handleDelivery(scope.row)"
              >发货</el-button
            >
            <el-button link type="primary" @click="handleDetail(scope.row)"
              >详细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="barsTotal > 0"
        :total="barsTotal"
        v-model:page="batchQuery.pageNum"
        v-model:limit="batchQuery.pageSize"
        @pagination="getBatchList"
      />
    </div>
    <el-drawer v-model="showDrawer" title="详情" size="680">
      <el-descriptions column="1" label-width="100px">
        <el-descriptions-item label="活动ID：">{{
          info.activityName
        }}</el-descriptions-item>
        <el-descriptions-item label="门店ID：">{{
          info.barNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="开始累积时间：">
          {{ info.startDate || "--" }}
        </el-descriptions-item>
        <el-descriptions-item label="截止累积时间：">
          {{ info.endDate || "--" }}
        </el-descriptions-item>

        <el-descriptions-item label="已累积桶数：">
          {{ info.joinNum || 0 }}
        </el-descriptions-item>
        <el-descriptions-item label="剩余数量：">
          {{ info.remainNum || 0 }}
        </el-descriptions-item>
      </el-descriptions>
      <el-table :data="consumeList" class="zd-table">
        <el-table-column
          label="核销产品名称"
          align="center"
          prop="beerName"
          show-overflow-tooltip
        />
        <el-table-column label="二维码ID" align="center" prop="skuSn" />
        <el-table-column label="核销时间" align="center" prop="scanTime" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              v-if="scope.row.scanStatus === 1"
              type="text"
              @click="handleRevoke(scope.row)"
            >
              撤销核销
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="consumeTotal > 0"
        :total="consumeTotal"
        v-model:page="consumeQuery.pageNum"
        v-model:limit="consumeQuery.pageSize"
        @pagination="getConsumeList"
      />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import {
  getActivity,
  getActivityConsumeList,
  cancelConsume,
  getActivityStatistics,
  getActivityBatchList,
} from "@/api/brewery/activity";
const { proxy } = getCurrentInstance();
const route = useRoute();
const activityInfo = ref({});
const activityId = ref("");
onMounted(() => {
  activityId.value = route.query.id;
  getActivityInfo();
  getStatistics();
  getBatchList();
});
function getActivityInfo() {
  getActivity(activityId.value).then((response) => {
    activityInfo.value = response.data;
  });
}

function handleDelivery(row) {
  console.log(row);
}

// 详细
const showDrawer = ref(false);
const consumeList = ref([]);
const consumeTotal = ref(0);
const consumeQuery = ref({
  pageNum: 1,
  pageSize: 5,
});
const info = ref({});
function handleDetail(row) {
  console.log(row);
  showDrawer.value = true;
  info.value = row;
  consumeQuery.value.activityId = row.activityId;
  consumeQuery.value.barId = row.barId;
  getConsumeList();
}
function getConsumeList() {
  getActivityConsumeList(consumeQuery.value).then((res) => {
    console.log(res);
    consumeList.value = res.rows;
    consumeTotal.value = res.total;
  });
}
// 撤销核销
function handleRevoke(row) {
  console.log(row);
  cancelConsume(row.id).then((res) => {
    proxy.$message.success("撤销成功");
    getConsumeList();
  });
}
const sInfo = ref({});
function getStatistics() {
  getActivityStatistics(activityId.value).then((res) => {
    console.log(res);
    sInfo.value = res.data;
  });
}
const barsTotal = ref(0);
const bars = ref([]);
const batchQuery = ref({
  pageNum: 1,
  pageSize: 5,
});
function getBatchList() {
  batchQuery.value.activityId = activityId.value;
  getActivityBatchList(batchQuery.value).then((res) => {
    console.log(res);
    bars.value = res.rows;
    barsTotal.value = res.total;
  });
}
</script>

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