<template>
  <Dialog
    :is-dialog-exist="isBooksShow"
    :title="dialogTitle"
    :dialog-style="dialogStyle"
    @close-dialog="handleClose"
  >
    <el-container>
      <el-main>
        <el-form 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="value" style="margin: 0 auto">
              <el-select v-model="formData.value" placeholder="请选择">
                <el-option
                  v-for="item in booksData"
                  :key="item.value"
                  :label="item.category_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="简介" prop="book_intro">
              <el-input v-model="formData.book_intro" placeholder="请输入" />
            </el-form-item>
          </div>

          <div>
            <el-form-item label=" ">
              <el-button type="primary" size="mini" @click="onSubmit"> 提交 </el-button>
              <el-button type="info" plain size="mini" @click="resetForm">
                重置
              </el-button>
            </el-form-item>
          </div>
        </el-form>
        <!-- 数据 -->
        <div class="table-container">
          <el-table v-loading="tableDataLoading" :data="tableData" border fit>
            <el-table-column label="书名" align="center" prop="book_name" />
            <el-table-column label="分类" align="center">
              <template slot-scope="scope">{{ booksData[0].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-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="danger" @click="onSelectItem(scope.row)">
                  <div style="color: #fff">
                    <i class="el-icon-success"></i>
                    <span>选择</span>
                  </div>
                </el-button>
              </template>
            </el-table-column>
          </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";

/**
 * 站长等级的编辑dialog
 */
export default {
  components: { Dialog },
  props: {
    // 弹窗控制参数
    isBooksShow: {
      type: Boolean,
      default: false,
    },
    // 选中的数据
    selectItem: {
      type: Object,
      default: () => {},
    },
    booksData: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {
      dialogTitle: "选择书籍",
      // dialog样式
      dialogStyle: {
        "--dialog-width": "1000px",
        "--dialog-height": "780px",
        "--title-height": "51px",
      },
      // 提交参数
      formData: {
        value: "",
        name: "",
        book_intro: "",
      },
      // 校验规则
      rules: {},
      tableDataLoading: true,
      // 表格数据
      tableData: [],
      limit: 20,
      currentPage: 1,
      totalCount: 0,
    };
  },
  watch: {
    isBooksShow(val) {
      if (val === true) {
        this.limit = 20;
        this.currentPage = 1;
        this.totalCount = 0;
        this.initDataView();

        this.formData.value = this.booksData[0].id;
      }
    },
  },
  methods: {
    // 关闭弹窗
    handleClose() {
      this.$emit("handle-close");
    },
    // 提交弹窗
    handleSuccess() {
      this.$emit("handle-success");
    },
    // 初始化弹窗参数
    initDataView() {
      this.tableData = [];
      this.tableDataLoading = true;
      getCategoryShow(this.booksData[0].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;
      });
    },
    // 提交表单
    submitForm() {
      this.$refs.formData.validate((vaild) => {
        if (vaild && this.customValidate()) {
          console.log("提交表单");
        }
      });
    },
    handleSizeChange(val) {
      this.limit = val;
      this.initDataView();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initDataView();
    },
    customValidate() {},

    onSubmit() {
      this.initDataView();
    },
    resetForm() {
      this.$refs["formData"].resetFields();
      this.initDataView();
    },

    onSelectItem( data ){
      this.$emit('onSelectItem', data)
    }
  },
};
</script>

<style lang="scss" scoped>
.el-container {
  width: 100%;
  height: 91%;
  .el-main {
    height: 100%;
    width: 100%;

    .formData-title {
      text-align: center;
      margin-bottom: 20px;
      color: #333333;
      font-size: 18px;
    }

    .el-form {
      width: 100%;
      display: flex;
      flex-flow: column;
      box-sizing: border-box;
      padding: 0 20px;
      .div-main {
        display: flex;
      }
    }
  }
}

.table-container {
  width: 100%;
  box-sizing: border-box;
}
.el-footer {
  height: 10%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
