<template>
    <view
        class="m-popup-picker"
        :style="{
            zIndex: zIndex
        }">
        <c-popup
            :show="show"
            :z-index="zIndex"
            :row-tile="rowTile"
            :visibility-only-mask="visibilityOnlyMask"
            @close="close"
            >
            <view
                v-if="title"
                class="m-title c-font-17 c-gap-inner-top-large c-gap-inner-bottom-small c-line-clamp1"
            >
                {{title}}
                <c-icon
                    name="close"
                    :style="{
                        color: '#555'
                    }"
                    class="close"
                    @tap="close"
                />
            </view>
            <view class="m-con">
                <view
                    v-for="(item, index) in options"
                    :key="index"
                    @tap="itemTap(item, index)"
                    :style="{
                        color: index === getIndex ? selectedColor : color
                    }"
                    class="m-item c-gap-inner-top-large c-gap-inner-bottom-large c-font-15">
                    {{item[showText]}}
                </view>
            </view>
        </c-popup>
    </view>
</template>

<script>
/**
 * @file 下边弹出picker选择器
 * @author zhangeryi@baidu.com
 */
import Icon from '@baidu/med-ui/components/Icon/Icon';
import Popup from '@baidu/med-ui/components/Popup/Popup';
export default {
    config: {
        component: true
    },
    components: {
        'c-icon': Icon,
        'c-popup': Popup
    },
    props: {
        // 是否显示
        show: {
            'type': Boolean,
            'default': false
        },
        zIndex: {
            'type': String,
            'default': '921'
        },
        // 是否不要内边距
        rowTile: {
            'type': Boolean,
            'default': false
        },
        // visibility 是否只生效于 mask 上（在内容区 slot 上如果有输入框等容易在不同机型上出问题的控件，需要保持 content 一直显示）
        visibilityOnlyMask: {
            'type': Boolean,
            'default': false
        },
        // 选项
        options: {
            type: Array,
            default() {
                return [];
            }
        },
        selectedIndex: {
            'type': Number,
            'default': 0
        },
        // 标题
        title: {
            type: String
        },
        // 选项颜色
        color: {
            'type': String,
            'default': '#555555'
        },
        // 选中颜色
        selectedColor: {
            'type': String,
            'default': '#ff6050'
        },
        // 项目文案字段
        showText: {
            'type': String,
            'default': 'text'
        },
        // 项目value字段
        bindValue: {
            'type': String,
            'default': 'value'
        }
    },
    data() {
        return {
            getIndex: this.selectedIndex
        };
    },
    watch: {
        selectedIndex(value) {
            this.getIndex = value;
        }
    },
    methods: {
        itemTap(item, index) {
            this.$emit('change', {item, index});
            this.getIndex = index;
        },
        close() {
            this.$emit('close');
        }
    }
};
</script>
<style lang="less" scoped>
.m-popup-picker {
    position: relative;
    .m-title {
        text-align: center;
        padding-left: .2rem;
        padding-right: .2rem;
        position: relative;
        .close {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    .m-con {
        text-align: center;
        .m-item {
            border-top: 1px solid #f1f1f1;
            &:first-child {
                border-top: none;
            }
        }
    }
}
</style>
