<template>
    <div :class="[model.sysCss, 'app-login-org']" :style="containerStyle">
        <Select v-model="curKey">
            <Option v-for="(item, index) in items" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
    </div>
</template>
<script lang='ts'>
import { PanelFieldModel } from '@/model/panel-detail';
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({})
export default class AppLoginOrg extends Vue {

    /**
     * 名称
     *
     * @type {*}
     * @memberof AppLoginOrg
     */
    @Prop() public name!: string;

    /**
     * 输入值
     *
     * @type {*}
     * @memberof AppLoginOrg
     */
    @Prop() public value!: string;

    /**
     * 模型
     *
     * @type {*}
     * @memberof AppLoginOrg
     */
    @Prop() public model!: PanelFieldModel;

    /**
     * 当前值
     *
     * @type {string}
     * @memberof AppLoginOrg
     */
    get curKey() {
        if (this.value) {
            return this.value;
        } else {
            return '';
        }
    }

    set curKey(value: string) {
        this.$emit('valueChange', { name: this.name, value: value });
    }

    /**
     * 组织部门名称数组
     *
     * @type {Array<any>}
     * @memberof AppLoginOrg
     */
    public items: Array<any> = [];

    /**
     * 容器样式
     *
     * @type {any}
     * @memberof AppLoginInput
     */
    public containerStyle: any = null;

    /**
     * 组件初始化数据，vue生命周期
     *
     * @memberof AppLoginOrg
     */
    public created() {
        this.getOrgData();
        if (this.model) {
            this.containerStyle = this.model.getElementStyle();
        }
    }

    /**
     * 获取数据
     *
     * @memberof AppLoginOrg
     */
    public async getOrgData() {
        // todo
        console.log('获取数据暂未实现');
    }
}
</script>
<style lang="less">
@import './app-login-org.less';
</style>