<template>
  <div class="app-container">
    <div class="top-bar">
      <SearchBar :config="searchConfig" @search="search" @reset="reset" />
      <el-button type="primary" @click.native="handleOperation({ type: 'add' })" icon="el-icon-s-promotion">
        发布</el-button>
    </div>
    <TablePage :data="list.records" :tableTitle="tableTitle" :operates="tableOperates">
      <template v-slot:status="data">
        <el-popconfirm :title="getStatusTitle(data.scope.status)" @onConfirm="handleChangeStatus(data.scope)">
          <el-switch slot="reference" :value="Boolean(Number(data.scope.status))"></el-switch>
        </el-popconfirm>
      </template>

      <template v-slot:operates="scope">
        <TableOperation :operations="tableOperations" :rawData="scope.scope.row" @handleOperation="handleOperation">
        </TableOperation>
      </template>
    </TablePage>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="Number(list.current)" :page-sizes="[10, 20, 40, 50]" :page-size="Number(list.size)"
      layout="total, sizes, prev, pager, next, jumper" :total="Number(list.total)" class="pagination">
    </el-pagination>
    <InfoEditDialog :visible="drawerVisible" :form="form" @handleClose="handleClose" @refresh="loadData" />
  </div>
</template>

<script>
  import TablePage from "@/components/Table/TablePage.vue";
  import TableOperation from "@/components/Table/TableOperation.vue";
  import { title, operates, operations } from "./config";
  import { editLiterature, deleteLt } from "@/api/literature";
  import InfoEditDialog from "./components/InfoEditDialog";
  import SearchBar from "@/components/SearchBar";
  import { downloadFile, previewFile, downloadBlob } from "@/utils/file";

  export default {
    components: {
      TablePage,
      TableOperation,
      InfoEditDialog,
      SearchBar,
    },
    data() {
      return {
        list: {
          records: [],
          size: 10,
          current: 1,
          total: 0,
        },
        searchForm: {
          name: "",
          status: "",
        },
        searchConfig: [
          {
            prop: "name",
            type: "input",
            label: "文献名称",
          },
          {
            prop: "authors",
            type: "input",
            label: "作者",
          },
          {
            prop: "status",
            type: "select",
            label: "状态",
            selectOptions: [
              {
                label: "已上架",
                value: "1",
              },
              {
                label: "已下架",
                value: "0",
              },
            ],
          },
        ],
        drawerVisible: false,
        form: {
          name: "", //名称
          authors: "", //作者
          date: "", //日期（出版年份、发布日期）
          source: "", //文献来源
          status: 1, //上下架状态
          remark: "", //备注
        },
      };
    },

    computed: {
      tableTitle() {
        return title;
      },
      tableOperates() {
        return operates;
      },
      tableOperations() {
        return operations;
      },
      getStatusTitle(status) {
        return (status) => {
          if (Number(status)) {
            return "是否确定要下架？";
          } else {
            return "是否确定要上架？";
          }
        };
      },
    },
    mounted() {
      this.loadData();
    },
    methods: {
      async search(form) {
        var params = {
          page: this.list.current,
          limit: this.list.size,
          ...form,
        };
        if (params.status == "") {
          delete params.status;
        }
        const res = await this.$store.dispatch("dict/getLtList", {
          hasPer: true,
          params,
        });
        if (res.code == 0) {
          this.list = res.data;
        }
      },

      reset() {
        this.loadData();
      },

      //   加载表格数据
      async loadData() {
        var params = {
          page: this.list.current,
          limit: this.list.size,
        };
        const res = await this.$store.dispatch("dict/getLtList", {
          hasPer: true,
          params,
        });
        if (res.code == 0) {
          this.list = res.data;
        }
      },
      async handleOperation(value, row) {
        console.log("handleOperation", value, row);
        switch (value.type) {
          case "add":
            this.drawerVisible = true;
            break;
          case "view":
            if (row.files && row.files.length > 0 && row.files[0].url) {
              previewFile(row.files[0].url, row.name);
            } else {
              this.$message.info("暂无文献附件！");
            }
            break;
          case "download":
            if (row.files && row.files.length > 0 && row.files[0].url) {
              let url = '/files' + row.files[0].url.split('files')[1]
              downloadBlob(url, row.name, "pdf");
            } else {
              this.$message.info("暂无文献！");
            }
            break;
          case "edit":
            this.form = row;
            this.drawerVisible = true;
            break;
          case "delete":
            let deleteRes = await deleteLt([row.literatureId]);
            if (deleteRes.code == 0) {
              this.$message.success("删除成功！");
              this.loadData();
            }
            break;
        }
      },

      async handleChangeStatus(row) {
        console.log("status", row);
        const { status } = row;
        let newStatus = status === "0" ? "1" : "0";
        const params = {
          ...row,
          status: newStatus,
        };
        let res = await editLiterature(params);
        if (res.code == 0) {
          this.loadData();
          this.$message.success("修改成功！");
        }
      },

      // 改变页容量
      handleSizeChange(value) {
        this.list.size = value;
        this.loadData();
      },

      // 改变当前显示页
      handleCurrentChange(value) {
        this.list.current = value;
        this.loadData();
      },

      // 关闭Dialog
      handleClose() {
        this.drawerVisible = false;
        this.form = {
          status: 1,
        };
      },
    },
  };
</script>

<style lang="scss" scoped>
  .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .pagination {
    margin: 16px;
  }

  .el-button {
    margin-bottom: 22px;
  }

  ::v-deep .el-card__header {
    padding: 10px 20px;
    font-weight: bold;
  }
</style>