<template>
    <div class="region">
        <sum-head title="区域设置" text="总区域数" :sum="list.total+''" ></sum-head>

        <div class="filter-container">
            <el-input placeholder="区域名称/地勤人员" v-model="listQuery.keyword" size="small" style="width: 200px;" class="filter-item" @keyup.enter.native="curPage(1)" />
            <el-button class="filter-item" size="small" type="primary" icon="el-icon-search" @click="curPage(1)">搜索</el-button>

            <el-button class="filter-item add" size="small" type="primary" icon="el-icon-plus" @click="addRegion">添加区域</el-button>
        </div>

        <el-table
                v-loading="listLoading"
                :data="list.resultList"
                element-loading-text="Loading"
                border
                size="small">
            <el-table-column label="区域名称" align="center" width="250">
                <template slot-scope="scope">
                    {{ scope.row.name }}
                </template>
            </el-table-column>
            <el-table-column label="区域地勤人员" align="center">
                <template slot-scope="scope">
                    {{ scope.row.workerNames }}
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="updateRegion(scope.row)">修改</el-button>
                    <el-button type="danger" size="mini" @click="delRegion(scope.row.id, scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container" v-show="!listLoading">
            <el-pagination background layout="prev, pager, next" :page-size="listQuery.pageSize" :total="list.total" :current-page.sync="listQuery.pageNumber" @current-change="curPage"></el-pagination>
        </div>

        <region-info ref="RegionInfo" :action="action" @updateList="getList"></region-info>
    </div>
</template>

<script>
    import SumHead from '@/components/SumHead'
    import RegionInfo from './components/regionInfo'

    import api from '@/api/region'
    export default {
        name: "region",
        components: {
            SumHead,
            RegionInfo
        },
        data() {
            return {
                listQuery: {
                    pageNumber: 1,
                    pageSize: 15,
                    keyword: undefined
                },
                list: {},
                listLoading: false,
                action: 'add'
            }
        },
        methods: {
            getList() {
                this.listLoading = true
                api.getRegionList(this.listQuery).then(res => {
                    console.log(res)
                    this.listLoading = false
                    this.list = res.results
                }).catch(err => {
                    console.log(err)
                })
            },
            curPage(val) {
                console.log(val)
                this.listQuery.pageNumber = val
                this.getList()
            },
            addRegion() {
                this.action = 'add'
                this.$refs.RegionInfo.open()
            },
            updateRegion(data) {
                this.action = 'edit'
                this.$refs.RegionInfo.open(data)
            },
            delRegion(ids, index) {
                this.$confirm('你确定要删除这条区域信息吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    // center: true
                }).then(() => {
                    api.deleteRegion({ ids }).then(res => {
                        console.log(res)
                        if(res.results.deleteFails.length==0) {
                            this.list.resultList.splice(index, 1);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message({
                                type: 'warning',
                                message: '该区域有投放车辆!'
                            });
                        }

                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        created() {
            this.getList()
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .region {
        position: relative;
        padding: 5px 16px 0;
        margin-bottom: 30px;

        .filter-container {
            padding: 10px 0 10px 12px;
            .filter-item {
                width: 90px;
                margin-right: 20px;
            }
            .add {
                float: right;
                width: 120px;
            }
        }
        .pagination-container {
            margin: 20px 0 30px;
            float: right;
        }
    }
</style>