<template>
  <div class="help">
    <!-- 首页导航 -->
    <Navs></Navs>
    <div class="help_cont">
      <!-- 全局搜索 -->
      <search></search>
      <div class="cont_content">
        <div class="header">
          <div class="left">帮助</div>
          <div class="right">
            <img :src="imgurl.pos" alt />
            <span>当前位置：</span>
            <span @click="$router.push('/')">首页</span>
            >
            <span @click="$router.go(0)">帮助</span>
          </div>
        </div>
        <section class="container">
          <div class="left" ref="leftHeight">
            <!-- 测导航 -->
            <el-row class="tac">
              <el-col :span="24">
                <el-menu
                  :default-openeds="defaultNew"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  @select="selectActive"
                >
                  <el-submenu
                    index="1"
                    :style="{'background-color':defaultNew[defaultNew.length-1]==='1'?'#95CEE4':''}"
                  >
                    <template slot="title">前言</template>
                    <el-submenu
                      index="1-1"
                      :style="{'background-color':defaultNew[defaultNew.length-1]==='1-1'?'#95CEE4':''}"
                    >
                      <template slot="title">简单查询</template>
                      <el-submenu
                        index="1-1-1"
                        :style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-1'?'#95CEE4':''}"
                      >
                        <template slot="title">数据查询</template>
                      </el-submenu>
                      <el-submenu
                        index="1-1-2"
                        :style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-2'?'#95CEE4':''}"
                      >
                        <template slot="title">指标解释</template>
                      </el-submenu>
                      <el-submenu
                        index="1-1-3"
                        :style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3'?'#95CEE4':''}"
                      >
                        <template slot="title">功能操作</template>
                        <el-submenu
                          index="1-1-3-1"
                          :style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-1'?'#95CEE4':''}"
                        >
                          <template slot="title">我的收藏</template>
                        </el-submenu>
                        <el-submenu
                          index="1-1-3-2"
                          :style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-2'?'#95CEE4':''}"
                        >
                          <template slot="title">添加收藏</template>
                        </el-submenu>
                        <el-submenu
                          index="1-1-3-3"
                          :style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-3'?'#95CEE4':''}"
                        >
                          <template slot="title">新增指标</template>
                        </el-submenu>
                        <el-submenu
                          index="1-1-3-4"
                          :style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-4'?'#95CEE4':''}"
                        >
                          <template slot="title">筛选指标</template>
                        </el-submenu>
                        <el-submenu
                          index="1-1-3-5"
                          :style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-5'?'#95CEE4':''}"
                        >
                          <template slot="title">统计运算</template>
                        </el-submenu>
                        <el-submenu
                          index="1-1-3-6"
                          :style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-6'?'#95CEE4':''}"
                        >
                          <template slot="title">恢复</template>
                        </el-submenu>
                        <el-submenu
                          index="1-1-3-7"
                          :style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-7'?'#95CEE4':''}"
                        >
                          <template slot="title">去除空行空列</template>
                        </el-submenu>
                        <el-submenu
                          index="1-1-3-8"
                          :style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-8'?'#95CEE4':''}"
                        >
                          <template slot="title">编辑</template>
                        </el-submenu>
                        <el-submenu
                          index="1-1-3-9"
                          :style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-9'?'#95CEE4':''}"
                        >
                          <template slot="title">维度转换</template>
                        </el-submenu>
                        <el-submenu
                          index="1-1-3-10"
                          :style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-10'?'#95CEE4':''}"
                        >
                          <template slot="title">行列转置</template>
                        </el-submenu>
                        <el-submenu
                          index="1-1-3-11"
                          :style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-11'?'#95CEE4':''}"
                        >
                          <template slot="title">保存默认</template>
                        </el-submenu>
                        <el-submenu
                          index="1-1-3-12"
                          :style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-12'?'#95CEE4':''}"
                        >
                          <template slot="title">恢复默认</template>
                        </el-submenu>
                      </el-submenu>
                    </el-submenu>
                    <el-submenu
                      index="1-2"
                      :style="{'background-color':defaultNew[defaultNew.length-1]==='1-2'?'#95CEE4':''}"
                    >
                      <template slot="title">高级查询</template>
                      <el-submenu
                        index="1-2-1"
                        :style="{'background-color':defaultNew[defaultNew.length-1]==='1-2-1'?'#95CEE4':''}"
                      >
                        <template slot="title">指标选择</template>
                      </el-submenu>
                    </el-submenu>
                    <el-submenu
                      index="1-3"
                      :style="{'background-color':defaultNew[defaultNew.length-1]==='1-3'?'#95CEE4':''}"
                    >
                      <template slot="title">数据地图</template>
                    </el-submenu>
                    <el-submenu
                      index="1-4"
                      :style="{'background-color':defaultNew[defaultNew.length-1]==='1-4'?'#95CEE4':''}"
                    >
                      <template slot="title">搜索</template>
                    </el-submenu>
                  </el-submenu>
                </el-menu>
              </el-col>
            </el-row>
          </div>
          <div class="right">
            <div v-html="htmlStr" class="htmlStrs"></div>
          </div>
        </section>
      </div>
    </div>
    <!-- 页脚信息 -->
    <FooterInfors></FooterInfors>
  </div>
</template>
<script>
// 导航
import Nav from '@/components/nav/Nav.vue'
// 页脚信息
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
// 全局搜索
import search from '@/components/search/search.vue'
export default {
  name: 'help',
  components: {
    Navs: Nav,
    FooterInfors: FooterInfor,
    search: search
  },
  data () {
    return {
      defaultNew: ['1'],
      imgurl: {
        pos: require('../../../static/company/posweizhi.png'),
        htmlShow1: '1010'
      },
      // left的高度
      leftHeights: null,
      // 需要渲染的html字符串
      htmlStr: '',
      allHtml: [
        {
          name: '前言',
          code: '1',
          htmls: `
          <span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">前言</span><br />
          知识数据平台网络提供了以下服务：<br />
          - 详实的月度、季度、年度数据以及地区数据<br />
          - 提供文件导出、制表、指标解释、表格转置、可视化图表、数据地图信息系统等多种功能<br />
          其中具有特色的服务为：<br />
          - 数据挖掘随心所欲<br />
          - 海量数据一键下载<br />
          所做的一切，只为让数据生活更简单。下面，就让我们一起来阅读入门指南，让这篇用户手册来指引你如何查询数据。跟着导航一起操作，即可进入轻松的查询之旅。<br /><br />
          `
        },
        {
          name: '数据查询',
          code: '1-1-1',
          htmls: `
          <span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 数据查询</span><br />
          1.在【分类栏】中选择想要查询的指标分类，在右侧【结果栏】中显示出分类下所有指标的数据。用户可以按时间进行筛选。时间基于当前时间。<br />
          <img src='${require('../../../static/help/details84.png')}' style='width:100%;height:42rem;'><br />
          2.左右拖拽功能<br />
          拖拽下图所示蓝色拖拽条，可左右拖拽适当调整宽度。<br />
          > 拖拽前：<br />
          <img src='${require('../../../static/help/details125.png')}' style='width:100%;height:42rem;'><br />
          > 拖拽后：<br />
          <img src='${require('../../../static/help/details134.png')}' style='width:100%;height:42rem;'><br /><br />
          `
        },
        {
          name: '指标解释',
          code: '1-1-2',
          htmls: `
          <span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 指标解释</span><br />
          <div style="display: flex;flex-direction: row;justify-content:flex-start;align-items: center;">1、点击指标名称或指标名称前的<img src='${require('../../../static/chatCont/zhibiaojieshi.png')}' style='width:1.8rem;height:1.8rem;'></div><br />
          <img src='${require('../../../static/help/details162.png')}' style='width:100%;height:42rem;'><br />
          弹出【指标解释】界面，用户可以了解到指标的相关解释。<br />
          <img src='${require('../../../static/help/details191.png')}' style='width:48rem;height:48rem;margin-left:calc(50% - 24rem);'><br />
          2.点击【复制到粘贴板】按钮，复制文字，通过键盘上【CTRL+V】可以根据自身需要将文字粘贴到文档或其它地方。<br /><br /><br />
          `
        },
        {
          name: '我的收藏',
          code: '1-1-3-1',
          htmls: `
          <span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 我的收藏</span><br />
          【我的收藏】页面如下：<br />
          <img src='${require('../../../static/help/details275.png')}' style='width:100%;height:32rem;'><br />
           可在“搜索框”中输入要搜索的已收藏的文件名。<br />
          `
        },
        {
          name: '添加收藏',
          code: '1-1-3-2',
          htmls: `
          <span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 添加收藏</span><br />
           收藏页面如下图：<br />
          <img src='${require('../../../static/help/details319.png')}' style='width:100%;height:32rem;'><br />
           直接在输入框中输入用户自定义的收藏名称，点击【保存】保存当前操作，点击【取消】取消当前操作。<br />
          `
        },
        {
          name: '新增指标',
          code: '1-1-3-3',
          htmls: `
          <span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 新增指标</span><br />
          1.选择【数据管理】下的【新增指标】，打开【新增指标】界面：<br />
          <img src='${require('../../../static/help/details409.png')}' style='width:100%;height:42rem;'><br />
          • 可在输入框中填写新增指标的名称。
          <div style="display: flex;flex-direction: row;justify-content:flex-start;align-items: center;">• 在列表中选择一个需要计算的指标，双击指标名称或点击 <img src='${require('../../../static/help/details457.png')}' style='width:1.8rem;height:1.8rem;'> 按钮选中到“新增指标结果框”内。</div>
          • 在操作键盘处选择操作的运算符及数字，如果进行多指标计算，可在左侧列表框里多次选择指标。
          • 点击【确定】保存新增指标，点击【取消】取消以上操作。
          报表新增后的指标数据如下图所示：<br />
          <img src='${require('../../../static/help/details567.png')}' style='width:100%;height:42rem;'><br />
          `
        },
        {
          name: '筛选指标',
          code: '1-1-3-4',
          htmls: `
          <span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 筛选指标</span><br />
          选择【数据管理】下的【筛选】，打开【筛选指标】界面。<br />
          <img src='${require('../../../static/help/details606.png')}' style='width:100%;height:42rem;'><br />
          • 可通过“行、列”按钮选择对行对列操作筛选。
          • 在左侧指标列表框中选择要筛选的指标（新增指标和统计指标也会在列表中出现），在【数值】框中填写筛选的值。
          <div style="display: flex;flex-direction: row;justify-content:flex-start;align-items: center;">•点击 <img src='${require('../../../static/help/details690.png')}' style='width:1.8rem;height:1.8rem;'> 按钮将选中的指标添加到“右侧筛选条件”框中，也可通过<img src='${require('../../../static/help/details717.png')}' style='width:1.8rem;height:1.8rem;'>按钮将已在右侧列表中的指标移除。</div>
          • 点击【确定】按钮对当前报表进行筛选，点击【取消】取消操作。
          `
        },
        {
          name: '统计运算',
          code: '1-1-3-5',
          htmls: `
          <span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 统计运算</span><br />
          选择【数据管理】下的【统计】，展开更多选择条件：【对行运算】、【对列运算】，以下为计算方式：<br />
          <img src='${require('../../../static/help/details824.png')}' style='width:100%;height:28rem;'><br />
          • 选择【对行运算】下的【SUM求和】的计算方式后，数据报表新增一列，得到每行计算后的结果如下图：
          <img src='${require('../../../static/help/details876.png')}' style='width:100%;height:42rem;'><br />
          • 选择【对列运算】下的【SUM求和】的计算方式后，数据报表新增一行，得到每列计算后的结果如下图：
          <img src='${require('../../../static/help/details928.png')}' style='width:100%;height:42rem;'><br />
          `
        },
        {
          name: '恢复',
          code: '1-1-3-6',
          htmls: `
          <span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 恢复</span><br />
          选择【数据管理】下的【恢复】，数据报表恢复默认初始状态<br />
          `
        },
        {
          name: '去除空行空列',
          code: '1-1-3-7',
          htmls: `
          <span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 去除空行空列</span><br />
          选择【数据管理】下的【去除空行空列】，将报表中的行、列为空的记录去掉。<br />
          `
        },
        {
          name: '编辑',
          code: '1-1-3-8',
          htmls: `
          <span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 编辑</span><br />
          选择【报表管理】下的【编辑】，弹出编辑窗口，如下图：<br />
          <img src='${require('../../../static/help/details1054.png')}' style='width:100%;height:42rem;'><br />
          • 可对行、列进行编辑。
          <div style="display: flex;flex-direction: row;justify-content:flex-start;align-items: center;">• 可通过<img src='${require('../../../static/help/details1074.png')}' style='width:1.2rem;height:1.2rem;'>复选框，勾选指标，也可通过右侧“全选”“反选”按钮快速操作。</div>
          • 点击确定，查看编辑后的报表。
          `
        },
        {
          name: '维度转换',
          code: '1-1-3-9',
          htmls: `
          <span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 维度转换</span><br />
          选择【报表管理】下的【维度转换】， 弹出【维度转换】窗口。<br />
          <img src='${require('../../../static/help/details1163.png')}' style='width:100%;height:32rem;'><br />
          <div style="display: flex;flex-direction: row;justify-content:flex-start;align-items: center;">• 通过点击行、列上<img src='${require('../../../static/help/details1175.png')}' style='width:12rem;height:2.4rem;'>按钮，设置行、列上显示指标或时间。</div>
          • 点击【确认】按钮，查看数报表的维度变化。
          `
        },
        {
          name: '行列转置',
          code: '1-1-3-10',
          htmls: `
          <span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 行列转置</span><br />
          选择【报表管理】下的【转置】，报表中的行和列互换。<br />
          • 转置前：<br />
          <img src='${require('../../../static/help/details1260.png')}' style='width:100%;height:42rem;'><br />
          • 转置后：
          <img src='${require('../../../static/help/details1269.png')}' style='width:100%;height:42rem;'><br />
          `
        },
        {
          name: '保存默认',
          code: '1-1-3-11',
          htmls: `
          <span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 保存默认</span><br />
          选择【报表管理】下的【保存默认】，将修改后的报表条件及数据保存为该报表的默认显示。<br />
          `
        },
        {
          name: '指标选择',
          code: '1-2-1',
          htmls: `
          <span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">高级查询 - 指标选择</span><br />
          高级查询首先要选择指标，分为简单查询和模糊查找。<br />
          • 简单查询<br />
          1. 在【指标】中选择想要查询的指标分类，该分类下的指标将显示在“指标列表”中。<br />
          2. 选择“指标列表”中的指标项，选中的指标显示在右侧的“已选择的指标”中。<br />
          • 模糊查找<br />
          在“指标列表”的搜索框中输入要查找的指标名称，点击【查询】按钮，在所有的指标范围内查找符合条件的指标名称，显示在“指标列表”中。<br />
          如果想在当前查找结果中进行二次查找，勾选【结果中筛选】前的复选框。<br />
          <img src='${require('../../../static/help/details1599.png')}' style='width:100%;height:42rem;'><br />
          选好指标后，点击【查询数据】按钮，查看已选指标结果页面。<br />
          `
        },
        {
          name: '数据地图',
          code: '1-3',
          htmls: `
          <span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;"> 数据地图 </span><br />
          当鼠标滑过地图上的地区时，会根据鼠标所指的地区，显示对应的数据信息框。<br />
          如需查看其他时间的数据，在【时间】下拉框中选择时间<br />
          通过左侧指标列表选择指标进行查看，指标数据会以不同的色阶在地图中显示<br />
          <img src='${require('../../../static/help/details1738.png')}' style='width:100%;height:42rem;'><br />
          `
        },
        {
          name: '搜索',
          code: '1-4',
          htmls: `
          <span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;"> 搜索 </span><br />
          1.在搜索框中填入要搜索的关键字：指标名称，<br />
          示例：用户需查找指标名为游客的数据，在搜索框中输入“游客”<br />
          2. 点击【搜索】按钮，进入搜索页面，页面上显示出符合条件的所有指标，如下图：<br />
          <img src='${require('../../../static/help/details1835.png')}' style='width:100%;height:16rem;'><br />
          用户可以通过【筛选栏目】下拉框来进行筛选，如下图。<br />
          <img src='${require('../../../static/help/details1863.png')}' style='width:100%;height:16rem;'><br />

          `
        }
      ]
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
      this.defaultNew = keyPath
      this.showColoect(key)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    selectActive (key, keyPath) {
      console.log(key, keyPath, '00')
    },
    // 渲染我的收藏
    showColoect (key) {
      let datasd = JSON.parse(JSON.stringify(this.allHtml))
      datasd.forEach((item, index) => {
        if (item.code === key) {
          this.htmlStr = item.htmls
        }
      })
    }
  },
  mounted () {
    this.showColoect('1')
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-submenu__title {
  height: 3rem;
  line-height: 3rem;
}
/deep/ .el-submenu__title {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-flow: row-reverse;
  // border: 1px solid red;
  padding: 0;
}
/deep/ .el-submenu__icon-arrow {
  position: static;
  margin-top: 0.25rem;
  margin-right: 0.42rem;
  // left: 0;
  // right: auto;
}
.help_cont {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  & > .cont_content {
    margin-bottom: 1.875rem;
    width: 84.25rem;
    // border: 1px solid red;
    & > .header {
      width: 84.25rem;
      height: 4.25rem;
      // border: 1px solid red;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      & > .left {
        // margin-left: 1.5rem;
        font-size: 1.5rem;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0.125rem;
        color: #000000;
      }
      & > .right {
        // margin-right: 1.5rem;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #8fa3ae;
        & > img {
          width: 1rem;
          height: 1.25rem;
          margin-right: 0.45rem;
        }
        & > span:nth-child(n + 3):hover {
          cursor: pointer;
          color: #52b6e3;
        }
      }
    }
    & > .container {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      & > .left {
        padding: 1rem 0;
        width: 25.5rem;
        height: 120vh;
        background-color: #ffffff;
        box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
        overflow-y: auto;
      }
      & > .right {
        width: 57.625rem;
        height: calc(120vh + 2rem);
        background-color: #ffffff;
        box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        overflow-y: auto;
        & > .htmlStrs {
          margin-top: 1.75rem;
          width: 55rem;
          line-height: 2.5rem;
        }
      }
    }
  }
}
</style>
