<template>
    <div class="p-4 form-result">
        <div v-for="item in list" :key="item.key" class="p-3 mb-4 list-item">
            <div class="mb-2">
                <span class="mr-2 font-semibold">{{ item.title }}</span>
                <span v-if="item.status == 1" class="tag-red">高风险</span>
                <span v-else class="tag-green">无高风险</span>
            </div>
            <div style="color: #8C8C8C;" class="mb-2">{{ item.date }}</div>
            <div class="mb-2 flex items-center tip" v-if="item.status == 1">
                <doc-icon type="doc-exclamation-circle" class="text-16"/>
                <span class="ml-2">建议到 {{ item.unitName }} 进行检查</span>
            </div>
            <div style="line-height: 1.5" v-if="item.status == 1">
                备注：{{ item.remark }}
            </div>
        </div>
    </div>
</template>

<script>
import { getDictValue } from '@/tumour/utils/dictionaries.js'
import { getQuestion } from '@/tumour//screening/simple/config.js'
import dayjs from 'dayjs'

export default {
    props: {
        info: { default: () => ({}) }
    },
    data() {
        return {
            list: []
        }
    },
    created() {
        const { species = [], details = {}, unitName = '本单位' } = this.info
        // console.log(species, details, unitName)
        species.forEach(e => {
            const q = getQuestion(e)
            this.list.push({
                key: e,
                title: getDictValue('DC00032', e) + '筛查结果',
                status: details[e].highRisk,
                remark: q.remark,
                date: dayjs().format('YYYY.MM.DD'),
                unitName
            })
        })
    }
}
</script>

<style lang="less" scoped>
.list-item {
    border: 1px solid #F0F0F0;
}
.font-12 {
    font-size: 12px;
}
.tip {
    background-color: #F8FAFC;
    color: #768092;
    padding: 4px 12px;
}
.tag-red {
    color: #F5222D;
    background-color: #FFF1F0;
    padding: 4px 6px;
    border-radius: 2px;
}
.tag-green {
    color: #52C41A;
    background-color: #D9F7BE;
    padding: 4px 6px;
    border-radius: 2px;
}
</style>