<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()' accept="image/*">
                        <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(imgList,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(imgList2 ,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>

                <!--                图片预览-->
                <van-overlay :show='imgShow' @click='imgShow = false'>
                    <div class='wrapper'>
                    <van-swipe  class='block' :initial-swipe='initSwipe'>
                        <van-swipe-item v-for='image in showImgList' :key='image'>
                            <img :src='image' style='width: 100%;height: 100%'/>
                        </van-swipe-item>
                    </van-swipe>
                    </div>
                </van-overlay>

                <div v-if='firstForm.visitSituation == 1'>
                    <div class='label-title mt-5'>下次随访日期</div>
                    <van-field
                        v-model='form.nextVisitDate'
                        is-link
                        readonly
                        name='nextVisitDate'
                        placeholder='下次随访日期'
                        class='input-back mt-2 form-input'
                        :rules='rules.nextVisitDate'
                        @click='showDate = true' />
                    <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: [],
            //input图片值
            imgInputList1: [],
            imgInputList2: [],
            showDate: false,
            imgShow: false,
            showImgList: [],
            initSwipe: 0,
            rules: {
                nextVisitDate: [{ required: true, message: '请选择' }]
            }
        }
    },
    watch: {
        'info': {
            handler() {
                this.form = this.setForm(this.info)
                if (this.info.id) {
                    this.imgList = this.imgListInfo1
                    this.imgList2 = this.imgListInfo2
                }
            },
            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
        },
        imgListInfo1() {
            const { uploadVisitRecordImageList = [] } = this.info
            uploadVisitRecordImageList.forEach((item, index) => {
                item['imgFlag'] = ''
                item['indexF'] = index + 1
                if (item.fileType == 'pdf') {
                    item['imgFlag'] = 'pdf'
                }
                if (item.fileType == 'img') {
                    item['imgFlag'] = 'img'
                }
            })
            return uploadVisitRecordImageList
        },
        imgListInfo2() {
            const { sceneVisitImageList = [] } = this.info
            sceneVisitImageList.forEach((item, index) => {
                item['imgFlag'] = ''
                item['indexF'] = index + 1
                if (item.fileType == 'pdf') {
                    item['imgFlag'] = 'pdf'
                }
                if (item.fileType == 'img') {
                    item['imgFlag'] = 'img'
                }
            })
            return sceneVisitImageList
        }
    },
    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 = this.imgList.length ? Math.max(...this.imgList.map(item => item.indexF)) : 0
            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.type == 'image/gif' || item.type == 'image/webp') {
                    item['imgFlag'] = 'img'
                }
            })
            this.imgList = this.imgList.concat(newFile)
            this.imgInputList1 = this.imgInputList1.concat(newFile)
        },
        choiceImg2() {
            let input = document.getElementById('imgId2')
            let file = input.files
            let newFile = Array.from(file)
            let maxIndexF = this.imgList2.length ? Math.max(...this.imgList2.map(item => item.indexF)) : 0
            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.type == 'image/gif' || item.type == 'image/webp') {
                    item['imgFlag'] = 'img'
                }
            })
            this.imgList2 = this.imgList2.concat(newFile)
            console.log(this.imgList2)
            this.imgInputList2 = this.imgInputList2.concat(newFile)
        },
        //图片预览
        toPreview(list = [], index) {
            let res = []
            this.showImgList = []
            list.forEach(item => {
                res.push(item.trueDownloadUrl)
            })
            this.showImgList = res
            this.initSwipe = index
            this.imgShow = true
        },
        //pdf预览
        toPdf(item) {
            // window.open(item.trueDownloadUrl)
        },
        delImg(index) {
            this.imgList = this.imgList.filter(item => item.indexF != index)
            this.imgInputList1 = this.imgInputList1.filter(item => item.indexF != index)
        },
        delImg2(index) {
            this.imgList2 = this.imgList2.filter(item => item.indexF != index)
            this.imgInputList2 = this.imgInputList2.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 || [],
                        imgInput1: this.imgInputList1,
                        imgInput2: this.imgInputList2,
                        ...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;
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .block {
        width: 100%;
        height: 300px;
    }
}

: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>