<template>
    <div style="height: auto">
        <div style="height: 10px"></div>
        <div style="margin-left: 10px;">
            <a-form layout="inline" class="search_form">
                <a-form-item label="时间范围">
                    <dateRangePicker :date.sync="searchForm.date"></dateRangePicker>
                </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>
            </a-form>
        </div>
        <a-row>
            <a-col span="6">
                <div style="height: calc(100vh - 80px);border: 2px solid #F0F1F5;border-radius: 10px;padding: 10px;margin-left: 10px">
                    <a-table
                            size="small"
                            rowKey="id"
                            :columns="columns"
                            :data-source="dataList"
                            :pagination="false"
                            :loading="loading"
                            @change="handleTableChange"
                    >
                        <template slot="operate" slot-scope="text, record">
                            <a-button type="link" size="small" @click="getResidentGrantDetail(record.id)"> 详情
                            </a-button>
                        </template>
                    </a-table>
                    <a-pagination
                            v-if="pagination.total > 0"
                            :total="pagination.total"
                            v-model="pagination.pageIndex"
                            :page-size="pagination.pageSize"
                            :page-size-options="pagination.pageSizeOptions"
                            @showSizeChange="showSizeChange"
                            @change="pageChange"
                            :showTotal="() => `共 ${pagination.total} 条`"
                    />
                </div>
            </a-col>
            <a-col span="17" style="margin-left: 20px">
                <a-spin tip="加载中..." :spinning="spinning">
                    <div style="height: calc(100vh - 80px);border: 2px solid #F0F1F5;border-radius: 10px;padding: 10px;">
                        <div>
                            <div>
                                <span style="font-size: 18px;font-weight: 600;color: #262626"> 领取详情</span>
                            </div>
                            <div style="margin-top: 16px">
                                <div class="detail_title">
                                    <div class="divider_my_dashed">
                                        <span class="midText" style="font-size: 14px;color: #FF4D80;">个人信息</span>
                                    </div>
                                    <div style="clear: both"></div>
                                </div>
                                <a-descriptions bordered class="folvite_title">
                                    <a-descriptions-item label="姓名">
                                        {{ detailInfo.womanName || '--' }}
                                    </a-descriptions-item>
                                    <a-descriptions-item label="证件类型">
                                        {{ detailInfo.womenCertificateTypeName || '--' }}
                                    </a-descriptions-item>
                                    <a-descriptions-item label="证件号码">
                                        {{ detailInfo.womenIdCard || '--' }}
                                    </a-descriptions-item>
                                    <a-descriptions-item label="出生日期">
                                        {{ detailInfo.birthDate || '--' }}
                                    </a-descriptions-item>
                                    <a-descriptions-item label="身高">
                                        {{ detailInfo.height ? detailInfo.height + "cm" : '--' }}
                                    </a-descriptions-item>
                                    <a-descriptions-item label="体重">
                                        {{ detailInfo.weight ? detailInfo.weight + "kg" : '--' }}
                                    </a-descriptions-item>
                                    <a-descriptions-item label="BMI">
                                        {{ detailInfo.bmi ? detailInfo.bmi : '--' }}
                                    </a-descriptions-item>
                                    <a-descriptions-item label="联系电话">
                                        {{ detailInfo.telephone || '--' }}
                                    </a-descriptions-item>
                                    <a-descriptions-item label="现在住址">
                                        {{ detailInfo.presentCodeName || '--' }}
                                    </a-descriptions-item>

                                    <a-descriptions-item label="详细地址">
                                        {{ detailInfo.nowAddress || '--' }}
                                    </a-descriptions-item>
                                    <a-descriptions-item label="签署方式" :span="detailInfo.source == 2 ? 2: 1">
                                        {{ detailInfo.signedModeName || '--' }}
                                    </a-descriptions-item>
                                    <a-descriptions-item label="签署日期" :span="detailInfo.source == 2 ? 2: 1">
                                        {{ detailInfo.parentDate || '--' }}
                                    </a-descriptions-item>
                                    <a-descriptions-item label="知情同意书照片" v-if="detailInfo.source != 2">
                                        <img style="cursor: pointer" width="120px" height="120px"
                                             v-if="detailInfo.consentUrl"
                                             :src="detailInfo.consentUrl"
                                             @click="showVisible=true"/>
                                        <span v-else>--</span>
                                    </a-descriptions-item>
                                    <a-descriptions-item label="签名" v-if="detailInfo.source == 2">
                                        <img style="margin-left: 30px;width: auto;height: 80px;transform: rotate(-90deg)"
                                             :src="detailInfo.applySignUrl">
                                    </a-descriptions-item>
                                </a-descriptions>
                            </div>
                            <!--发放信息-->
                            <div class="detail_title" style="border-top: 0px">
                                <div class="divider_my_dashed">
                                    <span class="midText" style="font-size: 14px;color: #FF4D80;">领取信息</span>
                                </div>
                                <div style="clear: both"></div>
                            </div>
                            <a-descriptions bordered :column="3" class="folvite_title">
                                <a-descriptions-item label="领取单位">
                                    {{ detailInfo.createUnitName || '--' }}
                                </a-descriptions-item>
                                <a-descriptions-item label="领取日期">
                                    {{ detailInfo.provideDate || '--' }}
                                </a-descriptions-item>
                                <a-descriptions-item label="领取数量">
                                    {{ detailInfo.provideNumber ? detailInfo.provideNumber + "瓶" : '--' }}
                                </a-descriptions-item>
                                <a-descriptions-item label="发放医生">
                                    {{ detailInfo.provideDoctorName || '--' }}
                                </a-descriptions-item>
                                <a-descriptions-item label="备注">
                                    {{ detailInfo.remarks || '--' }}
                                </a-descriptions-item>
                            </a-descriptions>
                            <div class="detail_title" style="border-top: 0px">
                                <div class="divider_my_dashed">
                                    <span class="midText" style="font-size: 14px;color: #FF4D80;">问卷信息</span>
                                </div>
                                <div style="clear: both"></div>
                            </div>
                            <a-descriptions bordered>
                                <a-descriptions-item label="结果">
                                    <div v-if="detailInfo.questionList.length>0">
                                        <p v-for="item in detailInfo.questionList ">{{ item }}</p>
                                    </div>
                                    <span v-else>--</span>
                                </a-descriptions-item>
                                <a-descriptions-item label="建议服用">
                                    {{ detailInfo.recommendEat || '--' }}
                                </a-descriptions-item>
                            </a-descriptions>
                        </div>
                    </div>
                </a-spin>
            </a-col>
        </a-row>
        <a-modal title="查看知情同意书" :visible="showVisible" @cancel="showVisible = false" @ok="showVisible=false"
                 loading="true"
                 :maskClosable="false"
                 width="800px">
            <div>
                <img style="width: 100%" :src="detailInfo.consentUrl" height="100%"/>
            </div>
        </a-modal>
    </div>
</template>

<script>

import dateRangePicker from "../components/dateRangePicker.vue";
import {getCookie, getEnumByFlag} from "../utils/common";

const columns = [
    {
        title: '领取单位',
        dataIndex: 'createUnitName',
        scopedSlots: {customRender: 'name'},
    },
    {
        title: '领取日期',
        align: 'center',
        dataIndex: 'provideDate',
        scopedSlots: {customRender: 'name'},
    },
    {
        title: '操作',
        align: 'center',
        dataIndex: 'name2',
        scopedSlots: {customRender: 'operate'},
    },
];

export default {
    name: "test1",
    components: {dateRangePicker},
    data() {
        return {
            size: 'small',
            loading: false,
            spinning: false,
            columns,
            pagination: {
                pageIndex: 1,
                pageSize: 10,
                total: 0,
                pageSizeOptions: ['10', '20', '30', '40', '50'],
            },
            dataList: [],
            value2: "",
            searchForm: {
                womenIdCard: null, date: [], provideDateStart: null, provideDateEnd: null, pageIndex: null,
                pageSize: null
            },
            plainOptions: {},
            detailInfo: {questionList: []},
            showVisible: false,
            residentId: null,
        }
    },
    created() {
        // let cookieToken = "7a3e9215-9afa-47eb-81dc-a3fa78221b3a";
        let cookieToken = this.$route.query.token;
        if (!cookieToken) {
            cookieToken = getCookie('bGNnd3lwdF9hdA');
        }
        if (!cookieToken) {
            this.$message.warn('token获取失败！');
            return
        }
        let questionEnum = getEnumByFlag('folacin_resident_info_question');
        console.log(111, questionEnum)
        questionEnum.forEach(enums => {
            this.plainOptions["key" + enums.enumValue] = enums.enumName;
        });
        this.searchForm.womenIdCard = this.$route.query.idCard;
        window.sessionStorage.setItem('token', 'bearer' + ' ' + cookieToken);
        this.searchList()
    },
    methods: {
        handleTableChange() {

        },
        searchList() {
            if (!this.searchForm.womenIdCard) {
                this.$message.warn('居民证件号获取失败！');
                return
            }
            this.loading = true
            if (this.searchForm.date.length > 0) {
                this.searchForm.provideDateStart = this.searchForm.date[0]
                this.searchForm.provideDateEnd = this.searchForm.date[1]
            }
            this.searchForm.pageIndex=this.pagination.pageIndex
            this.searchForm.pageSize=this.pagination.pageSize
            this.$api.folviteDistributionManage.fetchResidentByCard(this.searchForm).then(({data = {}}) => {
                const {dataList = [], total = 0} = data
                this.dataList = dataList
                this.pagination.total = total
                this.loading = false
                if (this.dataList.length > 0) {
                    this.getResidentGrantDetail(this.dataList[0].id)
                }
                this.pagination.total = total
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },
        getResidentGrantDetail(residentId) {
            let par = {
                residentId: residentId,
            }
            this.spinning = true;
            this.$api.folviteDistributionManage.fetchFolviteDistributionDetail(par).then(({data = [], code}) => {
                this.spinning = false;
                this.detailInfo = data;
            }).catch(res => {
                this.spinning = false;
            })
        },
        restSearchForm() {
            this.searchForm.provideDateStart = null
            this.searchForm.provideDateEnd = null
            this.searchForm.date = [];
            this.searchList()
        },
        showSizeChange(pageNum, pageSize) {
            this.pagination.pageIndex = 1;
            this.pagination.pageSize = pageSize;
            this.getInStockList()
        },
        pageChange(pageNum, pageSize) {
            this.pagination.pageIndex = pageNum;
            this.pagination.pageSize = pageSize;
            this.searchList()
        },
        rowClick() {
            alert(1)
        }
    }
}
</script>

<style scoped>

</style>