<template>
    <ion-list class="app-mobile-radio-list">
        <ion-radio-group  :value="value" @ionChange="change">
        <ion-item class="app-mobile-radio-list-item"  v-for="(item,index) in options" :key="index">
            <ion-label>{{item.text}}</ion-label>
            <ion-radio  :disabled="item.disabled" color="success" :value="item.value"></ion-radio>  
        </ion-item>
        </ion-radio-group>
    </ion-list>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import CodeListService from "@app-core/service/app/code-list-service";

@Component({
    components: {}
})
export default class AppMobRadio extends Vue {

    /**
     * 代码表服务对象
     *
     * @type {CodeListService}
     * @memberof AppMobRadio
     */
    public codeListService: CodeListService = CodeListService.getInstance();

    /**
     * 代码表标识
     *
     * @type {string}
     * @memberof AppMobRadio
     */
    @Prop() public tag!: string;

    /**
     * 代码表类型
     *
     * @type {string}
     * @memberof AppMobRadio
     */
    @Prop() public type!: string;

    /**
     * 代码表列表项
     *
     * @type {Array<any>}
     * @memberof AppMobRadio
     */
    public options?: Array<any> = [];

    /**
     * 输入值
     *
     * @type {any}
     * @memberof AppMobRadio
     */
    @Prop() public value?: any;

    /**
     * 禁用
     *
     * @type {boolean}
     * @memberof AppMobRadio
     */
    @Prop() public disabled?: boolean;

    /**
     * change事件
     *
     * @param {*} data
     * @memberof AppMobRadio
     */
    public change(data: any) {
        this.$emit("change", data.detail.value);
    }

    /**
     *  vue 生命周期
     *
     * @returns
     * @memberof AppMobRadio
     */
    public created() {
        if (!this.tag || !this.type) {
            return;
        }
        this.loadItems();
    }

    /**
     * 加载 数据
     *
     * @private
     * @returns {Promise<any>}
     * @memberof AppMobRadio
     */
    private async loadItems(): Promise<any> {
        if (Object.is(this.type, 'dynamic')) {
            const response: any = await this.codeListService.getItems(this.tag);
            if (response && response.status === 200) {
                this.options = response.data;
            } else {
                this.options = [];
            }
        } else {
            this.options = this.$store.getters.getCodeListItems(this.tag);
        }
    }

    /**
     *  vue 生命周期
     *
     * @memberof AppMobRadio
     */
    public mounted() {
        this.changeLabelStyle();
    }

    /**
     * 修改label默认样式
     * @memberof AppMobPicture
     */
    public changeLabelStyle() {
        document.querySelectorAll(".app-mobile-radio-list").forEach((element: any) => {
            let prev = this.getNearEle(element, 1);
            if (prev) {
                prev.style.transform = 'none';
            }
        })
    }

    /**
     * 查找相邻前一个元素
     * 
     *  @memberof AppMobPicture
     */
    public getNearEle(ele: any, type: any) {
        type = type == 1 ? "previousSibling" : "nextSibling";
        var nearEle = ele[type];
        while (nearEle) {
            if (nearEle.nodeType === 1) {
                return nearEle;
            }
            nearEle = nearEle[type];
            if (!nearEle) {
                break;
            }
        }
        return null;
    }
}
</script>

<style lang="less">
.app-mobile-radio-list-item{
    --inner-border-width:0;
}
</style>