<template>
  <div class="order_page">
    <el-form inline>
      <el-form-item label="订单ID">
        <el-input v-model="form.Keyword" size="mini" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini">查询</el-button>
        <el-button size="mini" @click="query">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData.adminOrderDTOList"
      border
      style="width: 80%"
    >
      <el-table-column
        prop="id"
        label="订单ID"
      />
      <el-table-column
        prop="storeName"
        label="店铺名称"
      />
      <el-table-column
        prop="productCount"
        label="商品数量"
      />
      <el-table-column
        prop="paySum"
        :formatter="getPrice"
        label="订单金额(元)"
      />
      <el-table-column
        prop="orderStatus"
        :formatter="getStatus"
        label="状态"
      />
    </el-table>
    <pagination
      v-show="tableData.total > 0"
      :limit.sync="form.pageSize"
      :page.sync="form.pageIndex"
      :total="Number(tableData.total)"
      @pagination="query"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import Member from '@/api/Member'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      form: {
        Keyword: '',
        pageIndex: 1,
        pageSize: 10,
        keywordType: 1
      },
      tableData: {}
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    async getOrderList() {
      this.form.mid = this.$route.query.id
      const res = await Member.getOrderList(this.form)
      const resData = res.data
      if (resData.code === 0) {
        this.tableData = resData.data
      }
    },
    getStatus(row, item, value) {
      const ob = {
        1: '待付款',
        2: '待发货',
        3: '待收货',
        4: '已完成',
        5: '已取消'
      }
      return ob[value]
    },
    getPrice(row, item, value) {
      return value / 100
    },
    query() {
      this.getOrderList()
    },
    reset() {
      this.form = {
        Keyword: '',
        pageIndex: 1,
        pageSize: 10,
        keywordType: 1
      }
    }
  }
}
</script>

<style lang='less' scoped>
/deep/ .el-table {
  th {
      background: #EEF3FF;
      color:#333333;
      font-size:16px;
      font-weight: 400;
      border-color: #E0E5EB;
      text-align: center;
  }
  td {
    font-size: 14px;
    text-align: center;
    color: #666666;
  }
}
</style>
