<template>
    <view>
        <view>{{contentItem.text}}</view>
        <c-popup
            :rowTile="true"
            :show="isOpen"
            class="wa-pop">
            <view>
                <view
                    v-for="(item, i) in contentItem.list"
                    class="wa-op-item c-span-middle c-line-bottom">
                    <view
                        @tap="onTapItem(item)"
                        :class="{'c-gap-inner-top-small': i === 0, 'c-gap-inner-bottom-small': i === (contentItem.list.length - 1)}">{{ item.name }}</view>
                </view>
            </view>
            <view v-for="(btn, i) in contentItem.btns">
                <view class="wa-pop-divider"></view>
                <view
                    @tap="onTapBtn(btn)"
                    class="wa-op-item c-span-middle"
                    :class="[btn.classname, {'c-gap-inner-top-small': i === 0, 'c-gap-inner-bottom-small': i === (contentItem.btns.length - 1)}]">
                    <view>
                        <c-icon :name="btn.icon" class="c-gap-right-small">
                        </c-icon>
                        <span>{{ btn.name }}</span>
                    </view>
                </view>
            </view>
        </c-popup>
    </view>
</template>
<style lang="less" scoped>
.wa-pop {
    text-align: center;
    position: absolute;
}
.wa-pop-divider {
    height: .1rem;
    background-color: #F5F5F5;
}
.wa-op-item {
    height: .48rem;
}
.wa-op-btn {
    color: #02b7ca;
}
</style>
<script>
/**
 * @file components/im/im-operate
 * @author haoyan
 */
import Popup from '@baidu/med-ui/components/Popup/Popup';
import Icon from '@baidu/med-ui/components/Icon/Icon';
import * as log from '../../utils/log';

export default {
    config: {
        component: true
    },
    props: {
        contentItem: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            isOpen: false
        };
    },
    components: {
        'c-popup': Popup,
        'c-icon': Icon
    },
    mounted() {
        // 延迟0.7s弹出，便于用户阅读对话消息
        if (process.env.MARS_ENV === 'h5') {
            let time = setTimeout(() => {
                this.isOpen = true;
                clearTimeout(time);
            }, 800);
        }
        else {
            this.isOpen = true;
        }
    },
    methods: {
        // 点击操作按钮
        onTapBtn(btn) {
            log.send({
                type: 'b',
                action: 'operateBtnTap'
            });
            this.$emit('questionReply', {
                name: btn.name,
                value: btn.value,
                callbackUrl: this.contentItem.callbackUrl,
                resetUrl: this.contentItem.resetUrl
            });
            this.isOpen = false;
        },
        // 点击选项
        onTapItem(item) {
            log.send({
                type: 'b',
                action: 'operateItemTap'
            });
            this.$emit('questionReply', {
                name: item.name,
                value: item.value,
                callbackUrl: this.contentItem.callbackUrl,
                resetUrl: this.contentItem.resetUrl
            });
            this.isOpen = false;
        }
    }
};
</script>