<template>
  <!-- <div>啤酒币推广</div> -->
  <div class="app-container">
    <div class="top-box">
      <div class="statistic">
        <div class="title">已发放未使用啤酒币数量</div>
        <div class="value">{{ TJData.remaining || 0 }}</div>
        <svg-icon icon-class="beerReview" class="icon"></svg-icon>
      </div>
      <div class="statistic">
        <div class="title">参与门店用户数</div>
        <div class="value">{{ TJData.bars || 0 }}</div>
        <svg-icon icon-class="fangkuai" class="icon"></svg-icon>
      </div>
      <div class="statistic">
        <div class="title">待兑付订单数</div>
        <div class="value">{{ TJData.waitingOrders || 0 }}</div>
        <svg-icon icon-class="biaoge" class="icon"></svg-icon>
      </div>
      <div class="statistic">
        <div class="title">发布商品数量</div>
        <div class="value">{{ TJData.goodsCount || 0 }}</div>
        <svg-icon icon-class="shizhong" class="icon"></svg-icon>
      </div>
    </div>
    <div class="zd-card">
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <h4>已发布兑换商品</h4>
        <el-button type="primary" @click="handleAdd">新增兑换商品</el-button>
      </div>
      <el-table v-loading="loading" :data="goodsList" class="zd-table">
        <el-table-column label="商品名称" align="left" prop="goodsName">
          <template #default="scope">
            <div style="display: flex; align-items: center; gap: 16px">
              <el-image
                style="width: 60px; height: 60px"
                :src="scope.row.goodsCover"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[scope.row.goodsCover]"
                :initial-index="4"
                fit="cover"
                title="点击查看大图"
                preview-teleported
              />
              <div>
                <div>名称：{{ scope.row.goodsName }} {{ scope.row.specs }}</div>
                <div>编码：{{ scope.row.goodsSn }}</div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="啤酒币兑换数量"
          align="center"
          prop="redeemedNum"
        >
          <template #default="scope">
            <template v-if="currentGoodsCoinId === scope.row.id">
              <el-input
                v-model="goodsCoinCount"
                type="number"
                placeholder="请输入数量"
                style="width: 80px"
              />
              <el-button link type="primary" @click="saveGoodsCoinCount"
                >保存</el-button
              >
              <el-button link @click="cancelGoodsCoin">取消</el-button>
            </template>
            <template v-else>
              <span>{{ scope.row.redeemedNum }}</span>
              <el-icon
                size="16"
                class="edit-icon"
                @click="handleGoodsIcons(scope.row)"
                ><EditPen
              /></el-icon>
            </template>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" align="center" prop="createTime" />
        <el-table-column
          label="操作"
          align="center"
          width="200"
          fixed="right"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="handleSaleStatus(scope.row)"
              >{{ scope.row.onSale === 1 ? "下架" : "上架" }}</el-button
            >
            <el-button link type="primary" @click="handleHistory(scope.row)"
              >兑换历史</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <div class="zd-card">
      <h4>参与门店明细</h4>
      <el-table :data="bars" class="zd-table">
        <el-table-column label="门店ID" align="center" prop="barCode" />
        <el-table-column label="门店所在城市" align="center" prop="barCity" />
        <el-table-column
          label="未使用啤酒币数量"
          align="center"
          prop="balance"
        />
        <el-table-column
          label="已使用啤酒币数量"
          align="center"
          prop="usedNum"
        />
        <el-table-column
          label="兑换历史订单数量"
          align="center"
          prop="exchangedOrderNum"
        />
        <el-table-column label="操作" align="center" width="200" fixed="right">
          <template #default="scope">
            <el-button link type="primary" @click="handleBarDetail(scope.row)"
              >查看详细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="barTotal > 0"
        :total="barTotal"
        v-model:page="barQuery.pageNum"
        v-model:limit="barQuery.pageSize"
        @pagination="getBeerCoinBars"
      />
    </div>
    <el-drawer v-model="showDrawer" title="批次详情">
      <el-descriptions column="1" label-width="100px">
        <el-descriptions-item label="批次编号：">{{
          barInfo.batchSn
        }}</el-descriptions-item>
        <el-descriptions-item label="打印数量：">{{}}</el-descriptions-item>
        <el-descriptions-item label="打印日期："> {{}} </el-descriptions-item>
        <el-descriptions-item label="产品生产日期：">
          {{}}
        </el-descriptions-item>
        <el-descriptions-item label="已核销数量：">
          {{ barInfo.checkCount }}
        </el-descriptions-item>
        <el-descriptions-item label="待核销数量："> {{}} </el-descriptions-item>
        <el-descriptions-item label="已失效数量：">
          {{ barInfo.invalidCount }}
        </el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </div>
</template>

<script setup>
import { beerCoinData, beerCoinBars } from "@/api/brewery/activity";
import {
  listGoods,
  updateGoodsIcons,
  updateGoodsSaleStatus,
} from "@/api/brewery/goods";
const router = useRouter();
const { proxy } = getCurrentInstance();
onMounted(() => {
  getTJData();
  getBeerCoinBars();
  getList();
});
const TJData = ref({});
function getTJData() {
  beerCoinData().then((res) => {
    TJData.value = res.data;
  });
}
function handleAdd() {
  router.push("/product/commodity/add");
}
const goodsList = ref([]);
const total = ref(0);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
});
const loading = ref(false);
/** 查询兑换商品列表 */
function getList() {
  loading.value = true;
  listGoods(queryParams.value).then((response) => {
    goodsList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
// 修改兑换啤酒数
const currentGoodsCoinId = ref(null);
const goodsCoinCount = ref(0);
function handleGoodsIcons(row) {
  currentGoodsCoinId.value = row.id;
  goodsCoinCount.value = row.redeemedNum;
}
function saveGoodsCoinCount() {
  updateGoodsIcons({
    goodsId: currentGoodsCoinId.value,
    icons: goodsCoinCount.value,
  }).then(() => {
    proxy.$modal.msgSuccess("修改成功");
    currentGoodsCoinId.value = null;
    goodsCoinCount.value = 0;
    getList();
  });
}
function cancelGoodsCoin() {
  currentGoodsCoinId.value = null;
  goodsCoinCount.value = 0;
}
//==========//==========
const bars = ref([]);
const barTotal = ref(0);
const barQuery = ref({
  pageNum: 1,
  pageSize: 5,
});
function getBeerCoinBars() {
  beerCoinBars(barQuery.value).then((res) => {
    bars.value = res.rows;
    barTotal.value = res.total;
  });
}
/** 商品上架按钮操作 */
function handleSaleStatus(row) {
  let str = "";
  if (row.onSale == 1) {
    str = "下架";
  } else {
    str = "上架";
  }

  proxy.$modal
    .confirm("是否确认" + str + '编号为"' + row.id + '"的数据项？')
    .then(() => {
      updateGoodsSaleStatus({
        goodsId: row.id,
        state: row.onSale == 1 ? 0 : 1,
      }).then(() => {
        getList();
        proxy.$modal.msgSuccess(`${str}成功`);
      });
    })
    .catch(() => {});
}
function handleHistory(row) {
  router.push("/product/commodity/history?goodsId=" + row.id);
}

//   门店详情
const barInfo = ref({});
const showDrawer = ref(false);
function handleBarDetail(row) {
  showDrawer.value = true;
  console.log(row);
}
</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;
    }
  }
}
.edit-icon {
  margin-left: 4px;
  vertical-align: middle;
  cursor: pointer;
}
</style>
