<template>
  <div class="Question">
    <Title class="page-title" title="常见问题" titleColor="#000" @goback="goback" show_back="true" arrowColor="black"></Title>
    <ul style="padding-top: .9rem">
      <li
        v-for="item,index in data_list"
        @click="switchQuestion(index)"
      >
        <div class="que_title">
          <div
            class="active"
            v-if="item.active"
          > {{item.title}}
            <img src="../assets/ic_zk.png">
          </div>
          <div v-if="!item.active"> {{item.title}} <img src="../assets/ic_zk.png"></div>
        </div>
        <div
          class="que_desc"
          v-if="item.active"
        >
          {{item.desc}}
        </div>
      </li>
    </ul>
    <div class="button_container">
      <div
        class="kefu_button"
        @click="jumpToKeFu"
      >联系客服
      </div>
    </div>
    <FollowDialog :isKefu="isKefu" v-if="isShowFollow" @close="toggleFollowDialog"></FollowDialog>

  </div>
</template>
<style>
  .Question {
    width: 100%;
    height: 100%;
    background: #f1f1f1;
    /*padding-top: 0.9rem;*/
    overflow-x: hidden;
  }

  .Question .title_container {
    color: #282828;
    background: #ffffff;
    /*height: 0.9rem;*/
    position: fixed;
    top: 0;
    width: 100%;
  }

  .big .Question {
    padding-top: 0.9rem;
  }

  .big .Question .title_container {
    height: 0.9rem;
  }

  .Question li {
    margin-top: 0.2rem;
  }

  .Question li > div {
    background: #ffffff;
    text-align: left;
    color: #282828;
    font-size: 0.3rem;
    border-bottom: 1px solid #e8e8e8;
    padding-right: 0.3rem;
    padding-left: 0.3rem;
  }

  .Question li > div.que_title {
    height: 1rem;
    line-height: calc(1 / 0.3);
  }

  .Question li > div.que_title div {
    font-size: 0.3rem;
  }

  .Question li > div.que_title .active {
    color: #8a8a8a;
  }

  .Question li > div.que_title img {
    display: block;
    float: right;
    /* margin-right:0.3rem; */
    width: 0.36rem;
    margin-top: 0.33rem;
  }

  .Question li > div.que_desc {
    padding: 0.3rem;
    line-height: 1.2;
  }

  .Question .button_container {
    width: 100%;
    height: 1.78rem;
    border: 1px solid transparent;
    background: #f1f1f1;
  }

  .Question .kefu_button {
    width: 5rem;
    height: 0.88rem;
    margin-top: 0.4rem;
    margin-left: calc((100% - 5rem) / 2);
    margin-bottom: 0.5rem;
    background: #ffbb34;
    border-radius: 0.44rem;
    font-size: 0.38rem;
    font-weight: bold;
    color: #ffffff;
    line-height: calc(0.88 / 0.38);
    text-align: center;
  }
</style>
<script>
  // 常见问题

  import Title from "@/components/Title.vue";
  import FollowDialog from "@/components/FollowDialog.vue";

  import {faq} from "@/components/axios/api";

  export default {
    name: "Question",
    components: {
      Title,
      FollowDialog
    },
    data() {
      return {
        data_list: [],
        isShowFollow: false,
        isKefu: 1
      };
    },
    methods: {
      toggleFollowDialog() {
        this.isShowFollow = !this.isShowFollow
      },
      switchQuestion(index) {
        this.data_list = this.data_list.map(item => {
          item.active = false;
          return item;
        });
        this.data_list[index].active = true;
      },
      jumpToKeFu() {
        this.toggleFollowDialog()
        // window.location.href = "https://mp.weixin.qq.com/s/YFO5CA_iKSBdnXbxJZAC-Q"
      },
      goback() {
        this.$router.push({name: "UserCenter"})
        // location.replace("#/MyData");
      }
    },
    created() {
      faq()
        .then(res => {
          if (res.code == 0) {
            console.log("获取常见问题列表", res, res.data);
            this.data_list = res.data.map(item => {
              return {
                active: false,
                title: item[0],
                desc: item[1]
              };
            });
          }
        })
        .catch(() => {
        });
    },
    mounted() {
    }
  };
</script>
