<template>
    <view class="components-service">
        <widget-modal v-show="showService" @close="close" title="请选择客服">
            <view class="service-list">
                <button class="btn-item" @click="utils.callPhone(serviceMobile)">电话客服</button>
                <button class="btn-item" open-type="contact">微信客服</button>
            </view>
        </widget-modal>
    </view>
</template>

<script>
import WidgetModal from "@/components/widgets/modal";
import { mapState } from "vuex";
export default {
    name: "widget-service",
    data() {
        return {
            utils: this.$utils,
            serviceMobile: "",
        };
    },
    props: {
        showService: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        WidgetModal,
    },
    computed: {
        ...mapState({
            platformData: (state) => state.system.platformData,
        }),
    },
    created() {},
    async mounted() {
        await this.$store.dispatch("system/platformData");
        this.serviceMobile = this.platformData.serviceMobile;
    },
    destroyed() {},
    methods: {
        close() {
            this.$emit("close");
        },
        call() {},
    },
};
</script>

<style lang="less" scoped>
.components-service {
    width: 100%;
    .service-list {
        width: 100%;
    }
    .btn-item {
        color: #666666;
        font-size: 30rpx;
        background-color: unset;
        border-bottom: 2rpx solid #e0e0e0;
    }
    .btn-item::after {
        border: 0;
    }
}
</style>