<template>
    <div class="inStockManage">
        <a-form layout="inline" class="search_form">
            <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 statusList" :key="item.enumValue" :value="item.enumValue">
                        {{item.enumName}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="女方姓名">
                <!--v-price="{digit:4}"-->
                <a-input v-model="searchForm.womanName" placeholder="请输入女方姓名" style="width: 250px"></a-input>
            </a-form-item>
            <a-form-item label="联系电话">
                <!--v-price="{digit:4}"-->
                <a-input v-model="searchForm.telephone" placeholder="请输入联系电话" style="width: 250px"></a-input>
            </a-form-item>
            <a-button type="primary" icon="search" class="search_btn" @click="searchList">搜索</a-button>
            <a-button class="search_btn ant-table-btn" icon="sync" style="margin-left: 10px" @click="restSearchForm">清空</a-button>
            <div style="clear: both"></div>
        </a-form>

        <div style="clear: both"></div>
        <a-table :dataSource="tableData"
                 :columns="columns"
                 rowKey="id"
                 :loading="loading"
                 :pagination="false"
                 :scroll="{ x: 1}"
        >
            <template slot="expireDateS" slot-scope="record">
                {{record.expireDate | formatDate}}
            </template>
            <template slot="action" slot-scope="record">
                <a-button class="ant-table-btn" size="small" @click="toDetail(record)" :disabled="record.status===2">发放</a-button>
                <a-button style="margin-left: 5px" class="ant-table-btn" size="small" @click="deleteConfirm(record)" :disabled="record.status===2">删除
                </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";
    import moment from 'moment'

    const columns = [
        {
            title: '女方姓名',
            dataIndex: 'womanName',
           width:"140px"
        },
        {
            title: '证件类型',
            dataIndex: 'womenCertificateTypeName',
           width:'140px'
        },
        {
            title: '证件号码',
            width: '220px',
            dataIndex: 'womenIdCard',
        },
        {
            title: '男方姓名',
            dataIndex: 'manName',
           width: '140px'
        },
        {
            title: '证件类型',
            dataIndex: 'menCertificateTypeName',
            width: '140px'
        },
        {
            title: '证件号码',
            width: '220px',
            dataIndex: 'menIdCard'
        },
        {
            title: '联系电话',
            dataIndex: 'telephone',
            width: '180px'
        },
        {
            title: '领取状态',
            dataIndex: 'statusName',
            width: '100px'
        },
        {
            title: '领取日期',
            dataIndex: 'provideDate',
            width:'120px'
        },
        {
            title: '操作',
            align: 'center',
            fixed: 'right',
            width: 140,
            scopedSlots: {customRender: 'action'},
        },
    ]
    export default {
        components: {},
        data() {
            return {
                // 搜索框对象
                searchForm: {
                    status: '',
                },
                statusList: [],
                pagination: {
                    pageIndex: 1,
                    pageSize: 10,
                    total: 0,
                    pageSizeOptions: ['10', '20', '30', '40', '50'],
                },
                columns,
                tableData: [],
                loading: false,
                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.getEnumListInfo()
            this.getFolviteApplyList()

        },
        methods: {
            getEnumListInfo() {
                if (window.sessionStorage.getItem('allEnum')) {
                    this.statusList = getEnumByFlag("folacin_resident_infopc_status");
                } 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.statusList = getEnumByFlag("folacin_resident_infopc_status");
                    })
                }
            },
            searchList() {
                this.pagination.pageIndex = 1
                this.getFolviteApplyList()
            },
            getFolviteApplyList() {
                this.loading = true
                let pars = isEmptyParams(this.searchForm)
                let par = {
                    ...pars,
                    pageIndex: this.pagination.pageIndex,
                    pageSize: this.pagination.pageSize,
                    menuId: this.menuId
                }
                this.$api.folviteApplyManage.fetchFolviteApplyList(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.getFolviteApplyList()
            },
            change(pageNum, pageSize) {
                this.pagination.pageIndex = pageNum;
                this.pagination.pageSize = pageSize;
                this.getFolviteApplyList()
            },
            restSearchForm() {
                this.searchForm = {
                    breedId: undefined,
                    medicalName: '',
                    factoryId: '',
                    produceDate: undefined
                }
                this.searchList()
            },
            // 删除按钮
            deleteConfirm(record) {
                let vm = this
                this.$confirm({
                    title: '确定删除该条数据吗？',
                    okType: 'danger',
                    onOk: () => {
                        let par = {
                            id: record.id,
                            menuId: vm.menuId
                        }
                        this.$api.folviteApplyManage.delFolviteApplyById(par).then(res => {
                            if (res.code === 'SUCCESS') {
                                this.pagination.pageIndex = 1;
                                this.searchList()
                                this.$message.success('删除成功！')
                            }
                        })

                    },
                    onCancel: () => {
                        this.$message.info('已取消删除！');
                    },
                });
            },
            toDetail(record) {
                let now_location = escape(process.env.VUE_APP_LOCATION+`folviteDistribution/add?menuId=${this.menuId}&menuCode=${this.routerParams.menuName}&routerFlag=update`)
                window.top.postMessage({messageType:'THIRD_PAGEADD',title:`叶酸申请`,url:now_location}, '*')
                // let params = {
                //     id: record.id,
                //     routerFlag: 'update',
                //     menuId: this.menuId
                // }
                // this.$router.push({path: '/folviteDistribution/add', query: params})
            }
        },
    }
</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: -17px;
         border: 1px solid rgba(255,77,128, .2);
         border-top: 0px;
         padding: 30px;
     }*/
</style>