<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 locList" :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="showSelect">
            <SelectLocChecked @cancel="showSelect=false" @on-change="_selectChange" ref="select"></SelectLocChecked>
        </van-popup>
    </div>
</template>

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

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

<style scoped>

</style>
