<template>
  <div class="bodyBoxs">
    <div class="boxs">
      <el-button type="success" style="margin-bottom: 10px;" @click="showAddClass">新增分类</el-button>
      <el-table
        :data="tableData"
        border
        v-loading="loading"
        :row-class-name="tableRowClassName">
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="className"
          label="分类名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="updatedAt"
          label="更新时间">
        </el-table-column>
        <el-table-column
          prop="updatedBy"
          label="更新人">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="editClassName(scope.row)" type="warning" size="small">编辑</el-button>
            <el-button @click="deleteClass(scope.row)" type="danger" size="small">删除</el-button>
<!--            <el-dialog-->
<!--              title="提示"-->
<!--              :visible.sync="visible"-->
<!--              width="30%"-->
<!--              :modal="false">-->
<!--              <span>确定删除吗？</span>-->
<!--              <span slot="footer" class="dialog-footer">-->
<!--                <el-button @click="visible = false">取 消</el-button>-->
<!--                <el-button type="primary" @click="deleteClassName(scope.row)">删除</el-button>-->
<!--              </span>-->
<!--            </el-dialog>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 50]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-input type="hidden" v-model="form.id" autocomplete="off"></el-input>
          <el-form-item label="分类名称" :label-width="formLabelWidth">
            <el-input v-model="form.className" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="setClassName">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import {getToken} from "@/utils/auth";

  export default {
    data() {
      return {
        form:{
          id:0,
          className:''
        },
        title:'新增分类',
        visible: false,
        formLabelWidth: '120px',
        dialogFormVisible:false,
        baseImgUrl: process.env.VUE_APP_BASE_IMG_URL,
        formItem: {},
        tableData: [],
        loading: false,
        total: 0,
        pages: 1,
        pageSize: 10,
        currentPage4:0,
        fullscreenLoading: false,
      }
    },
    created() {
      this.getData();
    },
    methods: {
      handleClose(){
        this.visible = false;
      },
      deleteClass(row) {
        this.$confirm('将删除该分类并且不可恢复, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true;
          this.$api.deleteClassName({id:row.id}).then((res) => {
            this.visible = false;
            this.loading = false;
            if (res.code == 0) {
              this.$message({
                message: res.message,
                type: 'success'
              });
              this.getData();
            } else {
              this.$message({
                message: res.message,
                type: 'warning'
              });
            }
          }).catch((res) => {
            this.loading = false;
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      deleteClassName(row){
        console.log(row)

      },
      setClassName(){
        this.loading = true;
        this.$api.setClassName(this.form).then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.$message({
              message: res.message,
              type: 'success'
            });
            this.getData();
            this.dialogFormVisible = false;
          } else {
            this.$message({
              message: res.message,
              type: 'warning'
            });
          }
        }).catch((res) => {
          this.loading = false;
        });
      },
      editClassName(row){
        this.title = '编辑分类';
        this.form = row;
        this.dialogFormVisible = true;
      },
      showAddClass(){
        this.title = '新增分类';
        this.form.className = '';
        this.form.id        = 0;
        this.dialogFormVisible = true;
      },
      handleSizeChange(val){
        this.pageSize = val;
        this.getData()
      },
      handleCurrentChange(val){
        console.log('点击了');
        this.pages= val;
        this.getData();
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      getData() {
        this.loading = true;
        this.$api.getClassName({
          page: this.pages,
          size: this.pageSize,
        }).then((res) => {

          this.loading = false;
          if (res.code == 0) {
            this.tableData = res.data.data;
            this.total = res.data.total
            this.currentPage4 = res.data.current_page
            console.log(res.data)
          } else {
            this.$message(res.message);
          }

        }).catch((res) => {
          this.loading = false;
        });
      },
      handleEdit(i, r) {
        console.log(i, r);
        this.$router.replace({
          path: "/collectionInfo",
          query: {
            id: r.id
          }
        })
      },
      rowStyle() {
        return "text-align:center";
      }

    }
  }
</script>
<style scoped>
  .bodyBoxs {
    padding: 40px;
  }

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .boxs {
    width: 100%;
    background: #fff;
    border-radius: 15px;
  }
</style>
