<template>
  <div class="mlt">
    <div>
      <el-form :inline="true" size="mini">
        <el-row>
          <el-form-item>
            <el-input v-model="phone" style="width: 250px" placeholder="请输入手机号码" class="search_tag" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="btn_search()"><i class="el-icon-search"/> 查询</el-button>
            <el-button @click="btn_clear()"><i class="el-icon-remove-outline"/> 重置</el-button>
            <!--el-button type="primary" icon="el-icon-plus" @click="addSupplier">添加</el-button-->
          </el-form-item>
        </el-row>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        :highlight-current-row="true"
        border>
        <el-table-column
          prop="id"
          label="编号"/>
        <el-table-column
          prop="orderSn"
          label="订单编号"/>
        <el-table-column
          prop="memberPackage.title"
          label="套餐信息"/>
        <el-table-column
          prop="packageYears"
          label="订单包含记账年数"/>
        <el-table-column
          prop="packageNum"
          label="订单包含记账人数"/>
        <el-table-column
          prop="amount"
          label="订单金额"/>
        <el-table-column
          prop="phone"
          label="电话号码"/>
        <el-table-column
          prop="userName"
          label="创建者"/>
        <el-table-column
          :formatter="formatStatus"
          prop="status"
          label="状态"/>
        <el-table-column
          prop="paymentTime"
          label="支付时间"/>
        <el-table-column
          prop="createTime"
          label="创建时间"/>
      </el-table>
      <div class="mydiv">
        <el-pagination
          :current-page.sync="pageNo"
          :page-sizes="[10, 50, 100, 300,1000]"
          :page-size="pageSize"
          :total="totalDataNumber"
          layout="sizes,total, prev, pager, next"
          class="table-pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>

    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Tinymce from '@/components/Tinymce'
export default {
  name: 'Supplier',
  components: { Tinymce },
  data() {
    return {
      phone: '',
      allData: [], // 所有前端分页数据
      tableData: [], // 表格数据 仅展示当前页的数据
      pageNo: 1, // 当前页数
      totalDataNumber: 0, // 总记录数
      pageSize: 10,
      formLabelWidth: '150px' // 弹出框form宽
    }
  },
  created() {
    this.btn_search()
  },
  methods: {
    formatStatus(ob) {
      if (ob.status === undefined) {
        return ''
      } else if (ob.status === 0) {
        return '待支付'
      } else if (ob.status === 1) {
        return '已支付'
      } else if (ob.status === 2) {
        return '已关闭'
      } else if (ob.status === 3) {
        return '已退款'
      } else {
        return '未知'
      }
    },
    btn_search() {
      const vm = this
      axios.get(process.env.BASE_API + '/memberOrder/listpage', {
        params: {
          phone: this.phone,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
          vm.totalDataNumber = 0
          vm.allData = []
          vm.tableData = []
        } else {
          vm.totalDataNumber = parseInt(obj.data.totalElements)
          if (vm.totalDataNumber > 0) {
            vm.allData = obj.data.content
            vm.tableData = obj.data.content // obj.data.slice(0, vm.pageSize)
          } else {
            vm.allData = []
            vm.tableData = []
          }
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    btn_clear() {
      this.phone = ''
      this.pageNo = 1
      this.btn_search()
    },
    handleCurrentChange() {
      // this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
      this.btn_search()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.btn_search()
      // this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    }

  }
}
</script>

<style scoped>
  .mlt {
    margin-left: 20px;
    margin-top: 20px;
    margin-right: 20px;
  }
  .tabtitle {
    font-size: 24px;
    font-weight: bold;
  }
  .tabbutton {
    float: right;
  }
</style>
