<template>
    <div>
        <van-form ref='form'>
            <div class='title'>随访信息</div>
            <van-cell-group inset>
                <div class='no-req-label'>随访内容</div>
                <van-field
                    v-model='form.visitContent'
                    placeholder='随访内容'
                    class='input-back mt-2 form-input'
                    rows='2'
                    autosize
                    type='textarea'
                />
                <div class='no-req-label mt-5'>处置意见</div>
                <van-field
                    v-model='form.idCard'
                    rows='2'
                    autosize
                    type='textarea'
                    placeholder='处置意见'
                    class='input-back mt-2 form-input'
                />
                <div class='no-req-label mt-5'>健康指导</div>
                <div class='health mt-2'>
                    <div class='health-cell mt-2' v-for='item in form.visitHealthGuideList'>
                        <div class='no-req-label' v-if="item.name != '无'">{{ item.name }}</div>
                        <van-field
                            v-model='item.templateContent'
                            rows='1'
                            autosize
                            type='textarea'
                            placeholder='请输入'
                            class='input-back mt-2 form-input'
                        />
                    </div>
                </div>

                <div class='no-req-label mt-5'>上传随访记录</div>
                <div class='tips'>
                    支持上传jpg、png、jpeg文件,大小请在10M以内
                </div>
                <div class='img-btn mt-2' @click='toUpload'>
                    <input type='file' id='imgId' multiple @change='choiceImg' style='display: none' :key='new Date().getTime()'>
                    <div class='flex items-center justify-center'>
                        <div>
                            <doc-icon type='doc-upload' class='doc-up' />
                        </div>
                        <div class='ml-2'>上传图片</div>
                    </div>
                </div>

                <div class='flex items-center' style='flex-wrap: wrap'>
                    <div v-for='(item, index) in imgList'>
                        <!--                     图片-->
                        <div v-if="item.imgFlag == 'img'" class='mt-2' style='position: relative'>
                            <div>
                                <doc-icon type='doc-remove' class='remove' @click='delImg(item.indexF)'></doc-icon>
                            </div>
                            <img :src='item.src' class='ml-2' style='width: 95px;height: 95px;'
                                 @click='toPreview(index)'>
                        </div>
                    </div>
                </div>
                <!--                pdf-->
                <div>
                    <div v-for='item in imgList'>
                        <div class='mt-2 pdf' v-if="item.imgFlag == 'pdf'">
                            <div class='flex items-center justify-between'>
                                <div class='flex items-center' @click.stop='toPdf(item)'>
                                    <div>
                                        <doc-icon type='doc-PDF' style='font-size: .48rem'></doc-icon>
                                    </div>
                                    <div class='ml-1'>{{ item.name }}</div>
                                </div>
                                <div>
                                    <span><doc-icon type='doc-remove' style='font-size: .24rem'
                                                    @click='delImg(item.indexF)'></doc-icon></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class='label-title mt-5'>下次随访日期</div>
                <van-field
                    v-model='form.nextVisitDate'
                    is-link
                    disabled
                    placeholder='下次随访日期'
                    class='input-back mt-2 form-input'
                    @click="showDate = true"
                    :rules='rules.nextVisitDate'
                />
                <van-popup v-model:show="showDate" position="bottom">
                    <van-date-picker @confirm="dataConfirm" @cancel="showDate = false" />
                </van-popup>

            </van-cell-group>
        </van-form>
    </div>
</template>

<script>
import { useStore } from '@/resident/store'
import dayjs from 'dayjs'
import DocIcon from '@/components/docIcon/DocIcon'
import { showImagePreview } from 'vant'

export default {
    name: 'GeneralFUForm',
    components: { DocIcon },
    props: {
        info: {
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            store: useStore(),
            authInfo: {},
            form: {},
            imgList: [],
            showDate: false,
            rules: {
                nextVisitDate: [{required: true,message: '请选择'}]
            }
        }
    },
    watch: {
        'info': {
            handler() {
                this.form = this.setForm(this.info)
            },
            immediate: true
        }
    },
    methods: {
        setForm(info = {}) {
            const modeArray = this.store.getDict('DC00084')
            let visitHealthGuideList = []
            if (info.healthGuideContent) {
                visitHealthGuideList = JSON.parse(info.healthGuideContent)
            }
            const form = {
                id: info.id,
                diseaseType: info.diseaseType,
                visitDate: info.visitDate || new dayjs(),
                nextVisitDate: info.nextVisitDate,
                isSms: info.isSms,
                isWx: info.isWx,
                visitContent: info.visitContent,
                disposalOpinion: info.disposalOpinion,
                uploadVisitRecord: info.uploadVisitRecord,
                sceneVisitImage: info.sceneVisitImage,
                sendInfo: info.sendInfo,
                visitHealthGuideList: modeArray.map(e => {
                    const item = visitHealthGuideList.find(i => i.templateMode === e.value)
                    return {
                        templateMode: e.value,
                        name: e.name,
                        templateContent: item ? item.templateContent : '',
                        id: item ? item.visitId : ''
                    }
                })

            }
            return form
        },
        setTemForm(info) {
            const modeArray = this.store.getDict('DC00084')
            const visitHealthGuideList = info.contentList || []
            const form = {
                visitHealthGuideList: modeArray.map(e => {
                    const item = visitHealthGuideList.find(i => i.templateMode === e.value)
                    return {
                        templateMode: e.value,
                        name: e.name,
                        templateContent: item ? item.templateContent : '',
                        id: item ? item.visitId : ''
                    }
                })
            }
            return form.visitHealthGuideList
        },
        toUpload() {
            let input = document.getElementById('imgId')
            input.click()
        },
        choiceImg() {
            let input = document.getElementById('imgId')
            let file = input.files
            let newFile = Array.from(file)
            newFile.forEach((item, index) => {
                item['indexF'] = index + 1
                item['src'] = window.URL.createObjectURL(item)
                item['imgFlag'] = ''
                if (item.type == 'application/pdf') {
                    item['imgFlag'] = 'pdf'
                }
                if (item.type == 'image/jpeg' || item.type == 'image/png') {
                    item['imgFlag'] = 'img'
                }
            })
            this.imgList = this.imgList.concat(newFile)
        },
        toPreview(index) {
            let list = []
            this.imgList.forEach(item => {
                list.push(item.src)
            })
            showImagePreview({
                images: list,
                className: 'custom-image-preview',
                startPosition: index,
                loop: false
            })

        },
        toPdf(item) {
            window.open(item.src)
        },
        delImg(index) {
            this.imgList = this.imgList.filter(item => item.indexF != index)
        },
        dataConfirm({ selectedValues }) {
            this.form.nextVisitDate = selectedValues.join('-')
            this.showDate = false
        },

    }
}
</script>

<style scoped lang='less'>
.title {
    font-weight: bold;
    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;
}

.tel-back {
    background: #F5F5F5;
    padding: 8px;
    border-radius: 0px 0px 8px 8px;
}

.tel {
    background: #FFFFFF;
    padding: 8px;
    border-radius: 8px;
}

.tel-label {
    color: #607FF0;
    font-weight: bold;
}

.p-12-0 {
    padding: 12px 0px;
}

.health {
    padding: 1px 8px 8px 8px;
    background: #FAFAFA;
    border-radius: 8px;

    .health-cell {
        padding: 8px;
        background: #FFFFFF;
        border-radius: 8px;
    }
}

.tips {
    color: #A5AEBE;
    font-size: 12px;
    margin-top: 8px;
}

.img-btn {
    border: 1px solid #EEEEEE;
    background: #FAFAFA;
    border-radius: 8px;
    padding: 14px 46px;
    text-align: center;
    color: #607FF0;
}

.doc-up {
    font-size: 20px;
}

.pdf {
    border: 1px solid #EEEEEE;
    border-radius: 8px;
    padding: 8px;
}

.remove {
    font-size: 24px;
    position: absolute;
    right: -8px;
    top: -9px;
    z-index: 1;
}


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

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

:deep(.van-field__error-message) {
    position: absolute;
}

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


</style>

<style lang='less'>
.custom-image-preview .van-image-preview__container .van-image-preview__item:not(:first-child):not(last-child) {
    display: block !important;
}

.van-image__img {
    width: 100%;
}

.van-swipe__track {
    width: 100%!important;
}
.van-swipe-item {
    width: 100%!important;
}
</style>