<template>
    <customer-navBar-layout style="width: 100vw;height:100vh">
        <template #navBar>
            <van-nav-bar
                    title="选择人员"
                    left-arrow
                    @click-left="_cancel"
            ></van-nav-bar>
        </template>
        <template #content>
            <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-checkbox-group v-model="checkListValue" ref="checkboxGroup">
                            <van-swipe-cell v-for="item in resultList" :key="item.name">
                                <div class="result-item" @click="_tapItem(item)">
                                    <van-checkbox :name="item" shape="square"></van-checkbox>
                                    <div>姓名：{{item.name}}</div>
                                    <div>电话：{{item.tel}}</div>
                                    <div>所属部门：{{item.department}}</div>
                                </div>
                            </van-swipe-cell>
                        </van-checkbox-group>
                    </van-list>
                </van-pull-refresh>
            </div>
            <div class="bottom-btn">
                <van-button type="info" block @click="_add">添加</van-button>
            </div>
        </template>
    </customer-navBar-layout>
</template>

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

    export default {
        data() {
            return {
                resultList: [],
                page: 1,
                rows: 10,
                refreshing: false,//刷新中...
                loading: false,//加载中...
                finished: false,//没有更多数据
                checkListValue: [],
                planId: ''
            }
        },
        methods: {
            _open(planId) {
                this.planId = planId
                this.checkListValue = []
                this._refresh()
            },
            _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 samplingPlan.samplerPage(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()
            },
            _tapItem(item) {
                if (this.checkListValue.indexOf(item) === -1) {
                    this.checkListValue.push(item);
                } else {
                    this.checkListValue.splice(this.checkListValue.indexOf(item), 1);
                }
            },
            _add() {
                if (this.checkListValue.length === 0) {
                    this.$toast('请至少选择一条数据！')
                } else {
                    this.$emit('on-change',this.checkListValue)
                }
            },
            _cancel() {
                this.$emit('cancel')
            }
        }
    }
</script>

<style scoped>

</style>
