<template>
    <div class="stockTransfer">
        <a-form layout="inline" class="search_form">
            <a-form-item label="供应商名称">
                <a-select v-model="searchForm.supplierId" placeholder="请选择" style="width: 250px">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option v-for="item in allSupplyInfo" :key="item.id" :value="item.id">
                        {{item.supplierName}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="品牌">
                <a-select v-model="searchForm.brandId" placeholder="请选择" style="width: 250px">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option v-for="item in brandList" :key="item.enumValue" :value="item.enumValue">
                        {{item.enumName}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="类型">
                <a-select v-model="searchForm.stockType" placeholder="请选择" style="width: 250px">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option v-for="item in stockTypeList" :key="item.enumValue" :value="item.enumValue">
                        {{item.enumName}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="出库/入库日期">
                <dateRangePicker :date.sync="searchForm.date"></dateRangePicker>
            </a-form-item>
            <a-button type="primary" class="search_btn" icon="search" @click="searchList">搜索</a-button>
            <a-button class="search_btn ant-table-btn" style="margin-left: 10px" icon="sync" @click="restSearchForm">清空</a-button>
<!--            <a-button type="primary" class="search_btn" icon="download" style="float: right" @click="downloadExcel">-->
<!--                导出Excel-->
<!--            </a-button>-->
        </a-form>
        <div style="clear: both"></div>
        <div style="clear: both"></div>
        <a-table :dataSource="tableData"
                 :columns="columns"
                 rowKey="id"
                 :loading="loading"
                 :pagination="false"
        >
            <template slot="produceDateS" slot-scope="record">
                {{record.produceDate | formatDate}}
            </template>
            <template slot="expireDateS" slot-scope="record">
                {{record.expireDate | formatDate}}
            </template>
        </a-table>
        <myPagination v-model="pagination" :pagination="pagination" @getList="getStockTransferList"></myPagination>
    </div>
</template>
<script>
    import {isNotBlank, isEmptyParams, getEnumByFlag} from "../../utils/common";
    import dateRangePicker from '../../components/dateRangePicker';
    import myPagination from '../../components/myPagination'
    import moment from 'moment'

    const columns = [
        {
            title: '供应商名称',
            dataIndex: 'supplierName',
            ellipsis: true
        },
        {
            title: '品牌',
            dataIndex: 'brandName',
            ellipsis: true
        },
        {
            title: '批次号',
            width: '120px',
            dataIndex: 'batchNumber',
            ellipsis: true
        },
        {
            title: '生产日期',
            dataIndex: 'produceDate',

        },
        {
            title: '有效期',
            width: '120px',
            scopedSlots: {customRender: 'expireDateS'},
        },
        {
            title: '数量',
            dataIndex: 'number',
            ellipsis: true
        },
        {
            title: '出库/入库',
            dataIndex: 'stockTypeName',
            ellipsis: true
        },
        {
            title: '分类',
            dataIndex: 'classifyName',
            ellipsis: true
        },
        {
            title: '出库/入库日期',
            dataIndex: 'operateDate',
            ellipsis: true
        }
    ];
    export default {
        name: "stockTransfer",
        components: {dateRangePicker, myPagination},
        data() {
            return {
                // 搜索框对象
                searchForm: {
                    supplierId: '',
                    brandId: '',
                    stockType: '',
                    date: []
                },
                pagination: {
                    pageIndex: 1,
                    pageSize: 10,
                    total: 0,
                    pageSizeOptions: ['10', '20', '30', '40', '50'],
                },
                columns,
                tableData: [],
                loading: false,
                allSupplyInfo: [],
                brandList: [],
                stockTypeList: [],
                routerParams:{}
            }
        },
        created() {
            this.routerParams = this.$route.query
            if (this.routerParams.menuId) {
                window.sessionStorage.setItem('menuId', this.routerParams.menuId)
            }
            this.getEnumListInfo()
            this.getStockTransferList();
            this.getAllSupply();
        },
        methods: {
            getEnumListInfo() {
                if (window.sessionStorage.getItem('allEnum')) {
                    this.brandList = getEnumByFlag("folacin_stock_record_brand_id");
                    this.stockTypeList = getEnumByFlag("folacin_stock_transfer_stock_type")
                } else {
                    let par = {}
                    this.$api.fyManage.fetchFYLoginUser(par).then(({data}) => {
                        window.sessionStorage.setItem('allEnum', JSON.stringify(data.enumValueList))
                        window.sessionStorage.setItem('userInfo', JSON.stringify(data.userInfo));
                        this.brandList = getEnumByFlag("folacin_stock_record_brand_id");
                        this.stockTypeList = getEnumByFlag("folacin_stock_transfer_stock_type")
                    })
                }
            },
            getAllSupply() {
                let par = {}
                this.$api.common.fetchAllSupply(par).then(({data = []}) => {
                    this.allSupplyInfo = data
                })
            },
            searchList() {
                this.pagination.pageIndex = 1;
                this.getStockTransferList()
            },
            getStockTransferList() {
                this.loading = true;
                let date = this.searchForm.date;
                let pars = isEmptyParams(this.searchForm);
                let par = {
                    ...pars,
                    startDate: date[0],
                    endDate: date[1],
                    pageIndex: this.pagination.pageIndex,
                    pageSize: this.pagination.pageSize
                }
                this.$api.stockManage.fetchStockTransferList(par).then(({data = {}}) => {
                    const {dataList = [], total = 0} = data;
                    this.tableData = dataList;
                    this.pagination.total = total;
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            restSearchForm() {
                this.searchForm = {
                    brandId: '',
                    supplierId: '',
                    date: [],
                    stockType: ''
                }
                this.searchList()
            },
            downloadExcel() {
                this.$message.warning("拼命开发中......")
            },
        },
    }
</script>
<style lang="less" scoped>
    .btn_space {
        margin-right: 5px;
    }
</style>