<template>
    <div class="disease-list" ref="list">
        <van-pull-refresh v-model='loadingRefresh' @refresh='onRefresh'
            :disabled='isRefreshDisable'>
            <div v-for="item in diagnoseRecord" :key="item.id"
                class="card-back-1 mb-3">
                <div class="title px-4 py-1">诊断列表</div>
                <div class="py-3 px-4 doc-list-card">
                    <div class="flex flex-col" style="row-gap: .04rem;line-height: 1.5;"
                        @click="toDetail(item)">
                        <div class="flex">
                            <span class="label shrink-0">诊断名称</span>
                            <span class="grow text-wrap">{{ item.diseaseName }}({{item.icdCode}})</span>
                        </div>
                        <div class="flex">
                            <span class="label shrink-0">诊断评估</span>
                            <span class="grow" >{{ item.diagnoseResultValue || '-' }}</span>
                        </div>
                        <div class="flex">
                            <span class="label shrink-0">诊断单位</span>
                            <span class="grow text-wrap">{{ item.diseaseUnitName }}</span>
                        </div>
                        <div class="flex">
                            <span class="label shrink-0">诊断科室</span>
                            <span class="grow text-wrap">{{ item.diseaseOfficeName }}</span>
                        </div>
                        <div>
                            <span class="label">诊断医生</span>
                            <span>{{ item.diseaseDoctorName }}</span>
                        </div>
                        <div>
                            <span class="label">数据来源</span>
                            <span>{{ item.sourceName || '-' }}</span>
                        </div>
                        <div>
                            <span class="label">诊断日期</span>
                            <span>{{ item.diseaseDate }}</span>
                        </div>
                        <div>
                            <span class="label">纳入管理日期</span>
                            <span>{{ item.manageDate }}</span>
                        </div>
                    </div>
                    <div class="divider my-3"></div>
                    <div class="bt-group">
                        <van-button round size="small" class="doc-btn-primary" @click="toDetail(item)">详情</van-button>
                        <van-button round size="small" class="doc-btn-primary" @click='editBtn(item)'
                            v-if="item.allowUpdate == 1">修改</van-button>
                        <van-button round size="small" class="doc-btn-red" @click="delBtn(item)"
                            v-if="item.allowDelete ==1">删除</van-button>
                    </div>
                </div>
            </div>
            <div v-for="item in treatmentRecord" :key="item.id"
                class="card-back-2 mb-3">
                <div class="title px-4 py-1">治疗方案</div>
                <div class="flex flex-col py-3 px-4 doc-list-card" style="row-gap: .04rem;line-height: 1.5;">
                    <div class="text-ellipsis">
                        <span class="label">慢病标签</span>
                        <span>{{ item.diseaseTypeName }}</span>
                    </div>
                    <div class="text-ellipsis">
                        <span class="label">治疗方式</span>
                        <span>{{ item.therapyMethodName || '-' }}</span>
                    </div>
                    <div class="text-ellipsis">
                        <span class="label">创建单位</span>
                        <span>{{ item.createUnitName }}</span>
                    </div>
                    <div>
                        <span class="label">创建科室</span>
                        <span>{{ item.createOfficeName }}</span>
                    </div>
                    <div>
                        <span class="label">创建医生</span>
                        <span>{{ item.createDoctorName }}</span>
                    </div>
                    <!-- <div class="divider"></div>
                    <div class="bt-group">
                        <van-button round size="small" class="doc-btn-primary" @click="toDetail(item)">详情</van-button>
                        <van-button round size="small" class="doc-btn-primary" @click='editBtn(item)'
                            v-if="item.allowUpdate == 1">修改</van-button>
                        <van-button round size="small" class="doc-btn-red" @click="delBtn(item)"
                            v-if="item.allowDelete ==1">删除</van-button>
                    </div> -->
                </div>
            </div>
            <div v-for="item in followUpRecord" :key="item.id"
                class="card-back-3 mb-3">
                <div class="title px-4 py-1">随访方案</div>
                <div class="flex flex-col py-3 px-4 doc-list-card" style="row-gap: .04rem;line-height: 1.5;">
                    <div class="text-ellipsis">
                        <span class="label">随访方案</span>
                        <span>
                            <span v-if="item.visitScheme">{{item.visitSchemeOther}}</span>
                            <span>{{item.visitSchemeName}}</span>
                        </span>
                    </div>
                    <div class="text-ellipsis">
                        <span class="label">预计随访地点</span>
                        <span>{{ item.visitPlace || '-' }}</span>
                    </div>
                    <div class="text-ellipsis">
                        <span class="label">创建单位</span>
                        <span>{{ item.createUnitName }}</span>
                    </div>
                    <div class="text-ellipsis">
                        <span class="label">创建科室</span>
                        <span>{{ item.createOfficeName }}</span>
                    </div>
                    <div>
                        <span class="label">创建医生</span>
                        <span>{{ item.createDoctorName }}</span>
                    </div>
                    <div>
                        <span class="label">下次随访日期</span>
                        <span>{{ item.nextVisitDate ? item.nextVisitDate.split(' ')[0] : '-' }}</span>
                    </div>
                    <!-- <div class="divider"></div>
                    <div class="bt-group">
                        <van-button round size="small" class="doc-btn-primary" @click="toDetail(item)">详情</van-button>
                        <van-button round size="small" class="doc-btn-primary" @click='editBtn(item)'
                            v-if="item.allowUpdate == 1">修改</van-button>
                        <van-button round size="small" class="doc-btn-red" @click="delBtn(item)"
                            v-if="item.allowDelete ==1">删除</van-button>
                    </div> -->
                </div>
            </div>
        </van-pull-refresh>
        <div class='text-center shrink-0 empty'
            v-if='!diagnoseRecord.length && !treatmentRecord.length && !followUpRecord.length'>
            <img src='@/assets/image/doctor/empty.png' alt='' style='width: 1.2rem;'>
            <p>暂无数据</p>
        </div>
    </div>
</template>

<script>
import { fetchDiseaseTypeList, delDiagnose } from '@/api/doctor/disease.js'
import { useStore } from '@/doctor/store'
import { showConfirmDialog } from 'vant'

export default {
    inject: ['residentInfo'],
    props: {
        diseaseType: Number
    },
    data() {
        return {
            store: useStore(),
            loadingRefresh: false,
            isRefreshDisable: false,
            diagnoseRecord: [],
            treatmentRecord: [],
            followUpRecord: []
        }
    },
    computed: {
        residentInfoId() {
            return this.residentInfo().residentInfoId
        }
    },
    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 = {
                residentInfoId: this.residentInfoId,
                diseaseType: this.diseaseType
            }
            fetchDiseaseTypeList(query, loading).then(res => {
                const result = res.data || {}
                this.diagnoseRecord = result.chronicDiagnoseList || []
                this.treatmentRecord = result.chronicTreatmentRecordList || []
                this.followUpRecord = result.chronicVisitSchemeRecordList || []
            }).finally(() => {
                this.loadingRefresh = false
            })
        },
        onRefresh() {
            this.load(false)
        },
        toDetail(record) {
            this.$router.push({
                path: '/doctor/diagnose/detail',
                query: {
                    residentInfoId: this.residentInfoId,
                    diseaseType: this.diseaseType,
                    id: record.id
                }
            })
        },
        editBtn(record) {
            this.$router.push({
                path: '/doctor/diagnose/form',
                query: {
                    residentInfoId: this.residentInfoId,
                    diseaseType: this.diseaseType,
                    id: record.id
                }
            })
        },
        delBtn(record) {
            showConfirmDialog({
                message: '确定要删除吗？'
            }).then(() => {
                delDiagnose({ id: record.id }).then(res => {
                    setTimeout(() => {
                        this.$message.info('删除成功')
                    }, 600)
                    this.diagnoseRecord = this.diagnoseRecord.filter(e => e.id !== record.id)
                    if (!this.diagnoseRecord.length) {
                        this.store.onRefreshMark()
                    }
                })
            }).catch((err) => { console.warn('delDiagnoseBtn', err) })
        }
    },
    watch: {
        diseaseType() {
            this.load()
        },
        'store.refreshMark'() {
            this.onRefresh()
        }
    }
}
</script>

<style lang="less" scoped>

</style>