<template>
  <div>
    <div ref="titleBar">
      <dof-minibar
        title="侧边导航"
        background-color="#ffffff"
        :isImage="true"
        :left-button="leftButton"
        @dofMinibarLeftButtonClicked="back"
        @dofMinibarRightButtonClicked="minibarRightButtonClick"
      ></dof-minibar>
    </div>
    <!-- ios版本样式 -->
    <list
      class="right-content-ios"
      @scroll="scrollHandler"
      show-scrollbar="false"
      :style="{ 'padding-left': contentLeftDis + 'px' }"
      v-if="!isAndroid"
    >
      <cell v-for="(item, index) in contentData" :key="index" :ref="'item-' + item.proId">
        <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 class="demo-content-ios" :style="{ top: titleBarHeight + 'px' }" v-if="!isAndroid">
      <dof-side-nav
        :items="dataList"
        :defaultStyle="defaultStyle"
        :height="deviceHeight"
        :backgroundColor="backgroundColor"
        @dofItemClick="dofItemClick"
        :activeFontSize="activeFontSize"
        :activeTextColor="activeTextColor"
        :activeBlockColor="activeBlockColor"
        :activeIndex="activeIndex"
      ></dof-side-nav>
    </div>
    <!-- 安卓版本样式 -->
    <div class="column-center-top" v-if="isAndroid">
      <div class="demo-content">
        <dof-side-nav
          :items="dataList"
          :defaultStyle="defaultStyle"
          :height="deviceHeight"
          :backgroundColor="backgroundColor"
          @dofItemClick="dofItemClick"
          :activeFontSize="activeFontSize"
          :activeTextColor="activeTextColor"
          :activeBlockColor="activeBlockColor"
          :activeIndex="activeIndex"
        ></dof-side-nav>
        <list class="right-content" @scroll="scrollHandler" :style="{ height: contentHeight }">
          <cell v-for="(item, index) in contentData" :key="index" :ref="'item-' + item.proId">
            <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>
</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 0 30px;
}
.right-content {
  flex: 1;
  padding: 30px 30px 0 30px;
}

.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;
}
</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
        ]
      }
    ],
    defaultStyle: {
      width: 200,
      height: 92,
      fontSize: 24,
      color: '#999999'
    },
    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
    },
    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>