<template>
  <div>
    <div id='mobilebarBox' class="overflow-hidden" :style="{height:detailHeight + 'px'}"  >
      <div id="content">
        <!-- 1.滑动标识 -->
        <div class="gray" style="text-align:center" @click="isExpand = !isExpand">
            <!-- 上滑标识 -->
            <b-icon style="margin:0 auto"
              icon='chevron-compact-up'
              font-scale="1.2"
              v-show="!isExpand"
              variant="secondary">
            </b-icon>
            <!-- 下滑标识 -->
            <b-icon style="margin:0 auto"
              icon='chevron-compact-down'
              font-scale="1.2"
              v-show="isExpand"
              variant="secondary">
            </b-icon>
        </div>

        <!-- 2.搜索栏 -->
        <!-- <b-input-group
            key="sm"
            v-show="(type !== 'noticeDetail' && type !== 'cultureDetail') || isExpand === false "
            size="sm"
            class="mb-2 pr-1 pl-1"
          >
          <b-input-group-prepend is-text>
              <b-icon icon="search"></b-icon>
            </b-input-group-prepend>
            <b-form-input
              placeholder="查找单位、地点、设施"
            >
            </b-form-input>
        </b-input-group> -->

        <!-- 3.伸展栏 -->
        <div v-show="isExpand">
          <!-- 通知列表 -->
            <b-list-group>
              <b-list-group-item
              style="font-size:10px"
              button
              v-for="item of reportData.reportList.slice((currentPage-1)*perPage,currentPage*perPage)"
              :key="item.id"
              @click="showReportDetail(item.id)"
              >
                <tr>
                  <td>●</td>
                    &nbsp;&nbsp;
                  <td class="font-weight-bold">
                    <div class="text-truncate">{{item.title| ellipsis}}</div>
                  </td>
                </tr>
                <span class="listTime">{{item.time}}</span>
              </b-list-group-item>
            </b-list-group>
            <!-- 分页栏 -->
            <div class="mt-2  footer" >
              <b-pagination
                v-model="currentPage"
                pills
                :total-rows="rows"
                :per-page="perPage"
                align="center">
              </b-pagination>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from '../../static/js/eventBus'

export default {
  name: 'MobileBar',
  data () {
    return {
      detailHeight: 24, //  底部栏实际高度
      minHeight: 24, // 底部栏最小高度
      maxHeight: window.screen.height * 0.7, // 底部栏最大高度
      isExpand: false, // 底部栏伸缩状态
      reportData: {
        reportList: [] // 通知列表数据
      },
      currentPage: 1 // 通知列表当前页数
    }
  },
  methods: {
    /**
     * @description:底部栏高度拉伸监听
     * @param {String} id:目标容器id值
     * @returns {void}
     */
    heightListener: function (id) {
      var that = this
      var resize = document.getElementById(id)
      var START_HEIGHT // 记录初始高度
      var START, END, LEN //  记录拉伸过程总起点、总终点、总长度
      var startY, endY, moveLen
      var min
      var max

      resize.addEventListener('touchstart', touchStart, false)
      resize.addEventListener('touchmove', touchMove, false)
      resize.addEventListener('touchend', touchEnd, false)

      function touchStart (e) {
        // 获取开始坐标 clientY为鼠标的垂直坐标
        startY = e.touches[0].pageY
        START = startY
        START_HEIGHT = that.detailHeight

        e.stopPropagation()
      }

      function touchMove (e) {
        min = that.min
        max = that.max

        // 计算并应用位移量
        endY = e.touches[0].pageY
        moveLen = startY - endY
        startY = endY
        let tempHeight = that.detailHeight + moveLen

        // 高度限制处理
        if (tempHeight < min) {
          that.detailHeight = min
        } else if (tempHeight > max) {
          that.detailHeight = max
        } else {
          that.detailHeight = tempHeight
        }
        e.stopPropagation()
      }

      function touchEnd (e) {
        END = endY
        LEN = START - END

        // 拉伸到上半区域则最大化，下半区域则最小化
        if (LEN >= 100) {
          that.isExpand = true
        } else if (LEN <= -100) {
          that.isExpand = false
        } else {
          that.detailHeight = START_HEIGHT
          return 0
        }

        e.stopPropagation()

        resize.removeEventListener('touchstart', touchStart)
        resize.removeEventListener('touchmove', touchMove)
        resize.removeEventListener('touchend', touchEnd)
      }
    },

    /**
     * @description:获取报道列表数据
     * @returns {void}
     */
    getReportList: function () {
      var that = this
      this.$axios
        .get('/report/list')
        .then(function (response) {
          that.reportData.reportList = response.data
        })
    },

    /**
     * @description:将id值传给map.vue进行信息提取与渲染
     * @param {number} id:报道的id值
     */
    showReportDetail: function (id) {
      bus.$emit('showReportDetail', id)
      this.isExpand = false
    }
  },
  watch: {
    /**
     * @description:底部栏显示、拉伸控制
     */
    isExpand () {
      if (this.isExpand) {
        this.detailHeight = this.max
      } else {
        this.detailHeight = this.min
      }
      this.heightListener('mobilebarBox')
    }
  },
  computed: {
    /**
     * @description:根据type值调整底部栏最大高度限制
     */
    max: function () {
      return this.maxHeight
    },

    /**
     * @description:根据type值调整底部栏最小高度限制
     */
    min: function () {
      return this.minHeight
    },

    /**
     * @description: 通知列表总数目
     */
    rows: function () {
      return this.reportData.reportList.length
    },

    /**
     * @description: 通知列表每页显示数目
     */
    perPage: function () {
      return Math.floor((this.maxHeight - 34 - 16 - 54) / 43)
    }
  },
  filters: {
    /**
     * @description:过滤器，超过16位显示省略号
     */
    ellipsis: function (value) {
      if (!value) return ''
      if (value.length > 16) {
        return value.slice(0, 16) + '...'
      }
      return value
    }
  },
  mounted () {
    this.heightListener('mobilebarBox')
    this.getReportList()
    // this.busOnAction()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .listTime {
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    right:20px;
  }
  .footer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  #mobilebarBox {
    border-radius: 7px;
  }
</style>
