<!-- 价格公示 -->
<template>
    <nav-bar :navbar-data="navbarData"></nav-bar>
    <view :style="{ paddingTop: height +'px', boxSizing: 'border-box', height: '100vh', overflow: 'hidden' }">
        <view class="search-box">
            <uni-search-bar :value="value" placeholder="请输入项目名称搜索" @input="onSearch" />
        </view>
        <view class="choose-type">
            <view :class="onChoose === 1 ? 'onChoose' : ''" @tap="chooseTpye" data-type="1">全部</view>
            <view :class="onChoose === 2 ? 'onChoose' : ''" @tap="chooseTpye" data-type="2">药品</view>
            <view :class="onChoose === 3 ? 'onChoose' : ''" @tap="chooseTpye" data-type="3">材料</view>
            <view :class="onChoose === 4 ? 'onChoose' : ''" @tap="chooseTpye" data-type="4">其他诊疗项目</view>
        </view>
        <scroll-view v-if="priceList.length != 0" scroll-y="true" :style="{ height: 'calc(100% - 210rpx)' }"
            @scrolltolower="scrolltolower" :scroll-into-view="scrollSta" scroll-with-animation>
            <view class="drug-list">
                <view class="drug-card" v-for="(item, index) in priceList" :key="index">
                    <view class="drug-card-desc">
                        <view class="item card-title">{{ item.stockDesc }}{{ item.stockSpec }}<text class="tag"
                                type="primary">{{ item.orderTypeDesc }}</text></view>
                        <view class="item" v-if="item.orderTypeCode === 'D'"><text>生产企业：{{ item.manfDesc }}</text></view>
                        <view class="item" v-if="item.orderTypeCode === 'D'"><text>药品批次：{{ item.batchNo }}</text></view>
                        <view class="item" v-if="item.orderTypeCode != 'D'"><text>计价单位：{{ item.purchUnitDesc }}</text></view>
                        <view class="item" v-if="item.orderTypeCode != 'D'"><text>备注：{{ item.note }}</text></view>
                        <!-- <view v-if="item.orderTypeCode!='D'"><text>物价依据：{{tiem.batchNo}}</text></view> -->
                    </view>
                    <view class="drug-card-price">
                        <view>单价</view>
                        <view>{{ item.purSp }}元</view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import $http from "@/utils/https";
import Util from '@/utils/utils';
import navBar from '@/components/navBar/index'
const app = getApp();

export default {
    components: {
        'nav-bar': navBar
    },
    data() {
        return {
            height: app.globalData.height,
            navbarData: {
                isGoHome: true,
                isGoBack: true,
                title: "价格公示"
            },
            onChoose: 1,
            currentPage: 1,
            type: "",
            inputDesc: "",
            scrollSta: "", ///滚动条位置
            priceList: []
        }
    },
    onLoad: function (options) {
        this.getPriceList()
    },
    methods: {
        showToast(title, icon) {
            uni.showToast({
                icon: icon ? icon : 'none',
                title: title,
                duration: 3000
            })
        },
        chooseTpye(e) {
            let chooseType = +e.currentTarget.dataset.type
            if (chooseType === 1) {
                this.setData({
                    onChoose: chooseType,
                    type: "",
                    currentPage: 1,
                    priceList: []
                }, () => {
                    this.getPriceList()
                })
            } else if (chooseType === 2) {
                this.setData({
                    onChoose: chooseType,
                    type: "D",
                    currentPage: 1,
                    priceList: []
                }, () => {
                    this.getPriceList()
                })
            } else if (chooseType === 3) {
                this.setData({
                    onChoose: chooseType,
                    type: "W",
                    currentPage: 1,
                    priceList: []
                }, () => {
                    this.getPriceList()
                })
            } else {
                this.setData({
                    onChoose: 4,
                    type: "O",
                    currentPage: 1,
                    priceList: []
                }, () => {
                    this.getPriceList()
                })
            }
        },
        ///获取价格列表
        getPriceList: Util.debounce(function () {
            let userData = this.$cache.get('userData');
            let { type } = this
            let data = {
                params: [{
                    hospCode: userData.hisHospID,
                    orderType: type ? type : "",
                    inputDesc: this.inputDesc ? this.inputDesc : ""
                }],
                pagination: [{
                    pageSize: 10,
                    currentPage: this.currentPage
                }]
            }
            uni.showLoading({
                mask: true
            })
            $http.post("urlS", this, {
                namespace: "Y",
                code: "03100209",
                data: data,
                namespace: "Y",
                success: function (res) {
                    uni.hideLoading();
                    let priceList = this.priceList.concat(res.result)
                    if (+res.errorCode === 0) {
                        this.setData({
                            priceList: priceList
                        })
                    } else {
                        this.setData({
                            priceList: priceList
                        })
                    }
                }
            })
        }),
        // 滚动条到底部事件
        scrolltolower() {
            let currentPage = ++this.currentPage;
            let scrollSta = this.priceList && this.priceList.length > 0 ? 'm' + (this.priceList[this.priceList.length - 1].ID) : '';
            this.setData({
                scrollSta,
                currentPage
            }, () => {
                this.getPriceList()
            })
        },
        // 获取当前滚动高度
        handleScroll: function (event) {
            let {
                scrollTop
            } = event.detail
            this.setData({
                scrollHeight: scrollTop
            })
        },
        onSearch(e) {
            this.setData({
                inputDesc: e.detail,
                currentPage: 1,
                priceList: []
            }, () => {
                this.getPriceList()
            })

        },
    }
}
</script>

<style lang="scss">
.search-box {
    background-color: #ffffff;
}

.choose-type {
    padding: 20rpx 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    margin: 8rpx 0;
    &>view {
        border-top: 2rpx solid #0079fe;
        border-left: 2rpx solid #0079fe;
        border-bottom: 2rpx solid #0079fe;
        padding: 10rpx 36rpx;
        color: #0079fe;
        &:first-child {
            border-bottom-left-radius: 10rpx;
            border-top-left-radius: 10rpx;
        }
        &:last-child {
            border-right: 2rpx solid #0079fe;
            border-bottom-right-radius: 10rpx;
            border-top-right-radius: 10rpx;
        }
    }
}
.onChoose {
    background-color: #0079fe;
    color: #ffffff !important;
}

.drug-list {
    padding-bottom: 40rpx;
}

.drug-card {
    margin: 0 30rpx 10rpx 30rpx;
    background-color: #ffffff;
    padding: 20rpx 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-price {
        color: #ff6600;
        padding-right: 30rpx;
        &>view:first-child {
            text-align: center;
            margin-bottom: 10rpx;
        }
    }
}

.drug-card-desc {
    width: 500rpx;
    .item {
        margin-bottom: 10rpx;
        text {
            color: #999999;
            font-size: 28rpx;
        }
        &.card-title {
            font-size: 28rpx;
            .tag {
                display: inline-block;
                background-color: #1989fa;
                color: #fff;
                height: 36rpx;
                line-height: 36rpx;
                font-size: 24rpx;
                padding: 0 6rpx;
                border-radius: 6rpx;
            }
        }
    }
}
</style>