<template>
    <div class="inStockManage">
        <a-form layout="inline" class="search_form">
            <a-form-item label="供应商名称">
                <a-input v-model="searchForm.supplierName" placeholder="请输入供应商名称" style="width: 250px"></a-input>
            </a-form-item>
            <a-form-item label="状态">
                <a-select v-model="searchForm.status" placeholder="请选择" style="width: 250px">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option v-for="item in allFactoryInfo" :key="item.id" :value="item.id">
                        {{item.factoryName}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" class="search_btn" style="margin-left: 10px" @click="searchList">搜索</a-button>
                <a-button  class="search_btn" style="margin-left: 10px" @click="restSearchForm">清空</a-button>
            </a-form-item>
            <a-button type="primary" class="search_btn" style="float: right" @click="toAdd">添加供应商</a-button>
            <div style="clear: both"></div>
        </a-form>
        <div style="margin-top: 16px;margin-bottom: 10px"></div>

        <a-table :dataSource="tableData"
                 :columns="columns"
                 rowKey="id"
                 :loading="loading"
                 :pagination="false"
        >

            <template slot="statusInfo" slot-scope="record">
                {{record.statusName}}
            </template>
            <template slot="action" slot-scope="record">
                <a-button type="link" size="small" @click="toUpdate(record)">修改</a-button>
                <a-popconfirm
                        :title="'确定' + (record.status === 0 ? '禁用' : '启用') + '该供应商吗？'"
                        ok-text="是"
                        cancel-text="否"
                        @confirm="changeStatus(record)"
                        :disabled="record.status == '0'"
                >
                    <a href="#">{{record.status === 0 ? '禁用' : '启用'}}</a>
                </a-popconfirm>

            </template>
        </a-table>
        <a-pagination
                v-if="pagination.total > 0"
                :total="pagination.total"
                show-size-changer
                show-quick-jumper
                v-model="pagination.pageIndex"
                :page-size="pagination.pageSize"
                :page-size-options="pagination.pageSizeOptions"
                @showSizeChange="showSizeChange"
                @change="change"
                :showTotal="() => `共 ${pagination.total} 条`"
        />
    </div>
</template>
<script>
    import {isEmptyParams} from "../../utils/common";
    import moment from 'moment'
    const columns = [
        {
            title: '供应商名称',
            dataIndex: 'supplierName',
            ellipsis: true
        },
        {
            title: '联系人',
            dataIndex: 'contactsName',
            ellipsis: true
        },
        {
            title: '联系电话',
            dataIndex: 'contactsPhone',
            ellipsis: true
        },
        {
            title: '联系地址',
            dataIndex: 'address',
            ellipsis: true
        },
        {
            title: '备注',
            dataIndex: 'remarks',
            ellipsis: true
        },
        {
            title: '状态',
            width: 70,
            scopedSlots: {customRender: 'statusInfo'},
        },
        {
            title: '操作',
            align: 'center',
            width: 110,
            scopedSlots: {customRender: 'action'},
        },
    ]
    export default {
        components: {},
        data() {
            return {
                // 搜索框对象
                searchForm: {
                    supplierName:undefined,
                    status: ''
                },
                pagination: {
                    pageIndex: 1,
                    pageSize: 10,
                    total: 0,
                    pageSizeOptions: ['10', '20', '30', '40', '50'],
                },
                columns,
                tableData: [],
                loading: false,
                allFactoryInfo:[]
            }
        },
        created() {
            this.getInStockList()
        },
        methods: {
            searchList() {
                this.pagination.pageIndex = 1
                this.getInStockList()
            },
            getInStockList() {
                this.loading = true
                let pars = isEmptyParams(this.searchForm)
                let par = {
                    ...pars,
                    pageIndex: this.pagination.pageIndex,
                    pageSize: this.pagination.pageSize
                }
                this.$api.stockManage.fetchInStockList(par).then(({data = {}}) => {
                    const {dataList = [], total = 0} = data
                    this.tableData = dataList
                    this.pagination.total = total
                    this.loading = false
                }).finally(() => {
                    this.loading = false
                })
            },
            // 分页
            showSizeChange(pageNum, pageSize) {
                this.pagination.pageIndex = 1;
                this.pagination.pageSize = pageSize;
                this.getInStockList()
            },
            change(pageNum, pageSize) {
                this.pagination.pageIndex = pageNum;
                this.pagination.pageSize = pageSize;
                this.getInStockList()
            },
            restSearchForm() {
                this.searchForm = {
                    idCar:undefined
                }
                this.searchList()
            },
            toAdd() {
                this.$router.push({path:'/supplyManage/add', query: {flag: 'add'}})
            },
            toUpdate(record) {
                let par  = {
                    ...record,
                    flag: 'update'
                }
                this.$router.push({path:'/supplyManage/add',query: par})
            },
            changeStatus(record) {
                let par = {
                    ...record,
                    status: record.status === 0 ? 1 : 0,
                }
                this.$api.networkManage.fetchUpdateNetwork(par).then(res => {
                    if (res.code === 'SUCCESS') {
                        this.getInStockList()
                    }
                })
            },
            deleteConfirm(record) {
                let vm = this
                this.$confirm({
                    title: '确定删除该条数据吗？',
                    okType: 'danger',
                    onOk: () => {
                        let par = {
                            id: record.id
                        }
                        this.$api.systemManage.deleteRoleOneById(par).then(res => {
                            if (res.code === 'SUCCESS') {
                                this.pagination.pageIndex = 1;
                                this.getInStockList()
                                this.$message.success('删除成功！')
                            }
                        })

                    },
                    onCancel: () => {
                        this.$message.info('已取消删除！');
                    },
                });
            },
        },
    }
</script>
<style lang="less" scoped>
    // 文件上传样式
    .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 6px;
        color: #666;
    }

    .btn_space {
        margin-right: 5px;
    }
   /* .search_form {
        margin-top: -16px;
        border: 1px solid rgba(255,77,128, .2);
        border-top: 0px;
        padding: 30px;
    }*/
</style>
