<template>
  <div clas="containerbox">
    <div class="topbox">
      <div class="flextwo sharetopkk" @click="back">
        <div class="leftrow leftrowkimg">
          <img src="../../../assets/leftrow.png" alt />
        </div>
        <div class="sharemiddle">客服中心</div>
        <div class="sharebtn">
          <!-- <img src="../../../assets/sharebtn.png" alt /> -->
        </div>
      </div>
      <div class="kefutitle">猜你想问</div>
      <div class="coursenav flexone">
        <div
          class="kefunavitem"
          :class="selnav == index ? 'selactive' : ''"
          :data-id="index"
          @click="selectnav(index,item)"
          v-for="(item, index) in navarr"
          :key="index"
        >{{ item.sort_name }}</div>
      </div>
    </div>

    <div class="kefucenterques">
      <div class="nodata" v-if="questionlist.length==0">暂无问题</div>
      <div v-else>
        <div class="quesnameitem" v-for="(item,index) in questionlist" :key="index">
          <div class="quesnamek" @click="selsecttitle(index)">{{item.title}}</div>
          <!-- <div class="quesnamek" v-if="item.sel">{{item.content}}</div> -->
        </div>
      </div>
    </div>

    <div class="kefucenterbox flexone">
      <div class="courseboxitem kefuitem" @click="entervideo(customer1)">
        <div class="coursenameimg">
          <!-- <img src="../../../assets/sucaiimg.png" alt /> -->
          <video
            :poster="customer1_image"
            id="video"
            :src="customer1"
            loop="loop"
            controlslist="nodownload"
            height="100%"
            width="100%"
          ></video>
          <img src="../../../assets/anniu.png" alt class="rediaoplay" />
        </div>
        <div class="coursetext">
          <div class="coursename">视频1</div>
        </div>
      </div>
      <div class="courseboxitem kefuitem" @click="entervideo(customer2)">
        <div class="coursenameimg">
          <video
            :poster="customer2_image"
            id="video"
            :src="customer2"
            loop="loop"
            controlslist="nodownload"
            height="100%"
            width="100%"
          ></video>
          <img src="../../../assets/anniu.png" alt class="rediaoplay" />
        </div>
        <div class="coursetext">
          <div class="coursename">视频2</div>
        </div>
      </div>
    </div>
    <!-- 联系客服 -->
    <div class="register" style="z-index:999" v-if="showkefu">
      <div class="registerwrap">
        <img src="../../../assets/closecha.png" alt class="codechaimg" @click="hidekefu" />
        <div class="changan">长按识别二维码联系客服</div>
        <div class="shicode">
          <img src="../../../assets/code.png" alt />
        </div>
        <!--  -->
        <div class="kefutext" v-html="contacttext"></div>
      </div>
    </div>
    <!-- 客服中心 -->
    <div class="register" style="z-index:999" v-if="showques">
      <div class="quesbox">
        <div class="flextwo toptitle">
          <div>{{questitle}}</div>
          <img src="../../../assets/closecha.png" alt class="queschahao" @click="hidequesbox" />
        </div>
        <div class="quesboxtext">{{questext}}</div>
      </div>
    </div>
    <div class="suciabot">
      <div class="sucaibtn" @click="connectkefu">
        联系客服
        <!-- <a :href="'tel:'+customer_mobile">联系客服</a> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selnav: 0,
      navarr: [],
      sort_id: '',
      page: 1,
      questionlist: [],
      this_page: '',
      total_page: "",
      finished: false,
      loading: false,
      customer_mobile: '',
      customer1: '',
      customer2: '',
      customer1_image: '',
      customer2_image: '',
      showkefu: false,
      showques: false,
      questext: '',
      questitle: '',
      contacttext: ''
    }
  },
  created() {
    document.title = '唐元集公众号'
    this.getquestion();
    // 获取客服
    this.getphone()
    this.getconnectkefu()
  },
  methods: {
    // 上拉加载
    onLoad() {
      let that = this;
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        console.log(3434);

        let newpage = that.page;
        newpage++;
        that.page = newpage;

        that.getquestiontext();

        // 加载状态结束
        this.loadingying = false;
        // 数据全部加载完成
        if (that.this_page == that.total_page) {
          this.finished = true;
        }
      }, 1000);
    },
    back() {
      this.$router.go(-1)
    },
    selectnav(index, item) {
      let that = this;
      this.selnav = index;
      this.sort_id = item.id;
      that.page = 1;
      that.questionlist = []
      that.getquestiontext()

    },
    getquestion() {
      let that = this;
      var url = "/api/common/question_sort";
      let param = {

      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.navarr = res.data;
          that.sort_id = res.data[0].id
          that.getquestiontext()
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    selsecttitle(index) {
      this.showques = true
      this.questionlist[index].sel = !this.questionlist[index].sel;
      this.questext = this.questionlist[index].content
      this.questionlist = this.questionlist;
      this.questitle = this.questionlist[index].title
      this.$forceUpdate()
    },
    // 获取问题列表
    getquestiontext() {
      let that = this;
      var url = "/api/common/question_list";
      let param = {
        sort_id: that.sort_id,
        page: ''
      };

      that.$axios
        .post(url, param)
        .then(function (res) {

          console.log(res)
          that.questionlist = that.questionlist.concat(res.data.question);
          that.questionlist.forEach(function (value, index, array) {
            value.sel = false
          })
          that.questionlist = that.questionlist
          console.log(that.questionlist)
          that.this_page = res.data.this_page;
          that.total_page = res.data.total_page

        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 获取客服电话及视频
    getphone() {
      let that = this;
      var url = "/api/common/customer_video";
      let param = {

      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.customer_mobile = res.data.customer_mobile;
          that.customer1 = res.data.customer1;
          that.customer2 = res.data.customer2;
          that.customer1_image = res.data.customer1_image;
          that.customer2_image = res.data.customer2_image
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    // 联系客服
    getconnectkefu() {
      let that = this;
      var url = "/api/common/contact_content";
      let param = {

      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.contacttext = res.data.contact;
          consoel.log(that.contacttext)

        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 播放视频
    entervideo(url) {
      console.log(344803)
      console.log(url)
      this.$router.push({
        path: '/videoplay',
        query: { url: url }
      })
    },
    connectkefu() {
      this.showkefu = true
    },
    hidekefu() {
      this.showkefu = false
    },
    // 隐藏问题
    hidequesbox() {
      this.showques = false
    }
  },


}
</script>

<style scoped>
@import "../../../style/usercenter.css";
.nodata {
  margin-top: 0;
}
.kefutext {
  color: #333;
  font-size: 0.28rem;
  padding: 0 0.32rem;
  box-sizing: border-box;
  height: 2.2rem;
  overflow-y: scroll;
}

.coursenav {
  padding: 0.28rem 0.32rem;
  box-sizing: border-box;
}
.courseboxitem {
  background: #fff;
}
/* 长按识别二维码 */
.registerwrap {
  width: 6.22rem;
  height: 6.6rem;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.codechaimg {
  width: 0.26rem;
  height: 0.24rem;
  position: absolute;
  top: 0.32rem;
  right: 0.32rem;
}
.changan {
  color: #7d7e80;
  font-size: 0.28rem;
  text-align: center;
  margin-top: 0.48rem;
}
.shicode {
  width: 3rem;
  height: 3rem;
  font-size: 0;
  margin: 0.24rem auto 0;
}
.quesbox {
  width: 100%;
  height: 5rem;

  padding: 0 0.32rem 0.32rem;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  color: #7d7e80;
  font-size: 0.28rem;
}
.toptitle {
  height: 0.9rem;
  width: 100%;
  color: #333;
  font-size: 0.32rem;
  border-bottom: 1px dashed #4a834a;
}
.queschahao {
  width: 0.26rem;
  height: 0.24rem;
}
.quesboxtext {
  height: 3.7rem;
  overflow-y: scroll;
  padding-top: 0.2rem;
  box-sizing: border-box;
}
.quesnameitem {
  border-bottom: 1px dashed #4a834a;
  padding: 0.2rem 0;
  box-sizing: border-box;
}
</style>