<template>
  <div class="temp-list clear">
    <el-row>
      <div class="temp-button fr">
        <el-button type="text" @click="reset">重置</el-button>
        <el-button type="primary" @click="search">查询</el-button>
      </div>
    </el-row>

    <el-form :inline="true" :model="form" class="demo-form-inline" style="min-width:980px;">
      <el-row class="temp-input">
        <el-col :span="10">
          <el-form-item label="推送名称:">
            <el-input v-model="title" placeholder="请输入推送名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="活动时间">
            <el-date-picker type="date" placeholder="推送时间" v-model="queryDateStart" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
            <span class="line time-line" :span="2">-</span>
            <el-date-picker type="date" placeholder="推送时间" v-model="queryDateEnd" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="temp-input">
        <el-col :span="14">
          <el-form-item label="推送人数">
            <el-input v-model.number="pushCountStart" placeholder="最小推送人数" style="width:210px"></el-input>
            <span class="line time-line" :span="2">-</span>
            <el-input v-model.number="pushCountEnd" placeholder="最大推送人数" style="width:200px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="创建推送节点:">
            <el-select v-model="clerkId" placeholder="--全部--">
              <el-option v-for="(item,index) in dataList" :key="index" :label="item.clerkName" :value="item.clerkId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="dataList" style="width: 100%">
      <el-table-column prop="title" label="推送名称" min-width="100" align="center">
      </el-table-column>
      <el-table-column prop="type" label="推送类型" min-width="76" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.type === 1">微信素材</span>
          <span v-if="scope.row.type === 2">短信</span>
          <span v-if="scope.row.type === 3">微信营销</span>
        </template>
      </el-table-column>
      <el-table-column label="推送时间" min-width="150" align="center">
        <template slot-scope="scope">
          {{scope.row.pushTime | formatedDate}}
        </template>
      </el-table-column>
      <el-table-column prop="scope" label="推送范围" min-width="260" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.scope === 0">全体推送</span>
          <template v-if="scope.row.scope === 1 && scope.row.tagList ">
            <span class="temp-tablespan">
              {{scope.row.tagList && scope.row.tagList[0]}}
            </span>
            <span class="temp-tablespan">
              {{scope.row.tagList && scope.row.tagList[1]}}
            </span>
            <el-popover v-if="scope.row.tagList" placement="bottom" title="标签" width="200" trigger="click">
              <div>
                <span v-for="(item,index) in scope.row.tagList" :key="index" class="table-tag" style="
                        display: inline-block;
                        width: 90px;
                        border: 1px solid transparent;
                        border-radius: 12px;
                        background: #0096ff;
                        text-align: center;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        color: #fff;
                        vertical-align: top;
                        margin: 0 5px 5px 0;
                        font-size: 13px;
                        line-height: 28px;">
                  {{item}}
                </span>
              </div>
              <el-button class="fr temp-tablesmore" slot="reference">更多</el-button>
            </el-popover>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="pushCount" label="推送人数" align="center">
      </el-table-column>
      <el-table-column prop="sentCount" label="推送成功人数" align="center">
      </el-table-column>
      <el-table-column prop="clerkName" label="创建消息节点" align="center">
      </el-table-column>
      <el-table-column prop="statusMsg" label="推送进度" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.statusMsg === '推送失败'" style="color:red">推送失败</span>
          <span v-else-if="scope.row.statusMsg === '推送成功'" style="color:green">推送成功</span>
          <span v-else>推送中</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" :current-page="pageNo" :page-size="10" :total="total" layout="total, prev, pager, next, jumper">
    </el-pagination>
  </div>

</template>
<script>
export default {
  data() {
    return {
      input: '',
      form: {},
      options: [],
      value: '',
      pageNo: 1,
      pageSize: 10,
      title: '',
      type: '',
      queryDateStart: '',
      queryDateEnd: '',
      pushCountStart: '',
      pushCountEnd: '',
      clerkId: '',
    }
  },
  props: ['msgList'],
  computed: {
    dataList() {
      const { result } = this.msgList
      return result
    },
    total() {
      const { totalCount } = this.msgList
      return totalCount
    },
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNo = val
      this.$emit('pageChange', this.pageNo)
    },
    reset() {
      const paramsSearch = {
        pageNo: 1,
        pageSize: 10,
        title: '',
        queryDateStart: '',
        queryDateEnd: '',
        pushCountStart: '',
        pushCountEnd: '',
        clerkId: '',
      }
      this.$emit('reset', paramsSearch)
      this.title = ''
      this.queryDateStart = ''
      this.queryDateEnd = ''
      this.pushCountStart = ''
      this.pushCountEnd = ''
      this.clerkId = ''
    },
    search() {
      const paramsSearch = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        title: this.title,
        queryDateStart: this.queryDateStart,
        queryDateEnd: this.queryDateEnd,
        pushCountStart: this.pushCountStart,
        pushCountEnd: this.pushCountEnd,
        clerkId: this.clerkId,
      }
      this.$emit('search', paramsSearch)
    },
  },
}
</script>
<style lang="stylus" scoped>
>>>.el-pagination
  padding 20px 5px
  min-width 0px
  text-align right
>>>.el-pagination .el-select .el-input
  width auto
>>>.el-input__inner
  min-width 10px
>>>.el-pagination__sizes
  width 110px
>>>.temp-list .el-button:focus, .el-button:hover, .el-button:active
  background-color none !important
.temp-list
  .table-tag
    color red
  .el-button:focus, .el-button:hover, .el-button:active
    background-color #f5f7fa
  .temp-button
    height 50px
    width 120px
  .temp-tablespan
    display inline-block
    width 90px
    border 1px solid transparent
    border-radius 12px
    background #0096FF
    text-align center
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
    color #fff
    padding 0px 3px
    vertical-align top
    font-size 13px
    line-height 28px
  .temp-tablesmore
    padding 0
    border none
    color #0379cb
    font-size 13px
    line-height 28px
    &::hover
      color #0379cb
.time-line
  margin-left 20px
  margin-right 20px
</style>
