<template>
  <div>
    <div class="bargainingDiv"><div :style="styleData[keyData.shop]" v-lz-click="'4'" @click="goToShop()"></div></div>
    <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"
      @callBack="callBack"
    ></component>
  </div>
</template>

<script>
import { Toast } from 'vant';
import apis1 from '../../../util/apis1.js';
import { goToShopPage } from '../../../util/tools';

import bargainMain from '../../logicalComponent/bargainMain/bargainMain.vue'; //砍价主态

import bargainShare from '../../logicalComponent/share/bargainShare.vue'; //帮助砍价
import bargainKeGood from '../../logicalComponent/bargainke/bargainKeGood.vue';
import BargainMemberPop from '../../basisComponent/joinMemeber/bargainmember.vue';
import { BargainMemberPopComService, BargainMainPopComService } from '../../../util/comCreate.js';
let { myselfBargain } = apis1;

import store from '../../../store/store.js'; //砍价客态
export default {
  components: {
    store,
    bargainMain,
    bargainShare,
    bargainKeGood,
    BargainMemberPop
  },
  props: ['datas', 'styleData', 'keyData', 'isTemplate','templateData'],
  data() {
    return {
      shopId: '',
      skuId: '',
      shareImg: '', //分享人头像
      maxCutPrice: '', //最高立减
      skuName: '', //商品名字
      skuPrice: '', //商品价格
      bargainChance: false, //是否有砍价机会
      myself: false, //是否是分享者本人
      componentsData: {}
    };
  },

  mounted() {
    this.initData()
  },

  methods: {
    initData() {
      console.log(this.templateData,'模板预览地址templateData')
      let activityType = sessionStorage.getItem('activityType');
      var dataAll = this.templateData; //预览数据

      if (this.isTemplate == true) {
        if (!store.state.shareUserId) {
          this.myself = true;
          this.componentsData = {
            bargainMain: {
              datas: {
                temPlateDataAll: dataAll
              },
              keyData: {},
              styleData: {}
            }
          };
        } else {
          console.log('22222222222');
          this.publicData.$emit('isKe', true);
          this.componentsData = {
            bargainKeGood: {
              styleData: {},
              datas: {
                temPlateDataAll: dataAll
              },
              keyData: {}
            },

          };
        }
      } else {
        if (store.state.shareUserId) {
          myselfBargain(data => {
            this.myself = data.data;
            if (this.myself) {
              this.componentsData = {
                bargainMain: {
                  datas: {
                    temPlateDataAll: dataAll
                  },
                  keyData: {},
                  styleData: {}
                }
              };
            } else {
              this.publicData.$emit('isKe', true);
              this.componentsData = {
                bargainKeGood: {
                  styleData: {},
                  datas: {
                    temPlateDataAll: this.datas.temPlateDataAll
                  },
                  keyData: {}
                },


              };
            }
          });
        } else {
          this.componentsData = {
            bargainMain: {
              datas: {
                temPlateDataAll: dataAll
              },
              keyData: {},
              styleData: {}
            }
          };
        }
      }
    },

    goToShop() {
      if (this.isTemplate == true) {
        this.$toast('活动预览，仅供查看');
      } else {
        goToShopPage(store.state.shopId);
      }
    },
    callBack(type) {
      //1 客端变主端可以参与活动 2 客端参与活动等级不足
      if (type == '1') {
        this.componentsData = {
          bargainMain: {
            datas: {
              temPlateDataAll: null
            },
            keyData: {},
            styleData: {}
          }
        };
      } else if (type == '2') {
        this.componentsData = {
          BargainMemberPop: {
            datas: {
              temPlateDataAll: null
            },
            keyData: {},
            styleData: {}
          }
        };
      }
    }
  }
};
</script>

<style lang="scss">
.bargainingDiv {
  position: absolute;
  // height: 80%;
  width: 100%;
  // background:#fc1d25;
}
</style>
