<template>
    <nav-bar :navbar-data="navbarData" />
    <view class="healthCard" :style="{ marginTop: 'calc('+ height +'px + 18rpx)', marginBottom: '20rpx' }">
        <view class="title">我的健康卡
            <text class="title-man" @tap="isDeleteData">{{ isDelete ? '完成' : '管理' }}</text>
        </view>
        <view class="content" v-for="(item, index) in visitorData" :key="index" :data-id="item.patID">
            <text>{{ item.patName }}</text>
            <text>{{ item.idCardNo }}</text>
            <text class="content-select" @tap="deleteData(item.patID)">{{ isDelete ? '删除' : '选择' }}</text>
        </view>
        <view class="button">
            <van-button type="info" @tap="onClickEvent">添加就诊人</van-button>
        </view>
        <!-- <view class="button">
        <van-button type="default">添加社保卡</van-button>
        </view> -->
    </view>
</template>

<script>
import $http from "@/utils/https";
import Util from '@/utils/utils';
import navBar from '@/components/navBar/index'
import VanButton from '@/components/button/index'
const app = getApp()
export default {
    components: {
        'nav-bar': navBar,
        'van-button': VanButton
    },
    data() {
        return {
            height: app.globalData.height,
            navbarData: {
                isGoHome: true,
                isGoBack: true,
                title: "健康卡"
            },
            isDelete: false,
        }
    },
    onLoad: function (options) {
        this.getVisitorDataList();
    },
    methods: {
        onClickEvent: function () {
            uni.navigateTo({
                url: '/pages/mine/addCard/visitorEntry/visitorEntry'
            })
        },

        // 请求就诊人列表数据
        getVisitorDataList: function () {
            let data = {
                params: []
            }
            $http.post("urlS", this, {
                code: "01030003",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setData({
                            visitorData: res.result.rows
                        });
                    } else {
                        this.setData({
                            visitorData: []
                        });
                    }
                }
            });
        },

        isDeleteData: function () {
            this.setData({
                isDelete: !this.isDelete
            })
        },

        // 删除或者跳转健康卡
        deleteData: function (id) {
            if (this.isDelete) {
                Dialog.confirm({
                    title: '删除健康卡',
                    message: '确定删除？',
                })
                    .then(() => {
                        let data = {
                            params: [{
                                patID: event.target.dataset ? event.target.dataset.key : ''
                            }]
                        }
                        $http.post("urlS", this, {
                            code: "01030007",
                            data: data,
                            success: function (res) {
                                if (+res.errorCode === 0) {
                                    Util.showToast(res.errorMessage,'success')
                                    this.getVisitorDataList();
                                }
                            }
                        });
                    })
                    .catch(() => {
                        // on cancel
                    });
            } else {
                uni.navigateTo({
                    url: '/pages/mine/addCard/cardDetail/cardDetail?id=' + id
                })
            }
        },
    }
}
</script>

<style>
.healthCard {
  height: 100%;
  padding: 15rpx;
}

.healthCard image {
  height: 30rpx;
  width: 30rpx;
}

.healthCard .content {
  background-color: #fff;
  margin: 20rpx 0;
  padding: 20rpx;
  height: 60rpx;
  line-height: 60rpx;
}

.healthCard .button {
  width: 100%;
  text-align: center;
  margin-top: 72rpx;
}

.healthCard .button button {
  width: 100%;
  margin: 10rpx 0;
  border-radius: 14rpx;
  height: 100rpx;
  font-size: 32rpx;
}

.healthCard .title-man {
  float: right;
  color: #1890FF;
}

.healthCard .content-select {
  float: right;
  color: #1890FF;
}
</style>