<template>
    <!--pages/order//pages/feeInquiry/feeInquiry.wxml-->
    <nav-bar :navbar-data='navbarData'></nav-bar>

    <view class="page" :style="{marginTop: height +'px'}">
        <van-dropdown-menu active-color="#1989fa">
            <van-dropdown-item :value="value1" :options="admDateList" @change="onSwitch1Change" />
            <van-dropdown-item :value="value2" :options="admTypeList" @change="onSwitch2Change" />
        </van-dropdown-menu>
        <view class="no-data" v-if="!payRecordList[0]">暂无信息</view>
        <view class="order-card" v-for="(item,index) in payRecordList" :key="index" :data-index="item">
            <view class="order-card-head">
                <view class="order-card-title ">
                    <view class="order-card-title-text1">
                        <image v-if="item.admTypeDesc=='线上门诊'" style="width:40rpx;height:30rpx;" :src="imgHost +'/images/icon/order_video.png'" />
                        <image v-if="item.admTypeDesc=='住院'" style="width:32rpx;height:40rpx;" :src="imgHost +'/images/icon/order_hospital.png'" />
                        <image v-if="item.admTypeDesc=='线下门诊'" style="width:40rpx;height:40rpx;" :src="imgHost +'/images/icon/order_offline.png'" />
                        <text style="margin-left:16rpx">{{item.admTypeDesc}}</text>
                    </view>
                    <!-- <view v-if="{{item.payStatus==='已结束'}}" class="order-card-title-text2">已结束</view>
    					<view v-if="{{item.payStatus==='进行中'}}" class="order-card-title-text3">进行中</view> -->
                </view>
            </view>
            <view class="order-card-boby">
                <view>
                    <image style="width:100rpx;height:100rpx;border-radius: 50%;" onerror="imageError" :data-index="index" :src="item.admDocImage"></image>
                </view>
                <view class="order-card-boby-text">
                    <view>医生：{{item.admDocDesc}}</view>
                    <view>就诊人：{{item.patName}}</view>
                    <view>就诊机构：{{item.admLocDesc}}</view>
                    <view>就诊时间：{{item.admDateTime}}</view>
                </view>
            </view>
            <view class="order-card-footer">
                <view style="margin-left:20rpx">
                    <view class="order-card-footer-text1" v-if="item.orderState!='TP'">¥{{item.ordReasonPatAmt}}</view>
                </view>
                <view class="order-card-footer-btn">
                    <view class="btn3" @tap.stop="turnTrans" :data-index="item">费用清单</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import $http from "@/utils/https"
    import Utils from "@/utils/utils"
    import httpConfig from '@/utils/httpConfig'
    import NavBar from '@/components/navBar/index'
    import VanDropdownMenu from '@/components/dropdown-menu/index'
    import VanDropdownItem from '@/components/dropdown-item/index'
    const app = getApp();
    export default {
        components: {
            'nav-bar': NavBar,
            'van-dropdown-menu': VanDropdownMenu,
            'van-dropdown-item': VanDropdownItem,
        },
        data() {
            return {
                height: app.globalData.height,
                imgHost: httpConfig && httpConfig.imgHost,
                windowHost: httpConfig && httpConfig.ipDeault,
                navbarData: {
                    isGoHome: true,
                    isGoBack: true,
                    title: "付款记录"
                },
                admDateList: [],
                admTypeList: [],
                value1: '',
                value2: '',
                payRecordList: []
            }
        },
        onLoad: function(options) {
            this.getSelectList()
        },
        methods: {
            //获取费用下拉框数据
            getSelectList: function() {
                let userData = this.$cache.get('userData');
                let data = {
                    params: [{
                        patID: userData.hisPatID || "",
                        //patID: '36168'
                    }]
                }
                $http.post("urlS", this, {
                    code: "03100202",
                    data: data,
                    namespace: "Y",
                    success: function(res) {
                        if (+res.errorCode === 0) {
                            this.setData({
                                admDateList: res.result.admDateList,
                                admTypeList: res.result.admTypeList,
                                value1: res.result.admDateList && res.result.admDateList[0] && res.result.admDateList[0].value,
                                value2: res.result.admTypeList && res.result.admTypeList[0] && res.result.admTypeList[0].value,
                            }, () => {
                                this.getPayRecordList()
                            })
                        } else {

                        }
                    }
                });
            },

            //获取费用付款记录列表
            getPayRecordList: function() {
                let userData = this.$cache.get('userData');
                let {
                    value1,
                    value2,
                    windowHost
                } = this
                let data = {
                    params: [{
                        hospCode: userData.hisHospID || '',
                        patNumber: userData.hisPatNo || '',
                        //patNumber:'0000036168',
                        stDate: value1 + "-1-1" || '',
                        endDate: value1 + "-12-31" || '',
                        admTypeID: value2 || '',
                        inAdmID: '',
                        userType: 'W'
                    }]
                }
                $http.post("urlS", this, {
                    code: "05100361",
                    data: data,
                    namespace: "Y",
                    success: function(res) {
                        if (+res.errorCode === 0) {
                            let payRecordList = res.result
                            for (var i = 0; i < payRecordList.length; i++) {
                                let url = payRecordList[i] && payRecordList[i].admDocImage ? payRecordList[i].admDocImage : "";
                                payRecordList[i].admDocImage = url.indexOf("http") !== -1 ? url : windowHost + "/images/photo/" + url;
                            }
                            this.setData({
                                payRecordList: payRecordList
                            })
                        } else {
                            this.setData({
                                payRecordList: []
                            })
                        }
                    }
                });
            },
            //切换下拉框
            onSwitch1Change(value) {
                this.setData({
                    value1: value
                }, () => {
                    this.getPayRecordList()
                });
            },
            //切换下拉框
            onSwitch2Change(value) {
                this.setData({
                    value2: value
                }, () => {
                    this.getPayRecordList()
                });
            },
            //跳转费用清单
            turnTrans(e) {
                let detailObj = e.currentTarget.dataset.index
                uni.navigateTo({
                    url: "../feeInquiryDetail/feeInquiryDetail",
                    success: (res) => {
                        res.eventChannel.emit('detailObj', {
                            detailObj: detailObj
                        })
                    },
                })
            },
            imageError(e) {
                let {
                    imgHost,
                    payRecordList
                } = this;
                var index = e.target.dataset.index;
                payRecordList[index].admDocImage = imgHost + "/images/icon/avatar_doctor_act.png";
                this.setData({
                    payRecordList: payRecordList
                });
            },
        }
    }
</script>

<style lang="scss">
    $color_9: #999999;
    $color_3: #333333;
    $color_6: #666666;
    $color_e5: #E5E5E5;
    $color_blue: #007AFF;
    $color_green: #20A735;
    $color_red: #FB3349;
    $color_white: #FFFFFF;

    @mixin font($fontSize, $lineHeight, $color) {
        font: {
            size: $fontSize;
            family: PingFangSC-Regular, PingFang SC;
            weight: 400;
        }

        line-height: $lineHeight;
        color: $color;
    }

    @mixin displayFlex($alignItems, $justifyContent) {
        display: flex;
        align-items: $alignItems;
        justify-content: $justifyContent;
    }

    .no-data {
        padding: 30rpx;
        text-align: center;
    }

    .page {
        padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
    }

    .order {
        box-sizing: border-box;
    }

    .order-card {
        padding: 30rpx;
        margin-top: 20rpx;
        background: $color_white;
    }

    .order-card-title {
        @include displayFlex(center, space-between);
    }

    .order-card-title-text1 {
        @include displayFlex(center, flex-start);
        @include font(28rpx, 40rpx, $color_3);
    }

    .order-card-title-text2 {
        @include font(26rpx, 36rpx, $color_green);
    }

    .order-card-title-text3 {
        @include font(26rpx, 36rpx, $color_blue);
    }

    .order-card-title-text4 {
        @include font(26rpx, 36rpx, $color_9);
    }

    .order-card-title-text5 {
        @extend .order-card-title-text4;
        margin-top: 6rpx;
    }

    .order-card-head {
        border-bottom: 2rpx solid $color_e5;
        padding-bottom: 20rpx;
    }

    .order-card-boby {
        padding: 20rpx 0;
        display: flex;
        align-items: center;
        border-bottom: 2rpx solid $color_e5;
    }

    .order-card-boby-text view {
        @include font(26rpx, '', '');
        color: #333333;
        line-height: 40rpx;
        margin-bottom: 6rpx;
        margin-left: 30rpx;
    }

    .order-card-footer {
        @include displayFlex(center, space-between);
        margin-top: 12rpx;
    }

    .order-card-footer-text1 {
        @include font(28rpx, 40rpx, $color_red);
    }

    .order-card-footer-text2 {
        @include font(22rpx, 32px, $color_9);
    }

    .order-card-footer-btn {

        .btn {
            @include displayFlex(center, center);
            min-width: 140rpx;
            min-height: 56rpx;
            border-radius: 8rpx;
            line-height: 36rpx;
            margin-left: 30rpx;

            border: {
                width: 2rpx;
                style: solid;
            }

            @include font(26rpx, '', '');
        }

        .btn1 {
            @extend .btn;
            color: $color_blue;
            background: $color_white;
            border-color: $color_blue;
        }

        .btn2 {
            @extend .btn;
            background: $color_white;
            border-color: $color_6;
        }

        .btn3 {
            @extend .btn;
            color: $color_white;
            background: $color_blue;
            border-color: $color_blue;
        }
    }
</style>