<!--
 * @description:
 * @fileName: yasTest.vue
 * @author: huzhiming
 * @date: 2019-11-28 10:09:21
 * @后台人员:
 * @version: v1.0.0
 * @path: 页面访问路径及参数说明
!-->
<template>

<div class="yasTest-wrap">
  <div v-trackClick="{ props: 'YAS_BUY_CLICK_DATA' }" class="top" @click="buy">
    <h2 style="height: 200px">height:1000px;购买</h2>
  </div>
  <div
    ref="exposureRef"
    v-trackExposure="{ props: 'YAS_ITEM_EXPOSURE_DATA', index }"
    v-trackClick="{ props: 'YAS_ITEM_CLICK_DATA', index }"
    class="box"
    v-for="(item, index) in yasList" :key="index">
    <pre>
      height:100px
      id: {{item.id}}
    </pre>
  </div>
  <div class="down">height:1000px</div>
</div>
</template>

<script>
// horizontal vertical

// initHorizontalExposure
import trackEventMixins from '@/pages/trackEventMixins'

export default {
  name: 'yasTest',
  mixins: [trackEventMixins],
  props: {},
  data() {
    return {
      direction: 'left',
      yasList: [...Array(20).keys()].map((item, index) => ({
        id: index
      }))
    }
  },
  created() {},
  mounted() {
    setTimeout(() => {
      this.direction = 'right'
    }, 3000);
  },
  activated() {},
  deactivated() {},
  // beforeRouteEnter (to, from, next) {},
  // beforeRouteUpdate(to, from, next) {},
  // beforeRouteLeave(to, from, next) {},
  destroyed() {},
  methods: {
    buy() {
      console.log('我来自于@click点击，在此处负责执行相关业务逻辑代码！！');
    },
    // 注意：放开注释，即可重写默认行为
    // dispatchExposure(data) {
    //   console.log(data);
    // }
  },
  computed: {

    // 页面曝光数据配置，名称不可修改 activated钩子触发
    pageExposure() {
      return {
        params: {
          appop: '页面曝光上报Api',
          param: {
            name: `我是页面曝光传参`
          }
        }
      }
    },

    // 普通按钮坑位点击，数据配置 【名称可自定义，与对应指令 props 保持一致即可】
    YAS_BUY_CLICK_DATA() {
      return {
        params: {
          appop: 'yasBuyParamsApi-test',
          param: {
            name: '我是对象传参测试' + this.direction
          }
        }
      }
    },

    // 列表坑位曝光，数据配置 【名称可自定义，与对应指令 props 保持一致即可】
    YAS_ITEM_EXPOSURE_DATA() {
      return this.yasList.map((el,index)=>({
        P_NAME: '',
        TYPE_ID: '',
        TAB_ID: '',
        TAB_NAME: '',
        P_PARAM: '',
        I_INDEX: index,
        PRD_ID: 12233,
        PRD_TYPE: '曝光列表项目' + index
      }))
    },

    // 列表坑位点击，数据配置 【名称可自定义，与对应指令 props 保持一致即可】
    YAS_ITEM_CLICK_DATA() {
      return this.yasList.map((el,index)=>{
        return {
          params: {
            appop: 'YAS_ITEM_CLICK_DATAApi-test',
            param: {
              name: '点击了列表项目' + index
            }
          }
        }
      });
    }
  },
  watch: {},
  components: {}
};
</script>

<style rel='stylesheet/scss' lang='scss' scoped>
.yasTest-wrap {
  background: #f5f5f5;
  .box {
    width: 100vw;
    height: 200px;
    &:nth-child(2n) {
      background: red;
    }
    &:nth-child(2n+1) {
      background: green;
    }
  }
  .top,.down {
    height: 1000px;
  }
}
//@import "./style.scss";
</style>