<template>
  <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="请输入"
              size="mini"
            />
          </el-form-item>
          <el-form-item
            label="分类"
            prop="category_id"
          >
            <el-select
              v-model="formData.category_id"
              placeholder="请输入"
              size="mini"
            >
              <el-option
                v-for="(item, index) in categoryList"
                :key="index"
                :label="item.category_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="简介"
            prop="desc"
          >
            <el-input
              v-model="formData.desc"
              placeholder="请输入"
              size="mini"
            />
          </el-form-item>
          <el-form-item>
            <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="div-btn">
        <div>
          <el-button
            type="primary"
            icon="el-icon-refresh-right"
            size="mini"
            @click="refreshData()"
          />
          <el-dropdown
            trigger="click"
            class="drop-down"
            @command="handleCommand"
          >
            <el-button
              type="warning"
              size="mini"
            >
              <i class="el-icon-tickets" />
              书源
              <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in Object.entries(booksSource)"
                :key="index"
                :command="item[1].value"
              >
                {{ item[1].name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="isSearchVisible = !isSearchVisible"
        />
      </div>
      <!-- 数据 -->
      <div class="table-container">
        <el-table
          v-loading="loading"
          class="tableData"
          :data="tableData"
          border
          fit
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="55"
          />
          <el-table-column
            label="电子书ID"
            align="center"
            prop="book_id"
            width="100"
          />
          <el-table-column
            label="书名"
            align="center"
            prop="book_name"
            width="150"
          />
          <el-table-column
            label="书源"
            align="center"
            prop="source_name"
            width="150"
          >
            <template slot-scope="">
              <!--              <span style="color: #1890FF;cursor:pointer;" @click="openNumDialog(scope.row)">{{ scope.row.filterKeyNum }}</span>-->
            </template>
          </el-table-column>
          <el-table-column
            label="分类"
            align="center"
            prop="category_name"
            width="150"
          />
          <el-table-column
            label="简介"
            align="center"
            prop="book_intro"
            min-width="400"
          />
          <el-table-column
            label="操作"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <CustomButton
                tip-text="编辑"
                is-svg
                icon="edit"
                @onClick="openEditDialog(scope.row)"
              />
              <CustomButton
                tip-text="删除"
                type="danger"
                is-svg
                icon="delete"
                @onClick="openDeleteDialog(scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部分页组件 -->
      <div class="pagination-container">
        <el-pagination
          :current-page="formData.current_page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="formData.per_page"
          layout="total,  prev, pager, next, sizes,jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-main>
    <!--    文章编辑页面-->
    <ArticleEditDialog
      :is-dialog="isEditDialog"
      :select-item="selectItem"
      @handle-close="isEditDialog = false"
      @handle-success="_baseRequest"
    />
  </el-container>
</template>

<script>
/**
 *文章管理页面
 * */
import CustomButton from '@/components/CustomButton/index'
import ArticleEditDialog from './components/edit-dialog'
import {getBooksList, deleteBooks, booksSource, booksCategory} from '@/api/books-management'
// 编辑弹窗组件
export default {
  components: { CustomButton, ArticleEditDialog },
  data() {
    return {
      // 活动添加弹窗开关
      isEditDialog: false,
      // UI控制参数
      isSearchVisible: true,
      // 选择的操作的数据
      selectItem: {},
      // 多选列表数据
      multipleSelection: [],
      // 表格数据
      tableData: [],
      // 表单参数
      formData: {
        name: '',
        category_id: '',
        desc: '',
        source_platform: 1,
        // 默认显示页
        page: 1,
        // 每页页数
        page_size: 10
      },
      loading: false,
      // 书源
      booksSource: {},
      // 书源分类
      categoryList: [],
      // 总页数
      total: 10
    }
  },
  created() {
    this._baseRequest()
  },
  methods: {
    // 下拉回调
    handleCommand(val) {
      this.formData.source_platform = val.toString()
      this._baseRequest()
    },
    // 基础请求
    _baseRequest(refres = false) {
      this.loading = true
      const params = this.formData
      // 书源分类接口
      booksSource().then(resp1 => {
        if (parseInt(resp1.error_code) === 0) {
          this.booksSource = resp1.data
        } else {
          this.$message.error(resp1.message)
        }
      })
      // 书源分类请求
      booksCategory({ source_platform: this.formData.source_platform }).then(resp => {
        if (parseInt(resp.error_code) === 0) {
          this.categoryList = resp.data
        } else {
          this.$message.error(resp.message)
        }
      })
      getBooksList(params).then(resp => {
        if (parseInt(resp.error_code) === 0) {
          if (refres) {
            this.$message.success('刷新成功~')
          }
          this.tableData = resp.data.data.map(item => {
            Object.entries(this.booksSource).forEach(val => {
              if (val[1].value === item.source_platform) {
                item.source_name = val[1].name
                console.log(item.source_name)
              }
            })
            return item
          })
          this.total = resp.data.total
          this.loading = false
        } else {
          this.$message.error(resp.message)
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 更新操作
    refreshData() {
      this._baseRequest(true)
    },
    // 提交操作
    onSubmit() {
      this._baseRequest()
    },
    // 重置操作
    resetForm(val) {
      this.formData.source_platform = 1
      this.$refs[val].resetFields()
      this._baseRequest()
    },
    // 打开编辑弹窗操作
    openEditDialog(row) {
      this.isEditDialog = true
      this.selectItem = row
      console.log(row)
    },
    // 删除操作弹窗
    openDeleteDialog(row) {
      this.$confirm('是否确认删除改书籍?删除后该书源信息将永久删除, 且不可复原, 请谨慎操作!', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBooks(Number(row.id)).then(resp => {
          if (parseInt(resp.error_code) === 0) {
            this.$message.success('操作成功！')
            this._baseRequest()
          } else {
            this.$message.error(resp.message)
          }
        })
      }).catch(() => {})
    },
    // 每页数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.formData.page_size = val
      this._baseRequest()
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formData.page= val
      this._baseRequest()
    }
  }
}
</script>

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

      }
      .div-main{
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        padding: 0 3%;
        .el-input{
          width: 220px;
        }
      }
      .div-btn{
        display: flex;
        justify-content: space-between;
        margin: 15px 0;
        .drop-down{
          margin: 0 10px;
        }
      }
      .pagination-container{
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>
