<template>
    <div>
        <search-bar label="地点名称" @search="_search"></search-bar>
        <div class="layout-cont-s layout-cont-s-btn">
            <van-pull-refresh v-model="refreshing" @refresh="_refresh">
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="_load">
                    <van-swipe-cell v-for="item in resultList" :key="item.name">
                        <div class="result-item">
                            <div>地点：{{item.name}}</div>
                            <div style="width: 100%">地址：{{item.address}}</div>
                            <div>经度：{{item.longitude}}</div>
                            <div>纬度：{{item.latitude}}</div>
                        </div>
                        <template #right>
                            <van-button square type="danger" text="删除" class="swipe-cell-btn"
                                        @click="_del(item.id)"></van-button>
                        </template>
                    </van-swipe-cell>
                </van-list>
            </van-pull-refresh>
        </div>
        <div class="bottom-btn">
            <van-button type="info" square block @click="_add">添加</van-button>
            <van-button type="primary" square block @click="_create">随机生成抽样地点</van-button>
        </div>
    </div>
</template>

<script>
    import {samplingPlace} from '../../../api'

    export default {
        data() {
            return {
                resultList: [],
                page: 1,
                rows: 10,
                refreshing: false,//刷新中...
                loading: false,//加载中...
                finished: false,//没有更多数据
                planId: ''
            }
        },
        mounted() {
            this.planId = this.$route.query.planId
            this._getData()
        },
        methods: {
            _search(value) {
                this.key = value
                this._refresh()
            },
            _refresh() {
                this.page = 1
                this._getData()
            },
            _searchParams() {
                let data = {
                    page: this.page,
                    rows: this.rows,
                    name: this.key,
                    planId: this.planId
                };
                return this.$serializeForm(data)
            },
            _getData: async function () {
                let result = await samplingPlace.page(this._searchParams())
                this.resultList = [...(this.page === 1 ? [] : this.resultList), ...result.records]
                this.refreshing = false
                this.loading = false
                if (this.resultList.length === result.total) {
                    this.finished = true
                }
            },
            _load() {
                this.page = this.page + 1;
                this._getData()
            },
            _add() {
                this.$router.push({path: '/sampling_plan/select_loc', query: {planId: this.planId}})
            },
            _del: async function (id) {
                let result = await samplingPlace.deleteByIds([id])
                if (result) {
                    this.$toast('操作成功！')
                    this._refresh()
                }
            },
            _create() {
                if (this.resultList.length === 0) {
                    this.$toast('请先维护抽样地点！')
                } else {
                    this.$router.push({path: '/sampling_plan/create_loc', query: {planId: this.planId}})
                }
            }
        }
    }
</script>

<style scoped>

</style>
