
<template>
  <!-- 线上零售 -->
  <page-header-wrapper>
    <template v-slot:content>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="订单编号">
                <a-input v-model="queryParam.order_no" placeholder="订单编号" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="手机号码">
                <a-input v-model="queryParam.username" placeholder="购买人手机号" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="真实姓名">
                <a-input v-model="queryParam.name" placeholder="购买人真实姓名" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="订单状态" has-feedback>
                <a-select v-model="queryParam.state" placeholder="订单状态">
                  <a-select-option v-for="item in state" :key="item.key" :value="item.key">{{ item.text }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="快递单号">
                <a-input v-model="queryParam.express_no" placeholder="快递单号" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-button type="primary" @click="search"><a-icon type="search" />搜索</a-button>
              <!-- <a-button class="ml8" type="primary" @click="onAdd">新增</a-button> -->
              <a-button class="ml8" @click="resetSearch"><a-icon type="undo" />重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </template>

    <!-- 列表 -->
    <a-card :bordered="false">
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :rowKey="(row) => row.order_no"
        showPagination="auto"
        bordered
        size="default"
        :scroll="{ x: 1200, y: 1000 }">
        <!--收货地址 -->
        <div slot="express" slot-scope="text, record">
          <div>{{ record.express.name }} {{ record.express.mobile?'('+record.express.mobile+')':'--' }}</div>
          <div>{{ record.express.full_address || '--' }}</div>
        </div>
        <a slot="total" slot-scope="text, record">￥{{ record.total }}</a>
        <a slot="items_qty" slot-scope="text, record">{{ record.items_qty }}件</a>
        <!-- 操作 -->
        <div slot="actions" slot-scope="text, record">
          <a class="ant-dropdown-link" @click="onInfo(record.order_no)">查看详情</a>
          <!-- <a-divider type="vertical" /> -->
          <!-- <a class="ant-dropdown-link" @click="onEdit(record)">发货</a> -->
        </div>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable, UserInfo } from '@/components'
import DeriveButton from '@/components/OrderDetailInfo/DeriveButton'
import moment from 'moment'
import Info from '@/views/home/components/Info'
import { getMiddlesOrderIdentity, getMiddlesOrderDetail } from '@/api/stock'
import EditSend from './widgets/EditSend.vue'
import StockInfo from './widgets/StockInfo.vue'

// 列表规格
const columns = [
{
    title: '订单号',
    dataIndex: 'order_no',
    align: 'center',
    width: 160
  },
  {
    title: '收货人',
    scopedSlots: { customRender: 'express' },
    align: 'center'
  },
  {
    title: '进货数量',
    scopedSlots: { customRender: 'items_qty' },
    align: 'center'
  },
  {
    title: '订单',
    children: [
      {
        title: '订单类型',
        dataIndex: 'type',
        align: 'center'
      },
      {
        title: '订单状态',
        dataIndex: 'state',
        align: 'center'
      },
      {
        title: '订单金额',
        scopedSlots: { customRender: 'total' },
        align: 'center'
      }
    ],
    align: 'center'
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'actions' },
    align: 'center',
    width: 160,
    fixed: 'right'
  }
]

export default {
  name: 'Online',
  components: {
    STable,
    UserInfo,
    Info,
    DeriveButton
  },
  data () {
    return {
      columns,
      queryParam: {
        state: undefined, // 订单状态
        order_no: undefined, // 订单编号
        username: undefined, // 购买人手机号
        name: undefined, // 购买人真实姓名
        express_no: undefined // 快递单号
      },
      state: [],
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getMiddlesOrderIdentity(requestParameters).then(res => {
          this.state = res.search.state
          return res.orders
        })
      }
    }
  },
  watch: {
    $route (to, from) {
      if (to.name === 'SalesStock' && (
        from.name === 'Home' ||
        from.name === 'cityExperienceOfficer' ||
        from.name === 'StockOut' ||
        from.name === 'StockIn' ||
        from.name === 'DealerIn' ||
        from.name === 'DealerOut' ||
        from.name === 'UserIndex' ||
        from.name === 'SalesOnline' ||
        from.name === 'SalesOffline' ||
        from.name === 'PermissionsIndex' ||
        from.name === 'SalesStock')
      ) {
        this.$refs.table.loadData()
      }
    }
  },
  created () {
  },
  methods: {
    moment,
    // 搜索列表
    search () {
      this.$refs.table.refresh(true) // 重置接口且刷先到第一页
    },
    // 重置搜索列表
    resetSearch () {
      this.queryParam = {
        state: undefined, // 订单状态
        order_no: undefined, // 订单编号
        username: undefined, // 购买人手机号
        name: undefined, // 购买人真实姓名
        express_no: undefined // 快递单号
      }
      this.$refs.table.refresh(true) // 重置接口且刷先到第一页
    },
    // 查看详情
    onInfo (id) {
      getMiddlesOrderDetail(id).then(res => {
        const info = res
        setTimeout(() => {
          const success = {
          title: '订单详情',
          width: 1000,
          maskClosable: true,
          closable: true,
          footer: '',
          cancelText: '取消'
        }
        this.$dialog(
          StockInfo,
          {
            info,
            on: {
              ok: () => {
                this.$refs.table.loadData()
              }
            }
          },
          success
        )
        }, 500)
      }).catch(err => {
        this.$notification.error(err)
      })
    },
    // 发货
    onEdit (item) {
      const success = {
        title: '立即发货',
        width: 600,
        maskClosable: true,
        closable: true,
        okText: '确认发货',
        cancelText: '取消'
      }
      this.$dialog(
        EditSend,
        {
          item,
          on: {
            ok: () => {
              this.$refs.table.loadData()
            }
          }
        },
        success
      )
    }
  }
}
</script>

<style lang="less" scoped>
.ml8 {
  margin-left: 8px;
}
</style>
