<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="getDataList">查询</el-button>
      </div>
    </el-row>

    <el-form :inline="true" :model="form" class="demo-form-inline" style="min-width:1480px;">
      <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 HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
            <span class="line time-line" :span="2">-</span>
            <el-date-picker type="date" placeholder="推送时间" v-model="queryDateEnd"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="temp-input">
        <el-col :span="10">
          <el-form-item label="推送人数">
            <el-input v-model.number="pushCountStart" placeholder="请输入推送名称"></el-input>
            <span class="line time-line" :span="2">-</span>
            <el-input v-model.number="pushCountEnd" placeholder="请输入推送名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="创建推送节点:">
            <el-select v-model="clerkId" placeholder="--全部--">
              <el-option v-for="item in options" :key="item.clerkId" :label="item.label" :value="item.clerkId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="dataList">
      <el-table-column prop="title" label="推送名称" width="200">
      </el-table-column>
      <el-table-column prop="type" label="推送类型" width="80">
        <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="推送时间" width="170">
        <template slot-scope="scope">
          {{scope.row.push_time | fomatDate}}
        </template>
      </el-table-column>
      <el-table-column prop="scope" label="推送范围" width="260">
        <template slot-scope="scope">
          <span v-if="scope.row.scope === 0">全体推送</span>
          <template v-if="scope.row.scope === 1">
            <span class="temp-tablespan">
              {{scope.row.tagList[0]}}
            </span>
            <span class="temp-tablespan">
              {{scope.row.tagList[1]}}
            </span>
            <el-popover placement="bottom" title="标签" width="200" trigger="click">
              <div>
                <span class="temp-tablespan" v-for="tag in scope.row.tagList" :key="tag">
                  {{tag}}
                </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="推送人数" width="80">
      </el-table-column>
      <el-table-column prop="sentCount" label="推送成功人数" width="110">
      </el-table-column>
      <el-table-column prop="clerkName" label="创建消息节点">
      </el-table-column>
      <el-table-column prop="statusMsg" label="推送进度">
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNo" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>

</template>
<script>
export default {
  data () {
    return {
      input: '',
      value6: '',
      dataList: [],
      form: {
        name: '',
        region: ''
      },
      options: [
        {
          clerkId: '1212',
          label: '商户'
        }
      ],
      value: '',
      pageNo: 1,
      pageSize: 10,
      total: 0,
      title: '',
      type: '',
      queryDateStart: '',
      queryDateEnd: '',
      pushCountStart: '',
      pushCountEnd: '',
      clerkId: ''
    }
  },
  created () {
    this.getDataList()
  },
  methods: {
    reset () {
      this.pageNo = 1
      this.pageSize = 10
      this.total = 0
      this.title = ''
      this.type = ''
      this.queryDateStart = ''
      this.queryDateEnd = ''
      this.pushCountStart = ''
      this.pushCountEnd = ''
      this.clerkId = ''
      this.getDataList()
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    getDataList () {
      const {
        pageNo,
        pageSize,
        title,
        type,
        queryDateStart,
        queryDateEnd,
        pushCountStart,
        pushCountEnd,
        clerkId
      } = this
      this.axios
        .get('/static/temp-list.json', {
          params: {
            pageNo,
            pageSize,
            title,
            type,
            queryDateStart,
            queryDateEnd,
            pushCountStart,
            pushCountEnd,
            clerkId
          }
        })
        .then(res => {
          if (res && res.data && res.data.data) {
            const { data, totalCount } = res.data
            this.dataList = data
            this.total = totalCount
          }
        })
    }
  }
}
</script>
<style lang="stylus" scoped>
>>>.el-pagination .el-select .el-input
  width auto
>>>.el-input__inner
  min-width 220px
.temp-list
  .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
    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
    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>
