<template>
  <div class="app-container">
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
      "
    >
      <span>打印模版</span>
    </div>
    <el-button type="primary" @click="handleAdd">新建模板</el-button>
    <div class="box-container">
      <div class="box" v-for="(item, index) in list" :key="index">
        <div class="bottom">
          <div class="title">{{ item.templateName }}</div>
          <div>
            <el-button link type="primary" @click="handleEdit(item.id)"
              >编辑</el-button
            >
            <!-- <el-button link type="primary" @click="handleView(item.id)"
              >查看</el-button
            > -->
            <el-button link type="danger" @click="handleDelete(item.id)"
              >删除</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import {
  listBreweryTagPrintTemplate,
  delBreweryTagPrintTemplate,
} from "@/api/brewery/printTemplate";
const router = useRouter();
const { proxy } = getCurrentInstance();
function handleAdd() {
  router.push("/setting/templateInfo");
}
onMounted(() => {
  getList();
});
const queryForm = ref({
  pageNum: 1,
  pageSize: 10,
});
const list = ref([]);
const total = ref(0);
function getList() {
  listBreweryTagPrintTemplate(queryForm.value).then((res) => {
    console.log(res);
    list.value = res.rows;
    total.value = res.total;
  });
}
// 编辑
function handleEdit(id) {
  router.push({
    path: "/setting/templateInfo",
    query: { id },
  });
}
// 删除
function handleDelete(id) {
  console.log(id);
  proxy.$modal
    .confirm('是否确认删除品牌方广告图编号为"' + id + '"的数据项？')
    .then(() => {
      delBreweryTagPrintTemplate(id).then(() => {
        getList();
        proxy.$message.success("删除成功");
      });
    })
    .catch(() => {});
}
</script>

<style scoped lang="scss">
.box-container {
  display: flex;
  justify-content: flex-start;
  margin-top: 16px;
  .box {
    border-radius: 4px;
    background-color: #fff;
    width: 200px;
    height: 200px;
    position: relative;
    margin: 10px;
    .bottom {
      position: absolute;
      bottom: 0;
      // height: 50px;
      background-color: #fff;
      padding: 8px;
      .title {
        font-size: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin-bottom: 6px;
      }
    }
  }
}
</style>
