<!-- Created by henian.xu on 2018/7/23. -->
<!-- 当前用户 应用列表选择器 -->

<template>
    <div class="app-picker">
        <div class="label">{{ $$t('vmf_app', '应用') }}</div>
        <el-select
            v-model="model"
            :placeholder="placeholder"
            size="small"
        >
            <el-option
                v-for="item in appList"
                :key="item.id"
                :label="item.appName"
                :value="item.id + ''"
            />
        </el-select>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
    name: 'AppPicker',
    data() {
        return {};
    },
    props: {
        value: {
            required: true,
            type: [Number, String],
            default: '',
        },
        placeholder: {
            type: String,
            default() {
                return this.$$t('vmf_placeholder', '请选择');
            },
        },
    },
    computed: {
        ...mapGetters('App', ['appList']),
        model: {
            get() {
                return `${this.value}`;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
    },
    watch: {
        appList: {
            handler(val) {
                if (val && val.length && !this.value) {
                    this.model = val[0].id;
                }
            },
            immediate: true,
        },
    },
    methods: {
        ...mapActions('App', ['getAppList']),
    },
    created() {
        this.getAppList();
    },
};
</script>

<style lang="scss">
.app-picker {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    > .label {
        white-space: nowrap;
        margin-right: $margin;
    }
}
</style>
