<template>
  <layout-body>
    <layout-filter ref="filter" :model="query">
      <filter-item label="订单号">
        <Input v-model.trim="query.orderCode" />
      </filter-item>
      <filter-item label="SKN">
        <Input v-model.trim="query.productSkn" />
      </filter-item>
      <filter-item label="SKU">
        <Input v-model.trim="query.productSku" />
      </filter-item>
      <filter-item label="收货人">
        <Input v-model.trim="query.consigneeName" />
      </filter-item>
      <filter-item label="订单状态">
        <Select v-model.trim="query.orderStatus" clearable>
          <Option v-for="(option, key) in orderStatusArr" :key="key" :value="key">
            {{ option }}
          </Option>
        </Select>
      </filter-item>
      <filter-item>
        <Button type="primary" @click="search">筛选</Button>
        <Button @click="reset">全部</Button>
      </filter-item>
    </layout-filter>
    <layout-list>
      <list-tabs @change-tabs="onChangeTabs"></list-tabs>
      <data-table :table-data="tableData" :payment-status-arr="paymentStatusArr" :order-status-arr="orderStatusArr">
      </data-table>
      <Page :total="pageData.total" :current="pageData.current" :page-size="20" show-total @on-change="pageChange">
      </Page>
    </layout-list>
  </layout-body>
</template>

<script>
import { ListTabs, DataTable } from './components';
import { OrderService } from 'services/order';
import _ from 'lodash';
import { OrderConfig } from '../configs';
export default {
  components: { ListTabs, DataTable },
  data() {
    return {
      paymentStatusArr: OrderConfig.paymentStatus,
      query: {
        orderCode: '',
        productSkn: '',
        productSku: '',
        consigneeName: '',
        orderStatus: '',
        pageSize: 20,
        pageNo: 1,
        orderStatusStr: '',
        orderStatusType: 0,
      },
      tableData: [],
      orderStatusArr: OrderConfig.orderStatus,
      pageData: {
        total: 0,
        current: 1,
      },
    };
  },
  created() {
    this.orderService = new OrderService();
    this.search();
  },
  methods: {
    onChangeTabs(type) {
      this.query.orderStatusType = +type;
      this.reset();
    },
    search() {
      this.orderService.orderList(this.query).then(ret => {
        this.tableData = _.get(ret, 'data.records', []);
        this.pageData.total = _.get(ret, 'data.totalCount', 0);
        this.pageData.pageNo = _.get(ret, 'data.pageNo', 1);
      });
    },
    pageChange(page) {
      this.pageData.current = page;
      this.query.pageNo = page;
      this.search();
    },
    reset() {
      this.query.orderCode = '';
      this.query.productSkn = '';
      this.query.productSku = '';
      this.query.consigneeName = '';
      this.query.orderStatus = '';
      this.query.pageSize = 20;
      this.query.pageNo = 1;
      this.search();
    },
  },
};
</script>

<style lang="scss">
table.order-table {
  width: 100%;
  height: auto;
  thead {
    background: #000000;
    th {
      padding: 8px 0;
      border: 1px solid #cccccc;
      color: #ffffff;
      text-align: center;
    }
  }
  tbody {
    tr {
      height: 35px;
      td {
        border: 1px solid #cccccc;
        border-top: none;
        border-right: none;
        text-align: center;
        padding: 5px;
        span {
          margin-left: 10px;
          margin-right: 20px;
        }
      }
      td:last-child {
        border-right: 1px solid #cccccc;
      }
    }
  }
}
</style>