<template>
    <div class='h-full disease-visit' ref='list'>
        <van-pull-refresh v-model='loadingRefresh' @refresh='onRefresh'
                          :disabled='isRefreshDisable' style='min-height: 100%'>
            <van-list
                v-model:loading='loading'
                :finished='finished'
                :finished-text="list.length ? '没有更多了' : ''"
                :immediate-check='false'
                @load='onMore'
            >
                <div class='flex flex-col'>
                    <div class='flex flex-col gap-y-2.5 py-3 px-4 mb-3 doc-list-card'
                         v-for='item in list' :key='item.id' @click='toDetail(item)'>
                        <div>
                            <span class='label'>服务类型</span>
                            <span>{{ item.serveTypeName || '-' }}</span>
                        </div>
                        <div>
                            <span class='label'>随访日期</span>
                            <span>{{ item.serveDate }}</span>
                        </div>
                        <div>
                            <span class='label'>随访分类</span>
                            <span>{{ item.visitTypeName || '-' }}</span>
                        </div>
                        <div v-if='item.patientNo'>
                            <span class='label'>就诊号</span>
                            <span>{{ item.patientNo || '-' }}</span>
                        </div>
                        <div class='text-ellipsis' v-if='item.diagnose'>
                            <span class='label'>诊断</span>
                            <span>{{ item.diagnose || '-' }}</span>
                        </div>
                        <div v-if="item.serveType === 3 || item.serveType === 4">
                            <span class="label">评估结果</span>
                            <span v-if="item.evaluationResults === 1" style="color: #D9001B">{{ item.evaluationResultsName }}</span>
                            <span v-else-if="item.evaluationResults === 2" style="color: #F59A23">{{ item.evaluationResultsName }}</span>
                            <span v-else-if="item.evaluationResults === 3" style="color: #70B603">{{ item.evaluationResultsName }}</span>
                            <span v-else>-</span>
                        </div>
                        <div v-if='item.bloodPressure'>
                            <span class='label'>{{ columnTitle }}</span>
                            <span>{{ item.bloodPressure || '-' }}</span>
                        </div>
                        <div>
                            <span class='label'>数据来源</span>
                            <span>{{ item.sourceName || '-' }}</span>
                        </div>
                        <div>
                            <span class='label'>随访医生</span>
                            <span>{{ item.serveDoctorName || '-' }}</span>
                        </div>
                        <div class='text-ellipsis'>
                            <span class='label'>随访机构</span>
                            <span>{{ item.serveUnitName || '-' }}</span>
                        </div>
                        <div class='divider'></div>
                        <div class='bt-group'>
                            <van-button round size='small' class='doc-btn-primary' @click.stop='toDetail(item)'>详情
                            </van-button>
                            <!-- 评估 -->
                            <van-button round size='small' class='doc-btn-primary' @click.stop='toEvaluation(item)' v-if='!(item.allowUpdate !==1 || item.serveType == 5 || item.diseaseType === 7)'>评估</van-button>
                            <van-button round size='small' class='doc-btn-primary' @click.stop='editBtn(item)'
                                        v-if='!(item.allowUpdate !==1 || item.serveType == 5)'>修改
                            </van-button>
                            <van-button round size='small' class='doc-btn-red' @click.stop='delBtn(item)'
                                        v-if='!(item.allowUpdate !==1 || item.serveType == 5)'>删除
                            </van-button>
                        </div>
                    </div>
                </div>
            </van-list>
            <div class='text-center shrink-0 empty' v-if='!list.length'>
                <img src='@/assets/image/doctor/empty.png' alt='' style='width: 1.2rem;'>
                <p>暂无数据</p>
            </div>
        </van-pull-refresh>
        <van-popup v-model:show="showEvaluation" position="bottom" :close-on-click-overlay="false">
            <div class="p-4" style="height: 100%">
                <div class="flex justify-between items-center mb-4 pop-title">
                    <div class="greyColor" @click="cancelEvaluation">取消</div>
                    <div>风险评估</div>
                    <div class="blueColor" @click="evaluationConfirm">确定</div>
                </div>
                <div style="height: 360px; overflow: auto">
                    <!-- <CheckBtn
                        
                        column-1
                        :options="evaluationList"
                        v-model:value="evaluation"
                        :fieldNames="{ text: 'name', value: 'value' }"
                    /> -->
                    <div :class="['radio-box', evaluation === 1 ? 'active' : '']" @click="clickBtn(1)">
                        <span style="color: #D9001B">【红】</span>
                        <span>出现危急症等情况，连续随访、跟踪服务，并做好及时上转治疗</span>
                    </div>
                    <div :class="['radio-box', evaluation === 2 ? 'active' : '']" @click="clickBtn(2)">
                        <span style="color: #F59A23">【黄】</span>
                        <span>出现靶器官损害，或出现并发症，每2月随访1次</span>
                    </div>
                    <div :class="['radio-box', evaluation === 3 ? 'active' : '']" @click="clickBtn(3)">
                        <span style="color: #70B603">【绿】</span>
                        <span>无靶器官损害，无并发症</span>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { delDiagnose, deleteVisitRecord, getVisitManageList, addEvaluationResults } from '@/api/doctor/disease.js'
import { useStore } from '@/doctor/store'
import { showConfirmDialog } from 'vant'
import { delHighVisit } from '@/api/doctor/highVisitApi'
// import CheckBtn from '@/doctor/components/checkBtn/CheckBtn.vue'
// import { showNotify } from 'vant'
import dayjs from 'dayjs'

export default {
    // components: { CheckBtn },
    inject: ['residentInfo'],
    props: {
        diseaseType: Number
    },
    data() {
        return {
            store: useStore(),
            list: [],
            pagination: {
                total: 0,
                pageIndex: 1,
                pageSize: 8
            },
            loading: false,
            finished: false,
            loadingRefresh: false,
            isRefreshDisable: false,

            showEvaluation: false,
            evaluationList: [],
            evaluation: undefined,
            relationId: undefined
        }
    },
    computed: {
        residentInfoId() {
            return this.residentInfo().residentInfoId
        },
        authInfo() {
            return this.store.authInfo
        },
        columnTitle() {
            if (this.diseaseType === 2) {
                return `空腹静脉血糖`
            } else if (this.diseaseType === 5) {
                return `FEV1`
            } else if (this.diseaseType === 6) {
                return `水肿`
            } else {
                return `血压`
            }
        }
    },
    created() {
        this.load()
    },
    mounted() {
        const list = this.$refs.list
        list.addEventListener('scroll', () => {
            if (list.scrollTop > 0) {
                this.isRefreshDisable = true
            } else {
                this.isRefreshDisable = false
            }
        })
    },
    methods: {
        load(loading = true) {
            const query = {
                // pageIndex: this.pagination.pageIndex,
                // pageSize: this.pagination.pageSize,
                residentInfoId: this.residentInfoId,
                diseaseType: this.diseaseType
            }
            getVisitManageList(query, loading).then(res => {
                if (this.pagination.pageIndex === 1) {
                    this.list = []
                }
                this.list = this.list.concat(res.data || [])
                this.pagination.total = res.data.total || 0
                this.finished = this.list.length >= this.pagination.total
            }).finally(() => {
                this.loading = false
                this.loadingRefresh = false
            })
        },
        onMore() {
            this.pagination.pageIndex++
            this.load(false)
        },
        onRefresh() {
            this.pagination.pageIndex = 1
            this.load(false)
        },
        toDetail(record) {
            if (!record) return
            if (record.id == null) {
                this.$message.info('暂时无法查看 详情信息')
                return
            } else if (record.source == 7 || record.source == 4) {
                //数据来源为his或者公卫时展示 `请在医生PC端查看详情`
                showConfirmDialog({
                    message: '请在医生PC端查看详情'
                }).then(() => {
                }).catch((err) => {
                })

            } else {
                //随访详情
                this.$router.push({
                    path: '/doctor/followUp/detail',
                    query: {
                        relationUuid: record.relationUuid,
                        residentInfoId: this.residentInfoId,
                        diseaseType: this.diseaseType
                    }
                })
            }


       /* else if (record.source == 4) {
                // 判断是否显示公卫随访
                this.$router.push({
                    path: `/systemIframe/doctorGWDetail`,
                    query: {
                        src: `https://www.baidu.com/`,
                        pageTitle: `公卫详情`
                    }
                })
            }*/
        },
        editBtn(item) {
            if (item.serveType === 3 || item.serveType === 4) {
                this.$router.push({
                    path: '/doctor/followUp/separateFU/add',
                    query: {
                        residentInfoId: item.residentInfoId,
                        diseaseType: item.diseaseType,
                        serveType: item.serveType,
                        id: item.relationId
                    }
                })
            }
        },
        delBtn(record) {
            showConfirmDialog({
                message: '确定要删除吗？'
            }).then(() => {
                deleteVisitRecord({ id: record.id }).then(res => {
                    setTimeout(() => {
                        this.$message.info('删除成功')
                    }, 600)
                    this.list = this.list.filter(e => e.id !== record.id)
                })
            }).catch((err) => { console.warn('delBtn', err) })

        },

        toEvaluation(item) {
            this.showEvaluation = true
            this.relationId = item.relationId
        },
        cancelEvaluation() {
            this.showEvaluation = false
            this.evaluation = undefined
        },
        clickBtn(val) {
            this.evaluation = val
        },
        evaluationConfirm() {
            if (!this.evaluation) {
                showNotify({ type: 'warning', message: '请选择风险评估项！' });
                return
            }
            let params = {
                diseaseType: this.diseaseType,
                id: this.relationId,
                evaluationResults: this.evaluation,
                evaluationDate: dayjs().format('YYYY-MM-DD'),
                evaluationUnitId: this.authInfo.unitId,
                evaluationUnitName: this.authInfo.unitName,
                evaluationOfficeId: this.authInfo.officeId,
                evaluationOfficeName: this.authInfo.officeName,
                evaluationDoctorId: this.authInfo.relationId,
                evaluationDoctorName: this.authInfo.nickName
            }
            addEvaluationResults(params).then(res => {
                this.$message.success('操作成功')
                // this.showEvaluation = false
                this.cancelEvaluation()
                this.load()
            })
        }
    },
    watch: {
        diseaseType() {
            this.list = []
            this.load()
        },
        'store.refreshMark'() {
            this.onRefresh()
        }
    }
}
</script>

<style lang='less' scoped>
.pop-title {
    color: #262626;
    font-size: 16px;
    font-weight: 600;
}
.greyColor {
    color: var(--van-text-color-2);
    font-weight: 400;
}
.blueColor {
    color: #607FF0;
    font-weight: 500;
}
.radio-box {
    border: 1px solid transparent;
    background-color: #FAFAFA;
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 8px;
    display: flex;
    align-items: flex-start;
    color: #262626;
    line-height: 20px;
}
.radio-box.active {
    border: 1px solid var(--van-primary-color);
    background-color: #F0F6FF;
    color: var(--van-primary-color);
}
</style>