<template>
    <view
        class="dropdown"
    >
        <view
            class="line"
            @tap="handleTap"
        >
            <view
                class="c-line-clamp1"
            >
                <view
                    v-if="!mValue"
                    class="c-color-gray"
                >
                    {{ placeholder }}
                </view>
                <view
                    v-else
                    class="c-color-link"
                >
                    {{ mValue }}
                </view>
            </view>
            <c-icon 
                :style="{color: '#999'}"
                name="right"
                font-size="16"
                />
        </view>
        <c-popup
            :show="show"
            @close="handlePopupClose"
        >
            <view class="pop-wrapper">
                <view class="pop-title"> 
                    {{title}}
                    <c-icon 
                        class="pop-title-icon"
                        name="close"
                        font-size="16"
                        @tap="handlePopupClose"
                    />
                </view>
                <view
                    v-for="(optionItem, optionIndex) in options"
                    :key="optionIndex"
                    :class="optionItem.value === mValue ? 'option-item-selected' : ''"
                    class="option-item c-line-clamp1 c-line-bottom"
                    @tap="handleOptionItemTap({
                        type: type,
                        item: optionItem,
                        index: index,
                        optionIndex: optionIndex
                    })"
                >
                    <view> {{ optionItem.text }} </view>
                    <c-checkbox
                        radio
                        :checked="optionItem.value === mValue"
                        :check-style="{
                            'margin-left': '-.1rem',
                            'padding-left': '.1rem',
                        }"
                    />
                </view>
            </view>
        </c-popup>
    </view>
</template>

<script>
/**
* @file 底部弹层
* @author  qishunli
*/
import Popup from '@baidu/med-ui/components/Popup/Popup';
import Icon from '@baidu/med-ui/components/Icon/Icon';
import Checkbox from '../common/checkbox';

export default {
    config: {
        component: true
    },
    components: {
        'c-popup': Popup,
        'c-icon': Icon,
        'c-checkbox': Checkbox
    },
    props: {

        /**
         * 值
         */
        value: {
            type: String
        },

        /**
         * 弹层标题
         */
        title: {
            type: String
        },

        /**
         * 索引
         */
        index: {
            type: Number
        },

        /**
         * 类型
         */
        type: {
            type: String
        },

        /**
         * 文字占位
         */
        placeholder: {
            'type': String,
            'default': '请选择'
        },

        /**
         * 选项
         */
        options: {
            type: Array
        }
    },
    data() {
        return {
            show: false,
            mValue: null
        };
    },
    watch: {
        value(val) {
            this.mValue = val;
        }
    },
    created() {
        this.mValue = this.value;
    },
    methods: {
        handleTap() {
            if (this.options && this.options.length !== 0) {
                this.show = true;
            }
        },
        handlePopupClose() {
            this.show = false;
        },
        handleOptionItemTap(obj) {
            this.mValue = obj.item.value;
            this.show = !this.show;

            /**
             * 项点击事件
             *
             * @event itemtap
             *
             * @property {number} param1.index 当前点击项的索引
             * @property {object} param1.item 当前点击项对象
             * @property {string} param1.item.text 当前点击项的文案
             * @property {string} param1.item.value 当前点击项的值
             */
            this.$emit('itemtap', obj);
        }
    }
};
</script>

<style lang="less" scoped>
.dropdown {
    background-color: #fff;
}
.line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .13rem;
    line-height: .13rem;
}
.pop-wrapper {
    padding-bottom: .2rem;
}
.pop-title {
    position: relative;
    text-align: center;
    font-size: .18rem;
    line-height: .18rem;
    color: #333;
    margin-top: .2rem;
    &-icon {
        position: absolute;
        color: #555;
        right: 0;
        top: .033rem;
    }
}
.option-item {
    padding: .15rem 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #555;
    font-size: .13rem;
    line-height: .13rem;
}
.option-item-selected {
    font-weight: bold;
    color: #000;
}
</style>
