
<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.username" placeholder="用户手机" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="订单类型" has-feedback>
                <a-select v-model="queryParam.type" @change="onTypeChange" placeholder="身份筛选">
                  <a-select-option v-for="item in typeArray" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="渠道" has-feedback>
                <a-select v-model="queryParam.channel" @change="onChannelChange" placeholder="身份筛选">
                  <a-select-option v-for="item in channelArray" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="出库时间">
                <a-range-picker
                  :placeholder="['开始日期', '结束日期']"
                  :value="rang_at"
                  :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"
                  @change="onCreateChange" />
              </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" @click="resetSearch"><a-icon type="undo" />重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </template>

    <!-- 列表 -->
    <a-card :bordered="false">
      <a-card :bordered="false">
        <a-row>
          <a-col :sm="12" :xs="24">
            <info title="线上库存量剩余" :value="listCount.online+''" :bordered="true" />
          </a-col>
          <a-col :sm="12" :xs="24">
            <info title="线下库存量剩余" :value="listCount.offline+''" :bordered="false" />
          </a-col>
        </a-row>
      </a-card>
      <br/>
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :rowKey="(row) => row.middle_stock_log_id + ''"
        showPagination="auto"
        bordered
        size="default">
        <div slot="user" slot-scope="text, record">
          <user-info :info="{...record.in_user}" />
        </div>
        <a slot="number" slot-scope="text, record" style="color: #1890ff">{{ record.number }}件</a>
        <a slot="total" slot-scope="text, record" style="color: #1890ff">￥{{ record.total }}</a>
      </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 {
  getMiddlesStockOutStocks
} from '@/api/stock'

const columns = [
  {
    title: 'ID',
    dataIndex: 'middle_stock_log_id',
    align: 'center',
    width: 80
  },
  {
    title: '用户',
    scopedSlots: { customRender: 'user' },
    align: 'center'
  },
  {
    title: '补充库存数量',
    scopedSlots: { customRender: 'number' },
    align: 'center',
    width: 150
  },
  {
    title: '金额',
    scopedSlots: { customRender: 'total' },
    align: 'center',
    width: 150
  },
  {
    title: '渠道',
    dataIndex: 'channel',
    align: 'center',
    width: 120
  },
  {
    title: '订单类型',
    dataIndex: 'type',
    align: 'center'
  },
  {
    title: '补充库存时间',
    dataIndex: 'created_at',
    align: 'center',
    width: 150
  }
]

export default {
  name: 'StockOut',
  components: {
    STable,
    UserInfo,
    Info,
    DeriveButton
  },
  data () {
    return {
      columns,
      rang_at: [],
      queryParam: {
        start_at: undefined,
        end_at: undefined,
        channel: undefined,
        type: undefined,
        username: '' // 用户手机号
      },
      typeArray: [
        { title: '零售', id: 1 },
        { title: '进货单  ', id: 2 }
      ],
      channelArray: [
        { title: '线上', id: 1 },
        { title: '线下  ', id: 2 }
      ],
      listCount: {
        offline: 0,
        online: 0
      },
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getMiddlesStockOutStocks(requestParameters).then(res => {
          this.listCount.offline = res.count.offline
          this.listCount.online = res.count.online
          return res.logs
        })
      }
    }
  },
  watch: {
    $route (to, from) {
      if (to.name === 'StockOut' && (
        from.name === 'Home' ||
        from.name === 'cityExperienceOfficer' ||
        from.name === 'StockOut' ||
        from.name === 'StockIn' ||
        from.name === 'DealerIn' ||
        from.name === 'DealerOut' ||
        from.name === 'SalesOnline' ||
        from.name === 'UserIndex' ||
        from.name === 'SalesOffline' ||
        from.name === 'PermissionsIndex' ||
        from.name === 'SalesStock')
      ) {
        this.$refs.table.loadData()
      }
    }
  },
  methods: {
    moment,
    // 更改创建时间
    onCreateChange (dates, dateStrings) {
      this.queryParam.start_at = dateStrings[0]
      this.queryParam.end_at = dateStrings[1]
      this.rang_at = dateStrings
    },
    onTypeChange (e) {
      this.queryParam.type = e
    },
    onChannelChange (e) {
      this.queryParam.channel = e
    },
    // 搜索列表
    search () {
      this.$refs.table.refresh(true) // 重置接口且刷先到第一页
    },
    // 重置搜索列表
    resetSearch () {
      this.queryParam.start_at = undefined
      this.queryParam.end_at = undefined
      this.queryParam.channel = undefined
      this.queryParam.type = undefined
      this.queryParam.username = undefined
      this.rang_at = []
      this.$refs.table.refresh(true) // 重置接口且刷先到第一页
    }
  }
}
</script>

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