<template>
  <layout-body>
    <layout-filter ref="filter" :model="query">
      <filter-item label="订单号">
        <Input v-model.trim="query.orderCode" :maxlength="11" />
      </filter-item>
      <filter-item label="SKN">
        <Input v-model.trim="query.productSkn" :maxlength="9" />
      </filter-item>
      <filter-item label="SKU">
        <Input v-model.trim="query.productSku" :maxlength="9" />
      </filter-item>
      <filter-item label="收货人">
        <Input v-model.trim="query.userName" />
      </filter-item>
      <filter-item label="买家昵称">
        <Input v-model.trim="query.nickName" />
      </filter-item>
      <filter-item label="商品名称">
        <Input v-model.trim="query.prodName" />
      </filter-item>
      <filter-item label="订单状态">
        <Select v-model.trim="query.orderStatusStr" clearable>
          <Option v-for="option in orderStatusArr" :key="option.id" :value="option.id">
            {{ option.name }}
          </Option>
        </Select>
      </filter-item>
      <filter-item>
        <Button type="primary" @click="search">筛选</Button>
        <Button @click="reset">清空条件</Button>
        <Button type="primary" @click="exportExcel">导出</Button>
      </filter-item>
    </layout-filter>
    <layout-list>
      <list-tabs @change-tabs="onChangeTabs"></list-tabs>
      <data-table :table-cols="tableCols" :table-data="tableData"></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/order-service';
import _ from 'lodash';
export default {
  components: { ListTabs, DataTable },
  data() {
    return {
      query: {
        orderCode: '',
        productSkn: '',
        productSku: '',
        prodName: '',
        nickName: '',
        userName: '',
        orderStatus: '',
        pageSize: 20,
        pageNo: 1,
        orderStatusStr: '',
        queryType: 1,
      },
      orderStatusArr: [
        { id: 1, name: 'a' },
        { id: 2, name: 'b' },
        { id: 3, name: 'c' },
      ],
      pageData: {
        total: 100,
        current: 1,
      },
      tableData: [
        {
          orderCode: '11111',
          parentOrderCode: '1111-22222',
          createTime: '2020-04-08 12:39:39',
          buyerNickeName: '小乌贼',
          receiver: '收货人',
          paymentStatus: '支付状态',
          orderStatus: '订单状态',
          realAmount: '实收金额',
          orderGoods: [
            {
              imageUrl: 'fdsafdsa', //商品图片
              prodcutName: 'Converse RENEW工装大衣', //商品名称
              prodcutCode: '10019501-A01',
              sizeName: 'M', // 尺码名称
              colorName: '黑', // 颜色名称
              price: '¥120.00', //单价
              buyNums: '2', //购买数量
              productSkn: '34556778', // 商品skn
              productSku: '34556778', // 商品sku
            },
            {
              imageUrl: 'fdsafdsa', //商品图片
              prodcutName: 'Converse RENEW工装大衣', //商品名称
              prodcutCode: '10019501-A01',
              sizeName: 'M', // 尺码名称
              colorName: '黑', // 颜色名称
              price: '¥120.00', //单价
              buyNums: '2', //购买数量
              productSkn: '34556778', // 商品skn
              productSku: '34556778', // 商品sku
            },
            {
              imageUrl: 'fdsafdsa', //商品图片
              prodcutName: 'Converse RENEW工装大衣', //商品名称
              prodcutCode: '10019501-A01',
              sizeName: 'M', // 尺码名称
              colorName: '黑', // 颜色名称
              price: '¥120.00', //单价
              buyNums: '2', //购买数量
              productSkn: '34556778', // 商品skn
              productSku: '34556778', // 商品sku
            },
          ],
        },
        {
          orderCode: '2222222',
          parentOrderCode: '1111-22222',
          createTime: '2020-04-08 12:39:39',
          buyerNickeName: '小乌贼',
          receiver: '收货人',
          paymentStatus: '支付状态',
          orderStatus: '订单状态',
          realAmount: '实收金额',
          orderGoods: [
            {
              imageUrl: 'fdsafdsa', //商品图片
              prodcutName: 'Converse RENEW工装大衣', //商品名称
              prodcutCode: '10019501-A01',
              sizeName: 'M', // 尺码名称
              colorName: '黑', // 颜色名称
              price: '¥120.00', //单价
              buyNums: '2', //购买数量
              productSkn: '34556778', // 商品skn
              productSku: '34556778', // 商品sku
            },
          ],
        },
      ],
      tableCols: [
        { title: '图片', width: '8%' },
        { title: '商品信息', width: '20%' },
        { title: '单价', width: '8%' },
        { title: '数量', width: '5%' },
        { title: 'SKN', width: '5%' },
        { title: 'SKU', width: '5%' },
        { title: '买家昵称', width: '5%' },
        { title: '收货人', width: '5%' },
        { title: '支付状态', width: '5%' },
        { title: '实收金额', width: '5%' },
        { title: '订单状态', width: '5%' },
        { title: '操作', width: '10%' },
      ],
    };
  },
  created() {
    this.orderService = new OrderService();
  },
  methods: {
    onChangeTabs(type) {
      this.query.queryType = +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.prodName = '';
      this.query.nickName = '';
      this.query.userName = '';
      this.query.orderStatus = 0;
      this.query.pageSize = 20;
      this.query.pageNo = 1;
      this.query.orderStatusStr = '';
      this.search();
    },
    exportExcel() {},
  },
};
</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>