<template>
  <div class="temp-list clear">
    <el-row>
      <div class="temp-button fr">
        <el-button type="text">重置</el-button>
        <el-button type="primary">查询</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="form.user" placeholder="审批人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="活动时间">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"></el-date-picker>
            <span class="line time-line" :span="2">-</span>
            <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2"></el-time-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="temp-input">
        <el-col :span="10">
          <el-form-item label="活动时间">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"></el-date-picker>
            <span class="line time-line" :span="2">-</span>
            <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2"></el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="推送名称:">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="dataList">
      <el-table-column prop="id" label="推送名称" width="80">
      </el-table-column>
      <el-table-column prop="push_state" label="推送类型" width="80">
      </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="title" label="推送范围" width="260">
        <template slot-scope="scope">
          <span class="temp-tablespan">
            {{scope.row.title}}
          </span>
          <span class="temp-tablespan">
            {{scope.row.title}}
          </span>
          <el-popover placement="bottom" title="标签" width="200" trigger="click">
            <div>
              <button>1</button>
              <button>1</button>
              <button>1</button>
            </div>
            <el-button class="fr temp-tablesmore" slot="reference">更多</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="推送人数" width="80">
      </el-table-column>
      <el-table-column prop="title" label="推送成功人数" width="110">
      </el-table-column>
      <el-table-column prop="title" label="创建消息节点">
      </el-table-column>
      <el-table-column prop="title" label="推送进度">
      </el-table-column>
    </el-table>
  </div>

</template>
<script>
export default {
  data () {
    return {
      input: '',
      value6: '',
      dataList: [],
      form: {
        name: '',
        region: ''
      },
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: ''
    }
  },
  created () {
    this.getDataList()
  },
  methods: {
    getDataList () {
      this.axios.get('http://rap2api.taobao.org/app/mock/115626/getTemplateList').then(res => {
        if (res && res.data && res.data.data) {
          const { dataList } = res.data.data
          this.dataList = dataList
        }
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
>>>.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>
