<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.enumValue" :value="item.enumValue">
                        {{item.enumName}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" icon="search" class="search_btn" style="margin-left: 10px" @click="searchList">
                    搜索
                </a-button>
                <a-button class="search_btn ant-table-btn" icon="sync" 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"
                 :scroll="{ x: 1}"
        >
            <template slot="action" slot-scope="record">
                <!--<a-button type="link" size="small" @click="toUpdate(record)">修改</a-button>-->
                <a-popconfirm
                        :title="'确定' + (record.status === 1 ? '停用' : '启用') + '该供应商吗？'"
                        ok-text="是"
                        cancel-text="否"
                        @confirm="changeStatus(record)"
                >
                    <a-button class="ant-table-btn" size="small">{{record.status==0?'启用':'停用'}}
                    </a-button>
                    <a-button style="margin-left: 10px" class="ant-table-btn" size="small" @click="updateSupply(record)">修改</a-button>
                </a-popconfirm>
                <!--                <a-button type="link" size="small" @click="deleteConfirm(record)">删除</a-button>-->
            </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 {getEnumByFlag, isEmptyParams} from "../../utils/common";

    const columns = [
        {
            title: '供应商名称',
            dataIndex: 'supplierName',
            width: 220,
            ellipsis: true
        },
        {
            title: '联系人',
            dataIndex: 'contactsName',
            width: 140
        },
        {
            title: '联系电话',
            dataIndex: 'contactsPhone',
            width:180
        },
        {
            title: '联系地址',
            dataIndex: 'address',
            width: 260,
            ellipsis: true
        },
        {
            title: '备注',
            dataIndex: 'remarks',
            width: 300,
            ellipsis: true
        },
        {
            title: '状态',
            width: 70,
            dataIndex: 'statusName'
        },
        {
            title: '操作',
            align: 'center',
            fixed: 'right',
            width: 150,
            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: [],
                routerParams: {},
                menuId: undefined
            }
        },
        created() {
            this.routerParams = this.$route.query;
            if (this.routerParams.menuId) {
                window.sessionStorage.setItem('menuId', this.routerParams.menuId)
                this.menuId = this.routerParams.menuId
            }
            this.getSupplyList();
            this.getEnumListInfo()
        },
        methods: {
            getEnumListInfo() {
                if (window.sessionStorage.getItem('allEnum')) {
                    this.allFactoryInfo = getEnumByFlag("public_state");
                } else {
                    let par = {
                        menuId: this.menuId
                    }
                    this.$api.fyManage.fetchFYLoginUser(par).then(({data}) => {
                        window.sessionStorage.setItem('allEnum', JSON.stringify(data.enumValueList))
                        window.sessionStorage.setItem('userInfo', JSON.stringify(data.userInfo));
                        this.allFactoryInfo = getEnumByFlag("public_state");
                    })
                }
            },
            searchList() {
                this.pagination.pageIndex = 1;
                this.getSupplyList()
            },
            getSupplyList() {
                this.loading = true;
                let pars = isEmptyParams(this.searchForm)
                let par = {
                    ...pars,
                    pageIndex: this.pagination.pageIndex,
                    pageSize: this.pagination.pageSize,
                    menuId: this.menuId
                }
                this.$api.common.fetchSupplyPageList(par).then(({data = {}}) => {
                    const {dataList = [], total = 0} = data;
                    this.tableData = dataList
                    this.pagination.total = total
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            // 分页
            showSizeChange(pageNum, pageSize) {
                this.pagination.pageIndex = 1;
                this.pagination.pageSize = pageSize;
                this.getSupplyList()
            },
            change(pageNum, pageSize) {
                this.pagination.pageIndex = pageNum;
                this.pagination.pageSize = pageSize;
                this.getSupplyList()
            },
            restSearchForm() {
                this.searchForm = {
                    idCar: undefined
                }
                this.searchList()
            },
            toAdd() {
                this.$router.push({path: '/supplyManage/add', query: {modeType: "add", menuId: this.menuId}})
            },
            changeStatus(record) {
                let par = {
                    id: record.id,
                    status: record.status === 0 ? 1 : 0,
                    menuId: this.menuId
                }
                this.$api.common.fetchSupplUpdate(par).then(res => {
                    if (res.code === 'SUCCESS') {
                        this.getSupplyList()
                    }
                })
            },
            deleteConfirm(record) {
                let vm = this
                this.$confirm({
                    title: '确定删除该条数据吗？',
                    okType: 'danger',
                    onOk: () => {
                        let par = {
                            id: record.id,
                            menuId: vm.menuId
                        }
                        this.$api.common.fetchSupplDelete(par).then(res => {
                            if (res.code === 'SUCCESS') {
                                this.pagination.pageIndex = 1;
                                this.getSupplyList()
                                this.$message.success('删除成功！')
                            }
                        })

                    },
                    onCancel: () => {
                        this.$message.info('已取消删除！');
                    },
                });
            },
            updateSupply(record) {
                let now_location = escape(process.env.VUE_APP_LOCATION+`supplyManage/add?modeType=update&menuId=${this.menuId}&menuCode=${this.routerParams.menuName}&id=${record.id}`)
                window.top.postMessage({messageType:'THIRD_PAGEADD',title:`修改供应商`,url:now_location}, '*')
                // this.$router.push({path: '/supplyManage/add', query: {modeType: "update", id: record.id, menuId: this.menuId}});
            }
        },
    }
</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>
