<template>
    <view 
        v-if="isLast"
        id="selectBottomWrapper"
        class="inner-picker-wrap"
        :style="{'opacity': opacity}"
    >
        <!-- 隐私声明 -->
        <view
            v-if="item.privacyDeclaration && item.privacyDeclaration.text"
            class="privacy-declaration"
        >
            <image
                v-if="item.privacyDeclaration.icon" 
                class="privacy-declaration-icon"
                :src="item.privacyDeclaration.icon"
                lazy-load 
            />
            <text>{{ item.privacyDeclaration.text }}</text>
        </view>
        <view class="picker">
            <view class="picker-header">
                <view class="picker-title">{{ item.btntext || '请选择' }}</view>
                <view class="picker-submit" @tap="onSubmit">确定</view>
            </view>
            <view
                v-if="isSwan"
                style="position: relative;"
            >
                <!-- 小程序的picker-view组件中 indicator的before+after的上线边框样式覆盖不掉，通过indicator-style隐藏掉，用一个view来单独实现indicator效果 -->
                <view class="swan-picker-indicator"/>
                <picker-view
                    class="swan-picker"
                    indicator-style="display: none;"
                    :value="[defaultIdx || 0]"
                    @change="selectorChange"
                >
                    <picker-view-column>
                        <view 
                            v-for="(i, index) in list" 
                            :key="index"
                            style="text-align: center; height: 34px; line-height: 34px;"
                        >
                            {{ i.name }}
                        </view>
                    </picker-view-column>
                </picker-view>
            </view>
            
            <view
                v-else
                class="picker-body"
            >
                <roller 
                    :list="list" 
                    :index="defaultIdx || 0"
                    :range-key="item.key || 'name'"
                    @change="selectorChange"
                />
            </view>
        </view>
    </view>
</template>
<script>
/**
* @file 问诊-单列选择-嵌入在页面内部，非popup样式 —— 给年龄选择使用
* @author niulei
* @categories 业务组件
* @tags [component]
*/
import RollerOfImPickerInner from './roller-of-im-picker-inner';
import * as core from '../../utils/core';
export default {
    config: {
        component: true
    },
    components: {
        'roller': RollerOfImPickerInner,
    },
    props: {
        // 数据对象
        item: {
            'type': Object,
            'default': {}
        },
        // 是否为对话流中最后一条
        isLast: {
            'type': Boolean,
            'default': false
        }
    },
    data() {
        const isSwan = process.env.MARS_ENV === 'swan';
        return {
            isSwan,
            rand: `picker_${core.rand()}`, // trick解决data中使用id，导致小程序原生id被覆盖的问题
            list: [], // 选项数据列表，在init方法中初始化
            defaultIdx: 0,
            curSelectedIndex: 0, // Number类型，表示当前picker中处于选中态的item顺序
            btnShowFlag: false,
            isSelected: false,
            opacity: 0
        };
    },
    lifetimes: {
        attached() {
            this.initSingleSelector();
        },
        ready() {
            if (this.isSwan) {
                setTimeout(() => {
                    this.opacity = 1;
                }, 800);
            } else {
                setTimeout(() => {
                    this.opacity = 1;
                }, 500);
            }
        }
    },
    methods: {
        initSingleSelector() {
            this.defaultIdx = (this.item.defaultIndex || 0); // 如果item中没有指定，就默认为0被初始选中
            this.curSelectedIndex = this.defaultIdx;
            if (this.item.list) { // 初始化选项数据列表
                this.list = this.item.list;
            } else if (this.item.column) {
                this.list = this.item.column.map(o => o.list);
            }
        },
        /**
         * 触发外部的 questionReply 监听
         */
        onSubmit() {
            let name = this.list[this.curSelectedIndex].name;
            let value = this.list[this.curSelectedIndex].value;
            this.isSelected = true;
            // 页面数据请求
            this.$emit('questionReply', {
                callbackUrl: this.item.callbackUrl,
                resetUrl: this.item.resetUrl,
                value: value,
                name: name,
                params: value
            });
        },
        selectorChange(data) {
            if (this.isSwan) {
                this.curSelectedIndex = data.detail.value[0];
            } else {
                this.curSelectedIndex = data.index;
            }
        },
    }
};
</script>
<style lang="less">
.inner-picker-wrap {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
}
/** privacy高度48px */
.privacy-declaration {
    background: #F5F5F5;
    padding: 17px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #858585;
    line-height: 14px;
    font-weight: 400;
    display: flex;

    &-icon {
        margin-right: 4px; 
        width: 13px; 
        height: 14px;
    }
}
.picker {
    background: #fff;
    border-radius: 21px 21px 0 0;
}
/** header高度44px */
.picker-header {
    display: flex;
    position: relative;
    padding: 13px 0;
    font-size: 17px;
    line-height: 17px;
    border-bottom: solid 1px #F5F5F5;
}
.picker-title {
    text-align: center;
    color: #1F1F1F;
    margin: 0 auto;
}
.picker-submit {
    position: absolute;
    right: 28px;
    color: #00C8C8;
}
/** picker高度238px */
.picker-body {
    font-size: 12px;
    position: relative;
    height: 238px;
    text-align: center;
    overflow: hidden;
    display: flex;
}
.swan-picker {
    width: 100%; 
    height: 238px;
}
.swan-picker-indicator {
    background: #EFEFEF; 
    border-radius: 10px; 
    margin: 0px 8px; 
    width: calc(100% - 16px);
    height: 34px; 
    z-index: 0; 
    position: absolute;
    top: 102px;
}
</style>
