<template>
  <div class="detail-all clear">
    <el-row>
      <el-col :span="12" v-for="(item, index) in pushlist.result" :key="index">
        <div class="detail-single">
          <div class="detail-top">
            <span class="top-name detail-title">{{item.title}}</span>
            <div class="top-right fr">
              <span class="top-time detail-title">{{item.pushTime | formatedDate}}</span>
              <span class="top-pushbtn">
                <img src="@/assets/images/pushbtn.png">
                <span class="top-state" v-if="item.status === 0">推送中</span>
                <span class="top-state" v-if="item.status === 1">推送成功</span>
                <span class="top-state" v-if="item.status === -1">推送失败 </span>
              </span>
            </div>
          </div>
          <div class="detail-data">
            <span v-if="item.status !== -1">
              <span>
                <span class="detail-title">推送人数：</span> {{item.pushCount}}
              </span>
              <span class="detail-title result-add">推送成功:</span> {{item.sentCount}}
            </span>
            <span v-if="item.status === -1" class="detail-title">失败原因: <span style="color:red;overflow:hidden">{{item.statusMsg}}</span> </span>
            <el-button class="fr" slot="reference" v-if="item.scope === 0">全体推送</el-button>
            <el-popover placement="right" title="标签" width="200" trigger="click" v-if="item.scope === 1">
              <div>
                <button v-for="item in item.tagList" :key="item" class="detail-tagbtn">{{item}}</button>
              </div>
              <el-button class="fr" slot="reference" style="color:blue">精准推送</el-button>
            </el-popover>
          </div>
          <div class="detail-node">
            <span class="detail-title">创建推送节点：</span> {{item.clerkName}}
          </div>
        </div>
      </el-col>
    </el-row>
    <pagination v-show="(pushlist&&pushlist.result&&pushlist.result.length) > 10" :pushlist="pushlist" class="detail-pagination"></pagination>
  </div>
</template>

<script>
import Pagination from 'components/Pagination'
export default {
  data() {
    return {}
  },
  components: {
    Pagination,
  },
  props: ['pushlist'],
}
</script>
<style lang="stylus" scoped>
.detail-all
  .detail-title
    font-size 14px
    color #496D92
    text-align left
  .result-add
    padding-left 100px
  .detail-single
    height 124px
    background-color rgba(251, 252, 252, 1)
    border-radius 5px
    box-shadow 5px 5px 5px rgba(228, 228, 228, 0.349019)
    margin 0 15px 15px 0
    padding 0 10px
    .detail-top
      .top-name, .top-right
        display inline-block
        height 40px
        line-height 40px
      .top-right
        .top-pushbtn
          position relative
          margin-left 20px
          .top-state
            padding 5px
            position absolute
            top -17px
            right 3px
  .detail-pagination
    text-align right
  .detail-data, .detail-node
    height 40px
    line-height 40px
  .detail-data
    .el-button
      border none
      background #fbfcfc
      width 74px
      height 27px
.detail-tagbtn
  width 100px
  height 25px
  line-height 25px
  display inline-block
  width 90px
  overflow hidden
  border 1px solid transparent
  border-radius 12px
  background #0096ff
  text-align center
  color #fff
  padding 0px 3px
  vertical-align top
  font-size 13px
  margin-bottom 20px
</style>
