<template>
    <div class='disease-select'>
        <div class='label-title 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': isSelect(item)},
            ]"
             @click='onSelect(item)'>
            <span>{{ item.name }}</span>
        </div>
        <div class='warn-error' v-if='showWarn'>请选择</div>
    </div>
</template>

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

export default {
    props: {
        infoValue: String
    },
    data() {
        return {
            store: useStore(),
            // 选中的疾病类型
            innerValue: [],
            //显示校验
            showWarn: false
        }
    },
    watch: {
        infoValue: {
            handler(value) {
                if (value) {
                    this.innerValue = value.split(',')
                }
            },
            immediate: true
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
          if (!(this.innerValue && this.innerValue.length)) {
              this.innerValue = this.store.getDict('CP00117').map(e => e.value)
          }
        },
        // 是否选中
        isSelect(item) {
            return this.innerValue.includes(item.value)
        },
        onSelect(val) {
            if (this.innerValue.includes(val.value)) {
                this.innerValue = this.innerValue.filter(e => e !== val.value)
            } else {
                this.innerValue.push(val.value)
            }
            if (this.innerValue && this.innerValue.length) {
                this.showWarn = false
            } else {
                this.showWarn = true
            }

        },
        onSubmit() {
            return new Promise((resolve, reject) => {
                if (!(this.innerValue && this.innerValue.length)) {
                    this.showWarn = true
                    return
                }
                resolve(this.innerValue)
            })
        }
    }
}
</script>

<style lang='less' scoped>
.label-title {
    font-size: 14px;
    color: #262626;
    font-weight: 500;

    &::after {
        content: "*";
        color: red;
        font-weight: bold;
        margin-left: 4px;
    }
}

.no-req-label {
    font-size: 13px;
    color: #595959;
    font-weight: 500;
}

.disease-checked {
    border: 1px solid #BFBFBF;
    border-radius: 40px;
    color: #595959;
    background-color: #fff;
    padding: 10px 16px;
    line-height: 22.4px;
}

.disease-checked-active {
    color: var(--van-primary-color);
    border-color: var(--van-primary-color);
}

.disease-checked-disabled {
    border-color: #EFF2F7;
    background-color: #EFF2F7;
}

.warn-error {
    color: #FF4D4F;
}
</style>