<!-- 手术预约记录 -->
<template>
    <div class="wrapper">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多记录了" @load="onLoad">
            <div v-for="(item,index) in list" :key="index" class="item" @click="jump(item.ID)">
                <!-- 信息 -->
                <div class="info">
                    <img
                        :src="item.HeadImg||require('@/assets/images/default.png')"
                        alt="用户头像"
                        class="img"
                    />
                    <div class="other">
                        <div class="name">
                            {{item.FamilyMemberName}}
                            <span>{{item.UserRelationship |filterRelation}}</span>
                        </div>
                        <div
                            class="date"
                        >{{item.OperationTime |filterTime}} {{item.OperationTime | getWeek}}</div>
                    </div>
                </div>
                <!-- 状态 -->
                <div class="status">{{item.Status | getSurgeryStatus}}</div>
            </div>
        </van-list>
    </div>
</template>
<script>
    export default {
        name: "surgeryList",
        data() {
            return {
                list: [],
                loading: false,
                finished: false,
                pageIndex: 0 // 当前页数
            };
        },
        methods: {
            onLoad() {
                this.pageIndex++;
                this.$http
                    .GetByOPSOrderList({
                        pageIndex: this.pageIndex,
                        pageSize: 10,
                        Status: 0 //0=>请求全部状态  1=>待支付 2=>待安排  3=>预约成功 4 =>预约失败
                    })
                    .then(({ data }) => {
                        this.loading = false;
                        if (data.IsSuccess) {
                            this.list = [...this.list, ...data.ResultObject];
                            if (data.ResultObject.length < 10) {
                                this.finished = true;
                            }
                        } else {
                            this.$toast(data.ResultMsg);
                        }
                    });
            },
            jump(id) {
                // 跳转到详情页面
                this.$router.push({
                    name: "surgeryDetail",
                    query: { id }
                });
            }
        }
    };
</script>
<style lang='less' scoped>
    .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .wrapper {
        padding: 0.2rem;
        .item {
            padding: 0.4rem 0.2rem;
            min-height: 1rem;
            background-color: #ffffff;
            margin-bottom: 0.2rem;
            box-shadow: 0.03rem 0.04rem 0.1rem 0rem rgba(218, 218, 218, 0.25);
            .flex();

            .info {
                .flex();
                justify-content: flex-start;
                font-size: 0.32rem;
                color: #333333;
                line-height: 1.5;
                .img {
                    width: 1rem;
                    height: 1rem;
                    border-radius: 50%;
                    overflow: hidden;
                }
                .other {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    justify-content: space-between;
                    text-align: left;
                    margin-left: 0.2rem;
                    .name {
                        span {
                            font-size: 0.22rem;
                            display: inline-block;
                            padding: 0.05rem 0.1rem;
                            color: #fff;
                            background: #4ca0ff;
                            border-radius: 0.2rem;
                            letter-spacing: 0.05rem;
                        }
                    }
                }
            }

            .status {
                color: red;
                font-size: 0.28rem;
            }
        }
    }
</style>