<template>
  <div class="tac" :style="styleData[keyData.tac]" v-if="showTeamList == true">
    <div class="unpackingGeili" :style="styleData[keyData.unpackingGeili]">
      <div class="tit" :style="styleData[keyData.tit]" >已有
        <span style="color: rgb(255, 112, 111);"> {{ shareUserList.length }} </span>人帮忙砍价
      </div>
      <div class="unpackingGeiliList" :style="styleData[keyData.unpackingGeiliList]">
        <div class="unpackingGeiliListItems" :style="styleData[keyData.unpackingGeiliListItems]" v-for="(item) in shareUserList">
          <div class="cb">
            <div class="fl">
              <div class="ib">
                <img :src="item.userImg" alt="" style="width: 0.5rem; height: 0.5rem; border-radius: 100%;">
              </div>
              <div class="ib" style="margin-left: 0.15rem;">
                <div>{{ item.nickName | twostar }}</div>
                <div style="font-size: 0.2rem;">{{ item.createTime | dateTime }}</div>
              </div>
            </div>
            <div class="fr" style="margin-top: 0.1rem; font-size: 0.24rem;">帮忙砍了一刀</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import apis1 from "../../../util/apis1.js";
  import store from "../../../store/store";
  import dateUtil from "../../../util/dateUtil";
  let { barginShareUserList} = apis1;

  export default {

    props:["isTemplate", "datas", "keyData", "styleData", "templateData"],
    data() {
      return {
        showTeamList: false,
      };
    },
    created() {
      this.initData();
    },

    methods: {
      initData() {
        if (this.isTemplate == true) {
          this.$toast("活动预览，仅供查看");
        }else {
          barginShareUserList(bargain => {
            this.shareUserList = bargain.data.shareUserList;
            if (this.shareUserList.length > 0){
              this.showTeamList = true;
            }
            this.publicData.$emit('bargainTeamHelpStatus', this.helpStatus);
          });
        }
      },
    },
    filters: {
      twostar: function(value) {
        if (!value) {
          return ""
        }
        return value.substr(0, 1) + "**" + value.substr(-1, 1)
      },
      //时间转换
      dateTime(val) {
        if (val) {
          return dateUtil.formatTime(val, 'yyyy-MM-dd hh:mm');
        }
        return val;
      }
    }
  };
</script>

<style lang="scss">

 .unpackingGeiliListItems:after{
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-top: 1px dashed #d6adc4;
    color: #fff;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
  .cb, .cbli li {
    zoom: 1;
  }
  .fl {
    float: left;
  }
  .ib {
    display: inline-block;
    vertical-align: middle;
  }
  .fr {
    float: right;
  }

</style>
