<template>
    <div class="saveInfo">
        <ul class="ulBody">
            <li class="bodyLi">
                <div class="bodyLiTit">安全知识类型：</div>
                <input type="text" placeholder="自动带出" v-model="dictLabel.label" readonly>
            </li>
            <li class="bodyLi">
                <div class="bodyLiTit">归属年度：</div>
                <input
                    type="text"
                    placeholder=""
                    readonly
                    v-model="info.attributiveYear"
                />
            </li>
            <li class="bodyLi">
                <div class="bodyLiTit">标题：</div>
                <input
                    type="text"
                    placeholder="自动带出"
                    readonly
                    v-model="info.title"
                />
            </li>
            <li class="bodyLi lastLi">
                <div class="bodyLiTit">简介：</div>
            </li>
            <li class="textAreaLi">
                <textarea
                    type="text"
                    placeholder=""
                    class="textarea"
                    rows="5"
                    maxlength="2000"
                    readonly
                    v-model="info.info"
                />
            </li>
            <li class="bodyLi lastLi">
                <div class="bodyLiTit">附件：</div>
            </li>
            <li class="textAreaLi lastLi" style="margin-top: 4vw">
                <van-uploader v-model="fileList" :show-upload="false" :deletable="false"/>
                <br/>
                <div class="fj" v-for="(item,index) in upload" :key="index" @click="downLoad(item)">{{item.name}}</div>
            </li>
        </ul>
    </div>
</template>

<script>
import { findSafetyKnowledgeAppInOutBySafetyKnowledgeCompanyId } from '@/service/api_savety'
import auth from '@/service/auth'
import { getByCodes } from '@/service/api_settle_out'
import constant from '@/common/js/constant'
export default {
    name: 'SaveInfo',
    data() {
        return {
            info: {},
            dictValue: [],
            dictLabel: {},
            upload: [],
            fileList: []
        }
    },
    mounted() {
        this.getTabTit()
    },
    methods: {
        getTabTit() {
            getByCodes({ codes: JSON.stringify(['knowledge_type']) }).then(res => {
                // console.log(JSON.parse(res.knowledge_type.dictValue))
                this.dictValue.push(...JSON.parse(res.knowledge_type.dictValue))
                this.getInfo()
            })
        },
        getInfo() {
            const Info = JSON.parse(this.$route.query.info)
            findSafetyKnowledgeAppInOutBySafetyKnowledgeCompanyId({ safetyKnowledgeCompanyId: Info.safetyKnowledgeCompanyId, readerId: auth.currUser().id }).then(res => {
                this.info = res
                const uploadAdd = JSON.parse(res.uploadAddress)
                if (uploadAdd && uploadAdd.length > 0) {
                    uploadAdd.forEach(item => {
                        if (item.name.indexOf('png') > -1 || item.name.indexOf('jpg') > -1 || item.name.indexOf('jpeg') > -1) {
                            this.fileList.push({
                                url: item.url,
                                isImage: true
                            })
                        } else {
                            this.upload.push(item)
                        }
                    })
                }
                console.log('upload', this.upload)
                console.log('value', this.dictValue)
                this.dictLabel = this.dictValue.find(e => {
                    return e.value == res.knowledgeType
                })
            })
        },
        downLoad(item) {
            window.location.href = constant.BASE_URI + '/FileController/download/' + item.data
        }
    }
}
</script>
<style lang="scss">
.saveInfo{
    .ulBody{
        background: white;
        padding: 2vw 3vw 5vw 3vw;
        border-radius: 10px;
        margin: 5vw 3vw;
        .bodyLi{
            display: flex;
            align-items: center;
            border-bottom: 3px solid #CCCCCC;
            padding: 5vw 0;
            width: 100%;
            font-size: 3.8vw;
            .bodyLiTit{
                width: 42vw;
                white-space: nowrap;
            }

        }
        .textAreaLi{
            border-bottom: 3px solid #CCCCCC;
            padding: 0 0 5vw 0;
            .textarea{
                background: #F9F9F9;
                width: 100%;
                resize: none;
                padding: 2vw;
                box-sizing: border-box;
            }
        }
        .lastLi{
            border-bottom: none !important;
            padding-bottom: 2vw;
        }
        .fj{
            color: rgba(29, 24, 188, 1);
            border-bottom: 1px solid rgba(29, 24, 188, 1);
            display: inline-block;
        }
    }
}
</style>
