<template>
	<view>
		<van-sticky>
			<van-nav-bar
					  title="客服介入"
					  left-arrow
					  @click-left="onClickLeft"
			>
				<template #left>
					<van-icon name="arrow-left" size="25" color="#323233" />
				</template>
			</van-nav-bar>
		</van-sticky>
		<img style="width: 100%" src="../../static/img/pingtai_kefu.png" />
		<div style="background: #ffffff;margin:10px 10px;border-radius: 10px;box-shadow: 0 0 6px 0 #ccc;position: relative;top: -50px;"
		     v-for="item in dataList">
			<van-row>
				<van-col span="4">
					<img v-if="item.avatarUrl" style="padding: .6rem;width: 45px;height: 45px;border-radius: 50%" :src="item.avatarUrl" />
					<img v-else style="padding: .6rem;width: 45px;height: 45px" src="../../static/img/kefu1.png" />
				</van-col>
				<van-col span="19" style="margin-top: .8rem">
					<p>{{item.serviceName}} <span style="color: #a8a8a8;font-size: 13px">{{changeName(item.type)}}</span></p>
					<div style="background: #f9f9f9;color:#e3947d;font-size: 13px;padding: .5rem;margin: .5rem auto">
						<p>负责区域：</p>
						<p>
							{{item.responsibleArea}}</p>
					</div>
					<p>
						<van-icon name="service-o" style="margin-right: .5rem" />
						{{item.serviceWechat}}
							<a style="float: right;border: 1px solid #fe8966;color:#fe754d;padding: 3px;display: inline-block;font-size: 12px" @click="showPhone(item.serviceMobile)"  :href="`tel:${temPhone}`">一键拨打</a>
					</p>
					<van-divider />
					<p><img src="../../static/img/wxchat.png" style="margin-right: .6rem">{{item.serviceMobile}}
						<van-button
								  @click="handleCopy(item.serviceMobile)"
								  size="mini"
								  style="float: right;border: 1px solid #fef0ec;color: #fe754d;background: #fef0ec">
							复制
						</van-button>
					</p>
					<van-divider />
				</van-col>
			</van-row>
		</div>
	</view>
	<van-overlay :show="phoneShow" z-index="999">
		<div style="text-align: center;position: absolute;bottom: 10px;width: 94%;padding-left: 3%;">
			<div class="block" @click.stop style="color: #0099ff">
				<van-icon name="phone-o" size="24" style="color: #999999;margin-top: 3px;margin-right: 10px" />
				呼叫 <a style="color:#0099ff " :href="`tel:${temPhone}`">{{temPhone}}</a>
			</div>
			<div class="block" @click.stop style="margin-top: 10px" @click="phoneShow = false">
				取消
			</div>
		</div>
	</van-overlay>
</template>
<script>
  import api from "@/api";
  import { Toast } from "vant";

  export default {
    data() {
      return {
        temPhone:'',
        dataList: [{ phone: "13148528214" }, { phone: "2" }, { phone: "32323232" },{ phone: "13148528214" }, { phone: "2" }, { phone: "32323232" }],
        phoneShow: false,
      };
    },
    mounted(){
      this.platfromlist()
    },
    methods: {
      showPhone(phone){
        this.temPhone=phone
        // this.phoneShow=true
	},
      changeName(type){
        switch (type){
	    case 0:
	      return "市代加盟 "
	    break;
          case 1:
            return "经销商加盟 "
            break
          case 2:
            return "平台客服 "
            break
          case 3:
            return "供货商客服 "
            break
	  }
	},
      platfromlist(){
        api.platfromlist().then(res=>{
          this.dataList=res
        })
	},
      handleCopy(data) {
        let oInput = document.createElement("input");
        oInput.value = data;
        document.body.appendChild(oInput);
        oInput.select();
        document.execCommand("Copy");
        Toast.success("复制成功");
        oInput.remove();
      },
      onClickLeft() {
        history.back();
      },
    },
  };
</script>


<style scoped>
	.block {
		border-radius: 3px;
		color: #52b4ff;
		height: 50px;
		line-height: 50px;
		background-color: #fff;
	}
</style>
