<template>
    <div class="disease-select">
        <div class="mb-4">请选择慢病类型</div>
        <div v-for="(item, index) in store.getDict('CP00117')" :key="index"
            :class="['flex justify-between items-center text-16 mb-3 disease-checked',
                { 'disease-checked-active': item.value == diseaseType },
                { 'disease-checked-disabled': excludeType.includes(item.value) }
            ]"
            @click="onSelect(item)">
            <span>{{ item.name }}</span>
            <span class="text-14 text-primary">
                <span v-if="excludeType.includes(item.value)">已确诊</span>
            </span>
        </div>
    </div>
</template>

<script>
import { useStore } from '@/doctor/store/index.js'

export default {
    props: {
        // 排除已选择的疾病
        excludeType: { default: () => [] }
    },
    data() {
        return {
            store: useStore(),
            // 选中的疾病类型
            diseaseType: null
        }
    },
    methods: {
        onSelect(item) {
            if (this.excludeType.includes(item.value)) return
            this.diseaseType = item.value
        },
        submit() {
            return new Promise((resolve, reject) => {
                if (!this.diseaseType) {
                    this.$message.info('请选择慢病类型')
                    reject('请选择慢病类型')
                    return
                }
                resolve(this.diseaseType)
            })
        }
    }
}
</script>

<style lang="less" scoped>
.disease-checked {
    border: 1px solid #BFBFBF;
    border-radius: 40px;
    color: #595959;
    background-color: #fff;
    padding: 10px 12px;
}
.disease-checked-active {
    color: var(--van-primary-color);
    border-color: var(--van-primary-color);
}
.disease-checked-disabled {
    border-color: #EFF2F7;
    background-color: #EFF2F7;
}
</style>