<template>
  <div class="sjp-prizemessage">
      <div>
        <Form ref="formInline" :model="formInline" inline :label-width="80">
            <FormItem  class="sjp-inlineblock" label="关键词">
                <Input v-model="formInline.messageKeyword" placeholder="请输入关键词" :maxlength="100" style="width: 200px"/>
           </FormItem>
           <FormItem  class="sjp-inlineblock" label="状态">
             <Select v-model="formInline.status" style="width:200px">
                <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem  class="sjp-inlineblock" label="时间筛选">
            <DatePicker type="datetimerange" v-model="timeRange" placeholder="选择开始时间和结束时间" style="width: 300px"></DatePicker>
          </FormItem>
          <br>
          <FormItem  class="sjp-inlineblock" label="奖品名称">
                  <Input v-model="formInline.prizeName" placeholder="请输入奖品名称" :maxlength="100" style="width: 200px"/>
           </FormItem>
           <position :positionObj="formInline" label="所在地" width="200"></position>
          <br>
          <FormItem :label-width="20">
              <Button type="primary" class="sjp-search sjp-button" @click="handleSubmit">搜索</Button>
              <Button type="default" class="sjp-button" @click="reset">重置</Button>
          </FormItem>
      </Form>
      </div>
      <div class="order-table">
         <Table stripe :columns="columns" :data="list"></Table>
      </div>
      <div class="sjp-page">
          <Page :total="total" :current.sync="formInline.currentPage" :page-size="formInline.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" show-total show-sizer></Page>
      </div>
  </div>
</template>

<script>
import position from './../../../components/position'
import http from './../../service/statics'
import Utils from './../../utils/utils'

export default {
  name: 'prizemessage',
  components: { position  },
  props:[],
  data() {
    return {
      total: 0,
      columns: [
          {
              title: '时间',
              key: 'createTime'
          },
          {
              title: '留言用户',
              key: 'mobilePhone'
          },
          {
              title: '留言奖品',
              key: 'prizeName'
          },
            {
              title: '留言内容',
              key: 'content'
          },
            {
              title: '状态',
              key: 'status',
                render: (h, params) => {
                      return h('div', this.statusObj[params.row.status]);
                  }
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            width: 200,
            render: (h, params) => {
              let status = params.row.status; //1:显示 0 删除
              const generateButton = (status)=>{
                let arr = []
                if(status === 1){
                    arr.push(h('Button', {
                      props: {
                          type: 'primary',
                          size: 'small'
                      },
                      style: {
                              marginRight: '5px'
                          },
                      on: {
                        click: () => {
                          http.messageDelete({id:params.row.id})
                          .then(() => {
                            this.getData()
                          })
                        }
                      }
                  }, '删除'))
                }
                return arr
              }
              return h('div', generateButton(status));
            }
        }
          
      ],
      list: [],
      timeRange:[],
      formInline:{
        messageKeyword:'',
        status:'',
        prizeName:'',
        belongProvince:'',
        belongCity:'',
        belongRegion:'1',
        startTime:'',
        endTime:'',
        currentPage:1,
        pageSize:10,
      },
      statusList: [
          {
              value: '',
              label: '全部'
          },
          {
              value: '1',
              label: '显示'
          },
          {
              value: '0',
              label: '已删除'
          }
      ],
      statusObj:{}
    }
  },
  created() {
    this.statusList.forEach((item)=>{
      item.value && (this.statusObj[item.value] = item.label)
    })
    this.getData()
  },
  methods:{
    handleSubmit(){
      this.getData()
    },
    reset(){
      // 重置对象
      this.timeRange =[]
      this.formInline = {
        messageKeyword:'',
        status:'',
        prizeName:'',
        belongProvince:'',
        belongCity:'',
        belongRegion:'',
        startTime:'',
        endTime:'',
        currentPage:1,
        pageSize:10,
      }
      this.getData()
    },
    getData(){
      this.formInline.endTime = this.timeRange[1] && Utils.dealTime(this.timeRange[1]) || ''
      this.formInline.startTime = this.timeRange[0] && Utils.dealTime(this.timeRange[0]) || ''
      http.activity_messageList(this.formInline)
      .then(res => {
        this.list = res.data || []
        this.total = res.totalCount
      })
    },
    pageSizeChange(val){
      this.formInline.pageSize = val
      // 如果当前也不是第一页会默认会更改为第一页，然后触发第一页的回调
      // 如果当前为第一页， 进行请求数据
      // if(this.formInline.pageCount === 1){
        this.getData()
      // }
    },
    pageChange(){
      this.getData()
    }
  },
  mounted(){
   
  }
}
</script>

<style lang="less" scoped>
.sjp-inlineblock .ivu-form-item-content{
    display: inline-block;
  }
  .sjp-prizemessage{
    margin-top: 20px;
    .sjp-search{
      margin-right: 20px;
    }
    .sjp-button{
      padding-left: 40px;
      padding-right: 40px;
    }
    .order-table{
      margin: 20px;
    }
    .sjp-page{
      margin: 20px;
    }
  }
 
</style>
