<template>
    <div>
        <!--https://youzan.github.io/vant/#/zh-CN/popup#dai-ma-yan-shi-->
        <!--https://youzan.github.io/vant/#/zh-CN/form#biao-dan-xiang-lei-xing---dan-xuan-kuang-->
        <!--https://youzan.github.io/vant/#/zh-CN/radio-->
        <!--https://youzan.github.io/vant/#/zh-CN/tree-select-->
        <!--https://youzan.github.io/vant/#/zh-CN/button-->
        <van-popup v-model="showPopup" position="bottom"
                   :safe-area-inset-bottom="true"
                   :close-on-popstate="true"
                   :style="{ height: '70%' }">
            <div class="popup-cont-btn popup-shelves">
                <div>
                    <p>抽样单类型</p>
                    <van-radio-group v-model="radio" direction="horizontal">
                        <van-radio :name="1">网络</van-radio>
                        <van-radio :name="0">非网络</van-radio>
                        <van-radio :name="2">农产品</van-radio>
                    </van-radio-group>
                </div>
                <div>
                    <p>所属货架</p>
                    <van-tree-select
                            height="100%"
                            :items="places"
                            :active-id.sync="activeId"
                            :main-active-index.sync="activeIndex"
                    ></van-tree-select>
                </div>
            </div>
            <div class="bottom-btn">
                <van-button square block type="default" @click="_cancel">取消</van-button>
                <van-button square block type="info" @click="_ok">确定</van-button>
            </div>
        </van-popup>
    </div>
</template>

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

    export default {
        name: "SelectShelves",
        data() {
            return {
                showPopup: false,
                radio: -1,
                places: [
                    {
                        text: '地点1',
                        children: [
                            {
                                text: '货架1-1',
                                id: 1,
                            },
                            {
                                text: '货架1-2',
                                id: 2,
                            },
                        ],
                    },
                    {
                        text: '地点2',
                        children: [
                            {
                                text: '货架2-1',
                                id: 3,
                            },
                            {
                                text: '货架2-2',
                                id: 4,
                            },
                        ],
                    },
                    {
                        text: '地点3',
                        children: [
                            {
                                text: '货架3-1',
                                id: 5,
                            },
                            {
                                text: '货架3-2',
                                id: 6,
                            },
                        ],
                    },
                ],
                activeId: '',
                activeIndex: 0,
                planId: ''
            }
        },
        methods: {
            _open(planId) {
                this.showPopup = true
                this.radio = -1
                this.activeId = ''
                this.planId = planId
                this._getShelves()
            },
            _getShelves: async function () {
                let result = await samplingPlace.listPlaces({planId: this.planId})
                if (result) {
                    this.places = result
                } else {
                    this.places = []
                }
            },
            _cancel() {
                this.showPopup = false
            },
            _ok() {
                if (this.radio === -1) {
                    /*todo 修改toast默认配置 https://youzan.github.io/vant/#/zh-CN/toast#xiu-gai-mo-ren-pei-zhi*/
                    this.$toast('请选择抽样单类型！');
                } else if (this.activeId === '') {
                    this.$toast('请选择货架！')
                } else {
                    this.$emit('on-select', {testedType: this.radio, shelfId: this.activeId})
                }
            }
        }
    }
</script>

<style scoped>

</style>
