<template>
  <div class="app-container">
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
      "
    >
      <span>累积返利</span>
      <el-button
        type="primary"
        @click="handleAdd"
        v-hasPermi="['brewery:goods:add']"
        >发布返利活动</el-button
      >
    </div>
    <div class="top-box">
      <div class="statistic">
        <div class="title">招募中活动数量</div>
        <div class="value" style="font-size: 18px">
          <span style="font-size: 14px; margin-right: 10px">指定活动：</span
          >{{ TJData.qualifiedCount || 0 }}
        </div>
        <div class="value" style="font-size: 18px">
          <span style="font-size: 14px; margin-right: 10px">招募活动：</span
          >{{ TJData.publicCount || 0 }}
        </div>
        <svg-icon icon-class="beerReview" class="icon"></svg-icon>
      </div>
      <div class="statistic">
        <div class="title">参与中门店数</div>
        <div class="value">{{ TJData.barCount || 0 }}</div>
        <svg-icon icon-class="fangkuai" class="icon"></svg-icon>
      </div>
      <div class="statistic">
        <div class="title">待兑付订单数</div>
        <div class="value">{{ TJData.waitingClaimCount || 0 }}</div>
        <svg-icon icon-class="biaoge" class="icon"></svg-icon>
      </div>
      <div class="statistic">
        <div class="title">已兑付订单数</div>
        <div class="value">{{ TJData.redeemedCount || 0 }}</div>
        <svg-icon icon-class="shizhong" class="icon"></svg-icon>
      </div>
    </div>
    <div class="zd-card">
      <el-tabs
        v-model="stage"
        class="demo-tabs"
        style="padding-top: 10px"
        @tab-click="handleStageClick"
      >
        <el-tab-pane label="招募中活动" :name="1"></el-tab-pane>
        <el-tab-pane label="招募结束待结案活动" :name="2"></el-tab-pane>
        <el-tab-pane label="已结案活动" :name="3"></el-tab-pane>
      </el-tabs>
      <el-table :data="activityList" class="zd-table" style="width: 100%">
        <el-table-column label="活动ID" align="center" prop="id" width="80px" />
        <!-- <el-table-column label="活动发起方" align="center" prop="" /> -->
        <el-table-column
          label="招募开始时间"
          align="center"
          prop="startDate"
          width="110px"
        />
        <el-table-column
          label="招募结束时间"
          align="center"
          prop="endDate"
          width="110px"
        />
        <el-table-column label="活动状态" align="center" prop="activityStatus">
          <template #default="scope">
            <span v-if="scope.row.activityStatus === 0">已中止</span>
            <span v-if="scope.row.activityStatus === 1">进行中</span>
          </template>
        </el-table-column>
        <el-table-column label="累计时间" align="center" prop="duration" />
        <el-table-column
          label="发布区域"
          align="center"
          prop="city"
          show-overflow-tooltip
        />
        <el-table-column label="已核销数量" align="center" prop="claimCount" />
        <el-table-column
          label="参与门店数"
          align="center"
          prop="joinBarCount"
        />
        <el-table-column
          label="待兑付数"
          align="center"
          prop="waitingClaimCount"
        />
        <el-table-column
          label="已完成数"
          align="center"
          prop="finishedClaimCount"
        />
        <el-table-column
          label="操作"
          align="center"
          width="120px"
          fixed="right"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button link type="primary" @click="handleInfo(scope.row)"
              >详细</el-button
            >
            <el-button
              v-if="scope.row.activityStatus === 1"
              link
              type="primary"
              @click="handleAbort(scope.row)"
              >中止招募</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        @pagination="getRecruitList"
      />
    </div>
    <div class="zd-card">
      <h4>指定门店ID活动明细</h4>
      <el-table :data="DXList" class="zd-table" style="width: 100%">
        <el-table-column label="活动ID" align="center" prop="activityName" />
        <el-table-column label="门店ID" align="center" prop="barNumber">
        </el-table-column>
        <el-table-column
          label="开始时间"
          align="center"
          prop="startDate"
          width="110px"
        />
        <el-table-column
          label="结束时间"
          align="center"
          prop="endDate"
          width="110px"
        />
        <el-table-column label="酒款范围" align="center" prop="beerScope">
          <template #default="scope">
            <span v-if="scope.row.beerScope === 1">指定酒款</span>
            <span v-if="scope.row.beerScope == 0">不限</span>
          </template>
        </el-table-column>
        <el-table-column
          label="达成奖励"
          align="center"
          prop="activityRewardCount"
        />
        <el-table-column
          label="累积目标数"
          align="center"
          prop="activityTarget"
        />
        <el-table-column label="达成进度" align="center" prop="progress" />
        <el-table-column label="活动状态" align="center" prop="activityStatus">
          <template #default="scope">
            <span v-if="scope.row.activityStatus === 0">无效</span>
            <span v-if="scope.row.activityStatus === 1">有效</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="120px"
          fixed="right"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button link type="primary" @click="handleClaim(scope.row)"
              >兑付</el-button
            >
            <el-button link type="primary" @click="handleDetail(scope.row)"
              >详细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="dxTotal > 0"
        :total="dxTotal"
        v-model:page="DXQuery.pageNum"
        v-model:limit="DXQuery.pageSize"
        @pagination="getDXList"
      />
    </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="酒款范围：">
          <span v-if="info.beerScope === 1">指定酒款</span>
          <span v-if="info.beerScope == 0">不限</span>
        </el-descriptions-item>
        <el-descriptions-item label="累积目标数：">
          {{ info.activityTarget }}
        </el-descriptions-item>
        <el-descriptions-item label="达成奖励：">
          {{ info.activityRewardCount }}
        </el-descriptions-item>
      </el-descriptions>
      <div
        style="display: flex; justify-content: flex-end; margin-bottom: 16px"
      >
        <el-button type="primary" @click="handleAddTime"
          >延长活动时间</el-button
        >
      </div>
      <el-table :data="consumeList" class="zd-table">
        <el-table-column label="核销产品名称" align="center" prop="beerName" />
        <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>
    <el-dialog
      title="延长活动时间"
      v-if="showExtendTime"
      v-model="showExtendTime"
      width="500px"
    >
      <el-form :model="extendForm" label-width="100px">
        <el-form-item label="延长时间">
          <el-date-picker
            v-model="extendForm.extendTime"
            type="date"
            placeholder="选择延长时间"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleConfirm">确定</el-button>
          <el-button @click="showExtendTime = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  activityData,
  listActivity,
  stopActivity,
  extendActivity,
  getActivityConsumeList,
  cancelConsume,
} from "@/api/brewery/activity";
import { getCurrentInstance } from "vue";
import { ref, reactive, onMounted } from "vue";
const router = useRouter();
const { proxy } = getCurrentInstance();
onMounted(() => {
  getTJData();
  getDXList();
  getRecruitList();
});
function handleAdd() {
  router.push("/activity/addRebate");
}
const TJData = ref({});
function getTJData() {
  activityData().then((res) => {
    TJData.value = res.data;
  });
}

// 招募中
const activityList = ref([]);
const total = ref(0);
const query = ref({
  activityType: 2,
  pageNum: 1,
  pageSize: 5,
});
function getRecruitList() {
  listActivity(query.value).then((res) => {
    activityList.value = res.rows;
    total.value = res.total;
  });
}
const stage = ref(1);
function handleStageClick() {
  query.value.activityType = 2;
  query.value.pageNum = 1;
  query.value.stage = stage.value;
  getRecruitList();
}
// 招募活动详情
function handleInfo(row) {
  console.log(row);
  router.push("/activity/activityInfo?id=" + row.id);
}

// 中止
function handleAbort(row) {
  console.log(row);
  proxy.$modal
    .confirm('是否确认中止活动编号为"' + row.id + '"的数据项？')
    .then(() => {
      stopActivity(row.id).then(() => {
        getRecruitList();
      });
    });
}
// 指定门店ID（定向）
const DXList = ref([]);
const dxTotal = ref(0);
const DXQuery = ref({
  activityType: 1,
  pageNum: 1,
  pageSize: 5,
});
function getDXList() {
  listActivity(DXQuery.value).then((res) => {
    if (res.rows && res.rows.length > 0) {
      DXList.value = res.rows.map((item) => {
        if (item.activityTarget && item.claimCount != null) {
          item.progress =
            item.activityTarget > 0
              ? (item.claimCount / item.activityTarget).toFixed(2) * 100 + "%"
              : 0 + "%";
        }

        return item;
      });
    }

    dxTotal.value = res.total;
  });
}

// 活动详情
const showDrawer = ref(false);

// 兑付
function handleClaim(row) {
  console.log(row);
  // router.push("/activity/claim");
}

// 详细
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.id;
  consumeQuery.value.barId = row.barIds[0];
  getConsumeList();
}
function getConsumeList() {
  getActivityConsumeList(consumeQuery.value).then((res) => {
    console.log(res);
    consumeList.value = res.rows;
    consumeTotal.value = res.total;
  });
}

// 延长活动时间
const extendTime = ref("");
const extendForm = ref({});
const showExtendTime = ref(false);
function handleAddTime() {
  showExtendTime.value = true;
}
function handleConfirm() {
  console.log("延长活动时间");
  extendActivity({
    activityId: info.value.id,
    extendTime: extendForm.value.extendTime,
  }).then((res) => {
    console.log(res);
    showExtendTime.value = false;
  });
}

// 撤销核销
function handleRevoke(row) {
  console.log(row);
  cancelConsume(row.id).then((res) => {
    proxy.$message.success("撤销成功");
    getConsumeList();
  });
}
</script>

<style scoped lang="scss">
.top-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  .statistic {
    min-width: 24%;
    height: 161px;
    box-sizing: border-box;
    padding: 16px;
    border-radius: 14px;
    opacity: 1;
    background: #ffffff;
    box-shadow: 6px 6px 54px 0px rgba(0, 0, 0, 0.05);
    position: relative;
    .title {
      font-family: Nunito Sans;
      font-size: 16px;
      font-weight: 600;
      color: #202224;
      margin-bottom: 12px;
    }
    .value {
      font-family: Nunito Sans;
      font-size: 28px;
      font-weight: bold;
      color: #202224;
    }
    .icon {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 60px;
      height: 60px;
    }
  }
}
</style>
