<style lang="less">
.custome-service-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    &.show {
        display: flex;
    }
    &.hide {
        display: none;
    }
    .panel-mask {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.2);
    }
    .content {
        position: absolute;
        bottom: 0px;
        text-align: center;
        border-radius: 16px 16px 0px 0px;
        background: #ffffff;
        width: 100%;
        height: 296rpx;

        .sp-text {
            height: 100rpx;
            color: #1db1b2;
            font-family: PingFang SC;
            font-size: 32rpx;
            font-weight: 400;
            line-height: 100rpx;
        }
        .dir {
            height: 16rpx;
            background: #f1f4f6;
        }
        .text {
            color: #8b949e;
            font-family: PingFang SC;
            font-size: 32rpx;
            font-weight: 400;
            line-height: 100rpx;
        }
    }
}
</style>

<template>
    <cover-view
        class="{{'custome-service-panel '+(show?'show':'hide')}}"
        v-on:touchmove.stop="stopProgration"
    >
        <cover-view
            class="panel-mask"
            v-on:click="closePanel"
        ></cover-view>
        <cover-view class="content">
            <cover-view>
                <cover-view
                    class="sp-text"
                    @click="callPhone"
                >
                    呼叫 {{ phone }}
                </cover-view>
                <cover-view class="dir"></cover-view>
                <cover-view
                    class="text"
                    v-on:click="closePanel"
                >取消</cover-view>
            </cover-view>
        </cover-view>
    </cover-view>
</template>

<script>
import wepy from '@wepy/core'
import config from '@config'
import { mapState } from '@wepy/x'
import store from '@/store'

wepy.component({
  store,
  data: {
    h5StaticPath: config.h5StaticPath,
    h5Origin: config.h5Origin,
    showLink: `${config.h5Origin}/#/wx-external-link`
  },
  props: {
    show: Boolean,
    phone: String

  },
  computed: {
    ...mapState({ userInfo: state => state.user.userInfo })
  },
  created() {

  },
  methods: {
    callPhone() {
      let _this = this
      wx.makePhoneCall({
        phoneNumber: this.phone,
        complete() {
          _this.$emit('custome-service-close', false)
        }
      })
    },
    closePanel() {
      this.$emit('custome-service-close', false)
    },
    stopProgration() { }
  }
})
</script>


<config>
{
  
}
</config>
