<template>
    <div :class="curClassName" :style="curStyle">
        <Select v-model="curValue" placeholder="请选择组织">
            <Option v-for="(item, index) in items" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
    </div>
</template>
<script lang='ts'>
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 layoutModelDetails: any;

    /**
     * 下标
     *
     * @type {number}
     * @memberof AppLoginOrg
     */
    @Prop({ default: 0 }) public index?: number;

    /**
     * 项名称
     *
     * @type {*}
     * @memberof AppLoginOrg
     */
    get itemName() {
        return this.index ? `${this.name}_${this.index}` : this.name;
    }

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

    /**
     * 设置当前值
     *
     * @type {string}
     * @memberof AppLoginOrg
     */
    set curValue(value: string) {
        this.$emit('valueChange', { name: this.itemName, value: value });
    }

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

    /**
     * 当前容器样式
     * 
     * @memberof AppLoginOrg
     */
    get curStyle() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.getElementStyle();
        }
    }

    /**
     * 类名
     *
     * @memberof AppLoginOrg
     */
    get curClassName() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return `app-login-org ${this.itemName} ${layoutModel.sysCss}`;
        }
    }

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

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