<template>
  <div class="notice-index">
    <el-form :inline="true" :model="searchParam" class="demo-form-inline">
      <el-form-item label="公告类型">
        <el-select
          clearable
          v-model="searchParam.type"
          size="small"
          placeholder="-请选择-"
        >
          <el-option :key="1" label="水务新闻" :value="1"/>
          <el-option :key="2" label="政策法规" :value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="发布人">
        <el-select
          filterable
          clearable
          v-model="searchParam.publishUser"
          size="small"
          placeholder="-请选择-"
        >
          <el-option v-for="(item,index) in userList" :key="index" :label="item.realname" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="发布时间">
        <el-date-picker
          style="width: 220px"
          placeholder="发布时间"
          clearable
          size="small"
          value-format="yyyy-MM-dd"
          v-model="searchParam.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="tableLoading"
          icon="el-icon-search"
          @click="search"
          size="small"
          type="primary"
        >搜索
        </el-button>
        <el-button
          icon="el-icon-refresh-right"
          @click="initSearchParam();search()"
          type="primary"
          size="small"
          style="background-color: #fff; border: 1px solid #ccc ; color: #666"
        >清空
        </el-button>
      </el-form-item>
    </el-form>
    <el-button @click="add" icon="el-icon-plus" v-if="btnRule.usernotice_add" size="small" type="primary">添加公告
    </el-button>
    <el-table
      style="margin-top: 10px"
      stripe
      ref="table"
      :height="tableHeight"
      v-loading="tableLoading"
      :data="dataList"
      border
      size="medium"
      row-key="id"
    >
      <el-table-column :index="indexMethod" label="序号" type="index" width="80" align="center"/>
      <el-table-column
        min-width="100"
        show-overflow-tooltip
        prop="typeName"
        label="公告类型"
        align="center"
      ></el-table-column>
      <el-table-column min-width="100" show-overflow-tooltip prop="title" label="主题" align="center"/>
      <el-table-column min-width="100" show-overflow-tooltip prop="publishUserName" label="发布人" align="center"/>
      <el-table-column
        min-width="160"
        show-overflow-tooltip
        prop="publishTime"
        label="发布时间"
        align="center"
      />
      <el-table-column show-overflow-tooltip prop="statusName" label="状态" align="center" min-width="100"/>
      <el-table-column label="操作" align="left" width="220">
        <template slot-scope="{row}">
          <el-button
            v-if="btnRule.usernotice_info"
            @click="detail(row)"
            type="primary"
            size="mini"
            icon="el-icon-document"
          >详情
          </el-button>
          <el-button
            v-if="btnRule.usernotice_edit"
            @click="edit(row)"
            type="primary"
            size="mini"
            icon="el-icon-edit"
          >编辑
          </el-button>
          <el-button v-if="btnRule.usernotice_delete" @click="del(row)" size="mini" type="danger" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-current">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        prev-text="上一页"
        next-text="下一页"
        background
        layout="total, prev, pager, next, jumper"
        style="display: inline-block;"
        :total="count"
        @current-change="handleCurrentChange"
      />
    </div>
    <addForm :ruleForm="ruleForm" :visible="addVisible" v-if="addVisible" @handleClose="addVisible=false" @successSubmit="addVisible=false;getAllList()"></addForm>
    <noticeDetial :noticeId="noticeId" :visible="detailVisible" v-if="detailVisible" @handleClose="detailVisible=false"></noticeDetial>
  </div>
</template>

<script>
  import api from "@/api/work/notice";
  import {mapGetters} from "vuex";
  import addForm from './addForm'
  import noticeDetial from '@/components/noticeDetail'

  export default {
    name: "notice-index",
    data() {
      return {
        noticeId:'',
        detailVisible:false,
        ruleForm:{},
        userList:[],
        addVisible: false,
        dataList: [],
        currentPage: 1,
        count: 0,
        pageSize: parseInt((document.body.clientHeight - 290 - 43) / 45),
        tableHeight: document.body.clientHeight - 290,
        tableLoading: false,
        searchParam: {
          type: "",
          publishUser: "",
          time: ""
        }
      };
    },
    computed: {
      ...mapGetters(["btnRule"])
    },
    components: {addForm,noticeDetial},
    created() {
    },
    mounted() {
      this.tableLoading = true;
      this.getUserAdminList()
      this.getAllList();
    },
    methods: {
      getUserAdminList(){
        api.getUserAdminList().then(res => {
          this.userList = res.data ? res.data : [];
        }).catch(e => {
          this.userList = [];
        });
      },
      edit(row){
        this.ruleForm=row
        this.addVisible=true
      },
      add() {
        this.ruleForm={
          type:1,
          status:2
        }
        this.addVisible=true
      },
      detail(row){
        this.noticeId=row.id
        this.detailVisible=true
      },
      del(row){
        this.$confirm('您确定要删除通告吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableLoading=true
          api.delete({noticeId:row.id}).then(res => {
            this.$message({
              type: "success",
              message: "删除成功"
            });
            this.getAllList()
          }).catch(e => {
            this.tableLoading=false
          });
        }).catch(() => {
        })
      },
      indexMethod(index) {
        return index + 1 + (this.currentPage - 1) * this.pageSize;
      },
      initSearchParam() {
        this.searchParam = {
          type: "",
          publishUser: "",
          time: ""
        };
      },
      search() {
        this.currentPage = 1;
        this.tableLoading = true;
        this.$refs.table.bodyWrapper.scrollTop = 0;
        this.getAllList();
      },
      handleCurrentChange(val) {
        this.tableLoading = true;
        this.currentPage = val;
        this.$refs.table.bodyWrapper.scrollTop = 0;
        this.getAllList();
      },
      getAllList() {
        let searchParam = JSON.parse(JSON.stringify(this.searchParam));
        if (searchParam.time && searchParam.time.length > 0) {
          searchParam.startTime = searchParam.time[0]
          searchParam.endTime = searchParam.time[1]
          delete searchParam.time
        }
        searchParam.page = this.currentPage;
        searchParam.pageSize = this.pageSize;
        api.getAllList(searchParam).then(res => {
          this.dataList = res.data.records ? res.data.records : [];
          this.count = res.data.total;
          this.tableLoading = false;
        }).catch(e => {
          this.dataList = [];
          this.tableLoading = false;
        });
      }
    }
  };
</script>

<style lang="less">
  .notice-index {
    height: fit-content;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
    padding: 15px;
  }
</style>
