<template>
    <view class="satisfaction-wrap">
        <view
            v-for="(opt, i) in buttons"
            :key="i"
            :style="{color: opt.textColor, background: opt.bgColor}"
            class="btn-style c-gap-top"
            @tap="radioBtnTap(opt, i)"
        >
            <img class="like-icon" :src="opt.icon">
            <text class="c-gap-left-small option-text">{{ opt.text }}</text>
        </view>
    </view>
</template>
<script>
/**
* @file 客户满意度评价
* @author quyang
* @categories 业务组件
* @tags [component]
*/
import {request} from '../../utils/request';
export default {
    config: {
        component: true
    },
    components: {
    },
    props: {
        // 数据对象
        item: {
            'type': Object,
            'default': {}
        }
    },
    data() {
        return {
            count: 0,
            buttons: []
        };
    },
    created() {
        this.buttons = this.item.options;
    },
    methods: {
        radioBtnTap(opt, i) {
            if (this.count >= 1) return;
            let self = this;
            this.count += 1;
            request({
                url: this.item.callbackUrl,
                data: {
                    value: opt.value
                },
                method: 'POST',
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                },
                isNeedLogin: true,
            }).then(res => {
                if (res.data.normalDialog){
                    res.data.anchor = 'last';
                    this.$emit('onDialog', res.data);
                    this.buttons = res.data.options;
                }
                else {
                    self.$api.showToast({
                        icon: 'none',
                        title: res.data.toast
                    });
                    this.buttons = res.data.options;
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.satisfaction-wrap {
    display: flex;
    justify-content: space-around;
    margin-bottom: .02rem;
    .btn-style {
        width: 1.26rem;
        height: .32rem;
        border-radius: .19rem;
        border: 1px solid #F1F1F1;
        display: flex;
        justify-content: center;
        line-height: .32rem;
        &:nth-child(1) {
            margin-right: 8px;
        }
    }
    .like-icon {
        width: .14rem;
        height: .14rem;
        padding-top: .09rem;
    }
}
</style>
