
<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.in_nickname" placeholder="入库人昵称" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="入库人手机号">
                <a-input v-model="queryParam.in_username" placeholder="入库人手机号" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="入库人身份" has-feedback>
                <a-select v-model="queryParam.in_identity" @change="onIdentityInChange" placeholder="身份筛选">
                  <a-select-option v-for="item in identity" :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-input v-model="queryParam.out_nickname" placeholder="出库人昵称" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="出库人手机号">
                <a-input v-model="queryParam.out_username" placeholder="出库人手机号" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="出库人身份" has-feedback>
                <a-select v-model="queryParam.out_identity" @change="onIdentityOutChange" placeholder="身份筛选">
                  <a-select-option v-for="item in identity" :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.stock_log_id + ''"
        showPagination="auto"
        bordered
        :scroll="{ x: 1200, y: 1000 }"
        size="default">
        <user-info slot="in_user" slot-scope="text, record" :info="{...record.in_user}" />
        <user-info slot="out_user" slot-scope="text, record" :info="{...record.out_user}" />
        <a slot="number" slot-scope="text, record" style="color: #1890ff">{{ record.number }}件</a>
        <a slot="stock" slot-scope="text, record" style="color: #1890ff">{{ record.stock }}件</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 {
  getMiddlesAgentStockOutStocks
} from '@/api/stock'

const columns = [
  {
    title: 'ID',
    dataIndex: 'stock_log_id',
    align: 'center',
    width: 80
  },
  {
    title: '经销商',
    scopedSlots: { customRender: 'out_user' },
    align: 'center',
    width: 140
  },
  // {
  //    title: '分公司/平台',
  //    scopedSlots: { customRender: 'out_user' },
  //    align: 'center',
  //    width: 140
  //  },
  {
    title: '库变数据',
    scopedSlots: { customRender: 'number' },
    align: 'center',
    width: 80
  },
  {
    title: '金额',
    scopedSlots: { customRender: 'total' },
    align: 'center',
    width: 80
  },
  {
    title: '补充库存时间',
    dataIndex: 'created_at',
    align: 'center',
    width: 120
  }
]

export default {
  name: 'StockOut',
  components: {
    STable,
    UserInfo,
    Info,
    DeriveButton
  },
  data () {
    return {
      columns,
      rang_at: null,
      queryParam: {
        start_at: undefined,
        end_at: undefined,
        out_identity: undefined, // 身份
        out_nickname: undefined, // 出库人昵称
        out_username: undefined // 出库人手机号
      },
      identity: [ // 4 创客 6 代理商
        { title: '创客', id: 4 },
        { title: '代理商  ', id: 6 }
      ],
      listCount: {
        offline: 0,
        online: 0
      },
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getMiddlesAgentStockOutStocks(requestParameters)
      }
    }
  },
  watch: {
    $route (to, from) {
      if (to.name === 'DealerOut' && (
        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()
      }
    }
  },
  methods: {
    moment,
    // 更改创建时间
    onCreateChange (dates, dateStrings) {
      this.queryParam.start_at = dateStrings[0]
      this.queryParam.end_at = dateStrings[1]
      this.rang_at = dateStrings
    },
    onIdentityInChange (e) {
      this.queryParam.in_identity = e
    },
    onIdentityOutChange (e) {
      this.queryParam.out_identity = 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.out_nickname = undefined
      this.queryParam.out_identity = undefined
      this.queryParam.out_username = undefined
      this.queryParam.in_nickname = undefined
      this.queryParam.in_identity = undefined
      this.queryParam.in_username = undefined
      this.rang_at = []
      this.$refs.table.refresh(true) // 重置接口且刷先到第一页
    }
  }
}
</script>

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