<template>
  <div ref="tsRoot">
    <divHeader ref="tsHeader" v-if="$store.state.headers"></divHeader>
    <nuxt ref="tsNuxt" />
    <divFooter v-if="$store.state.footers"></divFooter>
  </div>
</template>
<script>
import divHeader from "~/components/headers.vue";
import divFooter from "~/components/footers.vue";
import Setting from '@/setting'
export default {
  components: {
    divHeader,
    divFooter,
  },
  created() {
    this.initkefu()
  },
  mounted() { },
  methods: {
    initkefu() {
      if (localStorage.getItem("token")) {
        (function () {
          const _s = document.createElement("script");
          // _s.src = "https://yaochangkf.three.xinzhidi.cn/customerServer.js";
          _s.src = Setting.kfURL + "/customerServer.js";
          _s.onload = function () {
            var userInfo = JSON.parse(localStorage.getItem("userInfo"));
            var uplodBaseURL = localStorage.getItem("uplodBaseURL");
            var option = {
              authInit: true,
              openUrl: Setting.kfURL, // "https://yaochangkf.three.xinzhidi.cn",
              token: Setting.kfToken,
              kefuid: "", //默认为空自动对接客服，可填写指定客服ID
              isShowTip: true, // 初始化成功后，界面右下角会自动创建 “联系客服按钮”， 如无需默认展示，则填写false即可,默认为true
              mobileIcon: "", //  手机端悬浮客服图片
              pcIcon: "", // pc端悬浮客服图片
              windowStyle: "center", //默认空 右下角小弹窗， center 普通中间弹窗样式
              sendUserData: {
                uid: userInfo.member_id, // 用户id
                nickName: userInfo.nickname, // 用户昵称
                phone: userInfo.mobile, // 用户联系方式
                sex: userInfo.sex, // 用户性别
                avatar: uplodBaseURL + userInfo.headimg, // 用户头像 URL地址
                openid: "", //微信openid
              },
            };
            var canCustomerServer = new initCustomerServer(option);
            canCustomerServer.init();
          };
          document.head.appendChild(_s);
        })();
      }
    }
  },
};
</script>

<style lang="scss">
:root {
  --themeColor: #00bef9; // 字体色
}

.el-button--primary {
  background-color: var(--themeColor) !important;
  border-color: var(--themeColor) !important;
}

.el-input__inner:focus {
  border-color: var(--themeColor) !important;
}

.el-checkbox__inner,
.el-radio__inner {
  border-color: var(--themeColor) !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner {
  background-color: var(--themeColor) !important;
  border-color: var(--themeColor) !important;
}

.el-checkbox__input.is-checked+.el-checkbox__label,
.el-button--text {
  color: var(--themeColor) !important;
}

.el-button--info {
  background: #f6f6f6 !important;
  border-color: #f6f6f6 !important;
  color: #999 !important;
}

.el-range-editor.is-active,
.el-range-editor.is-active:hover {
  border-color: var(--themeColor) !important;
}

.el-date-table td.end-date span,
.el-date-table td.start-date span {
  background-color: var(--themeColor) !important;
}

.el-date-table td.today span,
.el-date-table td.available:hover {
  color: var(--themeColor) !important;
}
</style>
