<template>
<!--  <div v-if="jlHelpShow" class="jl-help" :style="{'height': height, 'width': width +'px'}">-->
  <div class="jl-help avue-right-sidebar" :class="{'jl-help-active': jlHelpShow}">
    <div v-if="jlHelpShow">
      <div class="jl-switch">
        {{helpSwitch}}
        <el-switch
          v-model="switchValue"
          @change="switchHelp"
          active-text="默认弹出此侧边栏">
        </el-switch>
      </div>
      <!--政策法规  isShowPolicy -->
      <div v-if="helpList.isShowPolicy === 1">
        <div>
          <div class="big-blank"></div>
          <p class="jl-help-title">政策法规</p>
          <div class="medium-blank"></div>
          <div v-if="policyList.length === 0">
            暂无内容
          </div>
          <div class="jl-small-title" v-for="(item, index) in policyList" :key="index" @click="lookNews(item)">
            <span>[{{item.secondName}}]</span>
            <p>{{item.title}}</p>
          </div>
        </div>

        <div class="small-blank"></div>
        <div class="jl-hr"></div>
      </div>

      <!--常见问题 isShowQuestion -->
      <div v-if="helpList.isShowQuestion === 1">
        <div>
          <div class="big-blank"></div>
          <p class="jl-help-title">常见问题</p>
          <div class="medium-blank"></div>
          <div v-if="questionList.length === 0">
            暂无内容
          </div>
          <div class="jl-small-title" v-for="(item, index) in questionList" :key="index" @click="lookNews(item)">
            <span>[{{item.secondName}}]</span>
            <p>{{item.title}}</p>
          </div>
        </div>

        <div class="small-blank"></div>
        <div class="jl-hr"></div>
      </div>

      <!-- 广告位 isShowCarousel -->
      <div class="jl-advertisement" v-if="helpList.isShowCarousel === 1">
        <div class="big-blank"></div>
        <div>
          <img
            v-for="(item, index) in carouselVoList"
            :key="index"
            :src="item.image"
            class="img"
            alt="">
        </div>
      </div>

      <!-- 客服 isShowCustservice -->
      <div v-if="helpList.isShowCustservice === 1">
        <div class="big-blank"></div>
        <div class="jl-user">
          <div class="jl-head-portrait">
            <img src="../../../public/img/help/portrait.png" height="42" width="42"/>
          </div>
          <div class="jl-userInfo">
            <p class="name">您好，我是小助手</p>
            <p class="tip">您的专属客服顾问</p>
          </div>
        </div>

        <div class="jl-help-code">
          <div class="img"></div>
          <div class="jl-help-code-tips">
            扫码添加您的专属顾问
          </div>
        </div>

        <div class="big-blank"></div>
        <div class="jl-hr"></div>
      </div>

      <!--服务热线-->
      <div>
        <div class="big-blank"></div>
        <p class="jl-help-title">服务热线</p>
        <div class="medium-blank"></div>
        <div class="jl-help-phone">
          <img src="../../../public/img/help/phone.png" height="20" width="20"/>
          <p>185-0020-6848</p>
        </div>
        <div class="jl-help-time">
          <p>服务时间：周一至周六08:30-18:00</p>
        </div>
      </div>
      <div style="height: 120px;"></div>

    </div>
    <el-drawer
      title="查看"
      :with-header="false"
      :visible.sync="drawer"
      :direction="direction"
      :size="drawerSize">
      <div v-html="content">
      </div>
    </el-drawer>
  </div>
</template>

<script>
    import {mapState, mapGetters} from "vuex";
    import {
      getStore,
    } from '@/util/store'
    export default {
      name: "index",
      props: {
        helpShow: {
          default: true,
          type: Boolean
        }
      },
      data () {
          return {
            switchValue: true,
            drawer: false,
            direction: 'rtl',
            drawerSize: '1000px',
            content: '',
            height: 0,
          }
      },
      watch: {},
      methods: {
        // 每次点击时进行切换；修改状态在整个系统生效；
        switchHelp (v) {
          var helpSwitch = v ? 1 : 2
          this.$store.dispatch('jlHelpSwitch', helpSwitch)
        },
        lookNews(item){
          this.drawer = true
          this.content = item.content
        }
      },
      computed: {
        ...mapState({
          helpTag: state => state.common.helpTag,
          helpList: state => state.common.helpList,
        }),
          jlHelpShow () {
            return this.helpTag
          },
        helpSwitch () {
          var helpSwitch = this.$store.state.common.helpSwitch
          var status = helpSwitch === 1 ? true : false;
          this.switchValue = status
          return ''
        },
        policyList () {
          return this.helpList.contentListPolicy
        },
        questionList () {
          return this.helpList.contentListQuestion
        },
        carouselVoList () {
          return this.helpList.carouselVoList
        }
      }
    }
</script>

<style scoped>
  p {
    margin: 0!important;
  }
  .big-blank{
    height:24px;
  }
  .medium-blank{
    height:16px;
  }
  .small-blank{
    height:12px;
  }
  .jl-switch{
    height: 40px;border-bottom:1px solid #f6f6f6;
    margin-left: -20px;margin-right: -20px;line-height: 40px;padding-left:20px;
  }
  .jl-hr{
    width: 198px;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.08);
  }
  .jl-help-active{
    border-top:1px solid #f6f6f6;
    border-left:1px solid #f6f6f6;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    width: 240px !important;
    overflow: auto;min-height: 500px;
    height: calc(100% - 64px);
    background-color: #FFFFFF;
    padding: 0 20px 20px 20px;
  }
  .jl-help{
    width: 0;
  }

  .jl-help-title{
    font-weight: bold;

    height: 19px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.8);
    line-height: 19px;
  }

  .jl-small-title:hover p{
    color: rgba(0, 0, 0, 1) !important;
  }
  .jl-small-title:hover span{
    color: rgba(0, 0, 0, 1) !important;
  }
  .jl-small-title{
    display: flex;
    font-size: 12px;
    margin-bottom: 12px;
    cursor: pointer;
  }
  .jl-small-title span{
    color: rgba(0, 0, 0, 0.4);
    margin-right:12px;
  }
  .jl-small-title p{
    color: rgba(0, 0, 0, 0.7);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .jl-advertisement .img{
    width: 198px;
    height: 120px;
    background-color: #e3e3e3;
    border-radius: 4px;
  }

  .jl-user{
    display: flex;
    align-items: center;
    font-size: 12px;
  }
  .jl-user .jl-head-portrait{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid #fdfef8;
    text-align: center;
    line-height: 44px;
    background-color: #fdfef8;
    margin-right: 8px;
  }
  .jl-userInfo{
    font-size: 15px;
    line-height: 20px;
  }
  .jl-userInfo .name{
    color: rgba(0, 0, 0, 0.7);
  }
  .jl-userInfo .tip{
    color: #419EFF;
  }

  .jl-help-code{
    display: flex;
    align-items: center;
    flex-flow: column;
  }
  .jl-help-code .img{
    background: url("/manage/img/kefu.jpg") no-repeat;
    background-size: 126px 126px;
    width: 126px;
    height: 126px;
  }
  .jl-help-code-tips{
    width: 120px;
    height: 17px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
    line-height: 17px;
    /*margin-bottom: 20px;*/
    margin-top: 16px;
  }

  .jl-help-phone{
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
  }
  .jl-help-phone img{
    margin-right: 14px;
  }

  .jl-help-time{
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
    line-height: 16px;
    margin-top: 9px;
  }

</style>
