<template>
  <div class="service-wrap">
    <van-nav-bar
      title="服务"
      left-arrow
      @click-right="onClickRight"
    >
      <i class="icon icon-wode-kefu" slot="left">
        <a :href="'tel:' + confData.telCnPrefix + confData.telCn" class="call"></a>
      </i>
      <i class="icon icon-xiaoxi" slot="right" />
    </van-nav-bar>
    <img src="../assets/imgs/Bitmap@2x.png" alt="">
    <div class="btn">
      <van-button type="default" @click="applyForm">预约顾问</van-button>
      <van-button type="default" @click="handelQimo">在线咨询</van-button>
    </div>
    <h4>帮助中心</h4>
    <div class="content">
      <van-tabs @click="onClick" v-model="active" swipeable sticky>
        <van-tab v-for="item in tabs" :title="item.name" :key="item.id">
          <van-cell-group v-if="data.length">
            <van-cell
              v-for="child in data"
              :key="child.id"
              @click="goDetail(child)"
              :title="child.title"
              is-link
            />
          </van-cell-group>
          <div class="room-detail-none" v-if="!data.length">暂无数据</div>
        </van-tab>
      </van-tabs>
    </div>
    <tab-bar :selected="selected"/>
  </div>
</template>

<script>
import TabBar from "@/components/common/TabBar";

export default {
  name: "Service",
  components: {
    TabBar
  },
  data() {
    return {
      active: 0,
      selected: 2,
      pageSize: 10,
      data: [],
      tabs: [],
      confData: {}
    };
  },
  created() {
    this.getTabs();
    this.getconfData();
    this.setQimoClient();
    // if (this.$util.checkIsLogin()) {
    //   this.setQimoClient();
    // }
  },
  watch: {
    active(val) {
      if (val != -1) {
        this.page = 1;
        this.getData(this.tabs[val].id);
      }
    }
  },
  methods: {
    // 设置客服信息
    setQimoClient() {
      let { navigator } = window;
      let systemInfo = {
        appCodeName: navigator.appCodeName || "",
        appName: navigator.appName || ""
      };
      let userInfo = {};
      if (this.$util.getLoginUserInfo()) {
        userInfo = JSON.parse(
          decodeURIComponent(this.$util.getLoginUserInfo())
        );
      }
      if (userInfo) {
        window.qimoClientId = {
          userId: userInfo.id,
          nickName: userInfo.userName,
          customField: {
            用户名称: userInfo.userName,
            用户ID: userInfo.id,
            电话: `${userInfo.mobilePrefix || ""} ${userInfo.mobile || ""}`,
            邮箱: userInfo.email || "",
            设备类型: "h5",
            设备ID: `${systemInfo.appCodeName} ${systemInfo.appName}`
          }
        };
      } else {
        let UNIQUE_TAG_QIMO = window.localStorage.getItem("UNIQUE_TAG_QIMO");
        if (!UNIQUE_TAG_QIMO) {
          UNIQUE_TAG_QIMO = `h5_qimo_${new Date().valueOf().toString()}${
            Math.random()
              .toString()
              .split(".")[1]
          }`;
          window.localStorage.setItem("UNIQUE_TAG_QIMO", UNIQUE_TAG_QIMO);
        }
        window.qimoClientId = {
          userId: UNIQUE_TAG_QIMO,
          nickName: "h5端未登录用户",
          customField: {
            用户名称: "h5端未登录用户",
            设备类型: "h5",
            设备ID: `${systemInfo.appCodeName} ${systemInfo.appName}`
          }
        };
      }
      this.loadQimoScript();
    },
    // 客服
    handelQimo() {
      window.qimoChatLoaded && window.qimoChatClick();
      // let checkIsLogin = this.$util.checkIsLogin();
      // if (checkIsLogin) {
      //   window.qimoChatLoaded && window.qimoChatClick();
      // } else {
      //   this.$Dialog
      //     .confirm({
      //       message: "请登录后咨询在线客服"
      //     })
      //     .then(() => {
      //       let lang = this.$store.state.langStr;
      //       let { fullPath } = this.$route;
      //       window.location.href = `/${lang}/login?next=${encodeURIComponent(
      //         fullPath
      //       )}`;
      //     })
      //     .catch(() => {});
      // }
    },
    // 加载客服
    loadQimoScript() {
      if (!document.getElementById("QIMO_SCRIPT_ID")) {
        let scriptQimo = document.createElement("script");
        scriptQimo.id = "QIMO_SCRIPT_ID";
        scriptQimo.type = "text/javascript";
        scriptQimo.src =
          "https://webchat.7moor.com/javascripts/7moorInit.js?accessId=7f89ace0-e26a-11e8-a722-694132dd65fb&autoShow=false&language=ZHCN";
        document.body.appendChild(scriptQimo);
      }
    },
    // 获取数据
    getconfData() {
      let params = {};
      params.url = this.$apis.api_common_conf;
      this.$net.req(params, this).then(
        res => {
          this.confData = res.data;
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 获取分类
    getTabs() {
      let params = {};
      params.url = this.$apis.api_app_service_cate;
      params.data = {
        page: this.page,
        pageSize: this.pageSize
      };
      this.$net.req(params, this).then(
        res => {
          if (Number(res.code) === 0) {
            this.tabs = res.data.list;
            this.getData(this.tabs[0].id);
          } else {
            this.$Toast(res.msg);
          }
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 获取分类下列表数据
    getData(id) {
      let params = {};
      params.url = this.$apis.api_app_service_article;
      params.data = {
        cateId: id,
        page: this.page,
        pageSize: this.pageSize
      };
      this.$net.req(params, this).then(
        res => {
          if (Number(res.code) === 0) {
            this.data = res.data.list;
          } else {
            this.$Toast(res.msg);
          }
        },
        e => {
          this.$Toast(e.msg);
        }
      );
    },
    // 切换帮助tab
    onClick(index) {
      this.getData(this.tabs[index].id);
    },
    // 预约顾问
    applyForm() {
      if (this.$util.checkIsLogin()) {
        let lang = this.$store.state.langStr;
        this.$util.sessionStorage.save("isService", true);
        this.$router.push({
          path: `/${lang}/applyForm`
        });
      } else {
        let { fullPath } = this.$route;
        this.$router.push({
          path: `/${this.$route.params.lang}/login?next=${encodeURIComponent(
            fullPath
          )}`,
          replace: true
        });
      }
    },
    // 跳转我的消息
    onClickRight() {
      let lang = this.$store.state.langStr;
      this.$router.push({
        path: `/${lang}/messages-center`
      });
    },
    // 跳转问题详情
    goDetail(item) {
      let lang = this.$store.state.langStr;
      this.$router.push({
        path: `/${lang}/service-article/${item.id}`
      });
    }
  }
};
</script>

<style scoped lang='less'>
.service-wrap {
  background: #fff;
  min-height: 100vh;
  padding: 4px 20px 10px;
  margin: 0 0 58px;
  .van-nav-bar {
    height: 34px;
    line-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .van-hairline--bottom:after {
    border: 0;
  }
  > img {
    width: 100%;
  }
  .btn {
    display: flex;
    justify-content: space-between;
    margin: 20px 0 30px;
    button {
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ff523d;
      background: #fff;
      border: 1px solid #ff523d;
      border-radius: 24px;
      width: 50%;
      font-size: 18px;
    }
    button:last-child {
      margin: 0 0 0 15px;
      color: #fff;
      background: #ff523d;
    }
  }
  > h4 {
    font-size: 20px;
    color: #000;
    font-weight: 600;
    margin-bottom: 20px;
  }
}
</style>
