<template>
    <div>
        <van-pull-refresh v-model="isLoading"
                          success-text="刷新成功"
                          @refresh="onRefresh"
                          :disabled="isRefreshDisable"
        >
        <mt-header title="领取记录">
            <div slot="left" @click="goBack">
                <mt-button icon="back"></mt-button>
            </div>
            <div slot="right" @click="toLossReport" v-if="!lossVisible">
                <div class="nar_right">
                    <span v-if="detailInfo.length" style="font-size: 14px!important">重新申领</span>
                </div>
            </div>
            <div slot="right" @click="cancelLossReport" v-if="lossVisible">
                <div class="nar_right">
                    <span style="font-size: 14px!important">取消</span>
                </div>
            </div>
        </mt-header>

        <div>

            <div
                    class="list-data"
                    v-infinite-scroll="loadMore"
                    :infinite-scroll-disabled="loading"
                    infinite-scroll-distance="10"
                    id="collectListIds"
                    v-show="!lossVisible"
                    ref="notLoss"
            >
                <div class="content" v-for="item in detailInfo" :key="item.id">
                    <!-- 领取记录-->
                    <div>
                        <div class="title" style="display:flex;justify-content: space-between;align-items: center">
                            <div><span>{{item.medicalName}}</span></div>
                            <div v-if="item.lossAuditStatus === 0" style="min-width: 42px">
                                <div style="color: #FA8C16;">待审核</div>
                            </div>
                            <div v-if="item.lossAuditStatus === 1" style="min-width: 42px">
                                <div style="color: #F5222D;">已报损</div>
                            </div>
                            <div v-if="item.lossAuditStatus === 2" style="min-width: 42px">
                                <div style="color: #F5222D;">已驳回</div>
                            </div>
                        </div>
                        <div class="details">
                            <div class="item">
                                <label class="item-left">规格:</label>
                                <label class="item-right">{{item.specs || '--'}}</label>
                            </div>
                            <div class="item">
                                <label class="item-left">领取数量：</label>
                                <label class="item-right">{{item.receivedNum || '--'}} {{item.receivedUnit}}</label>
                            </div>
                            <div class="item">
                                <label class="item-left">领取时间：</label>
                                <label class="item-right">{{item.created || '--'}}</label>
                            </div>
                            <div class="item">
                                <label class="item-left">领取站点：</label>
                                <label class="item-right">{{item.netName || '--'}}</label>
                            </div>
                            <div class="item">
                                <label class="item-left">站点类型：</label>
                                <label class="item-right">{{item.netTypeName || '--'}}</label>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div
                    class="list-data"
                    v-infinite-scroll="loadLossReportMore"
                    :infinite-scroll-disabled="lossLoading"
                    infinite-scroll-distance="10"
                    id="collectListId"
                    v-show="lossVisible"
                    ref="loss"
            >
                <div class="content" v-for="item in lossDetailInfo" :key="item.id">
                    <!--可重新申领列表-->
                    <div class="title" style="display:flex;justify-content: space-between;align-items: flex-start">
                        <div style="word-break: break-all"><span>{{item.medicalName}}</span></div>
                        <!--<div v-if="item.lossAuditStatus === 0" style="min-width: 42px">
                            <div style="color: #FA8C16;">待审核</div>
                        </div>
                        <div v-if="item.lossAuditStatus === 1" style="min-width: 42px">
                            <div style="color: #F5222D;">已报损</div>
                        </div>
                        <div v-if="item.lossAuditStatus === 2" style="min-width: 60px">
                            <div style="border: 1px solid #F5222D;color: #F5222D;padding: 0px 8px">已驳回</div>
                        </div>-->

                        <div style="min-width: 110px" v-if="item.isShow">
                            <div class="sub1"  @click="toApply(item)"  style="white-space: nowrap">领取其他药具</div>
                        </div>
                    </div>
                    <div class="flex_center" @click="getCheckLossInfo(item)">
                        <div class="lossUncheck" v-if="!item.checked"></div>
                        <div class="losscheck" v-if="item.checked">
                            <div class="circle"></div>
                        </div>
                        <div class="details" style="flex: 1;">
                            <div class="item">
                                <label class="item-left">规格:</label>
                                <label class="item-right">{{item.specs || '--'}}</label>
                            </div>
                            <div class="item">
                                <label class="item-left">领取数量：</label>
                                <label class="item-right">{{item.receivedNum || '--'}} {{item.receivedUnit}}</label>
                            </div>
                            <div class="item">
                                <label class="item-left">领取时间：</label>
                                <label class="item-right">{{item.created || '--'}}</label>
                            </div>
                            <div class="item">
                                <label class="item-left">领取站点：</label>
                                <label class="item-right">{{item.netName || '--'}}</label>
                            </div>
                            <div class="item">
                                <label class="item-left">站点类型：</label>
                                <label class="item-right">{{item.netTypeName || '--'}}</label>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="loading" v-if="loading">
                <span id="load-text">{{loadText}}</span>
            </div>
            <div v-if="noDataShow">
                <NoData></NoData>
            </div>


            <van-popup
                    v-model="popupVisible"
                    position="bottom"
                    :round="false"
                    :overlay="false"
                    :style="{ height: otherReasonShow ? '240px' :'158px' }"
            >
                <div class="popForm">
                    <div class="first">
                        <div class="require title">重新申领数量</div>
                        <div>
                            <van-stepper v-model.number="formData.anewNumber" min="1" :max="clickInfo.receivedNum" integer/>
                        </div>
                    </div>

                    <div class="require title" style="margin-top: 10px;">重新申领原因</div>
                    <div class="flex_start_wrap">
                        <div v-for="(item, index) in adverseReaction"
                             class="unselected_c_adv adv"
                             :style="{marginLeft: index == 0 ? '0px' : '10px'}"
                             :key="item.value"
                             @click="getAdverse(item)"
                             :id="item.value"
                        >
                            <span style="line-height: 24px;margin: 0px 5px">{{item.label}}</span>
                        </div>
                    </div>
                    <div>
                        <van-field
                                v-if="otherReasonShow"
                                v-model="formData.otherReason"
                                rows="2"
                                autosize
                                type="textarea"
                                style="border: 1px solid #F3F3F3;margin: 12px auto 0px;"
                                placeholder="请输入其他重新申领的原因"
                        />
                    </div>

                    <div class="flex_center" style="margin-top: 12px">
                        <van-button type="primary" block plain style="margin-right: 20px;border-radius: 6px;"
                                    size="small" @click="cancelLossReport">取消
                        </van-button>
                        <van-button type="primary"
                                    block
                                    style="background: #00C99D;border-radius: 6px" size="small"
                                    :loading="btnLoad"
                                    @click="addLossReport"
                        >提交申请
                        </van-button>
                    </div>

                </div>
            </van-popup>
        </div>
        </van-pull-refresh>
    </div>
</template>

<script>
    import {getUserCollectRecord, getUserLossReportRecord, addLossReport} from '../utils/api';
    import NoData from "./component/noData";
    import {Toast} from 'mint-ui';
    import {Indicator} from 'mint-ui';

    const adverseReaction = [
        {value: '1', label: '药具污染', checked: false},
        {value: '2', label: '药具报废', checked: false},
        {value: '3', label: '其他原因', checked: false},
    ]
    export default {
        name: "collectRecords",
        components: {NoData},
        data() {
            return {
                loading: false,
                btnLoad: false,
                lossLoading: false,
                detailInfo: [],
                lossDetailInfo: [],
                loadText: '加载中...',
                noDataShow: false,
                lossVisible: false,
                popupVisible: false,
                lossReportReasonUser: undefined,
                clickInfo: {},
                adverseReaction,
                otherReasonShow: false,
                param: {
                    telephone: undefined,
                    pageIndex: 0,
                    pageSize: 10
                },
                lossParam: {
                    telephone: undefined,
                    pageIndex: 0,
                    pageSize: 10
                },
                formData: {
                    anewNumber: undefined,
                    otherReason: undefined,
                    lossReportReasonUser: undefined,
                },
                isLoading: false,
                isRefreshDisable: false,
                scrollTop: 0
            }
        },
        watch: {
            scrollTop(newval) {
                if (newval> 0) {
                    this.isRefreshDisable = true
                } else {
                    this.isRefreshDisable = false
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                const notlist = this.$refs.notLoss
                notlist.addEventListener('scroll', () => {
                    this.scrollTop = notlist.scrollTop
                })
                const list = this.$refs.loss
                list.addEventListener('scroll', () => {
                    this.scrollTop = list.scrollTop
                })
            })
        },
        methods: {
            //刷新
            onRefresh() {
                this.isLoading = true

                if (this.lossVisible) {//重新申领列表
                    this.lossLoading = false
                    this.lossParam.pageIndex = 1
                    this.getLossRRecordInfo()

                } else {//领取记录列表
                    this.loading = true
                    this.param.pageIndex = 1
                    this.getRecordInfo()
                }

            },
            getRecordInfo(callBack) {
                Indicator.open();
                this.param.telephone = JSON.parse(window.sessionStorage.getItem('mobileTokenIno')).phone
                getUserCollectRecord(this.param).then(({data = {}}) => {
                    if (this.param.pageIndex == 1) {
                        this.detailInfo = []
                    }
                    const {dataList = []} = data.data
                    if (this.isLoading) { //刷新时先赋空
                        this.detailInfo = []
                    }
                    this.detailInfo = this.detailInfo.concat(dataList)
                    if (this.detailInfo.length == 0) {
                        this.noDataShow = true
                    } else {
                        this.noDataShow = false
                    }
                    if (data.data && data.data.length < this.param.pageSize) {
                        this.loadText = '暂无更多数据'
                    } else {
                        this.loading = false
                    }
                    Indicator.close();
                    this.isLoading = false
                    callBack && callBack()
                }).catch(res => {
                    Toast({
                        message: '系统异常，请联系客服！',
                        duration: 2000
                    });
                    this.loading = false
                    this.isLoading = false
                }).finally(() => {
                    this.loading = false
                    this.isLoading = false
                    Indicator.close();
                })
            },
            getLossRRecordInfo(callBack) {
                Indicator.open();
                this.lossParam.telephone = JSON.parse(window.sessionStorage.getItem('mobileTokenIno')).phone
                let par = {
                    ...this.lossParam,
                    lossAuditStatus: -1,
                    lossReportStatus: 0
                }
                getUserLossReportRecord(par).then(({data = {}}) => {
                    const {dataList = []} = data.data
                    if (this.lossParam.pageIndex == 1) {
                        this.lossDetailInfo = []
                    }
                    if (this.isLoading) { //刷新时先赋空
                        this.lossDetailInfo = []
                    }
                    dataList.forEach(item => item['checked'] = false)
                    this.lossDetailInfo = this.lossDetailInfo.concat(dataList)
                    if (this.lossDetailInfo.length == 0) {
                        this.noDataShow = true
                    } else {
                        this.noDataShow = false
                        // document.getElementById("collectListId").setAttribute('class', 'list-data-pop')
                    }
                    if (data.data && data.data.length < this.lossParam.pageSize) {
                        this.loadText = '暂无更多数据'
                    } else {
                        this.lossLoading = false
                    }
                    Indicator.close();
                    this.isLoading = false
                    callBack && callBack()
                    this.isLoading = false
                }).finally(() => {
                    this.lossLoading = false
                    this.isLoading = false
                    Indicator.close();
                })
            },
            loadMore() {
                this.loading = true
                this.param.pageIndex += 1
                this.getRecordInfo()
            },
            loadLossReportMore() {
                this.lossLoading = true
                this.lossParam.pageIndex += 1
                this.getLossRRecordInfo()
            },
            goBack() {
                window.history.go(-1)
            },
            getCheckLossInfo(val) {
                this.clickInfo = val
                this.formData.anewNumber = val.receivedNum
                if (val.checked) {
                    this.lossDetailInfo.forEach(item => {
                        if (item.id == val.id) {
                            item.checked = false
                            this.popupVisible = false
                            document.getElementById("collectListId").setAttribute('class', 'list-data')
                        }
                    })
                    this.lossDetailInfo = [...this.lossDetailInfo]
                } else {
                    if (!this.popupVisible) {
                        this.popupVisible = true
                        document.getElementById("collectListId").setAttribute('class', 'list-data-pop')
                    }
                    this.lossDetailInfo.forEach(item => {
                        item.checked = false
                        if (item.id == val.id) {
                            item.checked = true
                        }
                    })
                }

            },
            //报损
            toLossReport() {
                // this.lossDetailInfo = []
                this.lossParam.pageIndex = 0
                this.lossVisible = true
                this.scrollTop = 0
                this.loadLossReportMore()
            },
            cancelLossReport() {
                // this.detailInfo = []
                this.scrollTop = 0
                this.clickInfo = {}
                this.param.pageIndex = 0
                this.loadMore()
                this.lossVisible = false
                this.popupVisible = false
                this.otherReasonShow = false
                this.formData = {
                    anewNumber: undefined,
                    otherReason: undefined,
                    lossReportReasonUser: undefined,
                }
                this.adverseReaction.forEach(item => {
                    item.checked = false
                    document.getElementById(item.value).setAttribute('class', 'unselected_c_adv adv')
                })
                this.adverseReaction = [...this.adverseReaction]
                document.getElementById("collectListId").setAttribute('class', 'list-data')
            },
            addLossReport() {
                let checkInfo = this.lossDetailInfo.filter(item => item.checked == true)
                if (!checkInfo.length) {
                    Toast({
                        message: '请选择领取记录！',
                        duration: 2000,
                        className: 'toastIndex',
                    })
                    return
                }
                if (!this.formData.lossReportReasonUser) {
                    Toast({
                        message: '请选择重新申领原因！',
                        duration: 2000,
                        className: 'toastIndex',
                    })
                    return
                }
                this.btnLoad = true
                if (this.formData.lossReportReasonUser == '其他原因') {
                    this.formData.lossReportReasonUser = this.formData.otherReason
                }
                let par = {
                    ...this.clickInfo,
                    ...this.formData,
                    lossAuditStatus: 0
                }
                console.log(JSON.stringify(par))
                addLossReport(par).then(({data}) => {
                    this.btnLoad = false
                    if (data.code == 'SUCCESS') {
                        this.toLossReport()
                        // 成功通知
                        this.$notify({ type: 'success', message: '申请成功！' ,className: 'toastIndex',});
                    } else {
                        this.$notify({ type: 'danger', message: '申请失败！' , className: 'toastIndex',});
                    }
                }).finally(() => {
                    this.btnLoad = false
                })
            },
            getAdverse(val) {
                if (val.value == 3) {
                    this.otherReasonShow = true
                    document.getElementById("collectListId").setAttribute('class', 'list-data-other')
                } else {
                    this.otherReasonShow = false
                    document.getElementById("collectListId").setAttribute('class', 'list-data-pop')
                }
                if (val.checked) {
                    this.adverseReaction.forEach(item => {
                        if (item.value == val.value) {
                            item.checked = false
                        }
                    })
                    document.getElementById(val.value).setAttribute('class', 'unselected_c_adv adv')
                    this.adverseReaction = [...this.adverseReaction]
                } else {
                    this.adverseReaction.forEach(item => {
                        if (item.value == val.value) {
                            item.checked = true
                            this.formData.lossReportReasonUser = item.label
                            document.getElementById(val.value).setAttribute('class', 'selected_c_adv adv')
                        } else {
                            item.checked = false
                            document.getElementById(item.value).setAttribute('class', 'unselected_c_adv adv')
                        }
                    })
                    this.adverseReaction = [...this.adverseReaction]
                }
            },
            toApply(record) {//领取该品类下的其他药具
            let par = {
             ...record,
            }
            this.$router.push({path:`/reClaim`,query: par})
            }
        },

        beforeDestroy() {
            this.detailInfo = []
        }
    }
</script>

<style lang="less">
    .van-stepper__minus, .van-stepper__plus {
        width: 20px!important;
        height: 20px!important;
        color:#03053D!important;
        background-color: #ffffff!important;
    }
    .toastIndex {
        z-index: 9999 !important;
    }

    .nar_right {
        font-size: 14px!important;
        line-height: 15px;
        color: #1890FF;
    }

    .require {
        &::before {
            content: '*';
            color: #FF4D4F;
            margin-right: 4px;
        }
    }

    .popForm {
        padding: 0px 16px;

        .first {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .title {
            font-size: 11px;
            line-height: 14px;
            color: #595959;
        }
    }

    .flex_start_wrap {
        flex-wrap: wrap;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .adv {
        display: inline-block;
        margin-left: 10px;
        margin-top: 15px;
        font-size: 13px;
    }

    .unselected_c_adv {
        background: #F5F5F5;
        padding: 0px 8px;
        font-size: 14px;
        border-radius: 4px;
        color: #8C8C8C;
    }

    .selected_c_adv {
        background: #E6F7FF;
        padding: 0px 8px;
        font-size: 14px;
        border-radius: 4px;
        color: #1890FF;
    }

    .lossUncheck {
        width: 16px;
        height: 16px;
        border: 1px solid #D9D9D9;
        border-radius: 100px;
        margin: 0px 12px 0px 6px;
    }

    .losscheck {
        width: 16px;
        height: 16px;
        border: 1px solid #1890FF;
        border-radius: 100px;
        margin: 0px 12px 0px 6px;
        padding: 3px;

        .circle {
            width: 8px;
            height: 8px;
            background: #1890FF;
            border-radius: 20px;
        }
    }
</style>
<style scoped>
    .content {
        width: 90%;
        margin: 20px auto 0px;
        padding: 10px;
        border: 1px solid #F3F3F3;
        border-radius: 1rem;
        box-shadow: darkgrey 0px 2px 20px -10px;
    }

    .content_detail {
        width: 90%;
        margin: 10px auto 0px;
        padding: 10px;
        border: 1px solid #F3F3F3;
        color: rgba(69, 90, 100, 0.85);
        border-radius: 1rem;
        /*box-shadow: darkgrey 0px 2px 20px -10px;*/
    }

    .content .title {
        font-weight: bold;
        line-height: 1.5;
        font-size: 14px !important;
        border-bottom: 1px solid #F3F3F3;
        padding: 0px 0px 3px 0px;
    }

    .content_detail .title {
        font-weight: bold;
        line-height: 1.5;
        font-size: 14px !important;
        border-bottom: 1px solid #F3F3F3;
        padding: 0px 0px 3px 0px;
    }

    .content_detail .details .item {
        line-height: 24px;
    }

    .content_detail .details .item .item-right {
        float: right;
    }

    .content .details .item {
        line-height: 24px;
    }

    .content .details .item .item-right {
        float: right;
    }

    .list-data {
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }

    .list-data-other {
        max-height: calc(100vh - 300px);
        overflow-y: auto;
    }

    .list-data-pop {
        max-height: calc(100vh - 218px);
        overflow-y: auto;
    }

    .loading {
        width: 100%;
        text-align: center;
    }

    .bottom_btn {
        /*position: fixed;*/
        /*z-index: 2;*/
        /*bottom: 20px;*/
        width: 200px;
        margin: 15px auto;
        /*margin-left: calc(50% - 100px) ;*/
    }
    .sub1 {
        /*background: #1bd09f;*/
        /*width: 70px;*/
        color: #1890FF!important;
        border: 1px solid #1890FF;
        padding: 2px 3px;
        border-radius: 2px;
        text-align: center;
        margin: 0px 0px 0px 0px;
    }
</style>

<style lang="less">
    .van-pull-refresh__track {
        height: 100vh!important;
    }
</style>