<template>
    <Modal title="选择考试"
        :value="true"
        :closable="false"
        :mask-closable="false"
        @on-ok="onOK"
        @on-cancel="onCancel">
        <Form label-position="right"
            :label-width="60">
            <FormItem label="考试">
                <Select @on-change="change"
                    clearable
                    label-in-value>
                    <Option v-for="item in examList"
                        :value="item.guid"
                        :key="item.guid">{{item.name}}</Option>
                </Select>
            </FormItem>
        </Form>
    </Modal>
</template>
<script>
import { getExamList } from '../api/capacity'

export default {
    name: 'SelectExam',
    data() {
        return {
            selectedExam: '',
            examList: []
        }
    },
    props: {
        onOkCb: {
            type: Function
        }
    },
    computed: {},
    methods: {
        change(value) {
            this.selectedExam = value
        },
        onCancel() {
            this.remove();
        },
        onOK() {
            if (this.onOkCb) {
                this.onOkCb(this.selectedExam)
            }
            this.remove();
        },
        remove() {
            setTimeout(() => {
                this.destroy();
            }, 300);
        },
        destroy() {
            this.$destroy();
            document.body.removeChild(this.$el);
        }
    },
    mounted() {
        getExamList({ tenant_id: this.tenantId }).then(res => {
            this.examList = res.questionList.map(item => {
                return { guid: item.guid, name: item.name }
            })
        })
    }
};
</script>
<style lang="less"
    scoped>
</style>