<template>
  <div id="order-check">
    <div class="order-check-body" v-loading.fullscreen.lock="fullscreenLoading">
      <div class="order-management-body">
        <div class="order-management-inner">
          <span>时间段：</span>
          <el-date-picker size="large" v-model="searchDate" type="daterange" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2" value-format="yyyy-MM-dd" align="center">
          </el-date-picker>
         <span>关键字：</span>
          <el-input @keyup.enter.native="_searchOrderData(1)" ref="searchOrderNumber" v-model="searchOrderNumber" value="" placeholder="操作人"></el-input>
          <el-button type="primary" @click="_searchOrderData(1)" color='red'>筛选</el-button>

        </div>
        <div class="order-check_bottom">
          <div class="order-management-table">
            <el-table ref="order_table" class='e-table' :data="orders" style="width: 100%">
              <el-table-column prop="operateUesr" label="操作人">
              </el-table-column>
              <el-table-column prop="createTime" label="操作时间">
              </el-table-column>
              <el-table-column prop="userName" label="用户名称">
              </el-table-column>
              <el-table-column label="操作详情">
                <template slot-scope="scope">
                  <!-- <span v-if="scope.row.type==1">下载场景</span> -->
                  <span v-if="scope.row.type==2">会员权益数+{{scope.row.incrementNum}}<br/>剩余下载数+{{scope.row.downloadNum}}</span>
                  <span v-if="scope.row.type==3">剩余下载数+{{scope.row.downloadNum}}</span>
                </template>
              </el-table-column>

            </el-table>
          </div>
          <div class="order-management-pagination">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'order-check',

  data () {
    return {
      //   type: 9,
      active: null,

      orders: [],
      currentPage: 1,
      fullscreenLoading: false,
      product: {
        name: '',
        packageName: '',
        count: '',
        amount: '',
        url: ''
      },
      receive: {
        name: '',
        phone: '',
        address: '',
        invoice: '',
        expressNum: ''
      },
      total: 0,
      options: [
        {
          value: undefined,
          label: '全部筛选订单'
        },
        {
          value: 0,
          label: '未支付筛选订单'
        },
        {
          value: 1,
          label: '待发货筛选订单'
        },
        {
          value: 2,
          label: '已发货筛选订单'
        },
        {
          value: 3,
          label: '已完成筛选订单'
        }
      ],
      selectValue: '',
      // expressNum_input: "",
      searchDate: [],
      searchOrderNumber: '',
      hasClickSearch: false,
      pickerOptions2: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  methods: {
    handleCurrentChange (val) {
      let page = val
      if (this.total > 0 && !this.hasClickSearch) {
        this._searchOrderData(page)
      } else {
        this._searchOrderData(page)
      }
    },

    async _searchOrderData (page) {
      this.hasClickSearch = true
      let date1, date2, orderNum
      this.date1 = this.searchDate ? this.searchDate[0] : null
      this.date2 = this.searchDate ? this.searchDate[1] : null
      date1 = this.date1 ? this.date1 + ' 00:00:00' : null
      date2 = this.date2 ? this.date2 + ' 23:59:59' : null

      this.fullscreenLoading = true

      let para = {
        pageNum: page,
        // type: this.type,
        startDate: date1,
        endDate: date2,
        searchKey: this.searchOrderNumber,
        pageSize: 10
      }

      let url = '/manager/user/incrementlist'
      let method = 'post'
      let data
      //   if (para.startDate || para.endDate || para.itemName) {
      //     url = '/manager/goods/version/search'
      //     method = 'post'
      //   }

      //   console.log(method, para)
      //   if (method === 'get') {
      //     let paras = []
      //     Object.keys(para).forEach((k) => {
      //       if (para[k] || typeof para[k] === 'number') {
      //         paras.push(`${k}=${para[k]}`)
      //       } else {
      //         paras.push(`${k}=''`)
      //       }
      //     })

      //     para = paras.join('&')
      //     data = (await this.$http[method](url + '?' + para)).data
      //   } else {
      data = (await this.$http[method](url, para)).data
      //   }

      this.fullscreenLoading = false
      let temp = data.list
      for (var i = 0; i < temp.length; i++) {
        // temp[i]['expressNum_input'] = "";
        temp[i].items = []
      }
      this.orders = temp
      this.currentPage = page
      this.total = data.total
    }
  },
  mounted () {
    // console.log(window.location.origin)
    // window.open(window.location.origin+'/main')
    this._searchOrderData(1)
  }
}
</script>

<style scoped>
@import url("./style.css");
</style>

<style type="text/css">
.el-table__expand-icon > i {
  display: none !important;
}
</style>
