<template>
    <div>
        <van-form ref='form'>
            <div class='title'>随访信息</div>
            <van-cell-group inset>
                <div v-if="showOne && firstForm.visitSituation == 1">
                <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>
                <div v-if="showOne && firstForm.visitSituation == 1">
                <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>
                <div v-if='(showOne || showTwo) && firstForm.visitSituation == 1 && firstForm.isHealthGuide == 1'>
                <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>

                <div v-if="showOne && firstForm.visitSituation == 1">
                <div class='no-req-label mt-5'>上传随访记录</div>
                <div class='tips'>
                    支持上传jpg、png、jpeg文件,大小请在10M以内
                </div>
                <div class='img-btn mt-2' @click="toUpload('imgId')">
                    <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.trueDownloadUrl' 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>

                <div v-if="showOne && firstForm.visitSituation == 1">
                    <div class='no-req-label mt-5'>现场随访照片</div>
                    <div class='tips'>
                        支持上传jpg、png、jpeg文件,大小请在10M以内
                    </div>
                    <div class='img-btn mt-2' @click="toUpload('imgId2')">
                        <input type='file' id='imgId2' multiple @change='choiceImg2' style='display: none' :key='new Date().getTime()-10000'>
                        <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 imgList2'>
                            <!--                     图片-->
                            <div v-if="item.imgFlag == 'img'" class='mt-2' style='position: relative'>
                                <div>
                                    <doc-icon type='doc-remove' class='remove' @click='delImg2(item.indexF)'></doc-icon>
                                </div>
                                <img :src='item.trueDownloadUrl' class='ml-2' style='width: 95px;height: 95px;'
                                     @click='toPreview(index)'>
                            </div>
                        </div>
                    </div>
                    <!--                pdf-->
                    <div>
                        <div v-for='item in imgList2'>
                            <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='delImg2(item.indexF)'></doc-icon></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-if="firstForm.visitSituation == 1">
                <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>
                </div>
            </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'
import { fetchDataHandle } from '@/utils/common'

export default {
    name: 'GeneralFUForm',
    components: { DocIcon },
    props: {
        info: {
            default: () => {
                return {}
            }
        },
        firstForm: {
            default: () => {
                return {}
            }
        },
    },
    data() {
        return {
            store: useStore(),
            form: {},
            imgList: [],
            imgList2: [],
            showDate: false,
            rules: {
                nextVisitDate: [{required: true,message: '请选择'}]
            }
        }
    },
    watch: {
        'info': {
            handler() {
                this.form = this.setForm(this.info)
                if (this.info.id) {
                    this.imgList = this.info.uploadVisitRecordImageList || []
                    this.imgList2 = this.info.sceneVisitImageList || []
                }
            },
            immediate: true
        },
    },
    computed: {
        //复检指导
        showOne() {
            const {visitWay} = this.firstForm
            let res = false
            if (visitWay == 5 || visitWay == 6 || visitWay == 7 || visitWay == 8) {
                res = true
            }
            return res
        },
        //微信、短信指导
        showTwo() {
            const {visitWay} = this.firstForm
            let res = false
            if (visitWay == 9 || visitWay == 11) {
                res = true
            }
            return res
        },
        //催检
        showThree() {
            const {visitWay} = this.firstForm
            let res = false
            if (visitWay == 10 || visitWay == 12) {
                res = true
            }
            return res
        }
    },
    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(id) {
            let input = document.getElementById(id)
            input.click()
        },
        choiceImg() {
            let input = document.getElementById('imgId')
            let file = input.files
            let newFile = Array.from(file)
            let maxIndexF =  Math.max(...this.imgList.map(item => item.indexF));
            newFile.forEach((item, index) => {
                item['indexF'] = maxIndexF+ index + 1
                item['trueDownloadUrl'] = 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)
        },
        choiceImg2() {
            let input = document.getElementById('imgId2')
            let file = input.files
            let newFile = Array.from(file)
            let maxIndexF =  Math.max(...this.imgList2.map(item => item.indexF));
            newFile.forEach((item, index) => {
                item['indexF'] = maxIndexF+ index + 1
                item['trueDownloadUrl'] = 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.imgList2 = this.imgList2.concat(newFile)
        },
        //图片预览
        toPreview(index) {
            // let list = []
            // this.imgList.forEach(item => {
            //     list.push(item.trueDownloadUrl)
            // })
            // showImagePreview({
            //     images: list,
            //     className: 'custom-image-preview',
            //     startPosition: index,
            //     loop: false
            // })
        },
        //pdf预览
        toPdf(item) {
            // window.open(item.trueDownloadUrl)
        },
        delImg(index) {
            this.imgList = this.imgList.filter(item => item.indexF != index)
        },
        delImg2(index) {
            this.imgList2 = this.imgList2.filter(item => item.indexF != index)
        },
        dataConfirm({ selectedValues }) {
            this.form.nextVisitDate = selectedValues.join('-')
            this.showDate = false
        },
        onSubmit() {
            return new Promise((resolve, reject) => {
                this.$refs.form.validate().then(() => {
                    let par = {
                        img1: this.imgList || [],
                        img2: this.imgList2 || [],
                       ...this.form,
                        healthGuideContent: JSON.stringify(this.form.visitHealthGuideList)
                    }
                    resolve(par)
                }).catch((e) => {
                    console.warn('ArchiveCommon error', e)
                    // reject(e)
                })
            })
        }
    }
}
</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>