<template>
  <transition name="slide">
    <div class="index-container">
      <!--标题-->
      <mt-header class="header" title="帮助中心" fixed>
        <div slot="left">
          <mt-button icon="back" @click="$router.back(-1)"></mt-button>
        </div>
      </mt-header>
      <div class="listbody">
        <div class="help-body" v-for="(item, index) in questionList">
          <div class="help-title">{{index+1}}.{{item.question}}</div>
          <div class="help-content" v-html="item.answer"></div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import { MyLocalStorage } from 'assets/js/utils'
  import { LOGIN_FLAG, AD_FLAG, SLIDER_FLAG, USER_ACCOUNT, USER_PWD } from 'assets/js/storageConst'

  export default {
    name: "HelpMe",
    data(){
      return {
        questionList:[
          {
            question:'告警处理的流程是怎样的？',
            answer:'<p>当井盖发生开盖报警时，会向所属单位的用户推送报警信息，点击推送信息即可快速进入应用首页。</p>' +
              '<p>进入【待处理】工单页面后，点击待处理工单项可进入【工单详情】页面，查看告警信息，点击闸井编号可跳转到【闸井详情】页面查看闸井信息及地图位置。</p>' +
              '<p>现场确认井盖状态正常后，在【工单详情】中的处理按钮即可结束工单并取消报警。</p>'
          },
          {
            question:'如何查看闸井详情？',
            answer:'首页点击【闸井管理】进入闸井列表，用户可根据闸井类型或关键字筛选自己想要了解的闸井信息，点击进行查看。或在工单详情中点击闸井编号也可以进入闸井详情。'
          },
          {
            question:'如何查看关联设备的监控信息？',
            answer:'<p>当有单个关联设备时，闸井详情页内可直接查看该设备监控信息及最近一次的监控数值</p> <p> 当有多个关联设备时，闸井详情页内点击【监控内容】进入下一页，可查看多个监控信息及最近一次的监控数值。</p>'
          },
          {
            question:'井盖的撤防入口在哪里？',
            answer:'首页点击【布防撤防】，用户可查看自己责任片区的闸井信息并进行布防/撤防操作。闸井撤防后报警信息将不再推送，此操作需慎重。'
          },
          {
            question:'如何查看工单详情？',
            answer:'<p>点击首页，可在快捷口根据工单状态进入工单列表，查看工单的详细信息。</p>' +
              '<p>也可底部菜单选【工单】，进入工单列表，查看工单的详细信息。</p>'
          },
          {
            question:'地图无法正常显示或报找不到许可文件错误怎么办？',
            answer:' 手机版本原因可能部分手机默认不允许读取存储，需要进入系统设置，为应用开启读取存储的权限即可。'
          },
          {
            question:'应用所需的其他权限？',
            answer:' 获取手机信息(IMEI)的权限,为安全访问网络，此项请务必允许。'
          }
        ]
      }
    },
    methods:{
      loginOut () {
        this.$store.dispatch('LogOut').then(() => {
          MyLocalStorage.Cache.remove(AD_FLAG)
          MyLocalStorage.Cache.remove(LOGIN_FLAG)
          MyLocalStorage.Cache.remove(USER_ACCOUNT)
          MyLocalStorage.Cache.remove(USER_PWD)
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .mint-cell-title {
    margin-left: 5px !important
  }
  .listbody{
    padding:1rem
    margin-top 40px
    height calc( 100vh - 40px )
    overflow scroll
    .help-body{
      margin 1rem
      line-height 1.2rem
      .help-title{
        margin 1rem 0
        font-weight bold
      }
      .help-content{
        text-indent:1em
      }
    }
  }
</style>