<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-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.id" 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>
    </div>
</template>

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

    export default {
        data() {
            return {
                resultList: [],
                page: 1,
                rows: 10,
                refreshing: false,//刷新中...
                loading: false,//加载中...
                finished: false,//没有更多数据
                checkListValue: [],
                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,
                    status: 1
                };
                return this.$serializeForm(data)
            },
            _getData: async function () {
                let result = await sampler.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()
            },
            _tapItem(item) {
                if (this.checkListValue.indexOf(item.id) === -1) {
                    this.checkListValue.push(item.id);
                } else {
                    this.checkListValue.splice(this.checkListValue.indexOf(item.id), 1);
                }
            },
            _add() {
                if (this.checkListValue.length === 0) {
                    this.$toast('请至少选择一条数据！')
                } else {
                    this._addOk()
                }
            },
            _addOk: async function () {
                let data = {
                    planId: this.planId,
                    samplerIds: this.checkListValue.join(',')
                }
                let result = await samplingPlan.saveSampler(data)
                if (result) {
                    this.$toast('操作成功')
                    this.$router.go(-1)
                }
            },
        }
    }
</script>

<style scoped>

</style>
