<template>
  <div :style="friendNum != 0 ? bargainMainStyle.bargainmemberDiv : bargainMainStyle.bargainmemberDiv1">
    <component
      ref="dataRef"
      v-for="(value, key, index) in componentsData"
      :key="index"
      :is="key"
      :isTemplate="isTemplate"
      :styleData="value.styleData"
      :datas="value.datas"
      :keyData="value.keyData"
    ></component>
  </div>
</template>

<script>
import bargainShare from '../../logicalComponent/share/bargainShare.vue'; //砍价
import rulepop from '../../basisComponent/rule/rule.vue'; //帮助砍价
import helpBargain from '../../logicalComponent/helpBargain/helpBargain.vue'; //帮助砍价
import bargainGood from './bargainGood.vue';
import setShare from '../../logicalComponent/share/setShare.vue';

import { Toast } from 'vant';
import apis from '../../../util/apis1.js';
import { goToSkuPage } from '../../../util/tools';
let { bargain, guest, toJoin, bargainFriends } = apis;
import Vue from 'vue';
Vue.use(Toast);
export default {
  components: {
    rulepop,
    helpBargain,
    bargainShare,
    bargainGood,
    setShare
  },
  props: ['datas', 'styleData', 'keyData', 'isTemplate'],
  data() {
    return {
      componentsData: {},
      bargainMainStyle: {
        bargainmemberDiv: {
          position: 'absolute',
          width: '100%',
          height: '15.5rem',
          background: '#fc1d25'
        },
        bargainmemberDiv1: {
          position: 'absolute',
          width: '100%',
          height: '11rem',
          background: '#fc1d25'
        }
      },
      dataAll: {},
      friendNum: 0 //帮助人数
    };
  },
  created() {
    console.log(this.datas,'*******111111111')
    this.componentsData = {
      bargainGood: {
        styleData: {},
        datas: {
          temPlateDataAll: this.datas.temPlateDataAll
        },
        keyData: {}
      },
      rulepop: {
        styleData: {
          ruleDiv: {
            width: '7.11rem',
            height: '4.92rem',
            backgroundImage: 'url(//img10.360buyimg.com/imgzone/jfs/t1/156560/23/6526/21236/60052a34E1377267c/8f2a301c784a8e1b.png)',
            position: 'absolute',
            backgroundSize: '100%',
            left: 'calc(50% - 7.11rem / 2)',
            top: '10rem',
            display: 'flex',
            'justify-content': 'center'
          },
          ruleDiv1: {
            width: '7.11rem',
            height: '4.92rem',
            backgroundImage: 'url(//img10.360buyimg.com/imgzone/jfs/t1/156560/23/6526/21236/60052a34E1377267c/8f2a301c784a8e1b.png)',
            position: 'absolute',
            backgroundSize: '100%',
            left: 'calc(50% - 7.11rem / 2)',
            top: '5.3rem',
            display: 'flex',
            'justify-content': 'center'
          },
          context: {
            color: 'white',
            width: '6.8rem',
            height: '3rem',
            position: 'absolute',
            top: '1.6rem',
            fontSize: '.24rem',
            overflowY: 'scroll',
            'padding': '0 0.24rem',
            "text-align":'left'
          }
        },
        datas: {
          temPlateDataAll:this.datas.temPlateDataAll
        },
        keyData: {
          ruleDiv: 'ruleDiv',
          ruleDiv1: 'ruleDiv1',
          context: 'context'
        }
      },
      helpBargain: {
        datas: {},
        styleData: {
          helpDiv: {
            width: '7.11rem',
            height: '5.19rem',
            backgroundImage: 'url(//img10.360buyimg.com/imgzone/jfs/t1/150834/36/15844/13846/600526fdE086288f8/8732ec2c1aea73c5.png)',
            position: 'absolute',
            backgroundSize: '100%',
            left: 'calc(50% - 7.11rem / 2)',
            top: '5.3rem'
          },
          helpNum: {
            color: 'white',
            'margin-top': '.9rem',
            'font-size': '.3rem',
            'text-align': 'center'
          },
          listDiv: {
            width: '6.51rem',
            height: '2.8rem',
            // background:'red',
            position: 'absolute',
            left: 'calc(50% - 6.51rem / 2)',
            top: '1.7rem',
            overflowY: 'scroll'
          },
          itemDiv: {
            width: '97%',
            height: '1.67rem',
            backgroundImage: 'url(//img20.360buyimg.com/imgzone/jfs/t1/156475/27/6479/4449/600531b1E139ce94e/e20113b636087e3b.png',
            backgroundSize: '100%',
            marginBottom: '.2rem',
            position: 'relative'
          },

          userImg: {
            width: '.75rem',
            height: '.75rem',
            borderRadius: '50%',
            position: 'absolute',
            top: '.7rem',
            left: '.2rem'
          },
          nickName: {
            color: 'red',
            fontSize: '.24rem',
            position: 'absolute',
            top: '.8rem',
            left: '1.3rem'
          },
          createTime: {
            color: '#999999',
            fontSize: '.24rem',
            position: 'absolute',
            top: '1.2rem',
            left: '1.3rem'
          }
        },
        keyData: {
          helpDiv: 'helpDiv',
          helpNum: 'helpNum',
          listDiv: 'listDiv',
          itemDiv: 'itemDiv',
          userImg: 'userImg',
          nickName: 'nickName',
          createTime: 'createTime'
        }
      },

      bargainShare: {
        datas: {},
        styleData: {
          shareStyle: {
            width: '6.12rem',
            height: '.84rem',
            position: 'absolute',
            top: '4.2rem',
            backgroundImage: 'url(//img10.360buyimg.com/imgzone/jfs/t1/150944/8/15776/5917/6005232aE67217b0b/eb613a40dc6d599a.png)',
            left: 'calc(50% - 6.12rem / 2)',
            backgroundSize: '100%',
            zIndex: '1'
          }
        },
        keyData: {
          shareStyle: 'shareStyle'
        }
      }
    };
  },
  mounted() {
    if (this.isTemplate == true) {
      this.friendNum = 0;
    } else {
      bargainFriends(data => {
        this.friendNum = data.data.num;
      });
    }

    this.initAppData();
  },

  methods: {
    initData(data) {
      this.dataAll = data;
    },
    initAppData() {}
  }
};
</script>

<style lang="scss"></style>
