<template>
    <div class="inStockManage">
        <a-form layout="inline" class="search_form">
            <a-form-item label="证件号码">
                <!--v-price="{digit:4}"-->
                <a-input v-model="searchForm.womenIdCard" placeholder="请输入证件号码" style="width: 250px"></a-input>
            </a-form-item>
            <a-form-item>
                <a-button  class="search_btn ant-table-btn"  @click="getIdCardInfo">读卡识别</a-button>
                <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"
        >

            <template slot="expireDateS" slot-scope="record">
                {{record.expireDate | formatDate}}
            </template>
            <template slot="action" slot-scope="record">
                <!--<a-button type="link" size="small" @click="openChildModal(record)">人工发放</a-button>-->
                <a-button class="ant-table-btn" size="small" @click="toDetail(record)">查看</a-button>
                <a-button class="ant-table-btn" v-if="record.source===1&&record.isSigned===2" size="small"
                          style="margin-left: 10px"
                          @click="uploadConsentInfo(record)">签署知情同意书
                </a-button>
                <a-button class="ant-table-btn" v-else size="small" style="margin-left: 10px"
                          @click="showConsentInfo(record)">已签知情同意书
                </a-button>
            </template>
        </a-table>
        <a-modal title="上传知情同意书" :visible="visible" @cancel="visible = false" @ok="onsubmit"
                 :maskClosable="false"
                 width="600px">
            <span>上传知情同意书：</span>
            <a-upload
                    style="display: inline"
                    name="file"
                    list-type="picture-card"
                    accept=".jpg,.png"
                    :multiple="true"
                    :action="uploadAction"
                    :headers="headers"
                    @preview="preview"
                    @change="handleChange"
                    :file-list="fileList"
            >
                <div>
                    <!--<a-icon type="plus"/>-->
                    <div class="ant-upload-text">
                        上传本地文件
                    </div>
                </div>
            </a-upload>
            <div>
                <br/>
                温馨提示:请上传JPG、PNG格式图片，图片大小不超过5M
                <br/>

            </div>
        </a-modal>
        <!--:getContainer="getContainer"-->
        <a-modal title="查看知情同意书" :visible="showVisible" @cancel="showVisible = false" @ok="onsubmit"
                 loading="true"
                 :maskClosable="false"

                 width="600px">
            <div v-if="currentRow.source==1">
                <img style="width: 100%" :src="consentUrl" height="100%"/>
            </div>
            <div v-else>
                <div style="white-space:pre;text-indent:2em">
                    <div v-html="consentInfo" style="white-space:pre">
                    </div>
                    <div style="float: right;margin-right: 10px">
                        <div style="height: 60px">签名： <img style="width:200px;height: 40px;display: inline-block" :src="applySignUrl" height="100%"/></div>
                        <div>签署日期：<span style="margin-left: 8px">{{currentRow.parentDate}}</span></div>
                    </div>
                   <div style="clear: both"></div>
                </div>
            </div>
        </a-modal>
        <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 {GetUserInfoByCardDevice, isEmptyParams} from "../../utils/common";
    import moment from 'moment'

    const columns = [
        {
            title: '发放日期',
            dataIndex: 'provideDate',
            ellipsis: true
        },
        {
            title: '姓名',
            dataIndex: 'womanName',
            ellipsis: true
        },
        {
            title: '证件号码',
            dataIndex: 'womenIdCard',
            ellipsis: false
        },
        {
            title: '联系电话',
            dataIndex: 'telephone',
            ellipsis: true
        },
        /* {
             title: '发放时期',
             width: '120px',
             scopedSlots: {customRender: 'expireDateS'},
         },*/
        {
            title: '现住址',
            dataIndex: 'nowAddress',
            ellipsis: true
        },
        {
            title: '发放医生',
            dataIndex: 'provideDoctorName',
            ellipsis: true
        },
        {
            title: '类型',
            dataIndex: 'sourceName',
            ellipsis: true
        },
        {
            title: '操作',
            fixed: 'right',
            align: 'left',
            width: "240px",
            scopedSlots: {customRender: 'action'},
        },
    ]
    export default {
        components: {},
        data() {
            return {
                // 搜索框对象
                searchForm: {
                    womenIdCard: undefined
                },
                pagination: {
                    pageIndex: 1,
                    pageSize: 10,
                    total: 0,
                    pageSizeOptions: ['10', '20', '30', '40', '50'],
                },
                columns,
                tableData: [],
                loading: false,
                visible: false,
                showVisible: false,
                previewVisible: false,
                consentUrl: "",
                applySignUrl:"",
                consentInfo: "",
                headers: {
                    Authorization: sessionStorage.getItem("token")
                },
                uploadAction: process.env.VUE_APP_BASE_URL + "/v1/folacin-admin/sys-pictures-info/upload-img",
                fileList: [],
                formData: {
                    consentId: "",
                    id: ""
                },
                currentRow: {},
            }
        },
        created() {
            this.routerParams = this.$route.query;
            if (this.routerParams.menuId) {
                window.sessionStorage.setItem('menuId', this.routerParams.menuId);
            }
            this.getFolviteDistributionList()
        },
        methods: {
            getIdCardInfo() {
                GetUserInfoByCardDevice().then(res => {
                    let {cardno, name, address} = res;
                   this.searchForm.womenIdCard = cardno
                })
            },
            searchList() {
                this.pagination.pageIndex = 1
                this.getFolviteDistributionList()
            },
            getFolviteDistributionList() {
                this.loading = true
                let pars = isEmptyParams(this.searchForm)
                let par = {
                    ...pars,
                    pageIndex: this.pagination.pageIndex,
                    pageSize: this.pagination.pageSize
                }
                this.$api.folviteDistributionManage.fetchFolviteDistributionList(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.getFolviteDistributionList()
            },
            change(pageNum, pageSize) {
                this.pagination.pageIndex = pageNum;
                this.pagination.pageSize = pageSize;
                this.getFolviteDistributionList()
            },
            restSearchForm() {
                this.searchForm = {
                    idCar: undefined
                }
                this.searchList()
            },
            // getContainer() {
            //     return window.parent.document.body
            // },
            toAdd() {
                this.$router.push({path: '/folviteDistribution/add', query: {routerFlag: 'add'}})
            },
            toDetail(record) {
                this.$router.push({path: '/folviteDistribution/detail', query: record})
            },
            uploadConsentInfo(row) {
                this.formData.id = row.id;
                this.visible = true;
            },
            showConsentInfo(row) {
                this.currentRow = row;
                this.showVisible = true;
                this.$api.folviteDistributionManage.fetchFolviteDistributionDetail({residentId: row.id}).then(({data = [], code}) => {
                    this.consentUrl = data.consentUrl;
                    this.applySignUrl = data.applySignUrl;
                })
                if (row.source == 2) {
                    this.$api.common.fetchConsentInfo().then(({data}) => {
                        if (this.$api.utils.isNoBlank(data)) {
                            this.consentInfo = data.content;
                        }
                    })
                }
            },
            handleChange(info) {
                let fileList = [...info.fileList];
                fileList = fileList.slice(-1);
                fileList = fileList.map(file => {
                    if (file.response) {
                        this.consentUrl = file.response.data.trueDownloadUrl;
                        this.formData.consentId = file.response.data.id;
                    }
                    return file;
                });
                this.fileList = fileList;
            },
            preview(val) {
                window.open(val.response.data.trueDownloadUrl)
            },
            onsubmit() {
                if (this.$api.utils.isBlank(this.formData.consentId)) {
                    this.$message.warning('请上传文件');
                    return;
                }
                this.$api.folviteDistributionManage.fetchFolviteUploadConsent(this.formData).then(res => {
                    if (res.code === 'SUCCESS') {
                        this.fileList = [];
                        this.formData.consentId = "";
                        this.searchList();
                        this.visible = false;
                    }
                })

            }
        },
    }
</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>