<template>
    <view 
        v-if="item && item.type === 'picker'"
        :class="['form-type-input', item.itemType && item.itemType === 'noTitle' ? 'c-gap-bottom' : '']"
    >
        <view 
            v-if="item.question"
            class="text-left" 
            :style="titleStyle"
        ><text v-if="item.required && requireShow" class="c-color-mall c-gap-right-mini c-inline-block">*</text>
            {{ item.question }}
        </view>
        <view :class="item.itemType && item.itemType === 'noTitle' ? 'input-opt-wrap-complete' : 'input-opt-wrap'">
            <picker
                :mode="item.mode"
                :value="selectedIndex"
                :range="item.options"
                :range-key="item.rangeKey"
                :title="item.question"
                class="c-tar input-item"
                @change="selectorChange"
            >
                <view>
                    <text v-if="selectedIndex || (selectedIndex === 0)">{{ item.options[selectedIndex][item.rangeKey] }}</text>
                    <text v-else class="fb-input-ph">{{ item.placeHolder || '请选择' }}</text>
                </view>
            </picker>
            <view v-if="item.rightText" class="c-gap-left-small">{{ item.rightText }}</view>
        </view>
    </view>
</template>

<script>
/**
 * @file picker
 * @author zhangeryi
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    props: {
        /**
         * 组件数据
         */
        item: {
            type: Object,
            default: () => ({})
        },
        requireShow: {
            type: Boolean,
            default: false
        },
        titleStyle: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            selectedIndex: ''
        };
    },
    lifetimes: {
        attached() {
            let selectedIndex = this.item.options.findIndex(i => i[this.item.rangeKey] && i[this.item.rangeKey] === this.item.defaultValue);
            this.selectedIndex = selectedIndex !== -1 ? selectedIndex : '';
            /**
             * 数据改变
             */
            if (this.selectedIndex || this.selectedIndex === 0) {
                this.$emit('datachange', this.item.qid, this.item.options[this.selectedIndex][this.item.rangeKey]);
            }
        }
    },
    methods: {
        selectorChange(e) {
            let { value } = e.detail;
            this.selectedIndex = value || 0;
            /**
             * 数据改变
             */
            this.$emit('datachange', this.item.qid, this.item.options[this.selectedIndex][this.item.rangeKey]);
        }
    }
};
</script>
<style lang="less" scoped>
.form-type-input {
    padding: 0 13px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .14rem;
    color: #555555;
    overflow: hidden;
}
.input-opt-wrap {
    display: flex;
    width: 65%;
    margin-left: 15px;
}
.input-opt-wrap-complete {
    display: flex;
    align-items: center;
    padding: 0 11px;
    width: 100%;
    height: 44px;
    background: #F8F8F8;
    border-radius: 6px;
}
.input-item-complete {
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    font-size: .14rem;
    color: #252525;
    caret-color: #00C8C8;
    background: #F8F8F8;
    &::-webkit-input-placeholder {
        color: #999;
    }
}
.input-item {
    height: 80%;
    width: 100%;
    outline: none;
    border: none;
    font-size: .15rem;
    color: #252525;
    text-align: right;
    caret-color: #00C8C8;
    &::-webkit-input-placeholder {
        color: #999;
    }
}
.fb-input-ph {
    font-size: .15rem;
    line-height: 47px;
    color: #b8b8b8;
    letter-spacing: 0;
    text-align: right;
}
.fb-input-ph-notitle {
    font-size: .15rem;
    line-height: 47px;
    color: #b8b8b8;
    letter-spacing: 0;
}

.text-left {
    font-family: PingFangSC-Medium;
    color: #1F1F1F;
}
</style>
