<template>
  <Dialog
    :is-dialog-exist="isDialog"
    :title="dialogTitle"
    :sub-title="'笔趣阁'"
    :dialog-style="dialogStyle"
    @close-dialog="handleClose"
  >
    <el-container>
      <el-main>
        <el-form
          v-if="isSearchVisible"
          ref="formData"
          label-width="auto"
          :model="formData"
          inline
        >
          <div class="div-main">
            <el-form-item label="书名" prop="name">
              <el-input v-model="formData.name" placeholder="请输入" />
            </el-form-item>

            <el-form-item label="简介" prop="book_intro">
              <el-input v-model="formData.book_intro" placeholder="请输入" />
            </el-form-item>
            <el-form-item label=" ">
              <el-button type="primary" size="mini" @click="onSubmit">提交</el-button>
              <el-button type="info" plain size="mini" @click="resetForm('formData')"
                >重置</el-button
              >
            </el-form-item>
          </div>
        </el-form>

        <!-- 数据 -->
        <div class="table-container">
          <el-table
            v-loading="tableDataLoading"
            :data="tableData"
            border
            fit
            tooltip-effect="dark"
          >
            <el-table-column type="index" label="序号" align="center" width="55" />
            <el-table-column label="书名" align="center" prop="book_name" />
            <el-table-column label="分类" align="center">
              <template slot-scope="scope">{{ booksItem.category_name }}</template>
            </el-table-column>
            <el-table-column label="书源" align="center">
              <template slot-scope="scope">笔趣阁</template>
            </el-table-column>
            <el-table-column label="简介" align="center" prop="book_intro" />
          </el-table>
        </div>
      </el-main>
    </el-container>
    <el-footer>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20, 30]"
        :page-size="limit"
        layout="total, prev, pager, next, sizes, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-footer>
  </Dialog>
</template>

<script>
import Dialog from "@/components/Dialog/index";

import { getCategoryShow } from "@/api/sort-management";
export default {
  components: { Dialog },
  props: {
    isDialog: {
      type: Boolean,
      default: false,
    },
    mod: {
      type: Object,
      default: () => {},
    },
    booksItem: {
      type: Object,
      default: () => {
        return {
          btn5Data: {
            name: "",
          },
        };
      },
    },
  },
  watch: {
    mod(value) {
      if (value) {
        this.limit = 20;
        this.currentPage = 1;
        this.totalCount = 0;
        this._baseRequest();
      }
    },
  },

  data() {
    return {
      // 分页数据
      limit: 20,
      currentPage: 1,
      totalCount: 0,
      // dialog样式
      dialogStyle: {
        "--dialog-width": "1000px",
        "--dialog-height": "712px",
        "--title-height": "51px",
      },
      dialogTitle: "查看书籍",
      dialogSubTitle: "笔趣阁",
      isSearchVisible: true,
      tableDataLoading: true,
      // 表格数据
      tableData: [],
      formData: {
        name: "",
        book_intro: "",
      },
    };
  },
  methods: {
    _baseRequest() {
      this.tableData = [];
      this.tableDataLoading = true;
      getCategoryShow(this.mod.id, {
        source_platform: 1,
        page: this.currentPage,
        page_size: this.limit,
        name: this.formData.name,
        desc: this.formData.book_intro,
      }).then((res) => {
        this.tableData = res.data.data;
        this.totalCount = res.data.total;
        this.tableDataLoading = false;
      });
    },
    // 提交搜索操作
    onSubmit() {
      this._baseRequest();

    },
    // 重置操作
    resetForm(val) {
      this.$refs[val].resetFields();
      this._baseRequest();
    },

    handleClose() {
      this.$emit("handle-close");
    },

    handleSizeChange(val) {
      this.limit = val;
      this._baseRequest();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this._baseRequest();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: calc(100% - 65px);

  .el-main {
    width: 100%;

    .div-main {
      display: flex;
      justify-content: space-between;
      flex-flow: row wrap;
      padding: 0 5%;
    }
    .div-btn {
      margin-bottom: 10px;
    }
    .pagination-container {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.el-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0;
  z-index: 99;
}

</style>
