<template>
  <el-row class="wrap">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: "/" }"></el-breadcrumb-item>
        <el-breadcrumb-item><a href="/"></a></el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb>
    </el-col> 

    <el-col :span="24" class="warp-main" v-loading="loading"  element-loading-text="">
      <el-col :span="24" class="toolbar">
        <el-form :inline="true" :model="filters">
          <el-form-item>
            <el-input v-model="filters.name" placeholder=""></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"></el-button>
          </el-form-item>
          <el-form-item>
          <el-button type="primary" @click="handleAdd()"></el-button>
        </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
          <el-table @row-click="handleCurrentChange" @selection-change="selsChange" ref="table" :data="pageData" :default-sort="{prop: "createAt", order: "descending"}" stripe style="width: 100%" align="center">
             <el-table-column type="selection"></el-table-column>
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="bookname" label="" sortable></el-table-column>
            <el-table-column prop="author" label="" sortable></el-table-column>
            <el-table-column prop="date" label="" sortable></el-table-column>
            <el-table-column label="">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"></el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="danger" @click="removeBatch(sels)" :disabled="this.sels.length === 0 || this.disabled" style="float: left;"></el-button>
          <el-pagination layout="prev, pager, next" :page-size="10" :total="total" style="float: right;"></el-pagination>
      </el-col>
    </el-col>

    <el-dialog title="" :visible.sync="dialogVisible" :before-close="handleClose" align="left">
      <el-form :model="editFormData" status-icon :rules="editRules" ref="editForm" label-width="100px" class="edit-ruleForm">
        <el-form-item label="" required props="bookname">
          <el-input type="text" v-model="editFormData.bookname" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="" required props="author">
          <el-input type="text" v-model="editFormData.author" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="" props="publishDate" align="left">
          <el-date-picker v-model="editFormData.publishDate" type="date" placeholder=""></el-date-picker>
        </el-form-item>
         <el-form-item label="" required props="desc">
          <el-input type="textarea" v-model="editFormData.desc" :autosize="{ minRows: 8, maxRows: 10}"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> </el-button>
        <el-button type="primary" @click="dialogVisible = false"></el-button>
      </span>
    </el-dialog>

    <el-dialog title="" :visible.sync="addDialogVisible" :before-close="handleClose" align="left">
      <el-form :model="AddFormData" status-icon :rules="AddRules" ref="addForm" label-width="100px" class="add-ruleForm">
        <el-form-item label="" required props="bookname">
          <el-input type="text" v-model="AddFormData.bookname" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="" required props="author">
          <el-input type="text" v-model="AddFormData.author" autocomplete="on"></el-input>
        </el-form-item>
        <el-form-item label="" props="publishDate" align="left">
          <el-date-picker v-model="AddFormData.publishDate" type="date" placeholder=""></el-date-picker>
        </el-form-item>
         <el-form-item label="" required props="desc">
          <el-input type="textarea" v-model="AddFormData.desc" :autosize="{ minRows: 8, maxRows: 10}"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false"> </el-button>
        <el-button type="primary" @click="addDialogVisible = false"></el-button>
      </span>
    </el-dialog>
  </el-row>
</template>

<script>

  export default {
    name: "BookList",
    data () {
      return {
        loading: false,
        filters: {
          name: ""
        },
        pageSize: 10,
        total: 1,
        page: 1,
        limit: 10,
        pageData: [{
          bookname: "",
          author: "",
          date: "2016-05-02"
        },{
          bookname: "",
          author: "",
          date: "2014-05-02"
        }],
        query: "",
        sort: "createAt",
        order: "descending",
        accept: "",
        ws: null,
        sels: [],
        disabled: true,
        dialogVisible: false,
        addDialogVisible: false,
        editFormData:{
          bookname: "",
          author: "",
          publishDate: "2018-09-18",
          desc: "ffffffffgvgvfv"
        },
        editRules: {
          bookname: [
            {required: true, message: "", trigger: "blur"},
            {min: 3, max: 5, message: "3-5",trigger:"blur"}
          ],
          author: [
            {required: true, message: "", trigger: "blur"},
            {min: 3, max: 5, message: "3-5",trigger:"blur"}
          ],
          desc:[
            {required: true, message: "", trigger: "blur"}
          ]
        },
        AddFormData:{
          bookname: "",
          author: "",
          publishDate: "",
          desc: ""
        },
        AddRules: {
          bookname: [
            {required: true, message: "", trigger: "blur"},
            {min: 3, max: 5, message: "3-5",trigger:"blur"}
          ],
          author: [
            {required: true, message: "", trigger: "blur"},
            {min: 3, max: 5, message: "3-5",trigger:"blur"}
          ],
          desc:[
            {required: true, message: "", trigger: "blur"}
          ]
        },
      }
    },
    methods: {
      handleEdit (index, row) {
        console.log(index,row)
        this.dialogVisible = true
      },
      handleDelete (index, row){
        console.log(index,row)
         this.$confirm("", "",{
          confirmButtonText: "",
          cancelButtonText: "",
          type: "warning"
        }).then(() => {
          console.log("")
          this.$message({
            type: "success",
            message: ""
          });
        }).catch(() => {
          this.$message({
            type: "info",
            message: ""
          });
        })
      },
      selsChange (sels) {
        this.sels = sels;
       this.disabled=false;
      },
      removeBatch(rows){
        this.$confirm("", "",{
          confirmButtonText: "",
          cancelButtonText: "",
          type: "warning"
        }).then(() => {
          var ids = [];
          rows.forEach(element => {
            ids.push(element.id)
          })
          console.log(ids)
          this.$message({
            type: "success",
            message: ""
          });
        }).catch(() => {
          this.$message({
            type: "info",
            message: ""
          });
        })
      },
      handleCurrentChange(row, event, column){
        this.$refs.table.toggleRowSelection(row)
      },
      handleClose(done){
        this.$confirm("")
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleAdd(){
        this.addDialogVisible = true
      }
    }
  }
</script>

the result of the run does not report an error, but even if there is no prompt for entering the required information form, what is wrong?