<template>
  <div>
    <div id='mobilebarBox' class="overflow-hidden" :style="{height:detailHeight + 'px'}"  >
      <div id="content">
        <!-- 1.滑动标识 -->
        <div class="gray" style="text-align:center" @click="changeExpandClass">
            <!-- 上滑标识 -->
            <b-icon style="margin:0 auto"
              icon='chevron-compact-up'
              font-scale="1.2"
              v-show="expandClass === 0"
              variant="secondary">
            </b-icon>
             <!-- 上下滑标识 -->
            <b-icon style="margin:0 auto"
              icon='dash'
              font-scale="1.2"
              v-show="expandClass === 1"
              variant="secondary">
            </b-icon>
            <!-- 下滑标识 -->
            <b-icon style="margin:0 auto"
              icon='chevron-compact-down'
              font-scale="1.2"
              v-show="expandClass === 2"
              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>
          <!-- 通知列表 -->
          <div id="list-div">
              <b-list-group>
                <b-list-group-item
                style="font-size:10px"
                button
                v-for="item of listData.current.slice((currentPage-1)*perPage,currentPage*perPage)"
                :key="item.id"
                @click="showMsgDetail(item.id)"
                >
                  <tr>
                    <td class="font-weight-bold">
                      <div class="text-truncate">{{item.title| ellipsis}}</div>
                    </td>
                  </tr>
                  <div class="listTime">{{item.time}}</div>
                </b-list-group-item>
              </b-list-group>
          </div>

          <!-- 分页栏 -->
          <div id='pagin-div'>
            <b-pagination
              pagination-small
              pills
              v-model="currentPage"
              :total-rows="rows"
              :per-page="perPage"
              align="center" class="mt-0 mb-1">
            </b-pagination>
          <!-- <el-row type="flex" class="row-bg" justify="center">
            <el-pagination
              :hide-on-single-page="value"
              :total="5"
              layout="prev, pager, next">
            </el-pagination>
          </el-row> -->
          </div>

          <hr class="mt-0 mb-2"/>

          <!-- 标签栏（按钮） -->
          <div style="text-align:center; margin-bottom: 10px" id='list-btn-div'>
            <!-- <b-button size="sm" pill variant="outline-success" @click="getNoticeList()">通知</b-button>
            <b-button size="sm" pill variant="outline-success" @click="getReportList()">报道</b-button>
            <b-button size="sm" pill variant="outline-success" @click="getCultureList()">文化</b-button>
            <b-button size="sm" pill variant="outline-success" @click="getOthersList()">更多</b-button> -->
            <b-form-radio-group
              id="btn-radios-2"
              v-model="selected"
              buttons
              button-variant="outline-primary"
              size="sm"
              name="radio-btn-outline"
            >
              <template v-for="option in options">
                <b-form-radio :value="option.value" :key="option.text" class="rounded-pill mx-1"
                 @change="updateList(option.value)">
                {{ option.text }}
                </b-form-radio>
              </template>
            </b-form-radio-group>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'MobileBar',
  data () {
    return {
      detailHeight: window.screen.height * 0.32, //  底部栏实际高度
      minHeight: 24, // 底部栏最小高度
      maxHeight: window.screen.height * 0.80, // 底部栏最大高度
      midHeight: window.screen.height * 0.32, //  底部栏中等高度
      isExpand: false, // 底部栏伸缩状态
      expandClass: 1, //  底部栏拉伸等级，0为最小，1为中，2为最大

      selected: 'radio1',
      options: [
        { text: '通知', value: 'radio1' },
        { text: '报道', value: 'radio2' },
        { text: '文化', value: 'radio3' },
        { text: '更多', value: 'radio4' }
      ],

      // 列表数据
      listData: {
        current: [], // 当前，为以下4组数据之一
        notice: [], // 通知
        report: [], // 报道
        culture: [], // 文化
        others: [] // 更多
      },

      currentMsgType: 'notice', // 通知列表当前显示的类型 0通知；1报道；2文化；3更多

      currentPage: 1, // 通知列表当前页数
      resetListener: true //  重置监听器的开关
    }
  },
  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

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

        e.stopPropagation()
      }

      var touchMove = function (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()
      }

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

        // 上拉/下拉 响应
        if (LEN >= 100 && that.expandClass !== 2) {
          // that.isExpand = true
          if (that.expandClass !== 2) {
            that.resetListener = true
            that.expandClass += 1
          }
        } else if (LEN <= -100 && that.expandClass !== 0) {
          // that.isExpand = false
          if (that.expandClass !== 0) {
            that.resetListener = true
            that.expandClass -= 1
          }
        } else {
          that.detailHeight = START_HEIGHT
          return 0
        }

        e.stopPropagation()

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

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

    // 获取通知列表
    getNoticeList: function () {
      var that = this
      this.$axios
        .get('/notice/list')
        .then(function (response) {
          that.listData.notice = response.data
          // 浅拷贝到当前的通知列表数组
          that.listData.current = JSON.parse(JSON.stringify(that.listData.notice))
          that.currentMsgType = 'notice'
        })
    },

    /**
     * @description:获取报道列表数据
     * @returns {void}
     */
    getReportList: function () {
      var that = this
      this.$axios
        .get('/report/list')
        .then(function (response) {
          that.listData.report = response.data
          // 浅拷贝到当前的通知列表数组
          that.listData.current = JSON.parse(JSON.stringify(that.listData.report))
          that.currentMsgType = 'report'
        })
    },

    /**
     * @description:获取文化列表数据
     */
    getCultureList: function () {
      var that = this
      this.$axios
        .get('/culture/list')
        .then(function (response) {
          that.listData.culture = response.data
          // 浅拷贝到当前的通知列表数组
          that.listData.current = JSON.parse(JSON.stringify(that.listData.culture))
          that.currentMsgType = 'culture'
        })
    },

    /**
     * @description:获取更多列表数据
     */
    getOthersList: function () {
      var that = this
      this.$axios
        .get('/others/list')
        .then(function (response) {
          that.listData.others = response.data
          // 浅拷贝到当前的通知列表数组
          that.listData.current = JSON.parse(JSON.stringify(that.listData.others))
          that.currentMsgType = 'others'
        })
    },

    // 按钮点击事件，更新列表
    updateList: function (value) {
      switch (value) {
        case 'radio1':
          this.getNoticeList()
          break
        case 'radio2':
          this.getReportList()
          break
        case 'radio3':
          this.getCultureList()
          break
        case 'radio4':
          this.getOthersList()
          break
      }
    },

    /**
     * @description:将id值传给map.vue进行信息提取与渲染
     * @param {number} id:报道的id值
     */
    showMsgDetail: function (id) {
      let that = this
      bus.$emit('showMsgDetail', {
        id: id,
        type: that.currentMsgType
      })
      this.resetListener = false
      this.expandClass = 0
    },

    /**
     * @description:设置底部栏列表尺寸
     */
    setSize: function () {
      let max = this.maxHeight
      let el = document.getElementById('list-div')
      el.style.height = max - 110 + 'px'
    },

    /**
     * @description:改变底部栏扩张等级
     */
    changeExpandClass: function () {
      this.resetListener = false
      switch (this.expandClass) {
        case 0:
          this.expandClass += 1
          break
        case 1:
          this.expandClass += 1
          break
        case 2:
          this.expandClass -= 1
          break
      }
    },

    /**
     * @description: eventBus的bus.$on 触发事件汇总
     */
    busOnAction: function () {
      var that = this

      // 最小化列表
      bus.$on('closeList', () => {
        that.resetListener = false
        that.expandClass = 0
      })
    }
  },
  watch: {
    /**
     * @description:底部栏显示、拉伸控制
     */
    expandClass () {
      switch (this.expandClass) {
        case 0:
          this.detailHeight = this.min
          break
        case 1:
          this.detailHeight = this.mid
          break
        case 2:
          this.detailHeight = this.max
          break
      }
      if (this.resetListener) {
        this.heightListener('mobilebarBox')
      }
    }
  },
  computed: {
    /**
     * @description:根据type值调整底部栏最大高度限制
     */
    max: function () {
      return this.maxHeight
    },

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

    /**
     * @description:根据type值调整底部栏中等高度限制
     */
    mid: function () {
      return this.midHeight
    },

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

    /**
     * @description: 最高伸展等级时通知列表每页显示数目
     */
    perPage: function () {
      return Math.floor((this.maxHeight - 34 - 16 - 24) / 42)
    },

    /**
     * @description: 中等伸展等级时通知列表单页显示数目
     */
    onePage: function () {
      return Math.floor((this.maxHeight - 34 - 16 - 24) / 42)
    }
  },

  filters: {
    /**
     * @description:过滤器，超过16位显示省略号
     */
    ellipsis: function (value) {
      if (!value) return ''
      if (value.length > 18) {
        return value.slice(0, 18) + '...'
      }
      return value
    }
  },

  mounted () {
    this.heightListener('mobilebarBox')
    this.getNoticeList()
    this.setSize()
    this.busOnAction()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  -webkit-text-size-adjust: none;
}
.text-truncate{
  margin-left:32px;
  border-bottom: 4px solid #87BF96;
  padding-bottom: 0px;
  font-size: 11px;
  -webkit-text-size-adjust: none;
  /*top:50%;*/
  /*transform: translateY(-50%);*/
  height:18px;

}
/*分页栏上的数字*/
/deep/ .page-item.active .page-link{
  background-color: #87BF96!important;
  border-color: #87BF96!important;
}

.font-weight-bold{
  font-family: "Noto Sans SC";
  font-weight: 200;
}
.list-group-item {
  height:42px;
  padding: 0;
  border:none;
}
.listTime {
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  right:32px;
  /* font-family: "Source Han Sans CN"; */
  font-family: 'Noto Sans SC';
  font-weight: 100;
  font-size: 11px;
}
#pagin-div {
  position: relative;
  /* bottom: 0; */
  left: 50%;
  transform: translateX(-50%);
}
#mobilebarBox {
  border-radius: 7px;
}

/*设置低端标签栏样式*/
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active, .show >
.btn-outline-primary.dropdown-toggle {
  background-color: #87BF96;
  border-color: #87BF96;
}
.btn-outline-primary, .btn-outline-primary:hover{
  color: #87BF96;
  border-color: #87BF96;
  font-family: "Noto Sans SC";
}
/deep/.rounded-pill.mx-1.btn.btn-outline-primary.btn-sm.active.focus{
  border-color:#87BF96;
  box-shadow: none;
}

</style>
