<template>
    <div>
        <div class="layout-cont-btn">
            <van-form @submit="onSubmit">
                <van-field
                        v-model="count"
                        name="count"
                        type="digit"
                        required center
                        label="随机数量"
                        placeholder="请输入随机数量"
                        :rules="[{ required: true, message: '' }]">
                    <template #button>
                        <van-button size="small" type="info" native-type="submit">生成</van-button>
                    </template>
                </van-field>
                <van-field label="人员" center>
                    <template #input>
                        <Tag v-for="item in userList" :key="item.id" name="item" closable @on-close="_handleClose">
                            {{item.name}}
                        </Tag>
                        <van-button size="small" type="default" @click="_add">添加</van-button>
                    </template>
                </van-field>
            </van-form>
        </div>
        <div class="bottom-btn">
            <van-button block type="info" @click="_ok">保存</van-button>
        </div>
        <van-popup v-model="showAllSelect">
            <SelectSamplerChecked @cancel="showAllSelect=false" @on-change="_selectChange"
                                  ref="select"></SelectSamplerChecked>
        </van-popup>
    </div>
</template>

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

    export default {
        name: "CreateSampler",
        components: {
            SelectSamplerChecked
        },
        data() {
            return {
                showAllSelect: false,
                planId: '',
                count: '',
                userList: []
            }
        },
        mounted() {
            this.planId = this.$route.query.planId
        },
        methods: {
            onSubmit() {
                this._create()
            },
            _create: async function () {
                let result = await samplingPlan.generateSampler({count: this.count, planId: this.planId})
                if (result) {
                    this.$toast('生成成功！')
                    this.userList = result
                }
            },
            _handleClose(event, name) {
                const index = this.userList.indexOf(name);
                this.userList.splice(index, 1);
            },
            _add() {
                this.showAllSelect = true
                this.$nextTick(function () {
                    this.$refs.select._open(this.planId)
                })
            },
            _selectChange(res) {
                this.showAllSelect = false
                this.userList = res
            },
            _ok: async function () {
                if (this.userList.length === 0) {
                    this.$toast('请生成人员！')
                } else {
                    let result = await samplingPlan.saveSamplerRandom({
                        planId: this.planId,
                        samplerIds: this.userList.map(item => item.id).join(',')
                    })
                    if (result) {
                        this.$toast('保存成功！')
                        this.$router.go(-2)
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>
