<template>
  <div class="app-container">
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
      "
    >
      <div>
        <span>酒款管理</span><span>-查看详情（{{ beer.beerName }}）</span>
      </div>
      <div>
        <el-button
          type="primary"
          @click="handleAdd"
          v-hasPermi="['brewery:beer:add']"
          >新增酒款</el-button
        >
        <el-button type="primary" @click="handlePrintSetting"
          >打印模版配置</el-button
        >
      </div>
    </div>
    <div class="container">
      <div class="div1 zd-card">
        <h4>酒款信息</h4>
        <el-descriptions column="1" label-width="110px">
          <el-descriptions-item label="商品海报：">
            <el-image
              style="width: 60px; height: 60px; margin-right: 20px"
              :src="beer.cover"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[beer.cover]"
              :initial-index="4"
              fit="cover"
              title="点击查看大图"
              preview-teleported
            />
            <el-image
              v-if="beer.fisheyeLogo"
              style="width: 60px; height: 60px"
              :src="beer.fisheyeLogo"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[beer.fisheyeLogo]"
              :initial-index="4"
              fit="cover"
              title="点击查看大图"
              preview-teleported
            />
          </el-descriptions-item>
          <el-descriptions-item label="酒款名称：">{{
            beer.beerName
          }}</el-descriptions-item>
          <el-descriptions-item label="酒款风格：">{{
            beer.beerStyles
          }}</el-descriptions-item>
          <el-descriptions-item label="酒精度数 ABV：">
            {{ beer.beerAbv }}
          </el-descriptions-item>
          <el-descriptions-item label="原麦汁浓度：">
            {{ beer.beerOg }}
          </el-descriptions-item>
          <el-descriptions-item label="苦度值 IBU：">{{
            beer.beerIbus
          }}</el-descriptions-item>
          <el-descriptions-item label="条形码：">{{
            beer.barcode
          }}</el-descriptions-item>
          <el-descriptions-item label="初上市日期：">{{
            beer.launchDate
          }}</el-descriptions-item>
          <el-descriptions-item label="产品描述：">
            {{ beer.desc }}
          </el-descriptions-item>
        </el-descriptions>
        <div style="display: flex; justify-content: flex-end">
          <el-button type="primary" @click="handleEditInfo">编辑</el-button>
        </div>
      </div>
      <div class="div2 zd-card">
        <h4>营销策略</h4>
        <el-descriptions column="1" label-width="140px">
          <el-descriptions-item label="市售状态：">{{
            beer.onSale == 1 ? "在售款" : "已停产"
          }}</el-descriptions-item>
          <el-descriptions-item label="门店指导价：">{{
            beer.marketPrice
          }}</el-descriptions-item>
          <el-descriptions-item label="市售规格：">
            {{ beer.specs }}
          </el-descriptions-item>
          <el-descriptions-item label="扫码啤酒币赠送数量：">
            {{ beer.scanCoinCount }}
          </el-descriptions-item>
          <el-descriptions-item label="写酒评赠送数量：">{{
            beer.firstReviewCoin
          }}</el-descriptions-item>
        </el-descriptions>
        <div style="display: flex; justify-content: flex-end">
          <el-button type="primary" @click="handleEditSale">编辑</el-button>
        </div>
      </div>
      <div class="div3 zd-card">
        <h4>酒标签打印配置</h4>
        <el-descriptions column="1" label-width="100px">
          <el-descriptions-item label="原料以及辅料：">{{
            beer.materials || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="保质期：">{{
            beer.shelfLife || "--"
          }}</el-descriptions-item>
          <el-descriptions-item label="条形码：">
            {{ beer.barcode }}
          </el-descriptions-item>
          <el-descriptions-item label="净含量：">
            {{ beer.netContent || "--" }}
          </el-descriptions-item>
        </el-descriptions>
        <!-- <div style="display: flex; justify-content: flex-end">
          <el-button type="primary" @click="handleEditInfo">预览</el-button>
        </div> -->
      </div>
      <div class="div4 zd-card">
        <h4>进行中活动</h4>
        <el-table :data="activityList" class="zd-table" style="width: 100%">
          <el-table-column label="活动ID" prop="id"></el-table-column>
          <el-table-column
            label="活动名称"
            prop="activityName"
          ></el-table-column>
          <el-table-column label="活动类型" prop="activityType">
            <template #default="scope">
              {{ scope.row.activityType == 1 ? "定向" : "招募" }}
            </template>
          </el-table-column>
          <el-table-column label="开始时间" prop="startDate"></el-table-column>
          <el-table-column label="结束时间" prop="endDate"></el-table-column>
          <el-table-column label="操作" width="150px" align="center">
            <template #default="scope">
              <el-button type="text" @click="handleActivityDetail(scope.row)"
                >查看详细</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="activityTotal > 0"
          :total="activityTotal"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getBeerActivity"
        />
      </div>
      <div class="div5 zd-card">
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <h4>批次信息</h4>
          <!-- <el-date-picker v-model="date" type="date" placeholder="选择日期" /> -->
        </div>
        <el-table :data="batchList" class="zd-table" style="width: 100%">
          <el-table-column
            label="批次编号"
            prop="batchSn"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="打印数量"
            align="center"
            prop="printCount"
          ></el-table-column>
          <el-table-column label="打印日期" align="center" prop="createTime">
            <template #default="scope">
              {{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}
            </template>
          </el-table-column>
          <el-table-column
            label="产品生产日期"
            prop="productionDate"
          ></el-table-column>
          <el-table-column
            label="已核销数量"
            prop="checkCount"
            align="center"
          ></el-table-column>
          <el-table-column label="待核销数量" align="center">
            <template #default="scope">
              {{
                scope.row.printCount -
                scope.row.checkCount -
                scope.row.invalidCount
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="已失效数量"
            prop="invalidCount"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button type="text" @click="handleBatchDetail(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="batchTotal > 0"
          :total="batchTotal"
          v-model:page="queryBatch.pageNum"
          v-model:limit="queryBatch.pageSize"
          @pagination="getBeerBatch"
        />
      </div>
    </div>
    <!-- 批次详情 -->
    <el-drawer v-model="showDrawer" title="批次详情">
      <el-descriptions column="1" label-width="100px">
        <el-descriptions-item label="批次编号：">{{
          batchInfo.batchSn
        }}</el-descriptions-item>
        <el-descriptions-item label="打印数量：">{{
          batchInfo.printCount
        }}</el-descriptions-item>
        <el-descriptions-item label="打印日期：">
          {{ parseTime(batchInfo.createTime, "{y}-{m}-{d}") }}
        </el-descriptions-item>
        <el-descriptions-item label="产品生产日期：">
          {{ batchInfo.productionDate }}
        </el-descriptions-item>
        <el-descriptions-item label="已核销数量：">
          {{ batchInfo.checkCount || 0 }}
        </el-descriptions-item>
        <el-descriptions-item label="待核销数量：">
          {{
            batchInfo.printCount - batchInfo.checkCount - batchInfo.invalidCount
          }}
        </el-descriptions-item>
        <el-descriptions-item label="已失效数量：">
          {{ batchInfo.invalidCount || 0 }}
        </el-descriptions-item>
      </el-descriptions>
      <!-- <div
        style="
          display: flex;
          justify-content: flex-end;
          align-items: center;
          margin-bottom: 16px;
        "
      >
        核销状态：
        <el-select v-model="selectStatus" style="width: 100px">
          <el-option label="待核销" value="1"></el-option>
          <el-option label="已核销" value="2"></el-option>
          <el-option label="已失效" value="3"></el-option>
        </el-select>
      </div> -->

      <el-table
        :data="batchInfo.wyBeerQrcodeList"
        class="zd-table"
        style="width: 100%"
      >
        <el-table-column label="条码ID" prop="skuSn"></el-table-column>
        <el-table-column label="二维码图片" prop="qrcodeUrl" width="150px">
          <template #default="scope">
            <el-image
              style="width: 60px; height: 60px"
              :src="scope.row.qrcodeUrl"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[scope.row.qrcodeUrl]"
              :initial-index="4"
              fit="cover"
              title="点击查看大图"
              preview-teleported
            />
          </template>
        </el-table-column>
        <el-table-column label="核销状态" width="100px">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.qrcodeStatus === 1"
              >已核销</el-tag
            >
            <el-tag type="warning" v-else-if="scope.row.qrcodeStatus === 0"
              >未核销</el-tag
            >
            <el-tag type="info" v-else-if="scope.row.qrcodeStatus === 2"
              >已失效</el-tag
            >
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
    <el-dialog title="编辑酒款信息" v-model="open" width="800px" append-to-body>
      <el-form ref="beerRef" :model="form" :rules="rules" label-width="90px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品海报" prop="cover">
              <ImageUpload v-model="form.cover" :fileSize="5" :limit="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="鱼眼标" prop="fisheyeLogo">
              <ImageUpload
                v-model="form.fisheyeLogo"
                :fileSize="5"
                :limit="1"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="啤酒名称" prop="beerName">
              <el-input v-model="form.beerName" placeholder="请输入啤酒名称" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="啤酒编码" prop="beerSn">
              <el-input v-model="form.beerSn" placeholder="请输入啤酒编码" />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="啤酒风格" prop="beerStyles">
              <el-cascader
                v-model="form.beerStyles"
                :options="beerStyles"
                :show-all-levels="false"
                :props="{
                  label: 'styleName',
                  value: 'styleName',
                  emitPath: false,
                }"
                placeholder="请选择酒款风格"
                style="width: 400px"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="酒精度" prop="beerAbv">
              <el-input
                v-model="form.beerAbv"
                placeholder="请输入酒精度"
                oninput="value=value.replace(/[^0-9]/g,'')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原麦汁浓度" prop="beerOg">
              <el-input
                v-model="form.beerOg"
                placeholder="请输入原麦汁浓度"
                oninput="value=value.replace(/[^0-9]/g,'')"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="苦度值" prop="beerIbus">
              <el-input
                v-model="form.beerIbus"
                placeholder="请输入苦度值"
                oninput="value=value.replace(/[^0-9]/g,'')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="条形码" prop="barcode">
              <el-input v-model="form.barcode" placeholder="请输入条形码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="上市日期" prop="launchDate">
              <el-date-picker
                clearable
                v-model="form.launchDate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择上市日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="产品描述" prop="desc">
            <el-input
              v-model="form.desc"
              type="textarea"
              maxlength="140"
              show-word-limit
              placeholder="请输入产品描述"
              style="width: 680px"
              :autosize="{ minRows: 4, maxRows: 6 }"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancelEdit">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑营销信息 -->
    <el-dialog
      title="编辑营销信息"
      v-model="openSale"
      width="500px"
      append-to-body
    >
      <el-form ref="beerRef" :model="form" :rules="rules" label-width="140px">
        <el-form-item label="上架状态" prop="onSale">
          <el-radio-group v-model="form.onSale">
            <el-radio :label="1">在售款</el-radio>
            <el-radio :label="0">已停产</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="市场价" prop="marketPrice">
          <el-input v-model="form.marketPrice" placeholder="请输入市场价" />
        </el-form-item>
        <el-form-item label="规格" prop="specs">
          <el-radio-group v-model="form.specs">
            <el-radio label="桶装">桶装</el-radio>
            <el-radio label="罐装">罐装</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="扫码啤酒币赠送数量" prop="scanCoinCount">
          <el-input
            v-model="form.scanCoinCount"
            type="number"
            min="0"
            max="9999"
            placeholder="请填写整数（必填）"
            style="width: 880px"
          />
        </el-form-item>
        <el-form-item label="写酒评赠送数量" prop="firstReviewCoin">
          <el-input
            v-model="form.firstReviewCoin"
            type="number"
            min="0"
            max="9999"
            placeholder="请填写整数（选添）"
            style="width: 880px"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancelEdit">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  getBeer,
  delBeer,
  updateBeer,
  updateBeerIcons,
  updateBeerSaleStatus,
  activityListByBeerId,
  batchListByBeerId,
  styleList,
} from "@/api/brewery/beer";
import { getBatch } from "@/api/brewery/batch";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const beerId = ref("");
const beer = ref({});
// 获取酒款风格列表
function getBeerStyles() {
  styleList().then((res) => {
    console.log(res);
    beerStyles.value = res.data;
  });
}

onMounted(() => {
  beerId.value = route.query.id;
  queryParams.value.beerId = beerId.value;
  queryBatch.value.beerId = beerId.value;
  getBeerStyles();
  getBeerInfo();
  getBeerBatch();
  getBeerActivity();
});
// 获取酒款活动信息
const activityList = ref([]);
const activityTotal = ref(0);
const queryParams = ref({
  pageNum: 1,
  pageSize: 5,
  beerId: beerId.value,
});
function getBeerActivity() {
  activityListByBeerId(queryParams.value).then((res) => {
    activityList.value = res.rows;
    activityTotal.value = res.total;
  });
}
function handleActivityDetail(row) {
  router.push("/activity/activityInfo?id=" + row.id);
}
// 获取酒款批次信息
const batchList = ref([]);
const batchTotal = ref(0);
const queryBatch = ref({
  pageNum: 1,
  pageSize: 5,
  beerId: beerId.value,
});
function getBeerBatch() {
  batchListByBeerId(queryBatch.value).then((res) => {
    batchList.value = res.rows;
    batchTotal.value = res.total;
  });
}
// 获取酒款信息
function getBeerInfo() {
  getBeer(beerId.value).then((res) => {
    beer.value = res.data;
  });
}
function handleAdd() {
  router.push("/product/addBeer");
}
// 打印模版配置
function handlePrintSetting() {
  router.push("/setting/print");
}

// 编辑酒款信息
const open = ref(false);
const form = ref({});
const rules = ref({});
const beerStyles = ref([]);
function handleEditInfo() {
  form.value = {
    ...beer.value,
  };
  open.value = true;
}
function cancelEdit() {
  open.value = false;
  openSale.value = false;
  form.value = {};
}
function submitForm() {
  const params = {
    ...form.value,
  };
  updateBeer(params).then(() => {
    open.value = false;
    openSale.value = false;
    getBeerInfo();
  });
}
// 编辑营销信息
const openSale = ref(false);
function handleEditSale() {
  openSale.value = true;
  form.value = {
    ...beer.value,
  };
}
// 编辑商品图标
// 批次详情
const showDrawer = ref(false);
const batchInfo = ref({});
const selectStatus = ref(1); // 1待核销 2已核销 3已失效
function handleBatchDetail(row) {
  getBatch(row.id).then((res) => {
    showDrawer.value = true;
    batchInfo.value = res.data;
  });
}
</script>

<style scoped lang="scss">
// .container {
//   display: grid;
//   grid-template-columns: repeat(2, 1fr);
//   grid-template-rows: repeat(4, 1fr);
//   grid-column-gap: 14px;
//   grid-row-gap: 0px;
// }
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  grid-column-gap: 14px;
  grid-template-areas:
    "div1 div2"
    "div1 div3"
    "div4 div4"
    "div5 div5";
}

.div1 {
  grid-area: div1;
}

.div2 {
  grid-area: div2;
}

.div3 {
  grid-area: div3;
}

.div4 {
  grid-area: div4;
}

.div5 {
  grid-area: div5;
}
.card {
  background-color: #fff;
  border-radius: 4px;
}
</style>
