<template>
    <div class="flex-column">
        <sticky :className="'sub-navbar'">
            <div class="filter-container">
                <el-input @keyup.enter.native="handleFilter" size="mini" prefix-icon="el-icon-search" style="width: 200px;margin-bottom: 0;" class="filter-item" :placeholder="'关键字'"
                    v-model="listQuery.name">
                </el-input>
                <el-button style="margin-left:10px;" size="mini" @click="handleFilter">搜索</el-button>
                <permission-btn moduleName='modulemanager' :size="'mini'" v-on:btn-event="onBtnClicked"></permission-btn>
            </div>
        </sticky>
        <div class="app-container flex-item">
            <div class="bg-white fh">
                <el-table ref="mainTable" :key='tableKey' :data="tableData" v-loading="listLoading" border fit 
                    highlight-current-row style="width: 100%;" height="calc(100% - 112px)" @row-click="rowClick" @selection-change="handleSelectionChange">

                    <el-table-column type="selection" align="center" width="55"></el-table-column>
                    <el-table-column prop="parkName" label="公园名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="level" label="公园等级" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="parkArea" label="公园面积" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="manageUnit" label="主管单位" show-overflow-tooltip></el-table-column>
    
    
                    <el-table-column :label="'操作'"   width="180" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="handleDel(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize" @pagination="handleCurrentChange" />
            </div>
        </div>
        <AddForm v-if="addformVisible" @addSuccess="addSuccess" @close="addformVisible=false"></AddForm>

        <EditForm v-if="editformVisible" @editSuccess="editSuccess" @close="editformVisible=false" :id="editFormData.id"></EditForm>

    </div>
  
</template>
  
<script>
    import Pagination from '@/components/Pagination'
    import waves from '@/directive/waves' // 水波纹指令
    import Sticky from '@/components/Sticky'
    import permissionBtn from '@/components/PermissionBtn'
    import elDragDialog from '@/directive/el-dragDialog'
    import {getMethodCommon,postMethodCommon } from "@/api/common";
    import AddForm from './widget/form';
    import EditForm from './widget/editForm';

  
    export default {
        name: 'module',
        components: {
            Sticky,
            permissionBtn,
            Pagination,
            AddForm,
            EditForm
        },
        directives: {
            waves,
            elDragDialog
        },
        data() {
            return {
                tableData:[],
                addformVisible:false,
                editformVisible:false,
                tableKey: 0,
                total: 0,
                listLoading:false,
                listQuery: {
                    pageIndex: 1,
                    pageSize: 20,
                    name: null
                },
                multipleSelection:[],
                editFormData:null
            }
        },

        created() {
            this.getList()
        },
        mounted() {

        },
        methods: {
            addSuccess(){
                this.addformVisible = false;
                this.getList();
            },
            editSuccess(){
                this.editformVisible = false;
                this.getList();
            },
            rowClick(row) {
                this.$refs.mainTable.clearSelection()
                this.$refs.mainTable.toggleRowSelection(row)
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            onBtnClicked: function(domId) {
                console.log('you click:' + domId)
                switch (domId) {
                    case 'btnAdd':
                        this.addformVisible = true;
                    break
                    case 'btnEdit':
                        if (this.multipleSelection.length != 1) {
                            this.$message({
                            message: '只能选中一个进行编辑',
                            type: 'error'
                            })
                            return
                        }
                        this.handleUpdate()
                    break
                    case 'btnDel':
                        if (this.multipleSelection.length < 1) {
                            this.$message({
                            message: '至少删除一个',
                            type: 'error'
                            })
                            return
                        }
                        this.handleDelete()
                    break
                }
            },
            getList() {
                this.listLoading = true
                getMethodCommon("/ParkInfo/GetParkInfo",this.listQuery).then(res=>{
                    if(res.code == 200){
                        this.tableData = res.data
                        this.total = res.count
                        this.listLoading = false
                    }
                })
            },

            handleFilter() {
                this.listQuery.pageIndex = 1
                this.getList()
            },

            handleCurrentChange(val) {
                this.listQuery.pageIndex = val.page
                this.listQuery.pageSize = val.limit
                this.getList()
            },
            // 编辑
            handleEdit(row){
                this.editFormData = row;
                this.editformVisible = true;
            },
            handleUpdate() {
                this.editFormData = this.multipleSelection[0];
                this.editformVisible = true;
            },
            // 删除
            handleDel(rowId){
                this.$confirm('确定删除所选数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let idsStr = [rowId]
                    postMethodCommon("/ParkInfo/DeleteParks",idsStr).then(res=>{
                        if(res.code == 200){
                            this.$message({
                            type:"success",
                            message:"删除成功",
                            })
                        }
                        this.getList();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            handleDelete() {
                this.$confirm('确定删除所选数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let idsStr = [];
                    this.multipleSelection.forEach((item,index)=>{
                        idsStr.push(item.id);
                    })
                    postMethodCommon("/ParkInfo/DeleteParks",idsStr).then(res=>{
                        if(res.code == 200){
                            this.$message({
                            type:"success",
                            message:"删除成功",
                            })
                        }
                        this.getList();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
        }
    }
</script>

<style lang="scss">

</style>
  