# 侧边导航

<template>
  <div>
    <div ref="titleBar">
      <dof-minibar title="3.3侧边导航"></dof-minibar>
    </div>

    <div class="column-center-top">
      <div class="demo-content">
        <dof-side-nav
          :items="dataList"
          :height="deviceHeight"
          @dofItemClick="dofItemClick"
          :activeFontSize="activeFontSize"
          :activeIndex="activeIndex"
        ></dof-side-nav>
        <div class="right-content">
          <list class="right-list" @scroll="scrollHandler" :style="{ height: contentHeight }">
            <cell class="right-cell" v-for="(item, index) in contentData" :key="index" :ref="'item-' + item.proId">
              <text class="right-text" @appear="onappearHandler(index)">{{ item.name }}</text>
              <div class="list-image">
                <image
                  :src="cItem"
                  class="cell-image"
                  :aria-hidden="true"
                  v-for="(cItem, cIndex) in item.list0"
                  :key="cIndex"
                ></image>
              </div>
              <!-- 放一条细线监听元素是否disappear -->
              <div class="line-red" @disappear="ondisappearHandler(index)"></div>
            </cell>
          </list>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.demo-content-ios {
  position: absolute;
  left: 0;
}
.column-center-top {
  display: flex;
}
.demo-content {
  display: flex;
  flex-direction: row;
}

.right-content-ios {
  padding: 30px 30px 30px 30px;
}
.right-content {
  flex: 1;
  padding: 30px;
  background-color: #ffffff;
}
@media screen and (weex-theme: colmo) {
  .right-content {
    background-color: #151617;
  }
  .right-text {
    color: #fff;
  }
}

.cell-image {
  width: 200px;
  height: 200px;
  margin: 0 20px 20px 0;
}
.list-image {
  margin: 30px 0;
  width: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.line-red {
  width: auto;
  height: 1px;
  margin-bottom: 20px;
}
/* .right-cell {
  padding-top: 20px;
} */
</style>
<script>
import { DofMinibar, DofSideNav } from 'dolphin-weex-ui'
const dom = weex.requireModule('dom')
const modal = weex.requireModule('modal')
const isAndroid = weex.config.env.platform == 'android' ? true : false
let remote_pic =
  'https://bpic.588ku.com/element_list_pic/19/03/06/b933751940fe6ff5ee29c42e7d1edbcb.jpg!/fw/253/quality/90/unsharp/true/compress/true'

export default {
  components: { DofMinibar, DofSideNav },
  data: () => ({
    leftButton: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_back@3x.png',
    dataList: ['空调', '冰箱', '洗衣机', '厨房大电', '厨房小电', '热水器', '净水/饮水', '生活护理', '家居家装'],
    contentData: [
      {
        name: '空调',
        proId: 10,
        list0: [remote_pic, remote_pic]
      },
      {
        name: '冰箱',
        proId: 11,
        list0: [remote_pic, remote_pic, remote_pic]
      },
      {
        name: '洗衣机',
        proId: 12,
        list0: [remote_pic]
      },
      {
        name: '厨房大电',
        proId: 13,
        list0: [remote_pic, remote_pic, remote_pic, remote_pic, remote_pic]
      },
      {
        name: '厨房小电',
        proId: 14,
        list0: [remote_pic, remote_pic, remote_pic, remote_pic, remote_pic]
      },
      {
        name: '热水器',
        proId: 15,
        list0: [remote_pic, remote_pic, remote_pic, remote_pic]
      },
      {
        name: '净水/饮水',
        proId: 16,
        list0: [remote_pic, remote_pic]
      },
      {
        name: '生活护理',
        proId: 17,
        list0: [remote_pic, remote_pic]
      },
      {
        name: '家居家装',
        proId: 18,
        list0: [
          remote_pic,
          remote_pic,
          remote_pic,
          remote_pic,
          remote_pic,
          remote_pic,
          remote_pic,
          remote_pic,
          remote_pic,
          remote_pic,
          remote_pic
        ]
      }
    ],
    activeFontSize: 28,
    backgroundColor: '#f9f9f9',
    activeTextColor: '#333333',
    activeBlockColor: '#333333',
    proName: '',
    activeIndex: 0,
    preScrollY: 0,
    scrollDirection: '',
    titleBarHeight: 0,
    dofItemClickFlag: false, //左边item点击标识
    setTimeoutHandler: null,
    isAndroid,
    remote_pic:
      'https://bpic.588ku.com/element_list_pic/19/03/06/b933751940fe6ff5ee29c42e7d1edbcb.jpg!/fw/253/quality/90/unsharp/true/compress/true'
  }),
  created() {},
  computed: {
    deviceHeight() {
      return weex.config.env.realDeviceHeight || weex.config.env.deviceHeight
    },
    contentHeight() {
      return this.deviceHeight - this.titleBarHeight - 60
    },
    contentLeftDis() {
      return this.defaultStyle.width + 20
    }
  },
  mounted() {
    this.$nextTick(() => {
      let ele = this.$refs.titleBar
      this.getEleHeight(ele.children[0])
    })
  },
  methods: {
    dofItemClick(value) {
      let self = this
      if (this.setTimeoutHandler) {
        clearTimeout(this.setTimeoutHandler)
      }
      this.proName = value.item
      this.activeIndex = value.index
      //对应右边滑动
      this.dofItemClickFlag = true
      this.makeScrollToELe(this.activeIndex)
      this.setTimeoutHandler = setTimeout(() => {
        self.dofItemClickFlag = false
        clearTimeout(self.setTimeoutHandler)
      }, 500)
    },
    makeScrollToELe(index) {
      let currId = this.contentData[index]['proId']
      let currItemId = `item-${currId}`
      let el = this.$refs[currItemId][0]
      dom.scrollToElement(el, {}, () => {
        modal.toast({
          message: 'finish'
        })
      })
    },
    scrollHandler(e) {
      let currScrollY = parseInt(e.contentOffset.y)
      if (currScrollY > this.preScrollY) {
        //页面向下滑
        this.scrollDirection = 'down'
      } else {
        //页面向上滑
        this.scrollDirection = 'up'
      }
      this.preScrollY = currScrollY
    },
    onappearHandler(index) {
      if (this.scrollDirection == 'down' && !this.dofItemClickFlag) {
        this.activeIndex = index
      }
    },
    ondisappearHandler(index) {
      if (this.scrollDirection == 'up' && !this.dofItemClickFlag) {
        this.activeIndex = index + 1
      }
    },
    getEleHeight(ele) {
      let self = this
      dom.getComponentRect(ele, result => {
        let size = result.size || {}
        let height = parseInt(size.height)
        if (!height) {
          self.getEleHeight(ele)
        } else {
          self.titleBarHeight = height
        }
      })
    }
  }
}
</script>