<template>
  <div class="help-background help-box" :style="'height:' + fullHeight + 'px'">
    <!-- 页头导航 -->
    <el-page-header title @back="goBack" content="说明"></el-page-header>

    <!-- 圆 -->
    <div class="circle"></div>
    <div class="circle1"></div>
    <!-- 卡片 -->
    <el-card class="box-card" shadow="always">
      <div class="help-card-box">
        <!-- 首页列表 -->
        <div class v-if="textA">
          <!-- 标题 -->
          <div class="help-title">首页</div>
          <ul class="help-ul">
            <!-- list-版本 -->
            <li class="help-li">
              <div class="help-text">新建信息：</div>
              <span class="help-textA">新建一个调查记录</span>
            </li>
            <!-- list-说明 -->
            <li class="help-li">
              <div class="help-text">已录信息：</div>
              <span class="help-textA">查看已完成的调查记录</span>
            </li>
            <!-- list-电话 -->
            <li class="help-li">
              <div class="help-text">系统设置：</div>
              <span class="help-textA">系统设置(病害、虫害数据设置后可点击新建进行编辑)</span>
            </li>
          </ul>
        </div>

        <!-- 新建列表1 -->
        <div class v-if="textB">
          <!-- 标题 -->
          <div class="help-title">新建信息(第一步)</div>
          <ul class="help-ul">
            <!-- list-版本 -->
            <li class="help-li">
              <div class="help-text">新建信息第一步：</div>
              <!-- <span class="help-textA">有两种方式获取地址，如果选择自动，会自动定位到手机的位置（要保证打开位置权限和GPRS位置）并弹出附近位置，以供其选择.</span> -->
              <span class="help-textA">依照顺序进行填写资料地区、月份、病虫害、作物选择。</span>
            </li>
          </ul>
        </div>

        <!-- 新建列表2 -->
        <div class v-if="textC">
          <!-- 标题 -->
          <div class="help-title">新建信息(第一步)</div>
          <ul class="help-ul">
            <!-- list-版本 -->
            <li class="help-li">
              <div class="help-text">第一步作物选择:</div>
              <!-- <span class="help-textA">如果选择手动会直接有省市县区乡进行选择，乡地址是选填的.当选择完地址后才能进行下一步操作</span> -->
              <span class="help-textA">作物分为三大类，在标题后面可进行添加作物;选择作物后点击右上角确定按钮后进入第二步操作。</span>
            </li>
          </ul>
        </div>

        <!-- 新建列表3 -->
        <div class v-if="textD">
          <!-- 标题 -->
          <div class="help-title">病虫害值填写</div>
          <ul class="help-ul">
            <!-- list-版本 -->
            <li class="help-li">
              <div class="help-text">病虫害值填写：</div>
              <!-- <span
                class="help-textA"
              >{{"统计分类：分为两类，一是病害，二是虫害;根据顺序进行填写，依次将作物(昆虫)名称和生育期选择完，再选择记录的单位是面积大小(平方米/亩)还是作物数量(株数/叶数)上传图片;填写上数量和病级(虫级),点击右上方的完成就保存了一条数据了" | ellipsis}}</span> -->
              <!-- <span class="help-textASpan" @click="check">查看</span> -->
                <span
                class="help-textA"
              >{{this.textArr[0] | ellipsis}}</span>
              <span class="help-textASpan" @click="textReveal(0)">查看</span>
            </li>
          </ul>
        </div>

        <!-- 已录信息-调查详情 -->
        <div class v-if="textE">
          <!-- 标题 -->
          <div class="help-title">已录信息</div>
          <ul class="help-ul">
            <!-- list-版本 -->
            <li class="help-li">
              <div class="help-text">已录信息：</div>
              <!-- <span class="help-textA">点击右上角的详情可进入详情页面查看到用户输入的所有信息，用户创建时间等；</span> -->
              <span class="help-textA">点击右上角的详情可进入详情页面查看到用户输入的所有信息，选择列表数据点击下方的删除和导出，右上角为统计功能页面；</span>
            </li>
          </ul>
        </div>

        <!-- 已录信息 -->
        <div class v-if="textF">
          <!-- 标题 -->
          <div class="help-title">已录信息(查看详情)</div>
          <ul class="help-ul">
            <!-- list-版本 -->
            <li class="help-li">
              <div class="help-text">系统设置(查看详情)：</div>
              <span class="help-textA">可以查看到用户所填写的时间、采集地址、统计方法等信息；</span>
            </li>
          </ul>
        </div>

        <!-- 系统设置-统计设置 -->
        <div class v-if="textG">
          <!-- 标题 -->
          <div class="help-title">系统设置(设置默认)</div>
          <ul class="help-ul">
            <!-- list-版本 -->
            <li class="help-li">
              <div class="help-text">系统设置(设置默认)：</div>
              <!-- <span class="help-textA">对作物种类设置、病害名称设置、昆虫种类设置、昆虫名称设置操作如：添加、删除；跟新建页面中的作物或昆虫数据是相连的;</span> -->
              <!-- <span
                class="help-textA"
              >在系统设置中的病害或虫害设置中点击进入详情，选择右上角的按钮进行设置默认数据，当该数据已经为默认数据时再次进入详情右上角会显示为取消默认</span> -->
              <span
                class="help-textA"
              >{{this.textArr[1] | ellipsis}}</span>
               <span class="help-textASpan" @click="textReveal(1)">查看</span>
            </li>
          </ul>
        </div>

        <!-- 识别模块 -->
        <div class v-if="textH">
          <!-- 标题 -->
          <div class="help-title">识别模块</div>
          <ul class="help-ul">
            <!-- list-版本 -->
            <li class="help-li">
              <div class="help-text">识别模块：</div>
              <span class="help-textA">识别功能可以拍照上传和图片上传识别和识别记录;</span>
            </li>
          </ul>
        </div>

        <!-- 识别模块-识别 -->
        <div class v-if="textJ">
          <!-- 标题 -->
          <div class="help-title">识别模块(病害、昆虫)</div>
          <ul class="help-ul">
            <!-- list-版本 -->
            <li class="help-li">
              <div class="help-text">识别模块(病害、昆虫)：</div>
              <span class="help-textA">用户点击上传图片，可选择在本地图库上传，也可直接拍照上传,成功之后便会显示害虫的信息和图片;</span>
            </li>
          </ul>
        </div>

        <!-- 识别记录 -->
        <div class v-if="textK">
          <!-- 标题 -->
          <div class="help-title">识别记录</div>
          <ul class="help-ul">
            <!-- list-版本 -->
            <li class="help-li">
              <div class="help-text">识别记录：</div>
              <span class="help-textA">用户在识别病害和虫害时，不论是否识别成功都将在识别记录中记载，区别是识别成功的数据可以进入详情查看而识别失败则不能进入；</span>
            </li>
          </ul>
        </div>

        <!-- 识别记录（详情） -->
        <div class v-if="textL">
          <!-- 标题 -->
          <div class="help-title">识别记录(详情)</div>
          <ul class="help-ul">
            <!-- list-版本 -->
            <li class="help-li">
              <div class="help-text">识别记录(详情)：</div>
              <span class="help-textA">识别成功的数据可进入详情查看此昆虫或是病害的详细说明；</span>
            </li>
          </ul>
        </div>

        <!-- 知识库 -->
        <div class v-if="textM">
          <!-- 标题 -->
          <div class="help-title">知识库</div>
          <ul class="help-ul">
            <!-- list-版本 -->
            <li class="help-li">
              <div class="help-text">知识库：</div>
              <span class="help-textA">病虫害库包含了所识别出来的病虫害，可以查看每一条的病虫害详细信息，也可以点击右上角的搜索输入想查找的虫害或病害名字进行查看</span>
            </li>
          </ul>
        </div>

        <!-- 知识库 -->
        <div class v-if="textN">
          <!-- 标题 -->
          <div class="help-title">知识库(详情)</div>
          <ul class="help-ul">
            <!-- list-版本 -->
            <li class="help-li">
              <div class="help-text">知识库(详情)：</div>
              <span class="help-textA">查看虫害或病害的详细数据</span>
            </li>
          </ul>
        </div>

        <!-- 我的 -->
        <div class v-if="textO">
          <!-- 标题 -->
          <div class="help-title">用户详情</div>
          <ul class="help-ul">
            <!-- list-版本 -->
            <li class="help-li">
              <div class="help-text">用户详情：</div>
              <!-- <span
                class="help-textA"
              >登录成功后，点击下方我的按钮会显示用户的详细信息,如用户名,注册电话邮箱和地址,用户身份等;点击退出账号会将用户设置的默认地址和采集人信息删除</span> -->
               <span
                class="help-textA"
              >{{this.textArr[2] | ellipsis}}</span>
               <span class="help-textASpan" @click="textReveal(2)">查看</span>
            </li>
          </ul>
        </div>

        <!-- 说明图 -->
        <div class="help-imgbox">
          <div class="main">
            <div class="title">
              当前页数
              <span class="number">
                {{showIndex+1}}
                <span class="littleNum">/{{this.imgSrc.length}}</span>
              </span>
            </div>
            <div id="slider" class="slider">
              <img
                v-for="(src,index) in imgSrc"
                :key="index"
                :src="src"
                preview="1"
                @touchstart="touchstart"
                @touchmove="touchmove"
              />
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 查看弹出框 -->
    <el-dialog title="详情" :visible.sync="dialogVisible" width="75%" :before-close="handleClose">
      <span>{{this.textData}}</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "help",
  //限时数据文本的字数限时
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 50) {
        return value.slice(0, 50) + "...";
      }
      return value;
    }
  },
  data() {
    return {
      // ceshi: false,
      fullHeight: document.documentElement.clientHeight,

      imgSrc: [
        "./static/image/1.jpg", //A
        "./static/img/2.jpg", //B
        "./static/img/3.jpg", //C
        "./static/img/4.jpg", //D
        "./static/img/8.jpg", //E
        "./static/img/21.jpg", //F
        "./static/img/11.jpg", //G
        "./static/img/15.jpg", //H
        "./static/img/17.jpg", //J
        "./static/img/20.png", //K
        "./static/img/23.png", //L
        "./static/img/24.jpg", //M
        "./static/img/25.jpg", //N
        "./static/img/18.jpg" //O
      ],
      startPointX: 0,
      changePointX: 0,
      showIndex: 0,
      textA: true, //首页
      textB: false, //新建1
      textC: false, //新建2
      textD: false, //已录信息
      textE: false, //已录信息(查看详情)
      textF: false, //系统设置
      textG: false, //系统设置(作物昆虫等设置)
      textH: false, //识别模块
      textJ: false, //识别模块（病害昆虫）
      textK: false, //我的模块
      textL: false,
      textM: false,
      textN: false,
      textO: false,

      //文字数据
      textArr: [
        '统计分类：分为两类，一是病害，二是虫害;根据顺序进行填写，依次将作物(昆虫)名称和生育期选择完，再选择记录的单位是面积大小(平方米/亩)还是作物数量(株数/叶数)上传图片;填写上数量和病级(虫级),点击右上方的完成就保存了一条数据了',
        '在系统设置中的病害或虫害设置中点击进入详情，选择右上角的按钮进行设置默认数据，当该数据已经为默认数据时再次进入详情右上角会显示为取消默认',
        '登录成功后，点击下方我的按钮会显示用户的详细信息,如用户名,注册电话邮箱和地址,用户身份等;点击退出账号会将用户设置的默认地址和采集人信息删除'
      ],
      textData: '',
      dialogVisible: false, 
    };
  },
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },

    showIndex() {
      let _this = this;

      // 首页 A
      if (_this.showIndex === 0) {
        _this.textA = true;
        _this.textB = false;
        _this.textC = false;
        _this.textD = false;
        _this.textE = false;
        _this.textF = false;
        _this.textG = false;
        _this.textH = false;
        _this.textJ = false;
        _this.textK = false;
        _this.textL = false;
        _this.textM = false;
        _this.textN = false;
        _this.textO = false;
      }

      // 新建1 B
      if (_this.showIndex === 1) {
        _this.textA = false;
        _this.textB = true;
        _this.textC = false;
        _this.textD = false;
        _this.textE = false;
        _this.textF = false;
        _this.textG = false;
        _this.textH = false;
        _this.textJ = false;
        _this.textK = false;
        _this.textL = false;
        _this.textM = false;
        _this.textN = false;
        _this.textO = false;
      }

      // 新建2 C
      if (_this.showIndex === 2) {
        _this.textA = false;
        _this.textB = false;
        _this.textC = true;
        _this.textD = false;
        _this.textE = false;
        _this.textF = false;
        _this.textG = false;
        _this.textH = false;
        _this.textJ = false;
        _this.textK = false;
        _this.textL = false;
        _this.textM = false;
        _this.textN = false;
        _this.textO = false;
      }

      // 已录信息 D
      if (_this.showIndex === 3) {
        _this.textA = false;
        _this.textB = false;
        _this.textC = false;
        _this.textD = true;
        _this.textE = false;
        _this.textF = false;
        _this.textG = false;
        _this.textH = false;
        _this.textJ = false;
        _this.textK = false;
        _this.textL = false;
        _this.textM = false;
        _this.textN = false;
        _this.textO = false;
      }

      // 已录信息 E
      if (_this.showIndex === 4) {
        _this.textA = false;
        _this.textB = false;
        _this.textC = false;
        _this.textD = false;
        _this.textE = true;
        _this.textF = false;
        _this.textG = false;
        _this.textH = false;
        _this.textJ = false;
        _this.textK = false;
        _this.textL = false;
        _this.textM = false;
        _this.textN = false;
        _this.textO = false;
      }

      // 系统设置 F
      if (_this.showIndex === 5) {
        _this.textA = false;
        _this.textB = false;
        _this.textC = false;
        _this.textD = false;
        _this.textE = false;
        _this.textF = true;
        _this.textG = false;
        _this.textH = false;
        _this.textJ = false;
        _this.textK = false;
        _this.textL = false;
        _this.textM = false;
        _this.textN = false;
        _this.textO = false;
      }

      // 系统设置 G
      if (_this.showIndex === 6) {
        _this.textA = false;
        _this.textB = false;
        _this.textC = false;
        _this.textD = false;
        _this.textE = false;
        _this.textF = false;
        _this.textG = true;
        _this.textH = false;
        _this.textJ = false;
        _this.textK = false;
        _this.textL = false;
        _this.textM = false;
        _this.textN = false;
        _this.textO = false;
      }

      // 识别模块 H
      if (_this.showIndex === 7) {
        _this.textA = false;
        _this.textB = false;
        _this.textC = false;
        _this.textD = false;
        _this.textE = false;
        _this.textF = false;
        _this.textG = false;
        _this.textH = true;
        _this.textJ = false;
        _this.textK = false;
        _this.textL = false;
        _this.textM = false;
        _this.textN = false;
        _this.textO = false;
      }

      //   识别模块（病害虫） J
      if (_this.showIndex === 8) {
        _this.textA = false;
        _this.textB = false;
        _this.textC = false;
        _this.textD = false;
        _this.textE = false;
        _this.textF = false;
        _this.textG = false;
        _this.textH = false;
        _this.textJ = true;
        _this.textK = false;
        _this.textL = false;
        _this.textM = false;
        _this.textN = false;
        _this.textO = false;
      }

      // 我的模块 K
      if (_this.showIndex === 9) {
        _this.textA = false;
        _this.textB = false;
        _this.textC = false;
        _this.textD = false;
        _this.textE = false;
        _this.textF = false;
        _this.textG = false;
        _this.textH = false;
        _this.textJ = false;
        _this.textK = true;
        _this.textL = false;
        _this.textM = false;
        _this.textN = false;
        _this.textO = false;
      }

      // 我的模块 K
      if (_this.showIndex === 10) {
        _this.textA = false;
        _this.textB = false;
        _this.textC = false;
        _this.textD = false;
        _this.textE = false;
        _this.textF = false;
        _this.textG = false;
        _this.textH = false;
        _this.textJ = false;
        _this.textK = false;
        _this.textL = true;
        _this.textM = false;
        _this.textN = false;
        _this.textO = false;
      }

      // 我的模块 K
      if (_this.showIndex === 11) {
        _this.textA = false;
        _this.textB = false;
        _this.textC = false;
        _this.textD = false;
        _this.textE = false;
        _this.textF = false;
        _this.textG = false;
        _this.textH = false;
        _this.textJ = false;
        _this.textK = false;
        _this.textL = false;
        _this.textM = true;
        _this.textN = false;
        _this.textO = false;
      }

      // 我的模块 K
      if (_this.showIndex === 12) {
        _this.textA = false;
        _this.textB = false;
        _this.textC = false;
        _this.textD = false;
        _this.textE = false;
        _this.textF = false;
        _this.textG = false;
        _this.textH = false;
        _this.textJ = false;
        _this.textK = false;
        _this.textL = false;
        _this.textM = false;
        _this.textN = true;
        _this.textO = false;
      }

      // 我的模块 K
      if (_this.showIndex === 13) {
        _this.textA = false;
        _this.textB = false;
        _this.textC = false;
        _this.textD = false;
        _this.textE = false;
        _this.textF = false;
        _this.textG = false;
        _this.textH = false;
        _this.textJ = false;
        _this.textK = false;
        _this.textL = false;
        _this.textM = false;
        _this.textN = false;
        _this.textO = true;
      }
    }
  },
  computed: {},
  mounted() {
    this.get_boderHeight();
  },
  methods: {
    textReveal(index) {
      var _this = this
      _this.dialogVisible = true;
      _this.textData = _this.textArr[index]
    },
     handleClose(done) {
      let _this = this;
      _this.dialogVisible = false;
    },

    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    goBack() {
      let _this = this;
      // _this.$router.push("/home");
      _this.$router.replace("/home");
    },

    show(index) {
      this.changePointX = this.startPointX;
      let slider = document.getElementById("slider");
      // slider.style.marginLeft = `-${270 * index}px`;
      // slider.style.marginLeft = `-${7.5 * index}rem`;
      slider.style.marginLeft = `-${8.8 * index}rem`;
    },
    touchstart(e) {
      this.startPointX = e.changedTouches[0].pageX;
    },
    touchmove(e) {
      let _this = this;
      if (this.startPointX == this.changePointX) {
        return;
      }
      let currPointX = e.changedTouches[0].pageX;
      let leftSlide = this.startPointX - currPointX;
      if (leftSlide > 30 && this.showIndex < this.imgSrc.length - 1) {
        this.show(++this.showIndex);
      } else if (leftSlide < -30 && this.showIndex > 0) {
        this.show(--this.showIndex);
      }
    }
  }
};
</script>

<style lang="scss">
@import "../../assets/style/bus.scss";
@import "../../assets/style/scss/help.scss";
</style>
