<template>
    <div>
        <van-form ref='form'>
            <archive-common :info='info' ref='archive'></archive-common>
            <div class='flex justify-between items-center mt-5 mb-20'>
                <div class='title'>筛查信息</div>
                <div>
                    <van-button plain size='small' type='primary' @click='toLast'>引入上一次筛查数据</van-button>
                </div>
            </div>

            <div class='label-title mt-5'>筛查病种</div>
            <van-field
                v-model='form.diseaseArraysName'
                readonly
                is-link
                placeholder='请选择'
                class='input-back mt-2 form-input'
                :rules='rules.diseaseArraysName'
                @click='showGroupsArrays= true'
            >
                <template #input>
                    <span class='text-end' v-if='form.diseaseArraysName'>{{ form.diseaseArraysName }}</span>
                    <span class='text-end' v-if='!form.diseaseArraysName' style='color: #dfdfe1'>请选择</span>
                </template>
            </van-field>
            <van-popup v-model:show='showGroupsArrays' position='bottom'>
                <div class='p-4'>
                    <div class='flex justify-between items-center mb-4 pop-title'>
                        <div class='greyColor' @click='showGroupsArrays = false' style='font-weight: 400'>取消</div>
                        <div>筛查病种（可多选）</div>
                        <div class='blueColor' @click='groupsArraysConfirm'>确定</div>
                    </div>
                    <CheckBtn multiple
                              column-1
                              :options='groupArrList'
                              v-model:value='checkGroupsArrays'
                              :fieldNames="{text: 'name', value: 'value'}" />
                </div>
            </van-popup>
        </van-form>
    </div>
</template>

<script>
import ArchiveCommon from '@/doctor/components/archiveCommon/archiveCommon'
import { useStore } from '@/doctor/store'
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn'

export default {
    name: 'BaseInfo',
    props: {
        info: Object
    },
    components: { CheckBtn, ArchiveCommon },
    data() {
        return {
            store: useStore(),
            form: {
                diseaseArrays: [],
                diseaseArraysName: undefined
            },
            rules: {
                diseaseArraysName: [{ required: true, message: '请选择' }]
            },
            showGroupsArrays: false,
            //筛查病种组件双向绑定变量
            checkGroupsArrays: []
        }
    },
    computed: {
        //筛查病种
        groupArrList() {
            let res = []
            res = this.store.getDict('CP00117')
            return res
        }
    },
    watch: {
        'info': {
            handler() {
                this.init()
            },
            immediate: true
        }
    },
    methods: {
        init() {
            if (!this.info.id) {
                //是否是引用上一次复筛数据
                if (this.info.flag && this.info.flag == 'lastInfo') {
                    this.setDis(this.info.diseaseArrays)
                } else {//新增时
                    this.setDis([1,2,3,4,5,6,7])
                }
            } else {
                this.setDis(this.info.diseaseArrays)
            }
        },
        setDis(diseaseArrays) {
            if (diseaseArrays) {
                this.form.diseaseArrays = diseaseArrays
                this.checkGroupsArrays = this.form.diseaseArrays
                let res = []
                this.groupArrList.forEach(item => {
                    let list = this.form.diseaseArrays.filter(i => i == item.value)
                    if (list && list.length) {
                        res.push(item.name)
                    }
                })
                this.form.diseaseArraysName = res.join()
            }
        },
        groupsArraysConfirm() {
            let res = []
            this.groupArrList.forEach(item => {
                let selected = this.checkGroupsArrays.filter(i => i == item.value)
                if (selected && selected.length) {
                    res.push(item.name)
                }
            })
            if (this.checkGroupsArrays && this.checkGroupsArrays.length) {
                this.form.diseaseArrays = this.checkGroupsArrays
                this.form.diseaseArraysName = res.join()
            } else {
                this.form.diseaseArrays = []
                this.form.diseaseArraysName = ''
            }
            this.showGroupsArrays = false
        },
        toLast() {
          this.$emit('getLast', true)
        },
        async onSubmit() {
            let baseInfo = {}
            try {
                 baseInfo = await this.$refs.archive.onSubmit()
            } catch (e) {
            }
            return new Promise((resolve, reject) => {
                this.$refs.form.validate().then(() => {
                    let par = {
                        residentsRecord: {
                            // ...this.info,
                            ...baseInfo,
                            id: this.info.personId
                        },
                        diseaseArrays: this.form.diseaseArrays
                    }
                    resolve(par)
                }).catch((e) => {
                    console.warn('baseInfo error', e)
                })
            })
        }
    }
}
</script>

<style scoped lang='less'>
.title {
    font-weight: bold;
}
.mb-20 {
    margin-bottom: 20px;
}

.label-title {
    font-size: 13px;
    color: #595959;
    font-weight: 500;

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

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

.form-input {
    padding: 8px 12px;
    border-radius: 8px;
}

.input-back {
    background: #FAFAFA;
}

.pop-title {
    color: #262626;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
}

:deep(.van-popup) {
    min-height: 30% !important;
}
:deep(.van-cell-group--inset) {
    overflow: visible;
}

:deep(.van-cell) {
    overflow: visible;
}

:deep(.van-cell:after) {
    border-bottom: 0px;
}
</style>