<template>
  <div>
    <el-card>
      <el-page-header @back="goback" content="公告列表"></el-page-header>
    </el-card>
    <el-container>
      <el-header style="height: 120px;">
        <div id="header-one">
          <h3 class="el-icon-search" style="margin-left: 10px;">筛选搜索</h3>
          <div id="header-one-btu">
            <el-button @click="empty">重置</el-button>
            <el-button type="primary" @click="check">搜索</el-button>
          </div>
        </div>
        <div id="header-two">
          <el-row>
            <el-col :span="4" id="header-two-left">
              <el-form ref="anFormRef" :model="anForm" label-width="80px">
                <el-form-item label="公告标题 :">
                  <el-input v-model="anForm.anName" class="anInput" placeholder="筛选公告标题" center></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="8">
              <el-form label-width="80px">
                <el-form-item label="发布时间:">
                  <el-date-picker v-model="dataput" type="datetimerange" class="up-input-right" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                  </el-date-picker>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-main style="height: 110px;">
        <h3 class="el-icon-tickets">公告列表</h3>
        <el-button id="main-btu" @click="addNotice()">添加</el-button>
      </el-main>
      <div>
        <el-table height="280" :data="tableData" border style="width: 99%" id="footer-t">
          <el-table-column type="index" label="ID" width="400" align="center">
          </el-table-column>
          <el-table-column prop="title" label="公告标题" align="center">
          </el-table-column>
          <el-table-column prop="time" label="发布时间" align="center">
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" @click="details(scope.row)">查看详情 </el-button>
              <el-button type="danger" @click="deleteNoticeById"> 删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleCurrentChange" background layout="total, prev, pager, next" :total="total"
          id="page">
        </el-pagination>
        <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper" :total="10"></el-pagination> -->
      </div>
    </el-container>
  </div>
</template>
<script>
import { getNotice, searchNotice } from "@/api/notice/notice"
export default {
  data() {
    return {
      anForm: {
        anName: '',
      },
      // queryInfo: {
      //   query: "",
      //   pagenum: 1,
      //   pagesize: 2,
      // },
      tableData: [],
      pageData: {
        page: 1,
        limit: 10
      },
      total: 1,
      dataput: ''
    }
  },

  created() {
    this.getnotice()
  },
  methods: {
    goback() {
      window.history.go(-1)
    },
    addNotice() {
      this.$router.push('./addnotice')
    },
    //获取公告
    async getnotice() {
      getNotice(this.pageData).then((data) => {
        this.tableData = data.list;
        this.total = data.count;
      })
      //解构赋值data
      // const { data: res } = await getNotice((resolve, reject) => {
      //   console.log(resolve);
      // }).catch((e) => {
      //   console.log(e);
      // })
      // console.log(await getNotice())
      // this.tableData = res.list
    },
    // handleSizeChange(newSize) {
    //   this.queryInfo.pagesize = newSize;
    //   this.getnotice();
    // },

    handleCurrentChange(newPage) {
      // this.queryInfo.pagenum = newPage;
      // this.getnotice();
      this.pageData.page = newPage;
      this.getnotice();
    },

    /**重置按钮 */
    empty() {
      this.anForm.anName = "";
      this.getnotice();
    },
    /**搜索按钮 */
    check() {
      if (this.anForm.anName) {
        let con = {
          name: this.anForm.anName
        }
        searchNotice(con).then((data) => {
          this.tableData = data.list;
          this.total = data.count;
        })
      } else {
        this.getnotice();
      }
    },

    /**查看详情 */
    details(val) {
      this.$router.push('./details/' + val.id)
    },

    /**删除公告 */
    deleteNoticeById(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
};

</script>
<style scoped>
.el-main {
  color: #333;
  border: 1px solid #d3d7d4;
  border-radius: 5px;
  margin-left: 30px;
  margin-right: 30px;
}

.el-header {
  color: #333;
  border: 1px solid #d3d7d4;
  border-radius: 5px;
  margin: 30px;
}

/* .el-footer {} */

#footer-t {
  color: #333;
  border: 1px solid #d3d7d4;
  border-radius: 5px;
  margin-left: 10px;
  margin-top: 30px;
}

/* #header-one {} */

#header-two {
  /* background-color: aqua; */
  margin-left: 55px;
}

#header-one-btu {
  margin: 20px 20px 0px 0px;
  float: right;
}

#header-two-left {
  margin-right: 100px;
}

#main-btu {
  float: right;
  margin-top: 10px;
}

#page {
  float: right;
  margin-top: 15px;
}
</style>