<template>
  <div class="data-list" v-loading="loading" element-loading-text="加载中...">
    <el-table
      :data="dataList"
      style="width: 100%"
      header-row-class-name="headerBg"
      empty-text="没有文档信息"
    >
      <el-table-column prop="id" label="ID" align="center" width="80" />
      <el-table-column
        prop="title"
        label="文档名称"
        align="left"
        min-width="180"
      />
      <el-table-column
        prop="user_name"
        label="创建人"
        align="center"
        width="150"
      />
      <el-table-column
        prop="type_name"
        label="所属分类"
        align="center"
        width="150"
      />
      <el-table-column
        prop="create_time"
        label="创建时间"
        align="center"
        width="150"
      />
      <el-table-column
        prop="status"
        label="文档状态"
        align="center"
        width="150"
      >
        <template #default="scope">
          <div v-if="scope.row.status == 5">启用</div>
          <div v-if="scope.row.status == 6">停用</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" :width="editWidth()">
        <template #default="scope">
          <div class="btns">
            <el-button
              type="primary"
              size="small"
              v-if="allowEdit"
              @click="btnEdit(scope.row.id)"
              ><svg-icon icon-class="edit" />编辑</el-button
            >

            <el-button
              type="danger"
              size="small"
              v-if="allowDelete"
              @click="btnDelete(scope.row.id)"
              ><svg-icon icon-class="delete" />删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="page-info">
      <el-pagination
        :currentPage="queryForm.page"
        :page-size="queryForm.pageSize"
        :total="recordCount"
        :page-count="pageTotal"
        background
        layout="prev, pager, next"
        @current-change="ChangePage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { pageDocument, deleteDocument } from "@/api/document";
export default {
  props: {
    queryForm: {
      type: Object,
      default: () => {
        return {
          page: 1,
          pageSize: 10,
          title: "",
          category_id: "",
          status: "",
        };
      },
    },
    allowEdit: {
      type: Boolean,
      default: false,
    },
    allowDelete: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    queryForm: {
      handler: function (val) {
        this.search();
      },
      // immediate: true,//立即执行
      deep: true,
    },
  },
  data() {
    return {
      loading: false,
      dialogVisible: false, //控制产品审核
      currentDataId: 0,
      recordCount: 0,
      pageTotal: 1,
      dataList: [],
      currentData: {},
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    editWidth() {
      if (this.allowDelete && this.allowEdit) {
        return 200;
      }
      if (this.allowDelete || this.allowEdit) {
        return 120;
      }
      return 100;
    },

    onFocusVal(e) {
      let _this = this;
      _this.currentDataId = e.target.dataset.id;
    },

    onChangeVal(e) {
      let _this = this;
      let par = {
        id: _this.currentDataId,
        val: e,
      };
    },

    btnDelete(e) {
      let _this = this;
      let par = {
        id: e,
      };
      _this
        .$confirm("您是否确认删除该记录？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then((res) => {
          // console.log("AAA")
          deleteDocument(par).then((res) => {
            _this.search();
          });
        })
        .catch(() => {});
    },

    searchData() {
      let _this = this;
      _this.dialogVisible = false;
      _this.search();
    },

    //编辑
    btnEdit(e) {
      let _this = this;
      let a = document.createElement("a");
      a.href = "#/document/create?articleId=" + e+"&type=document"; // 使用 hash
      a.target = "_blank";
      a.click();

       //this.$router.push({path:"/document/create",query:{articleId:e}})
    },

    handleClose() {
      let _this = this;
      _this.currentData = {};
      _this.dialogVisible = false;
    },

    //搜索
    search() {
      let _this = this;
      _this.loading = true; // Set loading to true before API call
      pageDocument(_this.queryForm)
        .then((res) => {
          if (!res) {
            _this.loading = false; // Set loading to false if no response
            return;
          }
          _this.dataList = res.data.dataList.filter(
            (el) => el.is_template == 0
          );
          _this.recordCount = res.data.totalRecord;
          _this.pageTotal = res.data.pageTotal;
          _this.loading = false; // Set loading to false after data is processed
        })
        .catch(() => {
          _this.loading = false; // Set loading to false if there's an error
        });
    },
    //修改分页
    ChangePage(e) {
      let _this = this;
      _this.queryForm.page = e;
      _this.search();
    },
  },
};
</script>

<style lang="scss">
@import "./dataList.scss";
</style>
