<template>
    <div>
        <mt-header title="领取记录">
            <div  slot="left" @click="goBack">
                <mt-button icon="back"></mt-button>
            </div>
        </mt-header>

        <div>
            <div
                    class="list-data"
                    v-infinite-scroll="loadMore"
                    :infinite-scroll-disabled="loading"
                    infinite-scroll-distance="10"

            >
                <div class="content" v-for="item in detailInfo" :key="item.id">
                    <div class="title" style="display:flex;justify-content: space-between;align-items: center">
                        <div><span>{{item.medicalName}}</span></div>
                        <div v-if="item.lossReportStatus === 0&&!item.lossAuditStatus && item.lossAuditStatus !==0 && item.isVisit != 1" style="min-width: 46px">
                            <div style="border: 1px solid #26a2ff;color: #26a2ff;padding: 0px 8px" @click="toLossReport(item)">报损</div>
                        </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" @click="toLossReport(item)">已驳回</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 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="right"
                    :style="{ width: '100%', height: '100%' }"
                    closeable
            >
                <div>
                <div style="margin-top: 16px;text-align: center;font-size: 18px;color: rgba(69, 90, 100, 0.85);">报损申请</div>
                    <div>
                        <div class="flex_start" style="background: #FAAD14;height: 40px" v-if="clickInfo.lossAuditStatus == 2">

                            <img src="../assets/img/warn_icon.png" style="display: inline-block;width: 20px;height: 20px;margin-left: 16px">
                            <div style="font-size: 13px;color: #ffffff;margin-left: 6px">{{clickInfo.lossReportReasonAdmin}}</div>
                        </div>
                        <div style="margin-top: 12px;font-size: 16px;font-weight: bold;margin-left: 15px;color: rgba(69, 90, 100, 0.6)">领取信息</div>
                        <div class="content_detail">
                            <div class="title">
                                <div><span>{{clickInfo.medicalName}}</span></div>
                            </div>
                            <div class="details">
                                <div class="item">
                                    <label class="item-left">规格:</label>
                                    <label class="item-right">{{clickInfo.specs || '--'}}</label>
                                </div>
                                <div class="item">
                                    <label class="item-left">领取数量：</label>
                                    <label class="item-right">{{clickInfo.receivedNum || '--'}} {{clickInfo.receivedUnit}}</label>
                                </div>
                                <div class="item">
                                    <label class="item-left">领取时间：</label>
                                    <label class="item-right">{{clickInfo.created || '--'}}</label>
                                </div>
                                <div class="item">
                                    <label class="item-left">领取站点：</label>
                                    <label class="item-right">{{clickInfo.netName || '--'}}</label>
                                </div>
                                <div class="item">
                                    <label class="item-left">站点类型：</label>
                                    <label class="item-right">{{clickInfo.netTypeName || '--'}}</label>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div style="margin-top: 12px;font-size: 16px;font-weight: bold;margin-left: 15px;color: rgba(69, 90, 100, 0.6)">报损原因</div>
                            <van-field
                                    v-model="lossReportReasonUser"
                                    rows="3"
                                    autosize
                                    type="textarea"
                                    style="border: 1px solid #F3F3F3;width: 90%;margin: 10px auto 0px;padding: 10px;"
                                    placeholder="请输入报损原因"
                            />
                            <div style="width: 200px;margin: 15px auto;">
                                <mt-button type="primary" @click="addDestroyReport" size="large"> 提交</mt-button>
                            </div>
                        </div>

                    </div>
                </div>
            </van-popup>
        </div>

    </div>
</template>

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

    export default {
        name: "collectRecords",
        components: {NoData},
        data() {
            return {
                loading: false,
                detailInfo: [],
                loadText:'加载中...',
                noDataShow: false,
                popupVisible: false,
                lossReportReasonUser: undefined,
                clickInfo: {},
                param: {
                    telephone: undefined,
                    pageIndex: 0,
                    pageSize: 10
                }
            }
        },
        methods: {
            getRecordInfo(callBack) {
                Indicator.open();
                this.param.telephone = JSON.parse(window.sessionStorage.getItem('mobileTokenIno')).phone
                getUserCollectRecord(this.param).then(({data = {}}) => {
                    const {dataList = []} = data.data
                    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();
                    callBack && callBack()
                }).catch(res => {
                    Toast({
                        message: '系统异常，请联系客服！',
                        duration: 2000
                    });
                    this.loading = false
                }).finally(() => {
                    this.loading = false
                })
            },
            loadMore() {
                this.loading = true
                this.param.pageIndex += 1
                this.getRecordInfo()
            },
            goBack() {
                window.history.go(-1)
            },
            //报损
            toLossReport(item) {
                this.clickInfo = item
                this.popupVisible = true
            },
            addDestroyReport() {
             if (!this.lossReportReasonUser) {
                 Toast({
                     message: '请输入报损原因',
                     duration: 2000,
                     className: 'toastIndex',
                 })
                 return
             }
             const {telephone, ...others} = this.clickInfo
             let par = {
                 ...others,
                 lossAuditStatus: 0,
                 lossReportReasonUser: this.lossReportReasonUser,
             }
                addDestroyApply(par).then(({data}) => {
                    if (data.code == 'SUCCESS') {
                        this.detailInfo.forEach(item => {
                            if (item.id == this.clickInfo.id) {
                                item.lossAuditStatus = 0
                                item.lossReportReasonUser = this.lossReportReasonUser
                            }
                        })
                        this.detailInfo = [...this.detailInfo]
                        this.popupVisible = false
                    } else {
                        Toast({
                            message: '申请失败！',
                            duration: 2000,
                            className: 'toastIndex',
                        })
                    }
                })

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

<style>
    .toastIndex {
        z-index: 9999!important;
    }
</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{
        /*height: calc(100% - 40px);*/
        max-height: calc(100vh - 40px);
        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) ;*/
    }
</style>
