<template>
    <view>
        <view class="choose-patient-container" v-if="modeStyle">
            <view class="content-l">
                <text class="name">{{ selectedItem.patDesc ? selectedItem.patDesc : '--' }}</text>
                <text class="card-no">就诊卡：{{ selectedItem.hisPatNo ? selectedItem.hisPatNo : '--' }}</text>
            </view>
            <view class="content-r">
                <van-button class="btn" type="info" size="mini" round plain @tap.native="onShowPicker">切换就诊人</van-button>
            </view>
        </view>
        <van-popup :show="showPopup" position="bottom" custom-style="height: 60%;">
            <view class="popup-container">
                <view class="popup-head">
                    <view class="cancel"></view>
                    <view class="title">请选择就诊人</view>
                    <view class="confirm" @tap="onConfirm">
                        <van-icon name="clear" size="20px" />
                    </view>
                </view>
                <view class="patient-list">
                    <view class="patient-item" @tap="onPatientChange" :data-item="item" v-for="(item, index) in admListData" :key="index">
                        <view class="patient-item-l">
                            <text class="name">{{ item.patName }}</text>
                            <text class="card-no">就诊卡：{{ item.hisPatNo }}</text>
                        </view>

                        <view class="patient-item-r">
                            <van-icon v-if="item.selected" name="success" size="20px" color="#1677ff" />
                        </view>
                    </view>
                </view>
                <view class="popup-bottom" @tap="toAddCard">
                    <view class="add-patient">添加就诊人</view>
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script>
import VanButton from "@/components/button/index";
import VanIcon from "@/components/icon/index";
import { getAdmSelectData, judgeWhetherThePatientExists } from '@/utils/common';
const app = getApp();
export default {
	components: {
		"van-button": VanButton,
		"van-icon": VanIcon
	},
    data() {
        return {
            showPopup: false,
            admListData: [],
            selectedItem: null
        };
    },
    props: {
        hisPatID: String,
        backUrl: String,
        modeStyle: {
            type: Boolean,
            default: true
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        handlePageShow: function () {
            this.initComponent(); // 初始化组件数据
        },

        attached: function () {
            this.initComponent(); // 初始化组件数据
        },

        initComponent() {
            return new Promise((resolve, reject) => {
                getAdmSelectData(this, app).then((data) => {
                    if (data) {
                        const admListData = data.map((item) => {
                            item['selected'] = false;
                            return item;
                        });
                        app.globalData.admSelectData = admListData;
                        judgeWhetherThePatientExists(admListData, this.hisPatID).then((res) => {
                            const userData = uni.getStorageSync('userData');
                            this.setData({
                                admListData: res.admListData,
                                selectedItem: userData
                            });
                        });
                    }
                    resolve();
                });
            });
        },

        onPatientChange(e) {
            const self = this;
            const { item } = e.currentTarget.dataset;
            judgeWhetherThePatientExists(this.admListData, item.hisPatID).then((res) => {
                // console.log('匹配到的就诊人：', res)
                const userData = uni.getStorageSync('userData');
                setTimeout(() => {
                    self.setData(
                        {
                            showPopup: false,
                            admListData: res.admListData,
                            selectedItem: userData
                        },
                        () => {
                            self.$emit('selectedChange');
                        }
                    );
                }, 200);
            });
        },

        onShowPicker() {
            this.setData({
                showPopup: !this.showPopup
            });
        },

        onCancel() {
            this.setData({
                showPopup: false
            });
        },

        onConfirm(e) {
            this.selectedItem;
            const userData = uni.getStorageSync('userData');
            if (userData) {
            }
            this.setData({
                showPopup: false
            });
        },

        // 跳转建卡页
        toAddCard() {
            uni.navigateTo({
                url: '/pages/mine/addCard/visitorEntry/visitorEntry'
            });
        }
    },
    created: function () {}
};
</script>
<style>
.choose-patient-container {
    box-sizing: border-box;
    width: 100%;
    height: 118rpx;
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    /* border-bottom: 20rpx solid #f7f7f7; */
    background-color: #fff;
}
.content-l {
    display: flex;
    flex-direction: column;
}
.content-l text {
    font-size: 24rpx;
}
.content-l .name {
    font-size: 32rpx;
}
.content-l .card-no {
    color: #a1a1a1;
}
.btn button {
    padding: 0 20rpx;
}

.popup-container {
    height: 100%;
}

.popup-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 82rpx;
    border-bottom: 1rpx solid #f2f2f2;
}
.popup-head .title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
}
.popup-head .confirm,
.popup-head .cancel {
    display: block;
    width: 40rpx;
    height: 40rpx;
    padding: 20rpx;
    color: #a1a1a1;
}

.patient-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 174rpx);
}
.patient-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12rpx 30rpx;
    border-bottom: 1rpx solid #f2f2f2;
}
.patient-item:active {
    background-color: #f2f2f2;
}
.patient-item:last-child {
    border-bottom: 0;
}
.patient-item-l {
    display: flex;
    flex-direction: column;
}
.patient-item-l .name {
    font-size: 32rpx;
    padding-bottom: 8rpx;
}
.patient-item-l .card-no {
    font-size: 24rpx;
    color: #a1a1a1;
}

.popup-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88rpx;
    border-top: 1px solid #f2f2f2;
}
.add-patient {
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #1677ff;
}
</style>
