<template>
    <nav-bar :navbar-data="navbarData"></nav-bar>
    <view class="container" :style="{ marginTop: height +'px' }">
        <view v-if="pageLoading">
            <view class="skeleton-box">
                <van-skeleton title row="4" />
                <van-skeleton title avatar avatar-size="50px" row="4" />
                <van-skeleton title row="4" />
                <van-skeleton title avatar avatar-size="50px" row="4" />
            </view>
        </view>
        <view v-else>
            <view class="filter-list">
                <view class="filter-item" :class="pickerActiveIndex == 0 ? 'active' : ''" data-type="jzr" @tap="filterTap">
                    <view class="itembox">
                        <text class="t">{{ jzrActiveIndex == null ? '暂无' : admSelectData[jzrActiveIndex].patName }}</text>
                        <uni-icons class="icon" type="bottom" />
                    </view>
                </view>
                <view class="filter-item" :class="pickerActiveIndex == 1 ? 'active' : ''" data-type="ks" @tap="filterTap">
                    <picker mode="selector" data-type="ks" :value="ksIndex" :range="locData" range-key="descripts"
                        @change="bindPickerChange">
                        <view class="itembox">
                            <text class="t">{{ locData[ksIndex] && locData[ksIndex].descripts }}</text>
                            <uni-icons class="icon" type="bottom" />
                        </view>
                    </picker>
                </view>
                <view class="filter-item" :class="pickerActiveIndex == 2 ? 'active' : ''" data-type="date" @tap="filterTap">
                    <picker mode="date" fields="month" data-type="date" @change="bindPickerChange" :value="resCurrentMonth"
                        start="2015-01-01" :end="maxDate">
                        <view class="itembox">
                            <text class="t">{{ resCurrentMonth }}</text>
                            <uni-icons class="icon" type="bottom" />
                        </view>
                    </picker>
                </view>
                <view class="filter-item" :class="pickerActiveIndex == 3 ? 'active' : ''" data-type="type" @tap="filterTap">
                    <picker class="itembox" mode="selector" data-type="type" :value="reportTypeIndex"
                        :range="reportTypeData" range-key="descripts" @change="bindPickerChange">
                        <view class="itembox">
                            <text class="t">{{ reportTypeData[reportTypeIndex] && reportTypeData[reportTypeIndex].descripts
                            }}</text>
                            <uni-icons class="icon" type="bottom" />
                        </view>
                    </picker>
                </view>
            </view>
            <view class="report-list">
                <view class="report-item" v-for="(item, index) in reportRecordData" :key="index" :data-index="index"
                    @tap="toDetailTap">
                    <view class="t">
                        <text class="case-name">{{ item.itemDesc }}</text>
                        <text class="status">{{ item.status }}</text>
                    </view>
                    <view class="item-btm">
                        <view class="btm-l">
                            <view class="name">患者姓名：{{ item.patName }}</view>
                            <view class="date">报告时间：{{ item.reportDate }} {{ item.reportTime }}</view>
                        </view>
                        <uni-icons type="right" size="16px" />
                    </view>
                </view>
                <view class="no-data" v-if="reportRecordData.length === 0">
                    <image :src="imgHost + '/images/icon/no-data.png'"></image>
                    <text>暂无数据</text>
                </view>
                <!-- <loadmore show="{{ true }}" status="{{ loadMoreStatus }}" fontSize="24" iconColor="#1890FF" loadingColor="#1890FF" line="{{ false }}" /> -->
            </view>
        </view>
    </view>

    <van-popup class="popup" :show="showPicker" position="bottom" @close="onPopupClose">
        <view class="popup-box">
            <view class="popup-header">
                <!-- <view class="cancel" bindtap="onPopupClose"></view> -->
                <view class="title">请选择就诊人</view>
                <view class="confirm" @tap="onPopupClose">
                    <uni-icons type="clear" size="20px" />
                </view>
            </view>
            <view class="patient-list">
                <view v-for="(item, index) in admSelectData" :key="index" :data-index="index"
                    :class="jzrActiveIndex === index ? 'patient-item active' : 'patient-item'" @tap="patientChange">
                    <view class="item-l">
                        <view class="name">{{ item.patName }}</view>
                    </view>
                    <view class="card-status">{{ item.hisPatNo }}</view>
                </view>
            </view>
        </view>
    </van-popup>
</template>

<script>
import $http from "@/utils/https";
import Util from '@/utils/utils';
import httpConfig from '@/utils/httpConfig'
import navBar from '@/components/navBar/index'
import VanSkeleton from '@/components/skeleton/index'
import VanPopup from '@/components/popup/index'

import {
    getAdmSelectData,
    getLocList,
    loadCheckStatus
} from '@/utils/common'
const app = getApp();
const year = new Date().getFullYear();
const month = new Date().getMonth() + 1;
const days = new Date().getDate();
export default {
    components: {
        'nav-bar': navBar,
        'van-skeleton': VanSkeleton,
        'van-popup': VanPopup
    },
    data() {
        return {
            pageLoading: true,
            height: app.globalData.height,
            imgHost: httpConfig && httpConfig.imgHost,
            windowHost: httpConfig && httpConfig.ipDeault,
            navbarData: {
                isGoHome: true,
                isGoBack: true,
                title: "报告查询"
            },
            loads: [true, true, true, true], // load状态
            userData: [],
            loadMoreStatus: 'nomore', // loadmore:加载更多  loading:正在加载  nomore:没有更多了
            pickerActiveIndex: null,
            showPicker: false, // 是否显示Picker选择框
            jzrActiveIndex: null,
            // 就诊人数据集
            admSelectData: [],
            ksIndex: 0,
            // 科室数据集
            locData: [{
                id: '',
                descripts: '全部科室'
            }],
            currentMonth: year + '-' + (month < 10 ? '0' + month : month) + '-01', // 当前月份
            resCurrentMonth: year + '-' + (month < 10 ? '0' + month : month),
            maxDate: year + '-' + (month < 10 ? '0' + month : month) +'-'+ (days < 10 ? '0' + days : days), // 最大月份
            reportTypeIndex: 0,
            // 类型数据集
            reportTypeData: [{
                id: '',
                descripts: '全部'
            }],
            reportRecordData: [], // 报告项目记录数据集
        }
    },
    onLoad(options) {
        this.initData() // 初始化数据
    },
    methods: {
        // 初始化就诊人数据
        initData: async function () {
            const self = this
            const {
                admSelectData
            } = app.globalData
            const userData = this.$cache.get('userData')
            uni.showLoading({
                title: '加载中...',
            })
            if (userData) self.userData = userData
            if (admSelectData) {
                self.loads[0] = false
                self.admSelectData = admSelectData
                self.setAdmData()
            } else {
                await getAdmSelectData(self).then(data => {
                    self.loads[0] = false
                    self.admSelectData = data
                    typeof data !== 'boolean' && self.setAdmData()
                }).catch(err => {
                    self.loads[0] = false
                })
            }

            // 科室数据获取
            await getLocList(self).then(data => {
                self.loads[1] = false
                self.locData = data
            }).catch(err => {
                self.loads[1] = false
            })

            // 类型数据获取
            await self.getType().then(data => {
                self.loads[2] = false
            }).catch(err => {
                self.loads[2] = false
            })

            // 获取检验记录列表
            await self.getInspectionData().then(res => {
                self.loads[3] = false
            }).catch(err => {
                self.loads[3] = false
            })

            // 检测数据是否加载完成
            loadCheckStatus(self).then(bol => {
                self.pageLoading = false
            })
        },
        // 设置处理就诊人数据
        setAdmData() {
            const self = this
            const {
                userData,
                admSelectData
            } = self
            if (userData && admSelectData) {
                admSelectData.map((item, index) => {
                    if (item.hisPatNo === userData.hisPatNo) self.jzrActiveIndex = index
                })
            }
        },
        // 切换就诊人
        patientChange(e) {
            const self = this
            const {
                index
            } = e.currentTarget.dataset
            self.jzrActiveIndex = index
            setTimeout(() => {
                self.onPopupClose()
                self.getInspectionData()
            }, 300)
        },
        // 筛选
        filterTap(e) {
            const {
                type
            } = e.currentTarget.dataset
            switch (type) {
                case 'jzr':
                    this.pickerActiveIndex = 0
                    this.showPicker = true
                    break;
                case 'ks':
                    this.pickerActiveIndex = 1
                    break;
                case 'date':
                    this.pickerActiveIndex = 2
                    break;
                case 'type':
                    this.pickerActiveIndex = 3
                    break;
            }
        },
        // 这只弹窗是否显示
        onPopupClose() {
            this.setData({
                showPicker: !this.showPicker
            })
        },
        // picker变化处理
        bindPickerChange(e) {
            let val = e.detail.value
            const {
                type
            } = e.currentTarget.dataset
            switch (type) {
                case 'ks':
                    this.ksIndex = val
                    break;
                case 'date':
                    val = val.indexOf('/') > -1?val.replace('/','-'):val
                    this.currentMonth = val + '-01'
                    this.resCurrentMonth = val
                    break;
                case 'type':
                    this.reportTypeIndex = val
                    break;
            }
            this.getInspectionData()
        },
        // 获取检验、检查类型
        getType() {
            const self = this
            return new Promise((resolve, reject) => {
                let data = {
                    params: [{}]
                }
                $http.post("urlS", self, {
                    namespace: "Y",
                    code: "03100220",
                    data: data,
                    success: function (res) {
                        if (+res.errorCode === 0) {
                            var data = [{
                                id: '',
                                descripts: "全部"
                            }]
                            self.reportTypeData = data.concat(res.data)
                            resolve(res.data)
                        } else {
                            resolve([])
                        }
                    },
                    fail(err) {
                        reject(err)
                    }
                })
            })
        },
        // 获取检测数据
        getInspectionData() {
            const self = this
            const {
                jzrActiveIndex,
                admSelectData,
                ksIndex,
                locData,
                resCurrentMonth,
                reportTypeIndex,
                reportRecordData,
                reportTypeData
            } = this
            return new Promise((resolve, reject) => {
                let data = {
                    params: [{
                        "patNo": jzrActiveIndex == null ? '' : admSelectData[jzrActiveIndex].hisPatNo, // "0000001464", //
                        "admLocID": ksIndex == 0 ? '' : locData[ksIndex].id, // '', //
                        "admDate": resCurrentMonth, // '2022-11', // 
                        "admID": "",
                        "type": !reportTypeIndex ? '' : reportTypeData && reportTypeData[reportTypeIndex].id
                    }]
                }
                $http.post("urlS", self, {
                    namespace: "Y",
                    code: "03100216",
                    data: data,
                    success: function (res) {
                        if (+res.errorCode === 0) {
                            self.reportRecordData = res.data
                            resolve(res.data)
                        } else {
                            resolve([])
                        }
                    },
                    fail(err) {
                        reject(err)
                    }
                })
            })
        },
        // 调整详情页
        toDetailTap(e) {
            const index = e.currentTarget.dataset.index
            const {
                reportRecordData
            } = this
            app.globalData.reportRecordCurrentData = reportRecordData[index]
            uni.navigateTo({
                url: '/pages/index/pages/reportRetrieval/inspection/detail/detail',
            })
        },
    }
}
</script>

<style>
.container {
  padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
}
.filter-list {
  display: flex;
  background-color: #fff;
}
.filter-item {
  flex: 17;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80rpx;
}
.filter-item:nth-child(2) {
  flex: 24;
}
.itembox {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-bottom: 4rpx solid transparent;
  height: 80rpx;
}
.itembox .icon {
  margin-left: 12rpx;
}
.filter-item .itembox .t {
  display: inline-block;
  max-width: 176rpx;
  height: 28rpx;
  line-height: 28rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 28rpx;
}
.filter-item.active .itembox{
  border-bottom-color: #007FCC;
}
.filter-item.active .itembox text,
.filter-item.active .itembox .icon{
  color: #007FCC;
}
.popup-box {
   width: 100%;
   background: #fff;
}
.popup-header {
  display: flex;
  justify-content: space-between;
}
.popup-header .cancel,
.popup-header .confirm {
  padding: 20rpx;
  color: #666666;
}

.popup-header .confirm {
  padding: 20rpx;
  color: #007FCC;
}
.popup-header .title {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
}
.patient-list {
  display: flex;
  flex-direction: column;
  padding: 0 24rpx;
}
.patient-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  border: 1px solid #9F9F9F;
  border-radius: 10px;
  margin-bottom: 30rpx;
}
.patient-item .name {
  line-height: 40rpx;
}
.patient-item .sub-desc text {
  font-size: 24rpx;
  color: rgba(0,0,0,0.3);
}
.patient-item .sub-desc text.card-name {
  margin-right: 30rpx;
}
.patient-item .item-l {
  display: flex;
  flex-direction: column;
}
.patient-item .card-status {
  font-size: 28rpx;
  color: rgba(0,0,0,0.3);
}
.patient-item.active {
  border-color: #007FCC;
}
.patient-item.active .card-status,
.patient-item.active .name{
  color: #007FCC;
  font-weight: 700;
}
.report-list {
  padding: 0 24rpx;
}
.report-item {
  display: flex;
  flex-direction: column;
  margin-top: 30rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 16rpx 24rpx;
}
.report-item .t {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}
.report-item .t .case-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
}
.report-item .t .status {
  font-size: 24rpx;
  color: #007FCC;
}
.report-item .item-btm {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.report-item .item-btm .btm-l .name,
.report-item .item-btm .btm-l .date {
  font-size: 24rpx;
  line-height: 36rpx;
  color: rgba(0,0,0,0.5);
}
.report-item .item-btm .btm-l .name {
  margin-bottom: 4rpx;
}
.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 144rpx;
}
.no-data image {
  width: 259rpx;
  height: 219rpx;
}
.no-data text {
  font-size: 36rpx;
  color: #007FCC;
  margin-top: 30rpx;
}
</style>
